fix font colors

fern-api · Jan 19, 2024 · cbdbe56 · cbdbe56
1 parent 8b42020
commit cbdbe56
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git a/packages/ui/app/src/commons/AbsolutelyPositionedAnchor.tsx b/packages/ui/app/src/commons/AbsolutelyPositionedAnchor.tsx
@@ -42,18 +42,14 @@ export const AbsolutelyPositionedAnchor: React.FC<AbsolutelyPositionedAnchor.Pro
                 href={href}
                 shallow={true}
                 replace={true}
-                className={classNames(
-                    "flex items-center border-0 relative h-6 group-hover/anchor-container:bg-background group-hover/anchor-container:dark:bg-background rounded-md",
-                    {
-                        "-ml-10": !smallGap,
-                        "-ml-8": smallGap,
-                        "bg-background dark:bg-background": wasJustCopied,
-                    }
-                )}
+                className={classNames("flex items-center border-0 relative h-6 rounded-md", {
+                    "-ml-10": !smallGap,
+                    "-ml-8": smallGap,
+                })}
                 onClick={copyToClipboard}
             >
                 {!wasJustCopied && (
-                    <span className="zinc-box absolute left-0 flex h-6 w-6 items-center justify-center rounded-md bg-white text-gray-400 opacity-0 ring-1 ring-gray-400/30 hover:ring-gray-400/60 group-hover/anchor-container:opacity-100 dark:bg-white/5 dark:ring-gray-700/25 dark:hover:ring-white/20">
+                    <span className="zinc-box absolute left-0 flex h-6 w-6 items-center justify-center rounded-md bg-white text-gray-400 opacity-0 ring-1 ring-gray-400/30 backdrop-blur hover:ring-gray-400/60 group-hover/anchor-container:opacity-100 dark:bg-white/5 dark:ring-gray-700/25 dark:hover:ring-white/20">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="gray" height="12px" viewBox="0 0 576 512">
                             <path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path>
                         </svg>
@@ -66,7 +62,7 @@ export const AbsolutelyPositionedAnchor: React.FC<AbsolutelyPositionedAnchor.Pro
                     leaveTo="opacity-0 -translate-x-2"
                     as={Fragment}
                 >
-                    <div className="bg-tag-primary dark:bg-tag-primary-dark ring-accent-primary/60 dark:ring-accent-primary/60 absolute left-0 flex h-6 w-6 items-center justify-center rounded-md ring-1">
+                    <div className="bg-tag-primary dark:bg-tag-primary-dark ring-accent-primary/60 dark:ring-accent-primary/60 absolute left-0 flex h-6 w-6 items-center justify-center rounded-md ring-1 backdrop-blur">
                         <CheckIcon className="text-accent-primary dark:text-accent-primary-dark h-4 w-4" />
                     </div>
                 </Transition>

diff --git a/packages/ui/app/src/sidebar/SidebarLink.tsx b/packages/ui/app/src/sidebar/SidebarLink.tsx
@@ -54,7 +54,7 @@ export const SidebarLink = memo(function SidebarSlugLinkContent({
     const renderLink = () => {
         const linkClassName = classNames(
             linkClassNameProp,
-            "text-inherit text-left hover:text-inherit relative inline-flex flex-1 content-between items-center px-4 lg:px-3 no-underline hover:no-underline py-3 lg:py-2 rounded-lg ring-border-primary dark:ring-border-primary-dark ring-inset",
+            "!text-inherit text-left !hover:text-inherit relative inline-flex flex-1 content-between items-center px-4 lg:px-3 no-underline hover:no-underline py-3 lg:py-2 rounded-lg ring-border-primary dark:ring-border-primary-dark ring-inset",
             {
                 "bg-tag-primary dark:bg-tag-primary-dark ring-1 lg:ring-0": selected,
                 "lg:hover:bg-tag-default-light/5/10 lg:dark:hover:bg-tag-default-dark/5 ring-0": !selected,
@@ -121,7 +121,7 @@ export const SidebarLink = memo(function SidebarSlugLinkContent({
                                 "lg:hover:bg-tag-default-light/5 lg:dark:hover:bg-tag-default-dark/5 lg:opacity-60 group-hover/sidebar:opacity-100 transition-opacity":
                                     toggleExpand != null,
                                 "lg:rounded-l-none": depth > 0,
-                                "lg:bg-tag-primary lg:dark:bg-tag-primary-dark relative lg:after:content-none after:content-[''] after:absolute after:inset-1 after:rounded-lg after:bg-tag-primary after:dark:bg-tag-primary-dark text-accent-primary dark:text-accent-primary-dark lg:text-inherit after:pointer-events-none":
+                                "lg:bg-tag-primary lg:dark:bg-tag-primary-dark relative lg:after:content-none after:content-[''] after:absolute after:inset-1 after:rounded-lg after:bg-tag-primary after:dark:bg-tag-primary-dark text-accent-primary dark:text-accent-primary-dark !lg:text-inherit after:pointer-events-none":
                                     showIndicator,
                             }
                         )}

diff --git a/packages/ui/app/src/sidebar/SidebarTabButton.tsx b/packages/ui/app/src/sidebar/SidebarTabButton.tsx
@@ -18,10 +18,10 @@ const UnmemoizedSidebarTabButton: React.FC<SidebarTabButton.Props> = ({ tab, sel
             <Link
                 className={classNames(
                     "no-underline hover:no-underline min-h-[44px] lg:min-h-[36px]",
-                    "text-base lg:text-sm flex flex-1 py-2 px-3 group/tab-button transition rounded-lg justify-start items-center select-none min-w-0",
+                    "text-base lg:text-sm flex flex-1 py-2 px-3 group/tab-button transition rounded-lg justify-start items-center select-none min-w-0 hover:text-accent-primary hover:dark:text-accent-primary-dark",
                     {
                         "text-accent-primary dark:text-accent-primary-dark": selected,
-                        "t-muted hover:text-accent-primary hover:dark:text-accent-primary-dark": !selected,
+                        "t-muted": !selected,
                     }
                 )}
                 href={`/${slug}`}