From 8a1e7e21dfb4542aa94fdff57746c3b04bae33d7 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Fri, 23 Aug 2024 07:34:54 +0200
Subject: [PATCH] Fix muted text (#28822)

* fix button icon text

* fix menu toggle bg

* fix more muted text
---
 .../NavigationBar/NavigationBar.tsx            |  8 ++++++--
 .../NavigationBar/NavigationIconButton.tsx     |  2 +-
 apps/www/components/Nav/HamburgerMenu.tsx      |  2 +-
 apps/www/components/Nav/MobileMenu.tsx         |  4 ++--
 packages/ui-patterns/TweetCard/index.tsx       |  2 +-
 packages/ui/src/components/Button/Button.tsx   | 18 +++++++++---------
 6 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
index e7962c9f508..e85cc8f667c 100644
--- a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -341,7 +341,7 @@ const NavigationBar = () => {
                   <DropdownMenuGroup>
                     <DropdownMenuItem className="flex gap-2" asChild>
                       <Link href="/account/me">
-                        <Settings size={14} strokeWidth={1.5} className="text-foreground-muted" />
+                        <Settings size={14} strokeWidth={1.5} className="text-foreground-lighter" />
                         Account preferences
                       </Link>
                     </DropdownMenuItem>
@@ -350,7 +350,11 @@ const NavigationBar = () => {
                       onClick={() => snap.setShowFeaturePreviewModal(true)}
                       onSelect={() => snap.setShowFeaturePreviewModal(true)}
                     >
-                      <FlaskConical size={14} strokeWidth={1.5} className="text-foreground-muted" />
+                      <FlaskConical
+                        size={14}
+                        strokeWidth={1.5}
+                        className="text-foreground-lighter"
+                      />
                       Feature previews
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />
diff --git a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx
index 99ff2ccd90b..eac06187e07 100644
--- a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx
@@ -23,7 +23,7 @@ export const NavigationIconButton = forwardRef<
         props.className
       )}
     >
-      <div className="absolute left-2 text-foreground-muted">{icon}</div>
+      <div className="absolute left-2 text-foreground-lighter">{icon}</div>
       <span
         className={cn(
           'absolute left-7 group-data-[state=expanded]:left-10',
diff --git a/apps/www/components/Nav/HamburgerMenu.tsx b/apps/www/components/Nav/HamburgerMenu.tsx
index 7eb40b392a5..144810262fc 100644
--- a/apps/www/components/Nav/HamburgerMenu.tsx
+++ b/apps/www/components/Nav/HamburgerMenu.tsx
@@ -13,7 +13,7 @@ const HamburgerButton = (props: HamburgerButtonProps) => (
   >
     <button
       className={cn(
-        'text-foreground-lighter focus:ring-brand bg-background hover:bg-surface-100 inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-inset'
+        'text-foreground-lighter focus:ring-brand bg-transparent hover:text-foreground-light transition-colors hover:bg-overlay inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-inset'
       )}
       aria-expanded="false"
     >
diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx
index 16ce8a5f15d..2863a4042a0 100644
--- a/apps/www/components/Nav/MobileMenu.tsx
+++ b/apps/www/components/Nav/MobileMenu.tsx
@@ -53,7 +53,7 @@ const MobileMenu = ({ open, setOpen, isDarkMode, menu }: Props) => {
           {menuItem.subMenu['navigation'].map((column: any) => (
             <div key={column.label} className="flex flex-col gap-3">
               {column.label !== 'Developers' && (
-                <label className="text-muted text-xs uppercase tracking-widest font-mono mt-4">
+                <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono mt-4">
                   {column.label}
                 </label>
               )}
@@ -150,7 +150,7 @@ const MobileMenu = ({ open, setOpen, isDarkMode, menu }: Props) => {
               <button
                 onClick={() => setOpen(false)}
                 type="button"
-                className="inline-flex items-center justify-center p-2 rounded-md text-foreground-lighter focus:ring-brand bg-surface-100 hover:bg-surface-200 focus:outline-none focus:ring-2 focus:ring-inset"
+                className="inline-flex items-center justify-center p-2 rounded-md text-foreground-lighter focus:ring-brand hover:text-foreground-light transition-colors focus:outline-none focus:ring-2 focus:ring-inset"
               >
                 <span className="sr-only">Close menu</span>
                 <svg
diff --git a/packages/ui-patterns/TweetCard/index.tsx b/packages/ui-patterns/TweetCard/index.tsx
index 86bf7eb2b9d..c3ff388c5b3 100644
--- a/packages/ui-patterns/TweetCard/index.tsx
+++ b/packages/ui-patterns/TweetCard/index.tsx
@@ -43,7 +43,7 @@ export function TweetCard(props: TweetCard) {
         </div>
       </div>
 
-      <p className="text-foreground-muted mt-3 text-base">"{props.quote}"</p>
+      <p className="text-foreground-lighter mt-3 text-base">"{props.quote}"</p>
     </div>
   )
 }
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index b0150a45014..4e0bd5ff69a 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -170,13 +170,13 @@ const IconContainerVariants = cva('', {
     },
     type: {
       primary: 'text-brand-600',
-      default: 'text-foreground-muted',
+      default: 'text-foreground-lighter',
       secondary: 'text-border-muted',
-      alternative: 'text-foreground-muted',
-      outline: 'text-foreground-muted',
-      dashed: 'text-foreground-muted',
+      alternative: 'text-foreground-lighter',
+      outline: 'text-foreground-lighter',
+      dashed: 'text-foreground-lighter',
       link: 'text-brand-600',
-      text: 'text-foreground-muted',
+      text: 'text-foreground-lighter',
       danger: 'text-destructive-600',
       warning: 'text-warning-600',
     },
@@ -188,11 +188,11 @@ const loadingVariants = cva('', {
   variants: {
     type: {
       primary: 'text-brand-600',
-      default: 'text-foreground-muted',
+      default: 'text-foreground-lighter',
       secondary: 'text-border-muted',
-      alternative: 'text-foreground-muted',
-      outline: 'text-foreground-muted',
-      dashed: 'text-foreground-muted',
+      alternative: 'text-foreground-lighter',
+      outline: 'text-foreground-lighter',
+      dashed: 'text-foreground-lighter',
       link: 'text-brand-600',
       text: 'text-foreground-muted',
       danger: 'text-destructive-600',