fix(timesheet): soften editable description placeholder

src/pages/Timesheet.tsx

@@ -1260,10 +1260,10 @@ function EntryEditorFields({
       <div className="grid min-w-0 flex-1 grid-cols-[minmax(430px,1fr)_minmax(0,220px)_40px_188px_40px] 2xl:grid-cols-[minmax(430px,1fr)_minmax(0,max-content)_40px_188px_40px] items-center">
         <div className="flex min-w-0 items-center">
           <Input
-            value={state.description}
+            value={state.description}
-            onChange={(event) => onChange({ description: event.target.value })}
+            onChange={(event) => onChange({ description: event.target.value })}
-            placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
+            placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
-            className="h-12 w-[200px] 2xl:w-[400px] shrink-0 rounded-none border-0 bg-transparent px-0 pe-3 text-sm shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 truncate dark:bg-transparent dark:text-slate-100"
+            className="h-12 w-[200px] 2xl:w-[400px] shrink-0 rounded-none border-0 bg-transparent px-0 pe-3 text-sm shadow-none placeholder:text-slate-300 focus-visible:ring-0 focus-visible:ring-offset-0 truncate dark:bg-transparent dark:text-slate-100 dark:placeholder:text-slate-600"
           />
 
           <span className="me-2 shrink-0 text-sm font-semibold leading-none text-sky-600 dark:text-sky-400">•</span>
@@ -1342,11 +1342,11 @@ function EntryEditorFields({
         <label className={`block font-medium text-slate-700 dark:text-slate-300 ${compact ? "mb-0.5 text-[11px]" : "mb-1 text-sm"}`}>
           {t.timesheet?.descriptionLabel || "Description"}
         </label>
-        <Input
+        <Input
-          value={state.description}
+          value={state.description}
-          onChange={(event) => onChange({ description: event.target.value })}
+          onChange={(event) => onChange({ description: event.target.value })}
-          placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
+          placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
-          className={compact ? "h-9 px-2 text-xs" : ""}
+          className={compact ? "h-9 px-2 text-xs placeholder:text-slate-300 dark:placeholder:text-slate-600" : "placeholder:text-slate-300 dark:placeholder:text-slate-600"}
         />
       </div>
 
@@ -2643,11 +2643,11 @@ export default function Timesheet() {
         <div className="flex min-w-0 items-center gap-2 px-3 py-3">
           <div className="min-w-0 flex-1">
             <Input
-              value={timerDraft.description}
+            value={timerDraft.description}
-              placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
+            placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
-              onChange={(event) => setTimerDraft((current) => ({ ...current, description: event.target.value }))}
+            onChange={(event) => setTimerDraft((current) => ({ ...current, description: event.target.value }))}
-              disabled={isStartingTimer}
+            disabled={isStartingTimer}
-              className="h-12 rounded-none border-0 bg-transparent dark:bg-transparent px-5 text-sm shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+            className="h-12 rounded-none border-0 bg-transparent px-5 text-sm shadow-none placeholder:text-slate-300 focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent dark:placeholder:text-slate-600"
             />
           </div>
 
@@ -2751,11 +2751,11 @@ export default function Timesheet() {
       >
         <div className="space-y-3">
           <Input
-            value={timerDraft.description}
+            value={timerDraft.description}
-            placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
+            placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
-            onChange={(event) => setTimerDraft((current) => ({ ...current, description: event.target.value }))}
+            onChange={(event) => setTimerDraft((current) => ({ ...current, description: event.target.value }))}
-            disabled={isStartingTimer}
+            disabled={isStartingTimer}
-            className="h-10 border-slate-200 bg-slate-50 text-sm dark:border-slate-700 dark:bg-slate-900"
+            className="h-10 border-slate-200 bg-slate-50 text-sm placeholder:text-slate-300 dark:border-slate-700 dark:bg-slate-900 dark:placeholder:text-slate-600"
           />
 
           <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2">