button colors

components/Button.tsx

@@ -17,9 +17,9 @@ const Button: FunctionComponent<ButtonProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`${className} px-6 py-2 bg-th-bkg-4 rounded-full text-th-fgd-1
-      hover:brightness-[1.15] focus:outline-none disabled:bg-th-bkg-4 
-      disabled:text-th-fgd-4 disabled:cursor-not-allowed disabled:hover:brightness-100`}
+      className={`font-bold px-6 py-2 bg-th-bkg-button rounded-full text-th-fgd-1
+      hover:brightness-[1.1] focus:outline-none disabled:bg-th-bkg-4 
+      disabled:text-th-fgd-3 disabled:cursor-not-allowed disabled:hover:brightness-100 ${className}`}
       {...props}
     >
       {children}

components/ConnectWalletButton.tsx

@@ -102,9 +102,9 @@ const ConnectWalletButton = () => {
           <button
             onClick={handleWalletConect}
             disabled={!wallet || !mangoGroup}
-            className="bg-th-primary rounded-none text-th-bkg-1 hover:brightness-[1.15] focus:outline-none disabled:text-th-fgd-4 disabled:cursor-wait"
+            className="bg-th-primary-dark rounded-none text-th-bkg-1 hover:brightness-[1.15] focus:outline-none disabled:text-th-bkg-2 disabled:cursor-wait"
           >
-            <div className="flex flex-row items-center px-3 justify-center h-full default-transition hover:text-th-bkg-1">
+            <div className="flex flex-row items-center px-3 justify-center h-full default-transition">
               <WalletIcon className="w-4 h-4 mr-2 fill-current" />
               <div className="text-left">
                 <div className="font-bold mb-0.5 whitespace-nowrap">

components/WalletSelect.tsx

@@ -18,7 +18,7 @@ export default function WalletSelect() {
       {({ open }) => (
         <>
           <Menu.Button
-            className={`bg-th-primary flex justify-center items-center h-full rounded-none focus:outline-none text-th-bkg-1 hover:brightness-[1.15] hover:text-th-bkg-1 hover:bg-th-primary cursor-pointer w-10`}
+            className={`bg-th-primary-dark flex justify-center items-center h-full rounded-none focus:outline-none text-th-bkg-1 hover:brightness-[1.15] hover:text-th-fgd-1 cursor-pointer w-10`}
           >
             <ChevronDownIcon
               className={`default-transition h-5 w-5 ${

components/trade_form/AdvancedTradeForm.tsx

@@ -989,16 +989,14 @@ export default function AdvancedTradeForm({
           ) : null}
           <div className={`flex mt-3`}>
             {canTrade ? (
-              <Button
+              <button
                 disabled={disabledTradeButton}
                 onClick={onSubmit}
-                className={`bg-th-bkg-2 border ${
-                  !disabledTradeButton
-                    ? side === 'buy'
-                      ? 'border-th-green hover:border-th-green-dark text-th-green hover:bg-th-green-dark'
-                      : 'border-th-red hover:border-th-red-dark text-th-red hover:bg-th-red-dark'
-                    : 'border border-th-bkg-4'
-                } hover:text-th-fgd-1 flex-grow`}
+                className={`flex-grow font-bold px-6 py-2 rounded-full text-th-fgd-1 hover:brightness-[1.15] focus:outline-none disabled:bg-th-bkg-4 disabled:text-th-fgd-3 disabled:cursor-not-allowed disabled:hover:brightness-100 ${
+                  side === 'buy'
+                    ? 'bg-th-green-dark text-th-fgd-1'
+                    : 'bg-th-red text-th-fgd-1'
+                }`}
               >
                 {sizeTooLarge
                   ? t('too-large')
@@ -1015,7 +1013,7 @@ export default function AdvancedTradeForm({
                     } ${
                       isPerpMarket ? marketConfig.name : marketConfig.baseSymbol
                     }`}
-              </Button>
+              </button>
             ) : (
               <div className="flex-grow">
                 <Tooltip content={t('country-not-allowed-tooltip')}>

styles/index.css

@@ -22,6 +22,7 @@
   --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"]');
 }
 
 [data-theme='Dark'] {
@@ -42,6 +43,7 @@
   --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"]');
 }
 
 [data-theme='Mango'] {
@@ -62,6 +64,7 @@
   --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"]');
 }
 
 /* Base */

tailwind.config.js

@@ -38,6 +38,7 @@ module.exports = {
           'fgd-2': '#0C3F45',
           'fgd-3': '#446065',
           'fgd-4': '#B0B0B0',
+          'bkg-button': '#E6DBCF',
         },
         'dark-theme': {
           yellow: {
@@ -55,6 +56,7 @@ module.exports = {
           'fgd-2': '#C8C8C8',
           'fgd-3': '#B3B3B3',
           'fgd-4': '#878787',
+          'bkg-button': '#474640',
         },
         'mango-theme': {
           yellow: {
@@ -72,6 +74,7 @@ module.exports = {
           'fgd-2': '#D2CEDE',
           'fgd-3': '#C1BED3',
           'fgd-4': '#706C81',
+          'bkg-button': '#4F496F',
         },
         'th-bkg-1': 'var(--bkg-1)',
         'th-bkg-2': 'var(--bkg-2)',
@@ -90,6 +93,7 @@ module.exports = {
         'th-green-dark': 'var(--green-dark)',
         'th-green-muted': 'var(--green-muted)',
         'th-orange': 'var(--orange)',
+        'th-bkg-button': 'var(--bkg-button)',
       },
       fontSize: {
         xxs: '.65rem',