remove tailwind styles

digit-recognition/frontend/src/App.module.scss

@@ -0,0 +1,9 @@
+.connectionWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+  padding-top: 0;
+  min-height: calc(100vh - 78px);
+}

digit-recognition/frontend/src/App.tsx

@@ -1,8 +1,9 @@
-import "./globals.css";
+import "./index.css";
 import { useAccount } from "wagmi";
 
 import { WalletButton, Header, Layout } from "@/components";
 import { Recognition } from "./components/recognition/Recognition";
+import styles from "./App.module.scss";
 
 function App() {
   const ethAccount = useAccount();
@@ -12,7 +13,7 @@ function App() {
     <>
       <Header />
       {!isConnected && (
-        <Layout className="flex flex-col items-center justify-center gap-12 h-screen-header pt-0">
+        <Layout className={styles.connectionWrapper}>
           <h1>AI Image Recognition</h1>
 
           <WalletButton />

digit-recognition/frontend/src/components/recognition/Recognition.module.scss

@@ -1,4 +1,4 @@
-.tittle {
+.title {
   padding: 0 8px;
 }
 

digit-recognition/frontend/src/components/recognition/Recognition.tsx

@@ -5,7 +5,7 @@ import styles from "./Recognition.module.scss";
 export const Recognition = () => {
   return (
     <Layout>
-      <h1 className={styles.tittle}>AI Image Recognition</h1>
+      <h1 className={styles.title}>AI Image Recognition</h1>
 
       <p className={styles.description}>
         //_Draw a digit or upload an image to experience the power of AI.

digit-recognition/frontend/src/components/ui/button/Button.module.scss

@@ -1,5 +1,128 @@
-.xs {
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.75rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+  user-select: none;
+  transition: all 0.2s;
+  cursor: pointer;
+
+  &[data-focus-visible] {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
+  }
+
+  &.btn--variant-default {
+    background-color: var(--foreground);
+    color: var(--background);
+    padding: 15px 23px;
+
+    &:not([aria-disabled="true"]):active {
+      background-color: var(--foreground-50);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      background-color: var(--foreground-50);
+      cursor: auto;
+    }
+  }
+
+  &.btn--variant-outline {
+    background-color: var(--background);
+    color: var(--foreground);
+    border: 1px solid var(--border);
+    padding: 15px 23px;
+
+    &:not([aria-disabled="true"]):active {
+      color: var(--foreground-50);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      color: var(--foreground-30);
+      cursor: auto;
+    }
+  }
+
+  &.btn--variant-link {
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+    justify-content: flex-start;
+    cursor: auto;
+  }
+
+  &.btn--variant-icon {
+    background-color: var(--background);
+    color: var(--foreground);
+    border: 1px solid var(--border);
+    padding: 15px;
+
+    &:enabled:hover,
+    &:enabled:focus-visible {
+      color: var(--primary);
+    }
+
+    &:enabled:active {
+      color: var(--foreground-50);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      color: var(--foreground-30);
+      cursor: auto;
+    }
+  }
+
+  &.btn--variant-ghost {
+    &:hover {
+      background-color: var(--accent);
+      color: var(--accent-foreground);
+    }
+  }
+
+  &.btn--variant-secondary {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+
+    &:hover {
+      background-color: var(--foreground-80);
+    }
+  }
+}
+
+.size-default {
+  padding: 15px 23px;
+}
+
+.size-sm {
+  height: 36px;
+  padding-left: 12px;
+  padding-right: 12px;
+  border-radius: 0.375rem;
+}
+
+.size-xs {
   height: 26px;
   border-radius: 2px;
   padding: 4px 16px;
 }
+
+.size-icon {
+  padding: 15px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}

digit-recognition/frontend/src/components/ui/button/Button.tsx

@@ -1,157 +1,51 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
+import { clsx } from "clsx";
 import LoadingIcon from "@/assets/icons/loading.svg?react";
 import styles from "./Button.module.scss";
 
-const buttonVariants = cva(
-  [
-    "btn",
-    /* Disabled */
-    "data-[disabled]:opacity-50",
-    /* Focus Visible */
-    "data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2",
-  ],
-  {
-    variants: {
-      variant: {
-        default: "bg-foreground text-background",
-        outline: "bg-background text-foreground border border-foreground/15",
-        link: "link border-0 rounded-none",
-        icon: "bg-background text-foreground border border-foreground/15",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-      },
-      size: {
-        default: "pt-[13px] pb-[15px] px-[23px]",
-        sm: "h-9 px-3 rounded-md",
-        xs: styles.xs,
-        icon: "",
-      },
-      state: {
-        default: "",
-        loading: "",
-        disabled: "",
-      },
-    },
-    compoundVariants: [
-      {
-        variant: "icon",
-        className: "p-[15px]",
-      },
-      {
-        variant: "link",
-        className: "p-0 justify-start",
-      },
-
-      // Active states
-      {
-        state: "default",
-        className: "interactive-focus",
-      },
-      {
-        variant: "default",
-        state: "default",
-        className: "active:bg-foreground/50",
-      },
-      {
-        variant: "outline",
-        state: "default",
-        className: "active:text-foreground/50",
-      },
-      {
-        variant: "icon",
-        state: "default",
-        className:
-          "hover:text-primary focus-visible:text-primary active:text-foreground/50",
-      },
-      {
-        variant: "icon",
-        state: ["disabled", "loading"],
-        className: "text-foreground/30",
-      },
-
-      // states loading/disabled
-      {
-        state: "loading",
-        className: "py-[13px]",
-      },
-      {
-        state: ["disabled", "loading"],
-        variant: "default",
-        className: "bg-foreground/30",
-      },
-      {
-        state: ["disabled", "loading"],
-        variant: ["outline", "icon"],
-        className: "text-foreground/30",
-      },
-      {
-        state: ["disabled", "loading"],
-        className: "cursor-auto",
-      },
-    ],
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      state: "default",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "default" | "outline" | "link" | "icon" | "ghost" | "secondary";
+  size?: "default" | "sm" | "xs" | "icon";
   isLoading?: boolean;
-}
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+};
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
+const Button: React.FC<ButtonProps> = ({
+  variant = "default",
+  size = "default",
+  isLoading,
+  disabled,
+  children,
+  className,
+  onClick,
+}) => {
+  const isDisabled = disabled || isLoading;
+  const buttonClass = clsx(
+    styles.button,
+    styles[`btn--variant-${variant}`],
+    styles[`size-${size}`],
     {
-      children,
-      className,
-      variant,
-      size,
-      isLoading,
-      disabled,
-      type = "button",
-      asChild = false,
-      state,
-      ...props
+      [styles[`state-disabled`]]: isDisabled,
+      [styles[`state-loading`]]: isLoading,
     },
-    ref
-  ) => {
-    const Comp = asChild ? Slot : "button";
-    const isDisabled =
-      disabled || isLoading || ["disabled", "loading"].includes(state || "");
+    className
+  );
 
-    return (
-      <Comp
-        className={cn(
-          buttonVariants({
-            variant,
-            size,
-            state:
-              state ??
-              (isLoading ? "loading" : disabled ? "disabled" : "default"),
-          }),
-          className
-        )}
-        ref={ref}
-        disabled={asChild ? undefined : isDisabled}
-        aria-disabled={isDisabled ? "true" : undefined}
-        type={asChild ? undefined : type}
-        children={
-          isLoading ? <LoadingIcon className="animate-spin" /> : children
-        }
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = "Button";
+  return (
+    <button
+      className={buttonClass}
+      onClick={onClick}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
+    >
+      {isLoading ? (
+        <LoadingIcon className={styles["animate-spin"]} />
+      ) : (
+        children
+      )}
+    </button>
+  );
+};
 
-export { Button, buttonVariants };
+export { Button };

digit-recognition/frontend/src/components/ui/card/Card.module.scss

@@ -58,6 +58,7 @@
 .description {
   margin-top: 30px;
   font-size: 12px;
+  min-height: 54px;
 }
 
 .footer {