From f5e10784f48a61ea8b2b4040fcc5e1c0f52bc6de Mon Sep 17 00:00:00 2001 From: Nezumi-2711 Date: Tue, 29 Apr 2025 22:38:52 +0700 Subject: [PATCH] feat: update the style for the application --- src/app/globals.css | 6 +- src/app/layout.tsx | 12 +--- src/app/page.tsx | 100 +-------------------------------- src/components/ui/button.tsx | 17 +++--- src/components/ui/input.tsx | 3 +- src/components/ui/progress.tsx | 5 +- src/components/ui/textarea.tsx | 3 +- 7 files changed, 25 insertions(+), 121 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index dc98be7..7df0e11 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -38,7 +38,7 @@ --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); + --radius-md: calc(var(--radius) - 4px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); } @@ -60,8 +60,8 @@ --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); + --border: oklch(0 0 0); + --input: oklch(0 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..c5bd35e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,14 +1,8 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { DM_Sans } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const dmSans = DM_Sans({ subsets: ["latin"], }); @@ -25,7 +19,7 @@ export default function RootLayout({ return ( {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index e68abe6..61e4e89 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,9 @@ -import Image from "next/image"; +import { Button } from "@/components/ui/button"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +
+
); } diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index a2df8dc..48a85e9 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -5,26 +5,27 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border cursor-pointer", { variants: { variant: { default: - "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", + "bg-primary text-primary-foreground hover:bg-primary/90", destructive: - "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: - "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", + "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", secondary: - "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", + "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: "text-primary underline-offset-4 hover:underline", + elevated: 'bg-white hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-[4px] hover:-translate-y-[4px] transition-all' }, size: { - default: "h-9 px-4 py-2 has-[>svg]:px-3", - sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", - lg: "h-10 rounded-md px-6 has-[>svg]:px-4", + default: "h-12 px-4 py-2 has-[>svg]:px-3", + sm: "h-10 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", + lg: "h-12 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", }, }, diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index 03295ca..4ec29b2 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -8,9 +8,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) { type={type} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "h-12 bg-white font-medium md:text-base", className )} {...props} diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx index e7a416c..9d9ba2f 100644 --- a/src/components/ui/progress.tsx +++ b/src/components/ui/progress.tsx @@ -14,14 +14,15 @@ function Progress({ diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx index 7f21b5e..d995988 100644 --- a/src/components/ui/textarea.tsx +++ b/src/components/ui/textarea.tsx @@ -7,7 +7,8 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {