wip: tailwind

cdsctf · Jan 20, 2025 · 8026f35 · 8026f35
1 parent 201cc53
commit 8026f35
Show file tree

Hide file tree

Showing 26 changed files with 240 additions and 263 deletions.
diff --git a/package.json b/package.json
@@ -58,21 +58,17 @@
         "@types/react": "^19.0.6",
         "@types/react-dom": "^19.0.3",
         "@types/react-transition-group": "^4.4.12",
-        "@unocss/preset-icons": "^65.4.2",
-        "@unocss/preset-typography": "^65.4.2",
-        "@unocss/preset-uno": "^65.4.2",
-        "@unocss/preset-web-fonts": "^65.4.2",
-        "@unocss/transformer-directives": "^65.4.2",
-        "@unocss/transformer-variant-group": "^65.4.2",
         "@vitejs/plugin-react-swc": "^3.7.2",
+        "autoprefixer": "^10.4.20",
         "eslint": "^9.18.0",
         "eslint-plugin-react-hooks": "^5.1.0",
         "eslint-plugin-react-refresh": "^0.4.18",
         "globals": "^15.14.0",
+        "postcss": "^8.5.1",
         "prettier": "^3.4.2",
+        "tailwindcss": "^3.4.17",
         "typescript": "^5.7.3",
         "typescript-eslint": "^8.19.1",
