From 59cadfaddf9cc3fdea57800e6dfbd0c8cd93afc1 Mon Sep 17 00:00:00 2001
From: Shiyu Chen <42055092+s3713434@users.noreply.github.com>
Date: Sat, 3 Aug 2024 12:04:19 +1000
Subject: [PATCH 1/7] create reusable btn

---
 package.json                   |   4 +-
 src/module/auth/login-form.tsx |  76 +++++++++++-----------
 src/module/common/button.tsx   | 115 ++++++++++++++++++++++++++++-----
 tailwind.config.ts             |  18 ++++--
 yarn.lock                      |  81 +++++++++++++----------
 5 files changed, 195 insertions(+), 99 deletions(-)

diff --git a/package.json b/package.json
index a15f206..dafca41 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "yarn dev-codegen & yarn dev-next",
+    "dev": "concurrently 'yarn:dev-*'",
     "dev-codegen": "graphql-codegen --watch",
     "dev-next": "next dev -p 3010",
     "build": "next build",
@@ -38,7 +38,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "daisyui": "^4.12.10",
+    "concurrently": "^8.2.2",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
diff --git a/src/module/auth/login-form.tsx b/src/module/auth/login-form.tsx
index d3f406d..0eae42c 100644
--- a/src/module/auth/login-form.tsx
+++ b/src/module/auth/login-form.tsx
@@ -1,19 +1,20 @@
-"use client";
-import { zodResolver } from "@hookform/resolvers/zod";
+'use client'
+import { zodResolver } from '@hookform/resolvers/zod'
 import {
+  Button,
   ControlledPasswordInput,
   ControlledTextInput,
   Icon,
-} from "@src/module/common";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { login, LoginPayload } from "./auth-service";
+} from '@src/module/common'
+import Link from 'next/link'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { login, LoginPayload } from './auth-service'
 
 const formSchema = z.object({
   email: z.string().email(),
   password: z.string().min(8),
-});
+})
 
 export function LoginForm() {
   const {
@@ -23,73 +24,72 @@ export function LoginForm() {
     setError,
   } = useForm({
     defaultValues: {
-      email: "",
-      password: "",
+      email: '',
+      password: '',
     },
     resolver: zodResolver(formSchema),
-  });
+  })
 
   async function action(payload: LoginPayload) {
-    const res = await login(payload);
+    const res = await login(payload)
 
     if (res?.error) {
-      console.log(res.error);
-      setError("root", { message: res.error });
+      console.log(res.error)
+      setError('root', { message: res.error })
     }
   }
 
   const onSubmit = handleSubmit((data) => {
-    console.log("wtf", data);
-    action(data);
-  });
+    console.log('wtf', data)
+    action(data)
+  })
 
   return (
-    <div className="card mx-auto w-full max-w-5xl shadow-slate-500 dark:shadow-sky-400  shadow-2xl min-h-96 py-4 flex justify-center items-center">
-      <div className=" mx-auto h-full">
-        <h2 className="text-2xl font-semibold mb-2 text-center">Login</h2>
+    <div className='card mx-auto w-full max-w-5xl shadow-slate-500 dark:shadow-sky-400  shadow-2xl min-h-96 py-4 flex justify-center items-center'>
+      <div className=' mx-auto h-full'>
+        <h2 className='text-2xl font-semibold mb-2 text-center'>Login</h2>
         <form onSubmit={onSubmit}>
           {errors.root && (
-            <span className="text-error">{errors.root.message}</span>
+            <span className='text-error'>{errors.root.message}</span>
           )}
 
-          <div className="mb-4">
+          <div className='mb-4'>
             <ControlledTextInput
-              name="email"
+              name='email'
               control={control}
-              leftElement={<Icon icon="person" />}
-              autoComplete="username"
+              leftElement={<Icon icon='person' />}
+              autoComplete='username'
             />
 
             <ControlledPasswordInput
-              name="password"
+              name='password'
               control={control}
-              autoComplete="current-password"
+              autoComplete='current-password'
             />
           </div>
 
-          <div className="text-right text-primary">
-            <Link href="/forgot-password">
-              <span className="text-sm  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
+          <div className='text-right text-primary'>
+            <Link href='/forgot-password'>
+              <span className='text-sm  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200'>
                 Forgot Password?
               </span>
             </Link>
           </div>
 
           {/* <ErrorText styleClass="mt-8">{errorMessage}</ErrorText> */}
-          <button type="submit" className={"btn mt-2 w-full btn-primary"}>
+          <Button type='submit' variant='primary' textColor='white' animation='login-gradient' size='medium'>
             Login
-          </button>
+          </Button>
 
-          <div className="text-center mt-4">
-            Don&apos;t have an account yet?{" "}
-            <Link href="/register">
-              <span className="  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
+          <div className='text-center'>
+            <Link href='/register'>
+              <Button variant='secondary' textColor='blue' size='medium' animation='register-gradient'>
                 Register
-              </span>
+              </Button>
             </Link>
           </div>
         </form>
       </div>
     </div>
-  );
+  )
 }
diff --git a/src/module/common/button.tsx b/src/module/common/button.tsx
index dcd4c35..df3e3cf 100644
--- a/src/module/common/button.tsx
+++ b/src/module/common/button.tsx
@@ -1,28 +1,109 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import React from "react";
+import { cva, type VariantProps } from 'class-variance-authority'
+import React from 'react'
 
 export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}
