瀏覽代碼

style(dialog.tsx, exercise-video-modal.tsx): update dialog close button and title styles for better visibility and consistency in dark mode

Mathias 1 月之前
父節點
當前提交
9982cdbfc6
共有 2 個文件被更改,包括 2 次插入2 次删除
  1. 1 1
      src/components/ui/dialog.tsx
  2. 1 1
      src/features/workout-builder/ui/exercise-video-modal.tsx

+ 1 - 1
src/components/ui/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-[18px] rounded-sm text-black transition-opacity hover:opacity-70 focus:outline-none disabled:pointer-events-none ltr:right-5 rtl:left-5 dark:text-white">
+      <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-[18px] rounded-sm text-black transition-opacity hover:opacity-70 focus:outline-none disabled:pointer-events-none ltr:right-5 rtl:left-5 dark:text-white dark:bg-slate-900">
         <X className="h-6 w-6 flex-none p-1 hover:rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

+ 1 - 1
src/features/workout-builder/ui/exercise-video-modal.tsx

@@ -41,7 +41,7 @@ export function ExerciseVideoModal({ open, onOpenChange, exercise }: ExerciseVid
       <DialogContent className="max-w-2xl p-0 max-h-[80vh]">
         <DialogHeader className="flex flex-row items-center justify-between px-4 pt-4 pb-2">
           <DialogTitle className="text-lg md:text-xl font-bold flex flex-col gap-2">
-            {title}
+            <span className="text-slate-700 dark:text-slate-200 pr-10 text-left">{title}</span>
             <div className="flex flex-wrap gap-2 mt-2">
               {type && (
                 <span className={`px-2 py-0.5 rounded text-xs font-medium ${badgeColors.TYPE}`}>{getAttributeValueLabel(type, t)}</span>