-        "unocss": "^65.4.2",
         "unplugin-icons": "^22.0.0",
         "vite": "^6.0.7"
     }

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/src/components/core/Avatar/Avatar.tsx b/src/components/core/Avatar/Avatar.tsx
@@ -21,7 +21,7 @@ export function Avatar(props: AvatarProps) {
         size = "3rem",
         fallback = (
             <UserCircleBold
-                className={"iconify text-primary dark:text-white"}
+                className={"iconify text-primary dark:text-[white]"}
             />
         ),
         style,

diff --git a/src/components/core/Button/Button.module.scss b/src/components/core/Button/Button.module.scss
@@ -1,83 +1,82 @@
-@layer default {
-    .button {
-        width: auto;
-        height: 2.5rem;
-        display: flex;
-        gap: 12px;
-        align-items: center;
-        justify-content: center;
-        border-radius: 12px;
-        border: 1px solid transparent;
-        box-shadow: var(--shadow-md);
-        transition: all 0.2s ease-in-out;
-        padding: 0.5rem 1.375rem;
-        white-space: nowrap;
-        line-height: 1.75rem;
-        overflow: hidden;
-        color: light-dark(var(--button-text-color), #ffffff);
-        font-size: 0.875rem;
-        font-weight: 600;
-        letter-spacing: 0.8px;
+.button {
+    width: auto;
+    height: 2.5rem;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    border: 1px solid transparent;
+    box-shadow: var(--shadow-md);
+    transition: all 0.2s ease-in-out;
+    padding: 0.5rem 1.375rem;
+    white-space: nowrap;
+    line-height: 1.75rem;
+    overflow: hidden;
+    color: light-dark(var(--button-text-color), #ffffff);
+    font-size: 0.875rem;
+    font-weight: 600;
+    letter-spacing: 0.8px;
+    user-select: none;
 
-        cursor: pointer;
+    cursor: pointer;
 
-        &[data-variant="solid"] {
-            background-color: var(--button-bg-color);
-        }
+    &[data-variant="solid"] {
+        background-color: var(--button-bg-color);
+    }
 
-        &[data-variant="outlined"] {
-            background-color: transparent;
-            border-color: var(--button-bg-color);
-        }
+    &[data-variant="outlined"] {
+        background-color: transparent;
+        border-color: var(--button-bg-color);
+    }
 
-        &[data-variant="tonal"] {
-            background-color: var(--bg-color);
-            border-color: var(--button-bg-color);
-        }
+    &[data-variant="tonal"] {
+        background-color: var(--bg-color);
+        border-color: var(--button-bg-color);
+    }
 
-        &[data-variant="subtle"] {
-            background-color: color-mix(
-                in srgb,
-                var(--button-bg-color) 30%,
-                #ffffff 10%
-            );
-        }
+    &[data-variant="subtle"] {
+        background-color: color-mix(
+            in srgb,
+            var(--button-bg-color) 30%,
+            #ffffff 10%
+        );
+    }
 
-        &[data-variant="ghost"],
-        &[data-variant="text"] {
-            background-color: transparent;
-            box-shadow: 0 0 0 0 var(--button-bg-color);
-            color: light-dark(var(--button-bg-color), #ffffff);
-        }
+    &[data-variant="ghost"],
+    &[data-variant="text"] {
+        background-color: transparent;
+        box-shadow: 0 0 0 0 var(--button-bg-color);
+        color: light-dark(var(--button-bg-color), #ffffff);
+    }
 
-        &:disabled,
-        &[data-loading="true"],
-        &[data-disabled="true"] {
-            cursor: not-allowed;
-        }
+    &:disabled,
+    &[data-loading="true"],
+    &[data-disabled="true"] {
+        cursor: not-allowed;
+    }
 
-        &:not(:disabled, [data-loading="true"], [data-disabled="true"]) {
-            &:hover {
-                filter: brightness(1.2);
+    &:not(:disabled, [data-loading="true"], [data-disabled="true"]) {
+        &:hover {
+            filter: brightness(1.2);
 
-                &[data-variant="ghost"] {
-                    background-color: color-mix(
-                        in srgb,
-                        light-dark(#000, #fff) 5%,
-                        transparent 95%
-                    );
-                }
+            &[data-variant="ghost"] {
+                background-color: color-mix(
+                    in srgb,
+                    light-dark(#000, #fff) 5%,
+                    transparent 95%
+                );
             }
+        }
 
-            &:active {
-                box-shadow: none;
-                transform: translateY(2px);
-            }
+        &:active {
+            box-shadow: none;
+            transform: translateY(2px);
+        }
 
-            &:focus {
-                outline: none;
-                filter: brightness(1.2);
-            }
+        &:focus {
+            outline: none;
+            filter: brightness(1.2);
         }
     }
 }
diff --git a/src/components/core/Image/Image.tsx b/src/components/core/Image/Image.tsx
@@ -21,7 +21,7 @@ export function Image(props: ImageProps) {
         height = "100%",
         radius = 12,
         fallback = (
-            <Flag2BoldDuotone className="w-[35%] h-[35%] text-primary dark:text-white" />
+            <Flag2BoldDuotone className="w-[35%] h-[35%] text-primary dark:text-[white]" />
         ),
         className,
         style,

diff --git a/src/components/core/TextInput/TextInput.module.scss b/src/components/core/TextInput/TextInput.module.scss
@@ -3,7 +3,6 @@
     width: 100%;
     background: transparent;
     border: none;
-    outline: none;
     font-size: 16px;
     line-height: 1.5;
 
@@ -40,7 +39,7 @@
     }
 
     &[data-variant="outlined"] {
-        color: #000;
+        color: var(--text-color);
     }
 }
 

diff --git a/src/components/core/TextInput/TextInput.tsx b/src/components/core/TextInput/TextInput.tsx
@@ -72,7 +72,7 @@ export function TextInput(props: TextInputProps) {
             {...rest}
         >
             <ArkField.Input
-                className={styles["input"]}
+                className={clsx(styles["input"], "outline-none")}
                 value={value}
                 type={password && !isPasswordVisible ? "password" : "text"}
                 placeholder={placeholder}

diff --git a/src/components/core/Textarea/Textarea.tsx b/src/components/core/Textarea/Textarea.tsx
@@ -60,10 +60,10 @@ export function Textarea(props: TextareaProps) {
             <ArkField.Textarea
                 autoresize={autoresize}
                 className={clsx(
-                    "w-full flex-1 bg-transparent border-none outline-none",
+                    "w-full flex-1 bg-[transparent] border-none outline-none",
                     "min-h-[var(--textarea-min-height,auto)] max-h-[var(--textarea-max-height,auto)]",
                     "text-[16px] line-height-[1.5]",
-                    "data-[variant=outlined]:text-black",
+                    "data-[variant=outlined]:text-[var(--text-color)]",
                     "disabled:cursor-not-allowed"
                 )}
                 data-variant={variant}

diff --git a/src/components/core/_blocks/InputBase/InputBase.module.scss b/src/components/core/_blocks/InputBase/InputBase.module.scss
@@ -0,0 +1,49 @@
+.root {
+    width: var(--input-width);
+    height: var(--input-height);
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+    border-radius: 15px;
+
+    &[data-full-width="true"] {
+        width: 100%;
+    }
+}
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+    border-radius: 15px;
+    box-shadow: var(--input-shadow);
+    display: flex;
+    align-items: center;
+    position: relative;
+    border: 1px solid var(--input-border-color);
+    border-radius: 12px;
+    padding: 6.75px 12px;
+    transition: all 0.2s ease-in-out;
+    gap: 8px;
+
+    &[data-variant="solid"] {
+        background-color: var(--input-bg-color);
+        color: #ffffff;
+    }
+
+    &[data-variant="outlined"] {
+        background-color: var(--bg-2nd-color);
+        color: var(--input-border-color);
+    }
+
+    &:focus,
+    &:hover {
+        filter: brightness(1.2);
+    }
+
+    &:disabled,
+    &[data-disabled="true"] {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+}
diff --git a/src/components/core/_blocks/InputBase/InputBase.tsx b/src/components/core/_blocks/InputBase/InputBase.tsx
@@ -3,6 +3,7 @@ import useThemeColor from "@/hooks/useThemeColor";
 import clsx from "clsx";
 import { Field as ArkField } from "@ark-ui/react";
 import { Box } from "../../Box";
+import styles from "./InputBase.module.scss";
 
 export interface InputBaseProps extends ComponentProps<"div"> {
     width?: string;
@@ -55,12 +56,7 @@ export function InputBase(props: InputBaseProps) {
 
     return (
         <ArkField.Root
-            className={clsx(
-                "w-[var(--input-width)] h-[var(--input-height)]",
-                "flex flex-col items-start justify-start",
-                "rounded-[12px]",
-                className
-            )}
+            className={clsx(styles["root"], className)}
             style={{
                 ...variables,
                 ...style,
@@ -96,20 +92,7 @@ export function InputBase(props: InputBaseProps) {
                 </Box>
             )}
             <Box
-                className={clsx(
-                    "w-full h-full",
-                    "rounded-[12px] shadow-[var(--input-shadow)]",
-                    "flex items-center relative gap-[8px]",
-                    "border-[1px] border-solid border-[var(--input-border-color)]",
-                    "px-[12px] py-[6.75px]",
-                    "transition-all duration-200 ease-in-out",
-                    "data-[variant=solid]:(bg-[var(--input-bg-color)] text-white)",
-                    "data-[variant=outlined]:(bg-[var(--bg-2nd-color)] text-[var(--input-border-color)])",
-                    "hover:(brightness-[1.125])",
-                    "focus:(brightness-[1.125])",
-                    "data-[disabled=true]:(cursor-not-allowed opacity-[0.5])",
-                    wrapperClassName
-                )}
+                className={clsx(styles["wrapper"], wrapperClassName)}
                 data-variant={variant}
                 data-disabled={disabled}
                 ref={ref}

diff --git a/src/components/modals/ChallengeModal/ChallengeModal.tsx b/src/components/modals/ChallengeModal/ChallengeModal.tsx
@@ -168,7 +168,7 @@ export function ChallengeModal(props: ChallengeModalProps) {
                 <Box
                     className={clsx(
                         "w-full flex justify-between items-center gap-[16px]",
-                        "bg-primary rounded-t-[12px] py-[10px] px-[20px] text-white"
+                        "bg-primary rounded-t-[12px] py-[10px] px-[20px] text-[white]"
                     )}
                 >
                     <Box className={clsx("w-1/2 flex items-center gap-[8px]")}>
@@ -193,7 +193,7 @@ export function ChallengeModal(props: ChallengeModalProps) {
                                             "flex items-center cursor-pointer",
                                             "transition-all duration-200 ease-in-out",
                                             "rounded-full p-[2px] gap-[8px]",
-                                            "active:translate-y-[2px] bg-transparent"
+                                            "active:translate-y-[2px] bg-[transparent]"
                                         )}
                                         onClick={() => setActiveTab(tab.id)}
                                         data-active={activeTab === tab.id}

diff --git a/src/components/utils/HydrateFallback/HydrateFallback.tsx b/src/components/utils/HydrateFallback/HydrateFallback.tsx
@@ -7,7 +7,7 @@ export function HydrateFallback() {
         <Box className={styles["root"]}>
             <Box
                 className={
-                    "flex items-center justify-center gap-[15px] text-primary dark:text-white"
+                    "flex items-center justify-center gap-[15px] text-primary dark:text-[white]"
                 }
             >
                 <Box>

diff --git a/src/components/widgets/Navbar/Navbar.tsx b/src/components/widgets/Navbar/Navbar.tsx
@@ -120,7 +120,7 @@ export function Navbar() {
                 "sticky top-0 left-0 z-2",
                 "min-h-[64px] max-h-[64px] w-full px-[2rem]",
                 "flex items-center justify-between",
-                "shadow-md bg-primary text-white",
+                "shadow-md bg-primary text-[white]",
                 "transition-all duration-300 ease-in-out"
             )}
         >
@@ -145,7 +145,7 @@ export function Navbar() {
                                     }
                                     fallback={<PlanetBold />}
                                     radius={"30%"}
-                                    className="bg-transparent"
+                                    className="bg-[transparent]"
                                 />
                             </Box>
                         }

diff --git a/src/components/widgets/Navbar/_blocks/Dropdown.tsx b/src/components/widgets/Navbar/_blocks/Dropdown.tsx
@@ -34,7 +34,7 @@ export function Dropdown() {
                             navigate("/login");
                         }
                     }}
-                    className={"w-full py-7"}
+                    className={"w-full py-9"}
                 >
                     <Box className={"flex flex-col w-full"}>
                         {authStore?.user ? (

diff --git a/src/main.tsx b/src/main.tsx
@@ -2,7 +2,6 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./styles/main.scss";
-import "virtual:uno.css";
 
 createRoot(document.getElementById("root")!).render(
     <StrictMode>