-const buttonVariants = cva(["btn"], {
-  variants: {
-    intent: {
-      default: [],
-      outline: ["btn-outline"],
+const buttonVariants = cva(
+  ['btn', 'overflow-hidden', 'relative', 'rounded', 'border','transition-all','duration-500'],
+  {
+    variants: {
+      variant: {
+        primary: 'bg-btn-blue',
+        secondary: 'transparent',
+      },
+      size: {
+        medium: 'px-6 py-2.5 w-400 mb-5',
+      },
+      animation: {
+        'login-gradient': `
+      relative z-10
+      before:content-['']
+      before:rounded-full
+      before:absolute 
+      before:bg-login-hover 
+      before:top-0 
+      before:left-0 
+      before:-translate-x-1/2
+      before:-translate-y-1/2
+      before:w-0 
+      before:h-0 
+      before:z-0
+      before:transition-width 
+      before:duration-500 
+      before:ease-in-out 
+      before:transition-height 
+      before:duration-500 
+      before:ease-in-out 
+      hover:before:-z-50
+      hover:before:w-btn-w-cover 
+      hover:before:h-btn-h-cover`,
+        'register-gradient': `
+      relative z-10
+      before:content-['']
+      before:rounded-full
+      before:absolute 
+      before:bg-login-hover 
+      before:top-0 
+      before:left-0 
+      before:-translate-x-1/2
+      before:-translate-y-1/2
+      before:w-0 
+      before:h-0 
+      before:z-0
+      before:transition-width 
+      before:duration-500 
+      before:ease-in-out 
+      before:transition-height 
+      before:duration-500 
+      before:ease-in-out 
+      hover:before:-z-50
+      hover:text-white
+      hover:before:w-btn-w-cover 
+      hover:before:h-btn-h-cover
+      `,
+      },
+      intent: {
+        default: [],
+        outline: ['btn-outline'],
+      },
+      textColor: {
+        white: 'text-white',
+        blue: 'text-btn-blue',
+      },
     },
-  },
-  defaultVariants: {
-    intent: "default",
-  },
-});
+    defaultVariants: {
+      intent: 'default',
+    },
+  }
+)
 
 type Props = {
-  children: React.ReactNode;
+  children: React.ReactNode
 } & React.ButtonHTMLAttributes<HTMLButtonElement> &
-  ButtonVariants;
+  ButtonVariants
 
-export function Button({ children, intent, ...props }: Props) {
+export function Button({
+  children,
+  variant,
+  animation,
+  size,
+  intent,
+  textColor,
+  type = 'button',
+  ...props
+}: Props) {
   return (
-    <button className={buttonVariants({ intent })} {...props}>
+    <button
+      className={buttonVariants({
+        variant,
+        intent,
+        size,
+        animation,
+        textColor,
+      })}
+      type={type}
+      {...props}
+    >
       {children}
     </button>
-  );
+  )
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0be8901..310c8ff 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,3 @@
-import daisyUi from "daisyui";
 import type { Config } from "tailwindcss";
 
 const config: Config = {
@@ -10,13 +9,18 @@ const config: Config = {
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      colors:{
+        "btn-blue":"rgb(112, 187, 253)",
+        "login-hover":"#3ea3fc"
+      },
+      width:{
+        "btn-w-cover":"255%",
+        "400":"400px"
+      },
+      height:{
+        "btn-h-cover":"500%"
+      }
     },
   },
-  plugins: [daisyUi],
-
-  daisyui: {
-    themes: ["light", "dark"],
-  },
-  darkMode: ["selector", '[data-theme="dark"]'],
 };
 export default config;
diff --git a/yarn.lock b/yarn.lock
index 1b7b880..58c7adf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -435,7 +435,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/runtime@^7.0.0":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.21.0":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
   integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
@@ -1827,7 +1827,7 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2013,6 +2013,21 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+concurrently@^8.2.2:
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-8.2.2.tgz#353141985c198cfa5e4a3ef90082c336b5851784"
+  integrity sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==
+  dependencies:
+    chalk "^4.1.2"
+    date-fns "^2.30.0"
+    lodash "^4.17.21"
+    rxjs "^7.8.1"
+    shell-quote "^1.8.1"
+    spawn-command "0.0.2"
+    supports-color "^8.1.1"
+    tree-kill "^1.2.2"
+    yargs "^17.7.2"
+
 constant-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
@@ -2060,14 +2075,6 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-css-selector-tokenizer@^0.8:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
-  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
-  dependencies:
-    cssesc "^3.0.0"
-    fastparse "^1.1.2"
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -2078,21 +2085,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-culori@^3:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
-  integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
-
-daisyui@^4.12.10:
-  version "4.12.10"
-  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.12.10.tgz#fc26b6da72c5855f4677d2f100f02e06c8e8a70f"
-  integrity sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==
-  dependencies:
-    css-selector-tokenizer "^0.8"
-    culori "^3"
-    picocolors "^1"
-    postcss-js "^4"
-
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -2130,6 +2122,13 @@ dataloader@^2.2.2:
   resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-2.2.2.tgz#216dc509b5abe39d43a9b9d97e6e5e473dfbe3e0"
   integrity sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debounce@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -2720,11 +2719,6 @@ fast-url-parser@^1.1.3:
   dependencies:
     punycode "^1.3.2"
 
-fastparse@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
-  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
-
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
@@ -4153,7 +4147,7 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-picocolors@^1, picocolors@^1.0.0, picocolors@^1.0.1:
+picocolors@^1.0.0, picocolors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
@@ -4187,7 +4181,7 @@ postcss-import@^15.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4, postcss-js@^4.0.1:
+postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
@@ -4493,7 +4487,7 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-rxjs@^7.5.5:
+rxjs@^7.5.5, rxjs@^7.8.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
   integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
@@ -4604,7 +4598,7 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.7.3:
+shell-quote@^1.7.3, shell-quote@^1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
@@ -4670,6 +4664,11 @@ source-map-js@^1.0.2, source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+spawn-command@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+  integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
+
 sponge-case@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sponge-case/-/sponge-case-1.0.1.tgz#260833b86453883d974f84854cdb63aecc5aef4c"
@@ -4862,6 +4861,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -4967,6 +4973,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
 ts-api-utils@^1.0.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
@@ -5368,7 +5379,7 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yargs@^17.0.0:
+yargs@^17.0.0, yargs@^17.7.2:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==

From fc1dbc4a9e32ec91b137cf1f8c9e3ec9eaed4584 Mon Sep 17 00:00:00 2001
From: Shiyu Chen <42055092+s3713434@users.noreply.github.com>
Date: Sun, 4 Aug 2024 15:05:00 +1000
Subject: [PATCH 2/7] finishing checkbox and change some var names :3

---
 src/module/auth/login-form.tsx |  20 ++++-
 src/module/common/button.tsx   |  68 ++++----------
 src/module/common/checkbox.tsx | 160 +++++++++++++++++++++++++++++++++
 src/module/common/label.tsx    |  50 +++++++++++
 tailwind.config.ts             |  29 +++---
 5 files changed, 259 insertions(+), 68 deletions(-)
 create mode 100644 src/module/common/checkbox.tsx
 create mode 100644 src/module/common/label.tsx

diff --git a/src/module/auth/login-form.tsx b/src/module/auth/login-form.tsx
index 0eae42c..01896a4 100644
--- a/src/module/auth/login-form.tsx
+++ b/src/module/auth/login-form.tsx
@@ -10,6 +10,7 @@ import Link from 'next/link'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { login, LoginPayload } from './auth-service'
+import { Checkbox } from '../common/checkbox'
 
 const formSchema = z.object({
   email: z.string().email(),
@@ -75,15 +76,28 @@ export function LoginForm() {
               </span>
             </Link>
           </div>
-
+          <div>
+            <Checkbox label='Remember me'/>
+          </div>
           {/* <ErrorText styleClass="mt-8">{errorMessage}</ErrorText> */}
-          <Button type='submit' variant='primary' textColor='white' animation='login-gradient' size='medium'>
+          <Button
+            type='submit'
+            variant='primary'
+            textColor='white'
+            animation='growing-bubble-tl-primary'
+            size='medium'
+          >
             Login
           </Button>
 
           <div className='text-center'>
             <Link href='/register'>
-              <Button variant='secondary' textColor='blue' size='medium' animation='register-gradient'>
+              <Button
+                variant='secondary'
+                textColor='blue'
+                size='medium'
+                animation='growing-bubble-tl-secondary'
+              >
                 Register
               </Button>
             </Link>
diff --git a/src/module/common/button.tsx b/src/module/common/button.tsx
index df3e3cf..9d6351d 100644
--- a/src/module/common/button.tsx
+++ b/src/module/common/button.tsx
@@ -3,71 +3,37 @@ import React from 'react'
 
 export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}
 const buttonVariants = cva(
-  ['btn', 'overflow-hidden', 'relative', 'rounded', 'border','transition-all','duration-500'],
+  [
+    'btn',
+    'overflow-hidden',
+    'relative',
+    'rounded',
+    'border',
+    'transition-all',
+    'duration-500',
+  ],
   {
     variants: {
       variant: {
-        primary: 'bg-btn-blue',
+        primary: 'bg-primary-300',
         secondary: 'transparent',
       },
       size: {
         medium: 'px-6 py-2.5 w-400 mb-5',
       },
       animation: {
-        'login-gradient': `
-      relative z-10
-      before:content-['']
-      before:rounded-full
-      before:absolute 
-      before:bg-login-hover 
-      before:top-0 
-      before:left-0 
-      before:-translate-x-1/2
-      before:-translate-y-1/2
-      before:w-0 
-      before:h-0 
-      before:z-0
-      before:transition-width 
-      before:duration-500 
-      before:ease-in-out 
-      before:transition-height 
-      before:duration-500 
-      before:ease-in-out 
-      hover:before:-z-50
-      hover:before:w-btn-w-cover 
-      hover:before:h-btn-h-cover`,
-        'register-gradient': `
-      relative z-10
-      before:content-['']
-      before:rounded-full
-      before:absolute 
-      before:bg-login-hover 
-      before:top-0 
-      before:left-0 
-      before:-translate-x-1/2
-      before:-translate-y-1/2
-      before:w-0 
-      before:h-0 
-      before:z-0
-      before:transition-width 
-      before:duration-500 
-      before:ease-in-out 
-      before:transition-height 
-      before:duration-500 
-      before:ease-in-out 
-      hover:before:-z-50
-      hover:text-white
-      hover:before:w-btn-w-cover 
-      hover:before:h-btn-h-cover
-      `,
+        'growing-bubble-tl-primary':
+          ' relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:before:w-btn-w-cover hover:before:h-btn-h-cover',
+        'growing-bubble-tl-secondary':
+          'relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:text-white hover:before:w-btn-w-cover hover:before:h-btn-h-cover ',
       },
       intent: {
-        default: [],
-        outline: ['btn-outline'],
+        default: '',
+        outline: '',
       },
       textColor: {
         white: 'text-white',
-        blue: 'text-btn-blue',
+        blue: 'primary-300',
       },
     },
     defaultVariants: {
diff --git a/src/module/common/checkbox.tsx b/src/module/common/checkbox.tsx
new file mode 100644
index 0000000..7ead337
--- /dev/null
+++ b/src/module/common/checkbox.tsx
@@ -0,0 +1,160 @@
+// import React from 'react'
+// import { cva, type VariantProps } from 'class-variance-authority'
+// import { Label } from './label'
+
+// export interface CheckboxVariants
+//   extends VariantProps<typeof checkboxVariants> {}
+
+// const checkboxVariants = cva(
+//   [
+//     'size-[18px]',
+//     'focus:outline-none',
+//     'focus:ring-0',
+//     'focus:ring-offset-0',
+//     'rounded',
+//     'cursor-pointer'
+//   ],
+//   {
+//     variants: {
+//       variant: {
+//         primary: 'border border-solid border-2',
+//       },
+//       background: {
+//         default: 'bg-transparent',
+//       },
+//     },
+//     defaultVariants: {
+//       variant: 'primary',
+//       background: 'default',
+//     },
+//   }
+// )
+
+// type CheckboxProps = {
+//   label?: React.ReactNode
+// } & React.InputHTMLAttributes<HTMLInputElement> &
+//   CheckboxVariants
+
+// export function Checkbox({
+//   label,
+//   variant,
+//   background,
+//   type = 'checkbox',
+//   ...props
+// }: CheckboxProps) {
+//   return (
+//     <label className='flex items-center gap-2 bg-transparent'>
+//       <input
+//         className={checkboxVariants({
+//           variant,
+//           background,
+//         })}
+//         type={type}
+//         {...props}
+//       />
+//       {label && <Label>{label}</Label>}
+//     </label>
+//   )
+// }
+
+
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Label } from './label'
+
+export interface CheckboxVariants
+  extends VariantProps<typeof checkboxVariants> {}
+
+const checkboxVariants = cva(
+  [
+    'appearance-none',
+    'size-[18px]',
+    'bg-transparent',
+    'border',
+    'border-solid',
+    'rounded',
+    'focus:outline-none',
+    'focus:ring-0',
+    'focus:ring-offset-0',
+    'cursor-pointer',
+    'peer',
+    'transition-all',
+    'duration-500',
+    'group-hover:border-primary-300',
+  ],
+  {
+    variants: {
+      variant: {
+        primary: 'border-gary-layout-primary',
+      },
+      size: {
+        small: 'text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'small',
+    },
+  }
+)
+
+const svgVariants = cva(
+  [
+    'size-4',
+    'cursor-pointer',
+    'opacity-0',
+    'peer-checked:opacity-100',
+    'transition-opacity',
+    'duration-300',
+  ],
+  {
+    variants: {
+      variant: {
+        primary: 'primary-300',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+    },
+  }
+)
+
+type CheckboxProps = {
+  label?: React.ReactNode
+} & React.InputHTMLAttributes<HTMLInputElement> &
+  CheckboxVariants
+
+export function Checkbox({
+  label,
+  variant,
+  color,
+  type = 'checkbox',
+  ...props
+}: CheckboxProps) {
+  return (
+    <label className='flex items-center gap-2 group'>
+      <div className='relative flex items-center'>
+        <input
+          className={checkboxVariants({ variant })}
+          type={type}
+          {...props}
+        />
+        <svg
+          className={svgVariants({ variant })}
+          fill='#70bbfd'
+          viewBox='0 0 24 24'
+          xmlns='http://www.w3.org/2000/svg'
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+        >
+          <path d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z' />
+        </svg>
+      </div>
+      {label && <Label>{label}</Label>}
+    </label>
+  )
+}
diff --git a/src/module/common/label.tsx b/src/module/common/label.tsx
new file mode 100644
index 0000000..a30e02a
--- /dev/null
+++ b/src/module/common/label.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const labelVariants = cva(
+  [
+    'label',
+    'cursor-pointer',
+    'transition-all',
+    'duration-500',
+    'group-hover:text-primary-300',
+  ],
+  {
+    variants: {
+      color: {
+        white: 'text-white',
+      },
+      size: {
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+      },
+      fontWeight: {
+        normal: 'font-normal',
+        bold: 'font-bold',
+      },
+    },
+    defaultVariants: {
+      color: 'white',
+      size: 'small',
+      fontWeight: 'normal',
+    },
+  }
+)
+
+type LabelProps = {
+  children: React.ReactNode
+} & VariantProps<typeof labelVariants>
+
+export const Label: React.FC<LabelProps> = ({
+  children,
+  color,
+  size,
+  fontWeight,
+}) => {
+  return (
+    <span className={labelVariants({ color, size, fontWeight })}>
+      {children}
+    </span>
+  )
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 310c8ff..46aa404 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,26 +1,27 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
-      colors:{
-        "btn-blue":"rgb(112, 187, 253)",
-        "login-hover":"#3ea3fc"
+      colors: {
+        'primary-300': '#70bbfd',
+        'primary-500': '#3ea3fc',
+        'gary-layout-primary': 'rgb(96, 95, 123)',
       },
-      width:{
-        "btn-w-cover":"255%",
-        "400":"400px"
+      width: {
+        'btn-w-cover': '255%',
+        '400': '400px',
+      },
+      height: {
+        'btn-h-cover': '500%',
       },
-      height:{
-        "btn-h-cover":"500%"
-      }
     },
   },
-};
+}
 export default config;

From a9ba741c5216e45d1d00dcc7cb4bf82980c9afb9 Mon Sep 17 00:00:00 2001
From: Shiyu Chen <42055092+s3713434@users.noreply.github.com>
Date: Sun, 4 Aug 2024 15:07:58 +1000
Subject: [PATCH 3/7] damn forgot to delete the comments

---
 src/module/common/checkbox.tsx | 60 ----------------------------------
 1 file changed, 60 deletions(-)

diff --git a/src/module/common/checkbox.tsx b/src/module/common/checkbox.tsx
index 7ead337..9dc2059 100644
--- a/src/module/common/checkbox.tsx
+++ b/src/module/common/checkbox.tsx
@@ -1,63 +1,3 @@
-// import React from 'react'
-// import { cva, type VariantProps } from 'class-variance-authority'
-// import { Label } from './label'
-
-// export interface CheckboxVariants
-//   extends VariantProps<typeof checkboxVariants> {}
-
-// const checkboxVariants = cva(
-//   [
-//     'size-[18px]',
-//     'focus:outline-none',
-//     'focus:ring-0',
-//     'focus:ring-offset-0',
-//     'rounded',
-//     'cursor-pointer'
-//   ],
-//   {
-//     variants: {
-//       variant: {
-//         primary: 'border border-solid border-2',
-//       },
-//       background: {
-//         default: 'bg-transparent',
-//       },
-//     },
-//     defaultVariants: {
-//       variant: 'primary',
-//       background: 'default',
-//     },
-//   }
-// )
-
-// type CheckboxProps = {
-//   label?: React.ReactNode
-// } & React.InputHTMLAttributes<HTMLInputElement> &
-//   CheckboxVariants
-
-// export function Checkbox({
-//   label,
-//   variant,
-//   background,
-//   type = 'checkbox',
-//   ...props
-// }: CheckboxProps) {
-//   return (
-//     <label className='flex items-center gap-2 bg-transparent'>
-//       <input
-//         className={checkboxVariants({
-//           variant,
-//           background,
-//         })}
-//         type={type}
-//         {...props}
-//       />
-//       {label && <Label>{label}</Label>}
-//     </label>
-//   )
-// }
-
-
 import React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Label } from './label'

From fe21595cca749aeed83ebcbd7dea259787382817 Mon Sep 17 00:00:00 2001
From: Shiyu Chen <42055092+s3713434@users.noreply.github.com>
Date: Mon, 5 Aug 2024 18:06:34 +1000
Subject: [PATCH 4/7] change the format style

---
 src/module/auth/login-form.tsx | 88 +++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/module/auth/login-form.tsx b/src/module/auth/login-form.tsx
index 01896a4..3fdf63b 100644
--- a/src/module/auth/login-form.tsx
+++ b/src/module/auth/login-form.tsx
@@ -1,21 +1,21 @@
-'use client'
-import { zodResolver } from '@hookform/resolvers/zod'
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Button,
   ControlledPasswordInput,
   ControlledTextInput,
   Icon,
-} from '@src/module/common'
-import Link from 'next/link'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { login, LoginPayload } from './auth-service'
-import { Checkbox } from '../common/checkbox'
+} from "@src/module/common";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { login, LoginPayload } from "./auth-service";
+import { Checkbox } from "../common/checkbox";
 
 const formSchema = z.object({
   email: z.string().email(),
   password: z.string().min(8),
-})
+});
 
 export function LoginForm() {
   const {
@@ -25,78 +25,78 @@ export function LoginForm() {
     setError,
   } = useForm({
     defaultValues: {
-      email: '',
-      password: '',
+      email: "",
+      password: "",
     },
     resolver: zodResolver(formSchema),
-  })
+  });
 
   async function action(payload: LoginPayload) {
-    const res = await login(payload)
+    const res = await login(payload);
 
     if (res?.error) {
-      console.log(res.error)
-      setError('root', { message: res.error })
+      console.log(res.error);
+      setError("root", { message: res.error });
     }
   }
 
   const onSubmit = handleSubmit((data) => {
-    console.log('wtf', data)
-    action(data)
-  })
+    console.log("wtf", data);
+    action(data);
+  });
 
   return (
-    <div className='card mx-auto w-full max-w-5xl shadow-slate-500 dark:shadow-sky-400  shadow-2xl min-h-96 py-4 flex justify-center items-center'>
-      <div className=' mx-auto h-full'>
-        <h2 className='text-2xl font-semibold mb-2 text-center'>Login</h2>
+    <div className="card mx-auto w-full max-w-5xl shadow-slate-500 dark:shadow-sky-400  shadow-2xl min-h-96 py-4 flex justify-center items-center">
+      <div className=" mx-auto h-full">
+        <h2 className="text-2xl font-semibold mb-2 text-center">Login</h2>
         <form onSubmit={onSubmit}>
           {errors.root && (
-            <span className='text-error'>{errors.root.message}</span>
+            <span className="text-error">{errors.root.message}</span>
           )}
 
-          <div className='mb-4'>
+          <div className="mb-4">
             <ControlledTextInput
-              name='email'
+              name="email"
               control={control}
-              leftElement={<Icon icon='person' />}
-              autoComplete='username'
+              leftElement={<Icon icon="person" />}
+              autoComplete="username"
             />
 
             <ControlledPasswordInput
-              name='password'
+              name="password"
               control={control}
-              autoComplete='current-password'
+              autoComplete="current-password"
             />
           </div>
 
-          <div className='text-right text-primary'>
-            <Link href='/forgot-password'>
-              <span className='text-sm  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200'>
+          <div className="text-right text-primary">
+            <Link href="/forgot-password">
+              <span className="text-sm  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
                 Forgot Password?
               </span>
             </Link>
           </div>
           <div>
-            <Checkbox label='Remember me'/>
+            <Checkbox label="Remember me" />
           </div>
           {/* <ErrorText styleClass="mt-8">{errorMessage}</ErrorText> */}
           <Button
-            type='submit'
-            variant='primary'
-            textColor='white'
-            animation='growing-bubble-tl-primary'
-            size='medium'
+            type="submit"
+            variant="primary"
+            textColor="white"
+            animation="growing-bubble-tl-primary"
+            size="medium"
           >
             Login
           </Button>
 
-          <div className='text-center'>
-            <Link href='/register'>
+          <div className="text-center">
+            <Link href="/register">
               <Button
-                variant='secondary'
-                textColor='blue'
-                size='medium'
-                animation='growing-bubble-tl-secondary'
+                variant="secondary"
+                textColor="blue"
+                size="medium"
+                animation="growing-bubble-tl-secondary"
               >
                 Register
               </Button>
@@ -105,5 +105,5 @@ export function LoginForm() {
         </form>
       </div>
     </div>
-  )
+  );
 }

