投稿排他 (#171) (#345)

#171

#171

#171

#171

#171

#171

#171

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #345

frontend/src/components/ui/button.tsx

@@ -4,34 +4,47 @@ 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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+const buttonVariants = cva (
+  [
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap',
+    'rounded-md text-sm font-medium transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400',
+    'disabled:pointer-events-none disabled:opacity-50',
+    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  ].join (' '),
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          'bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300',
+
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          'bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600',
+
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          'border border-slate-300 bg-white text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800',
+
         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",
+          'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',
+
+        ghost:
+          'text-slate-900 hover:bg-slate-100 dark:text-slate-100 dark:hover:bg-slate-800',
+
+        link:
+          'text-blue-700 underline-offset-4 hover:underline dark:text-blue-300',
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: 'h-10 px-4 py-2',
+        sm:      'h-9 rounded-md px-3',
+        lg:      'h-11 rounded-md px-8',
+        icon:    'h-10 w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size:    'default',
     },
-  }
-)
+  })
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,

frontend/src/components/ui/dialog.tsx

@@ -37,25 +37,29 @@ const DialogContent = React.forwardRef<
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
-      className={cn(
-	  'fixed left-[50%] top-[50%] z-50 w-[90%] grid max-w-lg',
+      className={cn (
+	  'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg',
 	  'translate-x-[-50%] translate-y-[-50%]',
-	  'gap-4 border bg-gray-300/80 dark:bg-gray-700/80',
-	  'p-6 shadow-lg duration-200',
+	  'gap-5 rounded-2xl border border-border',
+	  'bg-background p-6 text-foreground shadow-2xl',
+	  'duration-200',
 	  'data-[state=open]:animate-in data-[state=closed]:animate-out',
 	  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
 	  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-	  'data-[state=closed]:slide-out-to-left-1/2',
-	  'data-[state=closed]:slide-out-to-top-[48%]',
-	  'data-[state=open]:slide-in-from-left-1/2',
-	  'data-[state=open]:slide-in-from-top-[48%] rounded-lg',
 	  className)}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 bg-red-500 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-3 w-3" />
-        <span className="sr-only">Close</span>
+
+      <DialogPrimitive.Close
+	  className={cn (
+	      'absolute left-4 top-4 rounded-full p-1',
+	      'text-slate-500 transition-colors',
+	      'hover:bg-slate-200 hover:text-slate-900',
+	      'dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-50',
+	      'focus:outline-none focus:ring-2 focus:ring-slate-400')}>
+	<X className="h-4 w-4"/>
+	<span className="sr-only">閉ぢる</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>