fix: Fixed eslint issues

Author: CrawlerCode

src/components/general/Fieldset.tsx

@@ -8,7 +8,7 @@ interface PropTypes extends React.ComponentProps<"fieldset"> {
 const Fieldset = ({ legend, className, children, ...props }: PropTypes) => {
   return (
     <fieldset className={clsx("rounded-lg border border-gray-200 p-1.5 dark:border-gray-700", className)} {...props}>
-      {legend && <legend className="mb-[-0.125rem] px-2 text-base font-semibold">{legend}</legend>}
+      {legend && <legend className="-mb-0.5 px-2 text-base font-semibold">{legend}</legend>}
       {children}
     </fieldset>
   );

src/components/general/Indicator.tsx

@@ -6,16 +6,16 @@ type PropTypes = {
 
 const Indicator = ({ variant }: PropTypes) => {
   return (
-    <span className="relative flex h-3 w-3">
+    <span className="relative flex size-3">
       <span
-        className={clsx("absolute inline-flex h-full w-full animate-ping rounded-full", {
+        className={clsx("absolute inline-flex size-full animate-ping rounded-full", {
           "bg-blue-500/75 dark:bg-blue-700/75": variant === "loading",
           "bg-green-500/75 dark:bg-green-700/75": variant === "success",
           "bg-red-500/75 dark:bg-red-700/75": variant === "danger",
         })}
       ></span>
       <span
-        className={clsx("relative inline-flex h-3 w-3 rounded-full", {
+        className={clsx("relative inline-flex size-3 rounded-full", {
           "bg-blue-600 dark:bg-blue-800": variant === "loading",
           "bg-green-600 dark:bg-green-800": variant === "success",
           "bg-red-600 dark:bg-red-800": variant === "danger",

src/components/general/SelectField.tsx

@@ -29,7 +29,7 @@ const SelectField = ({ size = "md", title, error, children, placeholder, classNa
       <select
         {...props}
         id={id}
-        className={clsx("block w-full rounded-lg text-sm", "placeholder:text-field-placeholder border border-field-border bg-field", "focus:outline-none focus:ring-2 focus:ring-primary-focus", {
+        className={clsx("block w-full rounded-lg text-sm", "border border-field-border bg-field placeholder:text-field-placeholder", "focus:outline-none focus:ring-2 focus:ring-primary-focus", {
           "p-1.5": size === "sm",
           "p-2.5": size === "md",
         })}

src/components/general/TimeField.tsx

@@ -58,7 +58,7 @@ const TimeField = ({ size = "md", title, icon, error, className, type = "date",
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any);
           }}
-          className={clsx("block w-full rounded-lg text-sm", "placeholder:text-field-placeholder border border-field-border bg-field", "focus:outline-none focus:ring-2 focus:ring-primary-focus", {
+          className={clsx("block w-full rounded-lg text-sm", "border border-field-border bg-field placeholder:text-field-placeholder", "focus:outline-none focus:ring-2 focus:ring-primary-focus", {
             "border-red-500 text-red-900 placeholder:text-red-700 dark:border-red-500 dark:text-red-500 dark:placeholder:text-red-500": error !== undefined,
             "pl-8": !!icon,
             "p-1.5": size === "sm",

src/components/issues/DoneSlider.tsx

@@ -13,7 +13,7 @@ const DoneSlider = ({ value, className, ...props }: PropTypes) => {
         max="100"
         step="10"
         type="range"
-        className={clsx("h-5 w-[80px] cursor-pointer appearance-none border-transparent", "focus:ring-primary-focus focus:outline-none focus:ring-2")}
+        className={clsx("h-5 w-[80px] cursor-pointer appearance-none border-transparent", "focus:outline-none focus:ring-2 focus:ring-primary-focus")}
         style={{ background: `linear-gradient(90deg, #bae0ba ${value * 0.9 + 10}%, #eeeeee ${value * 0.9 + 10}%)` }}
       />
       <p className="pointer-events-none absolute left-1 top-1 select-none text-xs font-medium leading-none text-gray-600">{value}%</p>

src/components/issues/EditTimer.tsx

@@ -36,7 +36,7 @@ const EditTimer = ({ initTime, onOverrideTime, onCancel: onConfirmCancel }: Prop
           max={100}
           className={clsx(
             "w-4 appearance-none rounded-md text-center text-lg",
-            "placeholder:text-field-placeholder border border-field-border bg-field",
+            "border border-field-border bg-field placeholder:text-field-placeholder",
             "focus:outline-none focus:ring-2 focus:ring-primary-focus",
             initTime > 0 ? "text-yellow-500" : "text-gray-700 dark:text-gray-500"
           )}
@@ -73,7 +73,7 @@ const EditTimer = ({ initTime, onOverrideTime, onCancel: onConfirmCancel }: Prop
           max={59}
           className={clsx(
             "w-6 appearance-none rounded-md text-center text-lg",
-            "placeholder:text-field-placeholder border border-field-border bg-field",
+            "border border-field-border bg-field placeholder:text-field-placeholder",
             "focus:outline-none focus:ring-2 focus:ring-primary-focus",
             initTime > 0 ? "text-yellow-500" : "text-gray-700 dark:text-gray-500"
           )}
@@ -105,7 +105,7 @@ const EditTimer = ({ initTime, onOverrideTime, onCancel: onConfirmCancel }: Prop
           max={59}
           className={clsx(
             "w-6 appearance-none rounded-md text-center text-lg",
-            "placeholder:text-field-placeholder border border-field-border bg-field",
+            "border border-field-border bg-field placeholder:text-field-placeholder",
             "focus:outline-none focus:ring-2 focus:ring-primary-focus",
             initTime > 0 ? "text-yellow-500" : "text-gray-700 dark:text-gray-500"
           )}

src/components/time/TimeEntryPreview.tsx

@@ -17,7 +17,7 @@ const TimeEntryPreview = ({ date, previewHours }: PropTypes) => {
 
   return (
     <div className="flex items-center gap-x-1">
-      <h3 className="max-w-[5rem] truncate text-sm font-semibold">{formatHours(roundHours(sumHours))}</h3>
+      <h3 className="max-w-20 truncate text-sm font-semibold">{formatHours(roundHours(sumHours))}</h3>
       <div className="grow">
         <TimeEntry entries={myTimeEntriesQuery.data} previewHours={previewHours} maxHours={sumHours > 12 ? sumHours : 12} />
       </div>