From 9cb378f19736f41a5334a2f440d9bdbc43e01ea0 Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Thu, 22 May 2025 15:21:36 +0200 Subject: [PATCH 1/6] refactor: change className of input component --- src/components/ui/input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index 65fbc93..a751360 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) { type={type} data-slot='input' className={cn( - 'file:text-destructive placeholder:text-text-muted-input selection:bg-muted-input selection:text-text dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-text-input 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-label 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 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-label disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', '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', className, From 573c3053b63696c1c4dd1bbeed744b6463d4fc20 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Fri, 30 May 2025 19:45:49 +0200 Subject: [PATCH 2/6] refactor(ui): enhance component className structure for better readability and maintainability --- src/components/custom-ui/login-card.tsx | 28 +++- src/components/ui/card.tsx | 55 ++++++- src/components/ui/dropdown-menu.tsx | 186 +++++++++++++++++++++++- src/components/ui/hover-card.tsx | 32 +++- src/components/ui/input.tsx | 29 +++- src/components/ui/label.tsx | 28 +++- src/components/ui/select.tsx | 101 ++++++++++++- src/components/ui/switch.tsx | 58 +++++++- src/components/ui/tabs.tsx | 60 +++++++- 9 files changed, 553 insertions(+), 24 deletions(-) diff --git a/src/components/custom-ui/login-card.tsx b/src/components/custom-ui/login-card.tsx index 616a45c..6544fba 100644 --- a/src/components/custom-ui/login-card.tsx +++ b/src/components/custom-ui/login-card.tsx @@ -7,7 +7,33 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
) {
) {
) { 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-label disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', - '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', + /* Text */ + 'text-text-input selection:text-text md:text-sm file:text-destructive file:text-sm placeholder:text-text-muted-input', + /* Background */ + 'bg-transparent selection:bg-muted-input file:bg-transparent', + /* Border */ + 'rounded-md border border-input focus-visible:border-ring aria-invalid:border-destructive file:border-0', + /* Font */ + 'file:font-label', + /* Cursor */ + 'disabled:pointer-events-none disabled:cursor-not-allowed', + /* Ring */ + 'focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40', + /* Outline */ + 'outline-none', + /* Shadow */ + 'shadow-md transition-[color,box-shadow] ', + /* Opacity */ + 'disabled:opacity-50 ', + /* Scaling */ + 'h-9 w-full min-w-0 file:h-7', + /* Spacing */ + 'px-3 py-1', + /* Alignment */ + 'flex file:inline-flex', + /* Miscellaneous */ + /* ////////// */ className, )} {...props} diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx index 3364d98..16acf98 100644 --- a/src/components/ui/label.tsx +++ b/src/components/ui/label.tsx @@ -13,7 +13,33 @@ function Label({ {children} @@ -107,7 +171,34 @@ function SelectItem({ diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx index 4a9fbd0..76b16c3 100644 --- a/src/components/ui/tabs.tsx +++ b/src/components/ui/tabs.tsx @@ -26,8 +26,34 @@ function TabsList({ @@ -42,7 +68,35 @@ function TabsTrigger({ Date: Fri, 30 May 2025 19:46:43 +0200 Subject: [PATCH 3/6] feat: update button variants and styles for improved consistency and accessibility --- src/app/login/page.tsx | 2 +- src/components/custom-ui/button.tsx | 25 ++++++++++++++---------- src/components/labeled-input.tsx | 2 +- src/components/user/login-form.tsx | 2 +- src/components/user/sso-login-button.tsx | 2 +- src/components/user/theme-picker.tsx | 2 +- 6 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index f49fb8f..074062c 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -57,7 +57,7 @@ export default async function LoginPage() {
- + diff --git a/src/components/custom-ui/button.tsx b/src/components/custom-ui/button.tsx index f45fcd7..5b53423 100644 --- a/src/components/custom-ui/button.tsx +++ b/src/components/custom-ui/button.tsx @@ -5,24 +5,29 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const buttonVariants = cva( - "radius-lg inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-label 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", + "radius-lg inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-button 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", { variants: { variant: { primary: - 'bg-primary text-text shadow-xs hover:bg-hover-primary active:bg-active-primary', + 'bg-primary text-text shadow-xs hover:bg-hover-primary active:bg-active-primary disabled:bg-disabled-primary', secondary: - 'bg-secondary text-text-alt shadow-xs hover:bg-hover-secondary active:bg-active-secondary', - outline: - 'border-2 border-primary bg-transparent text-text shadow-xs hover:bg-primary hover:border-neutral-000 hover:border-1.5 hover:text-neutral-000 active:bg-active-primary', - ghost: - 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', + 'bg-secondary text-text-alt shadow-xs hover:bg-hover-secondary active:bg-active-secondary disabled:bg-disabled-secondary', + muted: + 'bg-muted text-text shadow-xs hover:bg-hover-muted active:bg-active-muted disabled:bg-disabled-muted', + outline_primary: + 'bg-background border-2 text-text shadow-xs hover:bg-primary border-primary hover:border-background-reversed active:bg-active-primary disabled:bg-disabled-primary', + outline_secondary: + 'bg-background border-2 text-text shadow-xs hover:bg-secondary border-secondary hover:border-background-reversed active:bg-active-secondary disabled:bg-disabled-secondary', + outline_muted: + 'bg-background border-2 text-text shadow-xs hover:bg-muted border-muted hover:border-background-reversed active:bg-active-muted disabled:bg-disabled-muted', + link: 'text-text underline-offset-4 hover:underline', }, 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', + sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5', + lg: 'h-10 px-6 has-[>svg]:px-4', icon: 'size-9', }, }, @@ -34,7 +39,7 @@ const buttonVariants = cva( ); function Button({ - className = 'font-label', + className, variant, size, asChild = false, diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx index a16f26a..250dd5f 100644 --- a/src/components/labeled-input.tsx +++ b/src/components/labeled-input.tsx @@ -15,7 +15,7 @@ export default function LabeledInput({ name?: string; }) { return ( -
+
Login -
diff --git a/src/components/user/sso-login-button.tsx b/src/components/user/sso-login-button.tsx index 76eac83..dc070b5 100644 --- a/src/components/user/sso-login-button.tsx +++ b/src/components/user/sso-login-button.tsx @@ -11,7 +11,7 @@ export default function SSOLogin({ }) { return (
{ 'use server'; await signIn(provider); diff --git a/src/components/user/theme-picker.tsx b/src/components/user/theme-picker.tsx index 37a2ceb..2a1649d 100644 --- a/src/components/user/theme-picker.tsx +++ b/src/components/user/theme-picker.tsx @@ -18,7 +18,7 @@ export function ThemePicker() { return ( -
@@ -302,10 +302,14 @@ export default function SettingsPage() {
- -
@@ -398,7 +402,9 @@ export default function SettingsPage() {
- +

Prevent specific users from seeing your calendar or booking time.