Enhance frontend configuration and UI components

- Add Playwright for browser testing
- Integrate Tailwind CSS in Vite configuration
- Update Button and Header components with refined styling
- Add social media logo assets
- Refactor file paths and button variants

margin_frontend/package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
+    "@playwright/test": "^1.50.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",

margin_frontend/src/routes/index.tsx

@@ -36,11 +36,7 @@ function Content() {
         Trade smarter, earn bigger, and grow your portfolio with confidence.
       </p>
       <div className="flex justify-center mt-12">
-        <Button
-          variant={"outline"}
-          size={"lg"}
-          className="w-[219px] text-baseWhite text-xl font-normal "
-        >
+        <Button variant={"outline"} size={"lg"} className="w-[219px]">
           Launch app
         </Button>
       </div>

margin_frontend/src/ui/core/button.tsx

@@ -1,5 +1,6 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { ReactNode } from "react";
+import { cn } from "../../utils/cn";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center uppercase cursor-pointer rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
@@ -10,15 +11,15 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "baseWhite border border-btnBorderColor text-baseWhite bg-background font-normal hover:bg-accent hover:text-accent-foreground",
+          "text-baseWhite border border-btnBorderColor text-baseWhite bg-transparent font-normal",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         sm: "h-8 px-3 text-sm",
-        md: "h-14 text-sm",
+        md: "h-12 text-sm",
         lg: "h-[72px] text-xl font-normal",
       },
     },
@@ -44,7 +45,7 @@ export function Button({
 }: ButtonProps) {
   return (
     <button
-      className={buttonVariants({ variant, size, className: className ?? "" })}
+      className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     >
       {children}

margin_frontend/src/ui/layout/footer.tsx

@@ -1,16 +1,16 @@
 const socials = [
   {
-    icon: "src/assets/images/DiscordLogo.png",
+    icon: "src/assets/img/DiscordLogo.png",
     link: "https://discord.com/",
     title: "Discord",
   },
   {
-    icon: "src/assets/images/XLogo.png",
+    icon: "src/assets/img/XLogo.png",
     link: "https://twitter.com/SpotNet_123",
     title: "X",
   },
   {
-    icon: "src/assets/images/TelegramLogo.png",
+    icon: "src/assets/img/TelegramLogo.png",
     link: "https://t.me/djeck_vorobey1",
     title: "Telegram",
   },

margin_frontend/src/ui/layout/header.tsx

@@ -32,7 +32,7 @@ export function Header() {
           </React.Fragment>
         ))}
       </nav>
-      <Button variant={"outline"} className="h-12! w-[164px]! text-sm!">
+      <Button variant={"outline"} className="w-[164px]" size={"md"}>
         Connect Wallet
       </Button>
     </div>

margin_frontend/vite.config.ts

@@ -1,14 +1,16 @@
 import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   test: {
     name: "react",
     browser: {
       enabled: true,
-      name: "chromium",
       provider: "playwright",
+      headless: true,
     },
+    exclude: ["test/browser/**/*"],
   },
 });