button hovers

components/forms/Switch.tsx

@@ -25,7 +25,7 @@ const Switch: FunctionComponent<SwitchProps> = ({
       <button
         type="button"
         className={`${
-          checked ? 'bg-th-primary' : 'bg-th-bkg-button'
+          checked ? 'bg-th-primary' : 'bg-th-button'
         } relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full 
         border-2 border-transparent transition-colors duration-200 ease-in-out 
         focus:outline-none ${disabled ? 'opacity-60' : ''}`}

components/shared/Button.tsx

@@ -31,10 +31,10 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
       disabled={disabled}
       className={`whitespace-nowrap rounded-md ${
         secondary
-          ? `border border-th-bkg-button ${
-              theme === 'Light' ? 'text-th-bkg-button' : 'text-th-fgd-1'
+          ? `border border-th-button md:hover:border-th-button-hover ${
+              theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
             }`
-          : `bg-th-bkg-button ${
+          : `bg-th-button md:hover:bg-th-button-hover ${
               theme === 'Light' ? 'text-th-bkg-1' : 'text-th-fgd-1'
             }`
       } ${
@@ -43,7 +43,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
           : size === 'large'
           ? 'h-12 px-6'
           : 'h-8 px-3'
-      } font-bold focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 md:hover:brightness-[1.1] ${className}`}
+      } default-transition font-bold focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 ${className}`}
       {...props}
     >
       {children}

components/shared/IconDropMenu.tsx

@@ -42,8 +42,8 @@ const IconDropMenu = ({
           <Popover.Button
             className={`flex ${
               large ? 'h-12 w-12' : 'h-10 w-10'
-            } items-center justify-center rounded-full border border-th-bkg-button ${
-              theme === 'Light' ? 'text-th-bkg-button' : 'text-th-fgd-1'
+            } default-transition items-center justify-center rounded-full border border-th-button md:hover:border-th-button-hover ${
+              theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
             } md:hover:text-th-fgd-1 ${
               disabled ? 'cursor-not-allowed opacity-60' : ''
             }`}

components/swap/JupiterRoutes.tsx

@@ -110,16 +110,10 @@ const JupiterRoutes = ({
         <div className="mb-6 -mt-4 flex justify-center">
           <div className="flex flex-col items-center">
             <div className="relative mb-2 w-[72px]">
-              <Image
-                className="rounded-full"
-                alt=""
-                width="40"
-                height="40"
-                src={inputTokenIconUri}
-              />
+              <Image alt="" width="40" height="40" src={inputTokenIconUri} />
               <div className="absolute right-0 top-0">
                 <Image
-                  className="rounded-full drop-shadow-md"
+                  className="drop-shadow-md"
                   alt=""
                   width="40"
                   height="40"

styles/globals.css

@@ -92,7 +92,8 @@ th {
   --fgd-2: theme('colors.light-theme.fgd-2');
   --fgd-3: theme('colors.light-theme.fgd-3');
   --fgd-4: theme('colors.light-theme.fgd-4');
-  --bkg-button: theme('colors.light-theme.bkg-button');
+  --button: theme('colors.light-theme.button');
+  --button-hover: theme('colors.light-theme.button-hover');
 }
 
 [data-theme='Dark'] {
@@ -113,7 +114,8 @@ th {
   --fgd-2: theme('colors.dark-theme.fgd-2');
   --fgd-3: theme('colors.dark-theme.fgd-3');
   --fgd-4: theme('colors.dark-theme.fgd-4');
-  --bkg-button: theme('colors.dark-theme.bkg-button');
+  --button: theme('colors.dark-theme.button');
+  --button-hover: theme('colors.dark-theme.button-hover');
 }
 
 [data-theme='Mango'] {
@@ -134,7 +136,8 @@ th {
   --fgd-2: theme('colors.mango-theme.fgd-2');
   --fgd-3: theme('colors.mango-theme.fgd-3');
   --fgd-4: theme('colors.mango-theme.fgd-4');
-  --bkg-button: theme('colors.mango-theme.bkg-button');
+  --button: theme('colors.mango-theme.button');
+  --button-hover: theme('colors.mango-theme.button-hover');
 }
 
 /* Base */

tailwind.config.js

@@ -35,7 +35,8 @@ module.exports = {
           'fgd-2': '#0C3F45',
           'fgd-3': '#446065',
           'fgd-4': '#B0B0B0',
-          'bkg-button': '#7261BD',
+          button: '#7261BD',
+          'button-hover': '#5B48AD',
         },
         'dark-theme': {
           yellow: {
@@ -53,7 +54,8 @@ module.exports = {
           'fgd-2': '#C8C8C8',
           'fgd-3': '#B3B3B3',
           'fgd-4': '#878787',
-          'bkg-button': '#5B48AD',
+          button: '#5B48AD',
+          'button-hover': '#443681',
         },
         'mango-theme': {
           yellow: {
@@ -71,7 +73,8 @@ module.exports = {
           'fgd-2': '#D2CEDE',
           'fgd-3': '#C1BED3',
           'fgd-4': '#7E7A90',
-          'bkg-button': '#5B48AD',
+          button: '#5B48AD',
+          'button-hover': '#443681',
         },
         'th-bkg-1': 'var(--bkg-1)',
         'th-bkg-2': 'var(--bkg-2)',
@@ -90,7 +93,8 @@ module.exports = {
         'th-green-dark': 'var(--green-dark)',
         'th-green-muted': 'var(--green-muted)',
         'th-orange': 'var(--orange)',
-        'th-bkg-button': 'var(--bkg-button)',
+        'th-button': 'var(--button)',
+        'th-button-hover': 'var(--button-hover)',
       },
       fontSize: {
         xxs: '.65rem',