Merge pull request #115 from BootNodeDev/fix/ui

Author: fernandomg

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/components/input/TextField.tsx

@@ -30,4 +30,4 @@ export const TextInput = forwardRef(function _TextInput(
 });
 
 const defaultClassName =
-  'mt-1.5 px-2.5 py-2.5 text-sm rounded-lg border border-primary-300 focus:border-primary-500 disabled:bg-gray-150 outline-none transition-all duration-300';
+  'mt-1.5 px-2.5 py-2.5 text-sm rounded-lg border border-primary-300 focus:border-primary-1000 disabled:bg-gray-150 outline-none transition-all duration-300';

typescript/ui/src/components/layout/Card.tsx

@@ -7,7 +7,7 @@ interface Props {
 export function Card({ className, children }: PropsWithChildren<Props>) {
   return (
     <div
-      className={`relative overflow-auto rounded-2xl bg-white p-1.5 xs:p-2 sm:p-3 md:p-4 ${className}`}
+      className={`max-w-95vw relative overflow-auto rounded-2xl bg-white p-1.5 xs:p-2 sm:p-3 md:p-4 ${className}`}
     >
       {children}
     </div>

typescript/ui/src/components/nav/Header.tsx

@@ -8,7 +8,7 @@ import Title from '../../images/logos/app-title.svg';
 export function Header() {
   return (
     <header className="w-full px-2 pb-2 pt-3 sm:px-6 lg:px-12">
-      <div className="flex items-start justify-between">
+      <div className="flex items-center justify-between">
         <Link href="/" className="flex items-center py-2">
           <Image src={Logo} height={40} alt="" />
           <Image src={Name} height={30} alt="" className="ml-2 mt-0.5 hidden sm:block" />

typescript/ui/src/features/chains/ChainSelectField.tsx

@@ -43,11 +43,11 @@ export function ChainSelectField({ name, label, onChange, disabled, customListIt
         className={`${styles.base} ${disabled ? styles.disabled : styles.enabled}`}
         onClick={onClick}
       >
-        <div className="flex items-center gap-3">
-          <div className="max-w-[1.4rem] sm:max-w-fit">
+        <div className="flex items-center gap-2 sm:gap-3">
+          <div className="max-w-[1.4rem] flex-shrink-0 sm:max-w-fit">
             <ChainLogo chainName={field.value} size={32} />
           </div>
-          <div className="flex flex-col items-start gap-1">
+          <div className="flex flex-col items-start gap-1 whitespace-nowrap">
             <label htmlFor={name} className="text-xs text-gray-600">
               {label}
             </label>
@@ -68,6 +68,6 @@ export function ChainSelectField({ name, label, onChange, disabled, customListIt
 
 const styles = {
   base: 'px-2 py-1.5 w-full flex items-center justify-between text-sm bg-white rounded-lg border border-primary-300 outline-none transition-colors duration-500',
-  enabled: 'hover:bg-gray-100 active:scale-95 focus:border-primary-500',
+  enabled: 'hover:bg-gray-100 active:scale-95 focus:border-primary-1000',
   disabled: 'bg-gray-150 cursor-default',
 };

typescript/ui/src/features/tokens/TokenSelectField.tsx

@@ -104,6 +104,6 @@ function TokenButton({
 
 const styles = {
   base: 'mt-1.5 w-full px-2.5 py-2.5 flex items-center justify-between text-sm rounded-lg border border-primary-300 outline-none transition-colors duration-500',
-  enabled: 'hover:bg-gray-100 active:scale-95 focus:border-primary-500',
+  enabled: 'hover:bg-gray-100 active:scale-95 focus:border-primary-1000',
   disabled: 'bg-gray-100 cursor-default',
 };

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/src/features/wallet/SideBarMenu.tsx

@@ -74,7 +74,7 @@ export function SideBarMenu({
           </button>
         )}
         <div className="flex h-full w-full flex-col overflow-y-auto">
-          <div className="w-full rounded-t-md bg-primary-500 px-3.5 py-2 text-base font-normal tracking-wider text-white">
+          <div className="w-full rounded-t-md bg-accent-500 px-3.5 py-2 text-base font-normal tracking-wider text-white">
             Connected Wallets
           </div>
           <AccountList
@@ -83,7 +83,7 @@ export function SideBarMenu({
             onCopySuccess={onCopySuccess}
             className="px-3 py-3"
           />
-          <div className="mb-4 w-full bg-primary-500 px-3.5 py-2 text-base font-normal tracking-wider text-white">
+          <div className="mb-4 w-full bg-accent-500 px-3.5 py-2 text-base font-normal tracking-wider text-white">
             Transfer History
           </div>
           <div className="flex grow flex-col px-3.5">

typescript/ui/src/features/wallet/WalletFloatingButtons.tsx

@@ -9,9 +9,9 @@ export function WalletFloatingButtons() {
   }));
 
   return (
-    <div className="absolute -right-8 top-2 hidden flex-col items-center justify-end gap-4 sm:flex">
+    <div className="absolute -top-8 right-0 flex-col items-center justify-end gap-4 sm:-right-8 sm:top-2 sm:flex">
       <IconButton
-        classes={`p-0.5 ${styles.roundedCircle} `}
+        className={`p-0.5 ${styles.roundedCircle} `}
         title="History"
         onClick={() => setIsSideBarOpen(!isSideBarOpen)}
       >

typescript/ui/tailwind.config.js

@@ -24,22 +24,28 @@ module.exports = {
           50: '#E6EDF9',
           100: '#CDDCF4',
           200: '#A7C2EC',
-          300: '#82A8E4',
+          300: '#e6e6e6',
           400: '#5385D2',
           500: '#2764c1',
           600: '#1D4685',
           700: '#162A4A',
           800: '#11213B',
           900: '#0D192C',
+          1000: '#959595'
+        },
+        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',
@@ -101,6 +107,7 @@ module.exports = {
       },
       maxWidth: {
         'xl-1': '39.5rem',
+        '95vw': '95vw',
       },
     },
   },