From 398cc27a131a590e2d48dc1a3d7a03e939d8c54c Mon Sep 17 00:00:00 2001
From: Shiyu Chen <42055092+s3713434@users.noreply.github.com>
Date: Mon, 5 Aug 2024 18:06:53 +1000
Subject: [PATCH 5/7] change the formatting style

---
 src/module/common/button.tsx   | 52 ++++++++++----------
 src/module/common/checkbox.tsx | 90 +++++++++++++++++-----------------
 src/module/common/label.tsx    | 42 ++++++++--------
 3 files changed, 92 insertions(+), 92 deletions(-)

diff --git a/src/module/common/button.tsx b/src/module/common/button.tsx
index 9d6351d..212eab8 100644
--- a/src/module/common/button.tsx
+++ b/src/module/common/button.tsx
@@ -1,51 +1,51 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import React from 'react'
+import { cva, type VariantProps } from "class-variance-authority";
+import React from "react";
 
 export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}
 const buttonVariants = cva(
   [
-    'btn',
-    'overflow-hidden',
-    'relative',
-    'rounded',
-    'border',
-    'transition-all',
-    'duration-500',
+    "btn",
+    "overflow-hidden",
+    "relative",
+    "rounded",
+    "border",
+    "transition-all",
+    "duration-500",
   ],
   {
     variants: {
       variant: {
-        primary: 'bg-primary-300',
-        secondary: 'transparent',
+        primary: "bg-primary-300",
+        secondary: "transparent",
       },
       size: {
-        medium: 'px-6 py-2.5 w-400 mb-5',
+        medium: "px-6 py-2.5 w-400 mb-5",
       },
       animation: {
-        'growing-bubble-tl-primary':
-          ' relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:before:w-btn-w-cover hover:before:h-btn-h-cover',
-        'growing-bubble-tl-secondary':
-          'relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:text-white hover:before:w-btn-w-cover hover:before:h-btn-h-cover ',
+        "growing-bubble-tl-primary":
+          " relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:before:w-btn-w-cover hover:before:h-btn-h-cover",
+        "growing-bubble-tl-secondary":
+          "relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:text-white hover:before:w-btn-w-cover hover:before:h-btn-h-cover ",
       },
       intent: {
-        default: '',
-        outline: '',
+        default: "",
+        outline: "",
       },
       textColor: {
-        white: 'text-white',
-        blue: 'primary-300',
+        white: "text-white",
+        blue: "primary-300",
       },
     },
     defaultVariants: {
-      intent: 'default',
+      intent: "default",
     },
   }
-)
+);
 
 type Props = {
-  children: React.ReactNode
+  children: React.ReactNode;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> &
-  ButtonVariants
+  ButtonVariants;
 
 export function Button({
   children,
@@ -54,7 +54,7 @@ export function Button({
   size,
   intent,
   textColor,
-  type = 'button',
+  type = "button",
   ...props
 }: Props) {
   return (
@@ -71,5 +71,5 @@ export function Button({
     >
       {children}
     </button>
-  )
+  );
 }
diff --git a/src/module/common/checkbox.tsx b/src/module/common/checkbox.tsx
index 9dc2059..1821fc3 100644
--- a/src/module/common/checkbox.tsx
+++ b/src/module/common/checkbox.tsx
@@ -1,79 +1,79 @@
-import React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { Label } from './label'
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Label } from "./label";
 
 export interface CheckboxVariants
   extends VariantProps<typeof checkboxVariants> {}
 
 const checkboxVariants = cva(
   [
-    'appearance-none',
-    'size-[18px]',
-    'bg-transparent',
-    'border',
-    'border-solid',
-    'rounded',
-    'focus:outline-none',
-    'focus:ring-0',
-    'focus:ring-offset-0',
-    'cursor-pointer',
-    'peer',
-    'transition-all',
-    'duration-500',
-    'group-hover:border-primary-300',
+    "appearance-none",
+    "size-[18px]",
+    "bg-transparent",
+    "border",
+    "border-solid",
+    "rounded",
+    "focus:outline-none",
+    "focus:ring-0",
+    "focus:ring-offset-0",
+    "cursor-pointer",
+    "peer",
+    "transition-all",
+    "duration-500",
+    "group-hover:border-primary-300",
   ],
   {
     variants: {
       variant: {
-        primary: 'border-gary-layout-primary',
+        primary: "border-gary-layout-primary",
       },
       size: {
-        small: 'text-sm',
+        small: "text-sm",
       },
     },
     defaultVariants: {
-      variant: 'primary',
-      size: 'small',
+      variant: "primary",
+      size: "small",
     },
   }
-)
+);
 
 const svgVariants = cva(
   [
-    'size-4',
-    'cursor-pointer',
-    'opacity-0',
-    'peer-checked:opacity-100',
-    'transition-opacity',
-    'duration-300',
+    "size-4",
+    "cursor-pointer",
+    "opacity-0",
+    "peer-checked:opacity-100",
+    "transition-opacity",
+    "duration-300",
   ],
   {
     variants: {
       variant: {
-        primary: 'primary-300',
+        primary: "primary-300",
       },
     },
     defaultVariants: {
-      variant: 'primary',
+      variant: "primary",
     },
   }
-)
+);
 
 type CheckboxProps = {
-  label?: React.ReactNode
+  label?: React.ReactNode;
 } & React.InputHTMLAttributes<HTMLInputElement> &
-  CheckboxVariants
+  CheckboxVariants;
 
 export function Checkbox({
   label,
   variant,
   color,
-  type = 'checkbox',
+  type = "checkbox",
   ...props
 }: CheckboxProps) {
   return (
-    <label className='flex items-center gap-2 group'>
-      <div className='relative flex items-center'>
+    <label className="flex items-center gap-2 group">
+      <div className="relative flex items-center">
         <input
           className={checkboxVariants({ variant })}
           type={type}
@@ -81,20 +81,20 @@ export function Checkbox({
         />
         <svg
           className={svgVariants({ variant })}
-          fill='#70bbfd'
-          viewBox='0 0 24 24'
-          xmlns='http://www.w3.org/2000/svg'
+          fill="#70bbfd"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
           style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
           }}
         >
-          <path d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z' />
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
         </svg>
       </div>
       {label && <Label>{label}</Label>}
     </label>
-  )
+  );
 }
