refactor(salariesInput): use data-scheme=dark instead of useTheme pal…

…ette check
varianter · Sep 3, 2024 · ef4377c · ef4377c
1 parent d68fc80
commit ef4377c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 17 deletions.
diff --git a/studio/components/SalaryCsvInput/SalariesInput.tsx b/studio/components/SalaryCsvInput/SalariesInput.tsx
@@ -1,5 +1,5 @@
 import { set, StringInputProps } from "sanity";
-import { Box, Grid, Inline, Stack, Text, useTheme, useToast } from "@sanity/ui";
+import { Box, Grid, Inline, Stack, Text, useToast } from "@sanity/ui";
 import { ChangeEvent } from "react";
 import styles from "./salariesInput.module.css";
 import { UploadIcon } from "@sanity/icons";
@@ -15,8 +15,6 @@ const UPLOAD_CSV_INPUT_ID = "upload-csv-input";
 
 export const SalariesInput = (props: StringInputProps) => {
   const toast = useToast();
-  const theme = useTheme();
-  const prefersDark = theme.sanity.v2?.color._dark ?? false;
 
   const salaries =
     props.value === undefined
@@ -80,7 +78,7 @@ export const SalariesInput = (props: StringInputProps) => {
   }
 
   return (
-    <Stack space={4} className={prefersDark ? styles.darkTheme : ""}>
+    <Stack space={4}>
       <Inline space={2}>
         <div>
           {/*
@@ -118,18 +116,12 @@ export const SalariesInput = (props: StringInputProps) => {
             .toSorted(([a], [b]) => Number(b) - Number(a))
             .map(([year, salary], index) => (
               <>
-                <div
-                  key={year}
-                  className={`${prefersDark ? styles.darkTheme : ""} ${styles.csvTableCell}`}
-                >
+                <div key={year} className={styles.csvTableCell}>
                   <label htmlFor={`salary-number-input-${year}`}>
                     <span className={styles.csvTableYearLabel}>{year}</span>
                   </label>
                 </div>
-                <div
-                  key={`${year}-salary`}
-                  className={`${prefersDark ? styles.darkTheme : ""}  ${styles.csvTableCell}`}
-                >
+                <div key={`${year}-salary`} className={styles.csvTableCell}>
                   <SalaryNumberInput
                     id={`salary-number-input-${year}`}
                     value={salary}

diff --git a/studio/components/SalaryCsvInput/salariesInput.module.css b/studio/components/SalaryCsvInput/salariesInput.module.css
@@ -29,7 +29,7 @@
   }
 }
 
-.darkTheme .uploadButtonContent {
+[data-scheme="dark"] .uploadButtonContent {
   background-color: lightgray;
 }
 
@@ -45,7 +45,7 @@
   color: white;
 }
 
-.darkTheme .uploadButtonIcon {
+[data-scheme="dark"] .uploadButtonIcon {
   color: black;
 }
 
@@ -54,7 +54,7 @@
   color: white;
 }
 
-.darkTheme .uploadButtonText {
+[data-scheme="dark"] .uploadButtonText {
   color: black;
 }
 
@@ -70,8 +70,8 @@
   background-color: #f5f5f5;
 }
 
-.darkTheme .csvTableCell:nth-child(4n + 1),
-.darkTheme .csvTableCell:nth-child(4n + 2) {
+[data-scheme="dark"] .csvTableCell:nth-child(4n + 1),
+[data-scheme="dark"] .csvTableCell:nth-child(4n + 2) {
   background-color: #212121;
 }