feat: UI remove tailwind (#259)

* chore: remove tailwind from input file component * feat: remove tailwind from components * chore: remove styles from index.tsx * style: remove tailwind * style: fix global styles * style: fix menu-item, nfa-row, skeleton detail nfa * style: fix mint nfa/ create ap align * Update ui/src/components/core/color-picker/color-picker.tsx Co-authored-by: Felipe Mendes <[email protected]> * Update ui/src/components/core/color-picker/color-picker.tsx Co-authored-by: Felipe Mendes <[email protected]> * Update ui/src/components/core/switch/switch.styles.ts Co-authored-by: Felipe Mendes <[email protected]> * Update ui/src/index.tsx Co-authored-by: Felipe Mendes <[email protected]> * Update ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.styles.ts Co-authored-by: Felipe Mendes <[email protected]> * Update ui/src/theme/globals.ts Co-authored-by: Felipe Mendes <[email protected]> * style: fix styles for switch --------- Co-authored-by: Felipe Mendes <[email protected]>
fleekxyz · May 19, 2023 · 07db609 · 07db609
1 parent 9162a1f
commit 07db609
Show file tree

Hide file tree

Showing 38 changed files with 292 additions and 380 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -49,7 +49,6 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "2.2.0",
-    "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "buffer": "^6.0.3",
     "eslint": "^8.28.0",
@@ -59,11 +58,9 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "ethers": "^5.7.2",
-    "postcss": "^8.4.21",
     "prettier": "^2.8.0",
     "process": "^0.11.10",
     "react-query": "^3.39.2",
-    "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.1",
     "typescript": "^4.9.3",
     "vite": "^3.2.4",

diff --git a/ui/src/components/card/card.styles.ts b/ui/src/components/card/card.styles.ts
@@ -3,6 +3,7 @@ import { styled } from '@/theme';
 export abstract class CardStyles {
   static readonly Container = styled('div', {
     width: '$full',
+    height: 'fit-content',
     backgroundColor: '$slate2',
     borderRadius: '$xlh',
     padding: '$7',

diff --git a/ui/src/components/core/button/icon-button.tsx b/ui/src/components/core/button/icon-button.tsx
@@ -75,6 +75,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
           minWidth,
           fontSize,
           borderRadius: isRound ? '$full' : undefined,
+          padding: 0,
           ...(rest.css ?? {}),
         }}
       >

diff --git a/ui/src/components/core/color-picker/color-picker.styles.ts b/ui/src/components/core/color-picker/color-picker.styles.ts
@@ -0,0 +1,21 @@
+import { Flex } from '@/components';
+import { styled } from '@/theme';
+
+export const ColorPickerStyles = {
+  Container: styled('div', {
+    position: 'relative',
+
+    [`${Flex}`]: {
+      gap: '$3h',
+      alignItems: 'center',
+    },
+  }),
+  Input: styled('input', {
+    position: 'absolute',
+    right: '4rem',
+    height: '1.25rem',
+  }),
+  Image: styled('img', {
+    display: 'none',
+  }),
+};
diff --git a/ui/src/components/core/color-picker/color-picker.tsx b/ui/src/components/core/color-picker/color-picker.tsx
@@ -3,7 +3,9 @@
 import ColorThief from 'colorthief';
 import { useRef } from 'react';
 
-import { Button, Card, Flex, Icon } from '@/components';
+import { Button, Card, Flex, Icon, Text } from '@/components';
+
+import { ColorPickerStyles as CS } from './color-picker.styles';
 
 export type ColorPickerProps = {
   logoColor: string;
@@ -38,9 +40,9 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
 
   return (
     <Card.Text css={{ height: '$22', mt: '$6' }}>
-      <div className="relative">
-        <Flex css={{ gap: '$3h', alignItems: 'center' }}>
-          <span>Primary Color</span>
+      <CS.Container>
+        <Flex css={{ gap: '0.0625rem' }}>
+          <Text>Primary Color</Text>
           <Button
             leftIcon={
               <Icon name="square" css={{ color: `${logoColor || '$black'}` }} />
@@ -55,23 +57,22 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
               color: '$slate12',
               zIndex: '$docked',
               minWidth: '$28',
+              gap: '0.125rem',
             }}
             onClick={handleColorPickerClick}
           >
             {logoColor.toUpperCase() || '#000000'}
           </Button>
-          <input
+          <CS.Input
             ref={inputColorRef}
-            className="absolute right-16 h-5"
             type="color"
             value={logoColor}
             onChange={handleColorChange}
           />
         </Flex>
-      </div>
+      </CS.Container>
 
-      <img
-        className="hidden"
+      <CS.Image
         src={logo}
         ref={imageRef}
         onLoad={handleLogoLoad}

diff --git a/ui/src/components/core/input/input-file.styles.ts b/ui/src/components/core/input/input-file.styles.ts
@@ -1,14 +1,13 @@
 import { Flex } from '@/components/layout';
 import { styled } from '@/theme';
 
-export abstract class InputFileStyles {
-  static readonly Container = styled(Flex, {
+export const InputFileStyles = {
+  Container: styled(Flex, {
     alignItems: 'center',
     justifyContent: 'center',
     cursor: 'pointer',
-  });
-
-  static readonly Border = styled('div', {
+  }),
+  Border: styled('div', {
     borderStyle: 'solid',
     borderColor: '$gray7',
     width: '$22',
@@ -24,5 +23,14 @@ export abstract class InputFileStyles {
     '&[aria-invalid=true], &[data-invalid]': {
       borderColor: '$red9',
     },
-  });
-}
+  }),
+  Image: styled('img', {
+    position: 'absolute',
+    width: '3.5rem',
+    height: '3.5rem',
+  }),
+  Input: styled('input', {
+    all: 'unset',
+    display: 'none',
+  }),
+};
diff --git a/ui/src/components/core/input/input-file.tsx b/ui/src/components/core/input/input-file.tsx
@@ -25,14 +25,13 @@ export const StyledInputFile = forwardRef<HTMLDivElement, InputFileProps>(
       <>
         <S.Container onClick={handleInputClick}>
           {file !== '' ? (
-            <img className="absolute w-14 h-14" src={file} alt="logo" />
+            <S.Image src={file} alt="logo" />
           ) : (
             <Icon name="upload" size="md" css={{ position: 'absolute' }} />
           )}
           <S.Border {...props} ref={ref} />
-          <input
+          <S.Input
             type="file"
-            className="hidden"
             accept={'.svg'}
             ref={inputFileRef}
             onChange={handleFileChange}

diff --git a/ui/src/components/core/menu/menu.styles.ts b/ui/src/components/core/menu/menu.styles.ts
@@ -37,6 +37,10 @@ export const MenuStyles = {
     transition: '$all-200',
     fontSize: '$sm',
 
+    a: {
+      all: 'unset',
+    },
+
     '&[data-headlessui-state*="active"]': {
       backgroundColor: '$slate2',
       color: '$slate12',

diff --git a/ui/src/components/core/switch/switch.styles.ts b/ui/src/components/core/switch/switch.styles.ts
@@ -0,0 +1,84 @@
+import { Switch } from '@headlessui/react';
+
+import { styled } from '@/theme';
+
+export const SwitchStyles = {
+  Wrapper: styled(Switch, {
+    position: 'relative',
+    display: 'inline-flex',
+    height: '2rem',
+    width: '4.625rem',
+    flexShrink: 0,
+    cursor: 'pointer',
+    borderRadius: '$full',
+    borderWidth: '0.125rem',
+    borderColor: 'transparent',
+
+    transitionProperty: 'all',
+
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDuration: '200ms',
+
+    '&:focus': {
+      outline: '0.125rem solid transparent',
+      outlineOffset: '0.125rem',
+    },
+
+    variants: {
+      isChecked: {
+        true: {
+          backgroundColor: '$green4',
+        },
+        false: {
+          backgroundColor: '$red4',
+        },
+      },
+    },
+  }),
+  Text: styled('span', {
+    position: 'absolute',
+    top: '25%',
+    fontSize: '$sm',
+
+    variants: {
+      checked: {
+        true: {
+          right: '0.75rem',
+          color: '$green11',
+        },
+        false: {
+          left: '1rem',
+          color: '$red11',
+        },
+      },
+    },
+  }),
+  Dot: styled('span', {
+    position: 'absolute',
+    top: '5px',
+    left: '5px',
+    pointerEvents: 'none',
+    display: 'inline-block',
+    height: '1.25rem',
+    width: '1.25rem',
+    borderRadius: '$full',
+
+    transitionProperty: 'all',
+
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDuration: '200ms',
+
+    variants: {
+      checked: {
+        true: {
+          backgroundColor: '$green11',
+          transform: 'translateX(0px)',
+        },
+        false: {
+          backgroundColor: '$red11',
+          transform: 'translateX(2.625rem)',
+        },
+      },
+    },
+  }),
+};
diff --git a/ui/src/components/core/switch/switch.tsx b/ui/src/components/core/switch/switch.tsx
@@ -1,31 +1,21 @@
-import { Switch as SwitchComponent } from '@headlessui/react';
+import { Switch as SwitchHeadless } from '@headlessui/react';
 import React from 'react';
 
+import { SwitchStyles as S } from './switch.styles';
+
 type SwitchProps = {
   checked: boolean;
   onChange: (checked: boolean) => void;
 };
 
 export const Switch: React.FC<SwitchProps> = ({ checked, onChange }) => (
-  <SwitchComponent
+  <SwitchHeadless
+    as={S.Wrapper}
     checked={checked}
     onChange={onChange}
-    className={`${checked ? 'bg-green4' : 'bg-red4'}
-          relative inline-flex h-[32px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
+    isChecked={checked}
   >
-    <span
-      className={`absolute top-1 ${
-        checked ? 'right-3 text-green11' : 'text-red11 left-4'
-      }`}
-    >
-      {checked ? 'Yes' : 'No'}
-    </span>
-    <span
-      aria-hidden="true"
-      className={`${
-        checked ? 'bg-green11 translate-x-0' : 'bg-red11 translate-x-[2.625rem]'
-      }
-            absolute top-1 left-1 pointer-events-none inline-block h-[20px] w-[20px] transform rounded-full shadow-lg ring-0 transition duration-200 ease-in-out`}
-    />
-  </SwitchComponent>
+    <S.Text checked={checked}>{checked ? 'Yes' : 'No'}</S.Text>
+    <S.Dot checked={checked} />
+  </SwitchHeadless>
 );
diff --git a/ui/src/components/nfa-card/nfa-card.styles.ts b/ui/src/components/nfa-card/nfa-card.styles.ts
@@ -6,6 +6,7 @@ import { Skeleton } from '../layout';
 
 export const NFACardStyles = {
   Container: styled(Link, {
+    all: 'unset',
     display: 'flex',
     flexDirection: 'column',
     minWidth: '12.5rem',

diff --git a/ui/src/components/step/step.styles.ts b/ui/src/components/step/step.styles.ts
@@ -1,4 +1,4 @@
-import { Flex } from '@/components';
+import { Flex, Text } from '@/components';
 import { styled } from '@/theme';
 
 export const StepStyles = {
@@ -23,4 +23,7 @@ export const StepStyles = {
     justifyContent: 'center',
     maxWidth: '$106',
   }),
+  Text: styled(Text, {
+    fontSize: '$4xl',
+  }),
 };
diff --git a/ui/src/components/step/step.tsx b/ui/src/components/step/step.tsx
@@ -12,7 +12,7 @@ export const Step: React.FC<StepProps> = ({ children, header }: StepProps) => {
     <S.Container>
       <S.Indicator>
         <Stepper.Indicator />
-        <h2 className="text-4xl">{header}</h2>
+        <S.Text>{header}</S.Text>
       </S.Indicator>
       {children}
     </S.Container>