diff --git a/src/module/common/label.tsx b/src/module/common/label.tsx
index a30e02a..34452e0 100644
--- a/src/module/common/label.tsx
+++ b/src/module/common/label.tsx
@@ -1,40 +1,40 @@
-import React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
 const labelVariants = cva(
   [
-    'label',
-    'cursor-pointer',
-    'transition-all',
-    'duration-500',
-    'group-hover:text-primary-300',
+    "label",
+    "cursor-pointer",
+    "transition-all",
+    "duration-500",
+    "group-hover:text-primary-300",
   ],
   {
     variants: {
       color: {
-        white: 'text-white',
+        white: "text-white",
       },
       size: {
-        small: 'text-sm',
-        medium: 'text-base',
-        large: 'text-lg',
+        small: "text-sm",
+        medium: "text-base",
+        large: "text-lg",
       },
       fontWeight: {
-        normal: 'font-normal',
-        bold: 'font-bold',
+        normal: "font-normal",
+        bold: "font-bold",
       },
     },
     defaultVariants: {
-      color: 'white',
-      size: 'small',
-      fontWeight: 'normal',
+      color: "white",
+      size: "small",
+      fontWeight: "normal",
     },
   }
-)
+);
 
 type LabelProps = {
-  children: React.ReactNode
-} & VariantProps<typeof labelVariants>
+  children: React.ReactNode;
+} & VariantProps<typeof labelVariants>;
 
 export const Label: React.FC<LabelProps> = ({
   children,
@@ -46,5 +46,5 @@ export const Label: React.FC<LabelProps> = ({
     <span className={labelVariants({ color, size, fontWeight })}>
       {children}
     </span>
-  )
-}
+  );
+};

