feat(R) update button and tw colors

thinknimble · Nov 21, 2024 · b078099 · b078099
1 parent 02f5775
commit b078099
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 15 deletions.
diff --git a/{{cookiecutter.project_slug}}/clients/web/react/src/components/button.tsx b/{{cookiecutter.project_slug}}/clients/web/react/src/components/button.tsx
@@ -1,21 +1,32 @@
-import { ButtonHTMLAttributes, FC, ReactNode } from 'react'
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react'
 import { Link, LinkProps } from 'react-router-dom'
 import { Spinner } from './spinner'
 
-type ButtonVariant = 'primary' | 'accent' | 'disabled'
+type ButtonVariant =
+  | 'primary'
+  | 'ghost'
+  | 'discreet'
+  | 'secondary'
+  | 'secondary-reversed'
+  | 'unstyled'
+
 const buttonVariantMap: Record<ButtonVariant, string> = {
-  primary:
-    'flex w-full cursor-pointer items-center justify-center rounded-md border px-3 py-2 text-sm font-semibold shadow-sm border-primary text-white hover:bg-primaryLight bg-primary',
-  accent: '',
-  disabled:
-    'flex w-full cursor-pointer items-center justify-center rounded-md border px-3 py-2 text-sm font-semibold shadow-sm cursor-not-allowed border-gray-200 bg-gray-200',
+  primary: 'text-white bg-primary active:bg-primary-300 ',
+  secondary: 'text-white bg-accent active:bg-accent-400',
+  discreet: 'text-primary hover:shadow-none',
+  ghost: 'border border-primary text-primary active:bg-primary-100 active:text-dark',
+  'secondary-reversed': 'text-secondary bg-white border border-secondary',
+  unstyled: '',
 }
 
 type CommonButtonProps = {
   variant?: ButtonVariant
   extendClassName?: string
+  icon?: ReactNode
 }
-export const Button: FC<
+
+const Button = forwardRef<
+  HTMLButtonElement,
   CommonButtonProps &
     (
       | ({ link?: undefined; isLoading?: boolean } & ButtonHTMLAttributes<HTMLButtonElement>)
@@ -24,26 +35,37 @@ export const Button: FC<
           children: ReactNode
         }
     )
-> = ({ extendClassName = '', children, variant = 'primary', ...props }) => {
+>(({ extendClassName = 'py-2 px-4', children, variant = 'primary', icon, ...props }, ref) => {
   if ('link' in props && props.link) {
     return (
       <Link
-        className={` rounded-lg transition-transform hover:scale-[1.05] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:transform-none ${buttonVariantMap[variant]} ${extendClassName}`}
+        className={`flex items-center rounded-lg transition-transform hover:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:transform-none ${buttonVariantMap[variant]} ${extendClassName}`}
         {...props.link}
       >
         {children}
+        {icon && (
+          <div className="ml-[8px] flex h-max w-[20px] items-center justify-center">{icon}</div>
+        )}
       </Link>
     )
   } else {
     const { isLoading, ...rest } = props
     return (
       <button
         {...rest}
-        className={` rounded-lg transition-transform hover:scale-[1.05] hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:transform-none ${buttonVariantMap[variant]} ${extendClassName}`}
+        ref={ref}
+        className={`flex items-center justify-center rounded-lg transition-transform hover:scale-[0.98] hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:transform-none ${buttonVariantMap[variant]} ${extendClassName}`}
         disabled={props.disabled || isLoading}
       >
-        {props.isLoading ? <Spinner size="sm" /> : children}
+        {isLoading ? <Spinner size="xs" /> : children}
+        {icon && (
+          <div className="ml-[8px] flex h-max w-[20px] items-center justify-center">{icon}</div>
+        )}
       </button>
     )
   }
-}
+})
+
+Button.displayName = 'Button'
+
+export { Button }
diff --git a/{{cookiecutter.project_slug}}/clients/web/react/tailwind.colors.js b/{{cookiecutter.project_slug}}/clients/web/react/tailwind.colors.js
@@ -1,7 +1,29 @@
 export const colors = {
-  primary: '#042642',
+  primary: {
+    100: "#cdd4d9",
+    200: "#9ba8b3",
+    300: "#687d8e",
+    400: "#365168",
+    DEFAULT: "#042642",
+    500: "#042642",
+    600: "#031e35",
+    700: "#021728",
+    800: "#020f1a",
+    900: "#01080d"
+  },
   primaryLight: '#183A56',
-  accent: '#d93a00',
+  accent: {
+    100: "#f7d8cc",
+    200: "#f0b099",
+    300: "#e88966",
+    400: "#e16133",
+    500: "#d93a00",
+    DEFAULT: "#d93a00",
+    600: "#ae2e00",
+    700: "#822300",
+    800: "#571700",
+    900: "#2b0c00"
+  },
   success: '#4faf64',
   warning: '#f4b942',
   error: '#d72638',