fix: max and self button styles

Author: gabitoesmiapodo

typescript/ui/src/components/buttons/SolidButton.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren, ReactElement } from 'react';
 
 interface ButtonProps {
   type?: 'submit' | 'reset' | 'button';
-  color?: 'white' | 'primary' | 'accent' | 'green' | 'red' | 'gray'; // defaults to primary
+  color?: 'white' | 'primary' | 'accent' | 'green' | 'red' | 'gray' | 'secondary'; // defaults to primary
   bold?: boolean;
   className?: string;
   icon?: ReactElement;
@@ -45,6 +45,9 @@ export function SolidButton(
   } else if (color === 'gray') {
     baseColors = 'bg-gray-100 text-primary-500';
     onHover = 'hover:bg-gray-200';
+  } else if (color === 'secondary') {
+    baseColors = 'bg-secondary-100 text-black border border-secondary-200';
+    onHover = 'hover:bg-secondary-300';
   }
   const onDisabled = 'disabled:bg-gray-300 disabled:text-gray-500';
   const weight = bold ? 'font-semibold' : '';

typescript/ui/src/features/transfer/TransferTokenForm.tsx

@@ -338,9 +338,9 @@ function MaxButton({ balance, disabled }: { balance?: TokenAmount; disabled?: bo
     <SolidButton
       type="button"
       onClick={onClick}
-      color="primary"
+      color="secondary"
       disabled={disabled}
-      className="absolute bottom-1 right-1 top-2.5 px-2 text-xs opacity-90 all:rounded"
+      className="text-xs absolute right-1 top-2.5 bottom-1 px-2 all:rounded"
     >
       {isLoading ? (
         <div className="flex items-center">
@@ -368,9 +368,9 @@ function SelfButton({ disabled }: { disabled?: boolean }) {
     <SolidButton
       type="button"
       onClick={onClick}
-      color="primary"
+      color="secondary"
       disabled={disabled}
-      className="absolute bottom-1 right-1 top-2.5 px-2 text-xs opacity-90 all:rounded"
+      className="text-xs absolute right-1 top-2.5 bottom-1 px-2 all:rounded"
     >
       Self
     </SolidButton>

typescript/ui/tailwind.config.js

@@ -32,14 +32,19 @@ module.exports = {
           800: '#11213B',
           900: '#0D192C',
         },
+        secondary: {
+          100: '#fff1e5',
+          200: '#f7a35f',
+          300: '#ffe8d4',
+        },
         accent: {
           50: '#FAEAF8',
           100: '#F2C1EA',
           200: '#EA98DC',
           300: '#E26ECE',
           400: '#DA45C0',
-          500: '#fb8e56',
-          600: '#fc6e4f',
+          500: '#f7a35f',
+          600: '#e8995a',
           700: '#fb5247',
           800: '#6B185C',
           900: '#400E37',