From d0e68ec8cfaec740734c8a83059ce45bdb2ea4fa Mon Sep 17 00:00:00 2001
From: Shiyu Chen <42055092+s3713434@users.noreply.github.com>
Date: Mon, 5 Aug 2024 18:06:53 +1000
Subject: [PATCH 6/7] change the formatting style

---
 src/module/common/button.tsx   |  59 +++++++++++++++----
 src/module/common/checkbox.tsx | 100 +++++++++++++++++++++++++++++++++
 src/module/common/label.tsx    |  50 +++++++++++++++++
 3 files changed, 198 insertions(+), 11 deletions(-)
 create mode 100644 src/module/common/checkbox.tsx
 create mode 100644 src/module/common/label.tsx

diff --git a/src/module/common/button.tsx b/src/module/common/button.tsx
index dcd4c35..f7f9fb5 100644
--- a/src/module/common/button.tsx
+++ b/src/module/common/button.tsx
@@ -2,24 +2,61 @@ import { cva, type VariantProps } from "class-variance-authority";
 import React from "react";
 
 export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}
-const buttonVariants = cva(["btn"], {
-  variants: {
-    intent: {
-      default: [],
-      outline: ["btn-outline"],
+const buttonVariants = cva(
+  [
+    "btn",
+    "overflow-hidden",
+    "relative",
+    "rounded",
+    "border",
+    "transition-all",
+    "duration-500",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary-300",
+        secondary: "transparent",
+      },
+      size: {
+        medium: "px-6 py-2.5 w-400 mb-5",
+      },
+      animation: {
+        "growing-bubble-tl-primary":
+          " relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:before:w-btn-w-cover hover:before:h-btn-h-cover",
+        "growing-bubble-tl-secondary":
+          "relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:text-white hover:before:w-btn-w-cover hover:before:h-btn-h-cover ",
+      },
+      intent: {
+        default: "",
+        outline: "",
+      },
+      textColor: {
+        white: "text-white",
+        blue: "primary-300",
+      },
     },
-  },
-  defaultVariants: {
-    intent: "default",
-  },
-});
+    defaultVariants: {
+      intent: "default",
+    },
+  }
+);
 
 type Props = {
   children: React.ReactNode;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> &
   ButtonVariants;
 
-export function Button({ children, intent, ...props }: Props) {
+export function Button({
+  children,
+  variant,
+  animation,
+  size,
+  intent,
+  textColor,
+  type = "button",
+  ...props
+}: Props) {
   return (
     <button className={buttonVariants({ intent })} {...props}>
       {children}
diff --git a/src/module/common/checkbox.tsx b/src/module/common/checkbox.tsx
new file mode 100644
index 0000000..1821fc3
--- /dev/null
+++ b/src/module/common/checkbox.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Label } from "./label";
+
+export interface CheckboxVariants
+  extends VariantProps<typeof checkboxVariants> {}
+
+const checkboxVariants = cva(
+  [
+    "appearance-none",
+    "size-[18px]",
+    "bg-transparent",
+    "border",
+    "border-solid",
+    "rounded",
+    "focus:outline-none",
+    "focus:ring-0",
+    "focus:ring-offset-0",
+    "cursor-pointer",
+    "peer",
+    "transition-all",
+    "duration-500",
+    "group-hover:border-primary-300",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "border-gary-layout-primary",
+      },
+      size: {
+        small: "text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "small",
+    },
+  }
+);
+
+const svgVariants = cva(
+  [
+    "size-4",
+    "cursor-pointer",
+    "opacity-0",
+    "peer-checked:opacity-100",
+    "transition-opacity",
+    "duration-300",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "primary-300",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  }
+);
+
+type CheckboxProps = {
+  label?: React.ReactNode;
+} & React.InputHTMLAttributes<HTMLInputElement> &
+  CheckboxVariants;
+
+export function Checkbox({
+  label,
+  variant,
+  color,
+  type = "checkbox",
+  ...props
+}: CheckboxProps) {
+  return (
+    <label className="flex items-center gap-2 group">
+      <div className="relative flex items-center">
+        <input
+          className={checkboxVariants({ variant })}
+          type={type}
+          {...props}
+        />
+        <svg
+          className={svgVariants({ variant })}
+          fill="#70bbfd"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+        </svg>
+      </div>
+      {label && <Label>{label}</Label>}
+    </label>
+  );
+}
diff --git a/src/module/common/label.tsx b/src/module/common/label.tsx
new file mode 100644
index 0000000..34452e0
--- /dev/null
+++ b/src/module/common/label.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const labelVariants = cva(
+  [
+    "label",
+    "cursor-pointer",
+    "transition-all",
+    "duration-500",
+    "group-hover:text-primary-300",
+  ],
+  {
+    variants: {
+      color: {
+        white: "text-white",
+      },
+      size: {
+        small: "text-sm",
+        medium: "text-base",
+        large: "text-lg",
+      },
+      fontWeight: {
+        normal: "font-normal",
+        bold: "font-bold",
+      },
+    },
+    defaultVariants: {
+      color: "white",
+      size: "small",
+      fontWeight: "normal",
+    },
+  }
+);
+
+type LabelProps = {
+  children: React.ReactNode;
+} & VariantProps<typeof labelVariants>;
+
+export const Label: React.FC<LabelProps> = ({
+  children,
+  color,
+  size,
+  fontWeight,
+}) => {
+  return (
+    <span className={labelVariants({ color, size, fontWeight })}>
+      {children}
+    </span>
+  );
+};

From f679558a20bc7af2fe00cb169c32fc21983465a6 Mon Sep 17 00:00:00 2001
From: norriswu0 <norris.wu.au+github@outlook.com>
Date: Tue, 6 Aug 2024 00:15:27 +1000
Subject: [PATCH 7/7] add missing tailwind class sorting plugin for prettier

---
 .prettierrc                                   |  7 +++++
 .vscode/settings.json                         | 12 ++------
 src/app/(auth)/layout.tsx                     |  2 +-
 src/app/(protected)/dashboard/layout.tsx      |  4 +--
 src/module/auth/login-form.tsx                | 10 +++----
 src/module/auth/user-store.ts                 |  2 +-
 src/module/common/button.tsx                  | 18 ++++--------
 src/module/common/checkbox.tsx                | 25 ++++-------------
 src/module/common/label.tsx                   |  2 +-
 src/module/dashboard/components/header.tsx    |  4 +--
 .../dashboard/components/left-sidebar.tsx     | 28 +++++++++----------
 .../dashboard/components/sidebar-submenu.tsx  | 12 ++++----
 src/module/system/theme-store.ts              |  4 +--
 src/module/system/theme-switcher.tsx          |  4 +--
 tailwind.config.ts                            | 22 +++++++--------
 15 files changed, 67 insertions(+), 89 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..b9a04f4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx", "cn", "twmerge", "cva"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index cbc3061..b446483 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,12 +1,6 @@
 {
   "tailwindCSS.experimental.classRegex": [
-    [
-      "cva\\(([^)]*)\\)",
-      "[\"'`]([^\"'`]*).*?[\"'`]"
-    ],
-    [
-      "cx\\(([^)]*)\\)",
-      "(?:'|\"|`)([^']*)(?:'|\"|`)"
-    ]
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ]
-}
\ No newline at end of file
+}
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index 6283479..f39976d 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -5,6 +5,6 @@ type Props = {
 };
 export default function Layout({ children }: Props) {
   return (
-    <div className="flex items-center justify-center h-screen">{children}</div>
+    <div className="flex h-screen items-center justify-center">{children}</div>
   );
 }
diff --git a/src/app/(protected)/dashboard/layout.tsx b/src/app/(protected)/dashboard/layout.tsx
index 8da6883..285ae54 100644
--- a/src/app/(protected)/dashboard/layout.tsx
+++ b/src/app/(protected)/dashboard/layout.tsx
@@ -14,9 +14,9 @@ export default function ProtectedLayout({ children }: { children: ReactNode }) {
           type="checkbox"
           className="drawer-toggle"
         />
-        <div className="drawer-content flex flex-col ">
+        <div className="drawer-content flex flex-col">
           <Header />
-          <main className="flex-1 overflow-y-auto md:pt-4 pt-4 px-6  bg-base-200">
+          <main className="bg-base-200 flex-1 overflow-y-auto px-6 pt-4 md:pt-4">
             {children}
             <div className="h-16"></div>
           </main>
diff --git a/src/module/auth/login-form.tsx b/src/module/auth/login-form.tsx
index 3fdf63b..db58095 100644
--- a/src/module/auth/login-form.tsx
+++ b/src/module/auth/login-form.tsx
@@ -46,9 +46,9 @@ export function LoginForm() {
   });
 
   return (
-    <div className="card mx-auto w-full max-w-5xl shadow-slate-500 dark:shadow-sky-400  shadow-2xl min-h-96 py-4 flex justify-center items-center">
-      <div className=" mx-auto h-full">
-        <h2 className="text-2xl font-semibold mb-2 text-center">Login</h2>
+    <div className="card mx-auto flex min-h-96 w-full max-w-5xl items-center justify-center py-4 shadow-2xl shadow-slate-500 dark:shadow-sky-400">
+      <div className="mx-auto h-full">
+        <h2 className="mb-2 text-center text-2xl font-semibold">Login</h2>
         <form onSubmit={onSubmit}>
           {errors.root && (
             <span className="text-error">{errors.root.message}</span>
@@ -69,9 +69,9 @@ export function LoginForm() {
             />
           </div>
 
-          <div className="text-right text-primary">
+          <div className="text-primary text-right">
             <Link href="/forgot-password">
-              <span className="text-sm  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
+              <span className="hover:text-primary inline-block text-sm transition duration-200 hover:cursor-pointer hover:underline">
                 Forgot Password?
               </span>
             </Link>
diff --git a/src/module/auth/user-store.ts b/src/module/auth/user-store.ts
index cba18fb..69e627a 100644
--- a/src/module/auth/user-store.ts
+++ b/src/module/auth/user-store.ts
@@ -20,7 +20,7 @@ export const useUser = create(
         console.dir(error);
       };
     },
-  })
+  }),
 );
 
 export const fetchUserInfo = async () => {
diff --git a/src/module/common/button.tsx b/src/module/common/button.tsx
index 212eab8..5a25160 100644
--- a/src/module/common/button.tsx
+++ b/src/module/common/button.tsx
@@ -3,15 +3,7 @@ import React from "react";
 
 export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}
 const buttonVariants = cva(
-  [
-    "btn",
-    "overflow-hidden",
-    "relative",
-    "rounded",
-    "border",
-    "transition-all",
-    "duration-500",
-  ],
+  "relative overflow-hidden rounded border transition-all duration-500",
   {
     variants: {
       variant: {
@@ -19,13 +11,13 @@ const buttonVariants = cva(
         secondary: "transparent",
       },
       size: {
-        medium: "px-6 py-2.5 w-400 mb-5",
+        medium: "mb-5 w-400 px-6 py-2.5",
       },
       animation: {
         "growing-bubble-tl-primary":
-          " relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:before:w-btn-w-cover hover:before:h-btn-h-cover",
+          "before:transition-width before:transition-height relative z-10 before:absolute before:left-0 before:top-0 before:z-0 before:h-0 before:w-0 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-primary-500 before:duration-500 before:ease-in-out hover:before:-z-50 hover:before:h-btn-h-cover hover:before:w-btn-w-cover",
         "growing-bubble-tl-secondary":
-          "relative z-10 before:rounded-full before:absolute before:bg-primary-500 before:top-0 before:left-0 before:-translate-x-1/2 before:-translate-y-1/2 before:w-0 before:h-0 before:z-0 before:transition-width before:duration-500 before:ease-in-out before:transition-height before:duration-500 before:ease-in-out hover:before:-z-50 hover:text-white hover:before:w-btn-w-cover hover:before:h-btn-h-cover ",
+          "before:transition-width before:transition-height relative z-10 before:absolute before:left-0 before:top-0 before:z-0 before:h-0 before:w-0 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-primary-500 before:duration-500 before:ease-in-out hover:text-white hover:before:-z-50 hover:before:h-btn-h-cover hover:before:w-btn-w-cover",
       },
       intent: {
         default: "",
@@ -39,7 +31,7 @@ const buttonVariants = cva(
     defaultVariants: {
       intent: "default",
     },
-  }
+  },
 );
 
 type Props = {
diff --git a/src/module/common/checkbox.tsx b/src/module/common/checkbox.tsx
index 1821fc3..d570784 100644
--- a/src/module/common/checkbox.tsx
+++ b/src/module/common/checkbox.tsx
@@ -1,27 +1,12 @@
-import React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
+import React from "react";
 import { Label } from "./label";
 
 export interface CheckboxVariants
   extends VariantProps<typeof checkboxVariants> {}
 
 const checkboxVariants = cva(
-  [
-    "appearance-none",
-    "size-[18px]",
-    "bg-transparent",
-    "border",
-    "border-solid",
-    "rounded",
-    "focus:outline-none",
-    "focus:ring-0",
-    "focus:ring-offset-0",
-    "cursor-pointer",
-    "peer",
-    "transition-all",
-    "duration-500",
-    "group-hover:border-primary-300",
-  ],
+  "peer size-[18px] cursor-pointer appearance-none rounded border border-solid bg-transparent transition-all duration-500 focus:outline-none focus:ring-0 focus:ring-offset-0 group-hover:border-primary-300",
   {
     variants: {
       variant: {
@@ -35,7 +20,7 @@ const checkboxVariants = cva(
       variant: "primary",
       size: "small",
     },
-  }
+  },
 );
 
 const svgVariants = cva(
@@ -56,7 +41,7 @@ const svgVariants = cva(
     defaultVariants: {
       variant: "primary",
     },
-  }
+  },
 );
 
 type CheckboxProps = {
@@ -72,7 +57,7 @@ export function Checkbox({
   ...props
 }: CheckboxProps) {
   return (
-    <label className="flex items-center gap-2 group">
+    <label className="group flex items-center gap-2">
       <div className="relative flex items-center">
         <input
           className={checkboxVariants({ variant })}
diff --git a/src/module/common/label.tsx b/src/module/common/label.tsx
index 34452e0..fe45b26 100644
--- a/src/module/common/label.tsx
+++ b/src/module/common/label.tsx
@@ -29,7 +29,7 @@ const labelVariants = cva(
       size: "small",
       fontWeight: "normal",
     },
-  }
+  },
 );
 
 type LabelProps = {
diff --git a/src/module/dashboard/components/header.tsx b/src/module/dashboard/components/header.tsx
index c7f61a8..3f3875f 100644
--- a/src/module/dashboard/components/header.tsx
+++ b/src/module/dashboard/components/header.tsx
@@ -9,7 +9,7 @@ import { usePathname } from "next/navigation";
 function Header() {
   const pathname = usePathname();
   return (
-    <div className="navbar sticky top-0 bg-base-100 z-10 shadow-md">
+    <div className="navbar bg-base-100 sticky top-0 z-10 shadow-md">
       {/* Menu toggle for mobile view or small screen */}
       <div className="flex-1">
         <label
@@ -18,7 +18,7 @@ function Header() {
         >
           <Icon icon="menu" />
         </label>
-        <h1 className="text-2xl font-semibold ml-2">{pathname}</h1>
+        <h1 className="ml-2 text-2xl font-semibold">{pathname}</h1>
       </div>
 
       <div className="flex-none">
diff --git a/src/module/dashboard/components/left-sidebar.tsx b/src/module/dashboard/components/left-sidebar.tsx
index e495d0d..8b59952 100644
--- a/src/module/dashboard/components/left-sidebar.tsx
+++ b/src/module/dashboard/components/left-sidebar.tsx
@@ -25,15 +25,15 @@ function LeftSidebar(props: LeftSidebarProps) {
   return (
     <div className="drawer-side z-30 overflow-hidden">
       <label htmlFor="left-sidebar-drawer" className="drawer-overlay"></label>
-      <ul className="menu pt-2 w-80 bg-base-100 min-h-full text-base-content">
+      <ul className="menu bg-base-100 text-base-content min-h-full w-80 pt-2">
         <button
-          className="btn btn-ghost bg-base-300 btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden"
+          className="btn btn-ghost bg-base-300 btn-circle absolute right-0 top-0 z-50 mr-2 mt-4 lg:hidden"
           onClick={close}
         >
-          <Icon icon="close" className="h-5 inline-block w-5" />
+          <Icon icon="close" className="inline-block h-5 w-5" />
         </button>
 
-        <li className="mb-2 font-semibold text-xl">
+        <li className="mb-2 text-xl font-semibold">
           <Link href="/welcome">
             <img
               className="mask mask-squircle w-10"
@@ -48,7 +48,7 @@ function LeftSidebar(props: LeftSidebarProps) {
           </Link>
         </li>
         <div
-          className="overflow-y-scroll pb-20 no-scrollbar"
+          className="no-scrollbar overflow-y-scroll pb-20"
           style={{ height: "85vh" }}
         >
           {routes.map((route, k: number) => (
@@ -58,12 +58,12 @@ function LeftSidebar(props: LeftSidebarProps) {
               ) : (
                 <Link
                   href={route.path}
-                  className={`${pathname == route.path ? "font-semibold bg-base-200 " : "font-normal"}`}
+                  className={`${pathname == route.path ? "bg-base-200 font-semibold" : "font-normal"}`}
                 >
                   {route.icon} {route.pageName}
                   {pathname === route.path ? (
                     <span
-                      className="absolute inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary"
+                      className="bg-primary absolute inset-y-0 left-0 w-1 rounded-br-md rounded-tr-md"
                       aria-hidden="true"
                     ></span>
                   ) : null}
@@ -74,11 +74,11 @@ function LeftSidebar(props: LeftSidebarProps) {
         </div>
       </ul>
       {/* Profile icon, opening menu on click */}
-      <div className="dropdown bottom-0 absolute dropdown-top w-80 ">
+      <div className="dropdown dropdown-top absolute bottom-0 w-80">
         <div
           tabIndex={0}
           role="button"
-          className="btn w-full bg-base-100 text-left justify-start "
+          className="btn bg-base-100 w-full justify-start text-left"
         >
           <div className="avatar">
             <div className="w-6 rounded-full">
@@ -86,22 +86,22 @@ function LeftSidebar(props: LeftSidebarProps) {
             </div>
           </div>
           {`hello ${user?.displayName}`}
-          <Icon icon="arrow-down" className="w-4 " />
+          <Icon icon="arrow-down" className="w-4" />
         </div>
         <ul
           tabIndex={0}
-          className="dropdown-content visible w-52 px-4 z-[1]  menu  shadow bg-base-200 rounded-box "
+          className="dropdown-content menu bg-base-200 rounded-box visible z-[1] w-52 px-4 shadow"
         >
           <li className="">
             <Link href={"/settings/billing"}>
-              <Icon icon="key" className="w-4 " />
+              <Icon icon="key" className="w-4" />
               Bill History
             </Link>
           </li>
-          <div className="divider py-2 m-0"></div>
+          <div className="divider m-0 py-2"></div>
           <li>
             <a className=" ">
-              <Icon icon="key" className="w-4 " />
+              <Icon icon="key" className="w-4" />
               Logout
             </a>
           </li>
diff --git a/src/module/dashboard/components/sidebar-submenu.tsx b/src/module/dashboard/components/sidebar-submenu.tsx
index f0f6927..48908ab 100644
--- a/src/module/dashboard/components/sidebar-submenu.tsx
+++ b/src/module/dashboard/components/sidebar-submenu.tsx
@@ -29,13 +29,13 @@ function SidebarSubmenu({ submenu, pageName, icon }: SidebarSubmenuProps) {
   }, [submenu]);
 
   return (
-    <div className="flex flex-col hover:bg-base-50 bg-base-100 gap-0">
+    <div className="hover:bg-base-50 bg-base-100 flex flex-col gap-0">
       {/** Route header */}
-      <div className="w-full block" onClick={() => setIsExpanded(!isExpanded)}>
+      <div className="block w-full" onClick={() => setIsExpanded(!isExpanded)}>
         {icon} {pageName}
         <Icon
           icon="arrow-down"
-          className={`w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all ${
+          className={`delay-400 float-right mt-1 h-5 w-5 transition-all duration-500 ${
             isExpanded ? "rotate-180" : ""
           }`}
         />
@@ -43,7 +43,7 @@ function SidebarSubmenu({ submenu, pageName, icon }: SidebarSubmenuProps) {
 
       {/** Submenu list */}
       <div
-        className={`w-full transition-all duration-200 overflow-hidden ${isExpanded ? " max-h-56" : " max-h-0"}`}
+        className={`w-full overflow-hidden transition-all duration-200 ${isExpanded ? "max-h-56" : "max-h-0"}`}
       >
         <ul className="menu menu-compact">
           {submenu &&
@@ -51,12 +51,12 @@ function SidebarSubmenu({ submenu, pageName, icon }: SidebarSubmenuProps) {
               <li key={k}>
                 <Link
                   href={m.path}
-                  className={`${pathname == m.path ? "font-semibold bg-base-200" : ""}`}
+                  className={`${pathname == m.path ? "bg-base-200 font-semibold" : ""}`}
                 >
                   {m.icon} {m.pageName}
                   {pathname === m.path ? (
                     <span
-                      className="absolute mt-1 mb-1 inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary"
+                      className="bg-primary absolute inset-y-0 left-0 mb-1 mt-1 w-1 rounded-br-md rounded-tr-md"
                       aria-hidden="true"
                     ></span>
                   ) : null}
diff --git a/src/module/system/theme-store.ts b/src/module/system/theme-store.ts
index 38c8191..e4d9322 100644
--- a/src/module/system/theme-store.ts
+++ b/src/module/system/theme-store.ts
@@ -16,6 +16,6 @@ export const useThemeStore = create(
     }),
     {
       name: "theme-storage",
-    }
-  )
+    },
+  ),
 );
diff --git a/src/module/system/theme-switcher.tsx b/src/module/system/theme-switcher.tsx
index 608e253..e2d9d19 100644
--- a/src/module/system/theme-switcher.tsx
+++ b/src/module/system/theme-switcher.tsx
@@ -21,11 +21,11 @@ export function ThemeSwitcher() {
       <input type="checkbox" onClick={handleThemeChange} />
       <Icon
         icon="dayTime"
-        className={`w-6 h-6 ${theme === "dark" ? "swap-on" : "swap-off"}`}
+        className={`h-6 w-6 ${theme === "dark" ? "swap-on" : "swap-off"}`}
       />
       <Icon
         icon="nightTime"
-        className={`w-6 h-6 ${theme === "dark" ? "swap-off" : "swap-on"}`}
+        className={`h-6 w-6 ${theme === "dark" ? "swap-off" : "swap-on"}`}
       />
     </label>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 46aa404..2f914e4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,27 +1,27 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
       colors: {
-        'primary-300': '#70bbfd',
-        'primary-500': '#3ea3fc',
-        'gary-layout-primary': 'rgb(96, 95, 123)',
+        "primary-300": "#70bbfd",
+        "primary-500": "#3ea3fc",
+        "gary-layout-primary": "rgb(96, 95, 123)",
       },
       width: {
-        'btn-w-cover': '255%',
-        '400': '400px',
+        "btn-w-cover": "255%",
+        "400": "400px",
       },
       height: {
-        'btn-h-cover': '500%',
+        "btn-h-cover": "500%",
       },
     },
   },
-}
+};
 export default config;