feat(SalariesInput): add headers to salaries input table

varianter · Sep 5, 2024 · bfde5dd · bfde5dd
1 parent 9314259
commit bfde5dd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/studio/components/SalaryCsvInput/SalariesInput.tsx b/studio/components/SalaryCsvInput/SalariesInput.tsx
@@ -112,6 +112,14 @@ export const SalariesInput = (props: StringInputProps) => {
       </Inline>
       {salaries && (
         <Grid columns={[2]}>
+          <div className={styles.csvTableHeader}>
+            <span className={styles.csvTableHeaderLabel}>Examination Year</span>
+          </div>
+          <div
+            className={`${styles.csvTableHeader} ${styles.csvTableSalaryHeader}`}
+          >
+            <span className={styles.csvTableHeaderLabel}>Amount</span>
+          </div>
           {Object.entries(salaries)
             .toSorted(([a], [b]) => Number(b) - Number(a))
             .map(([year, salary], index) => (

diff --git a/studio/components/SalaryCsvInput/salariesInput.module.css b/studio/components/SalaryCsvInput/salariesInput.module.css
@@ -58,20 +58,34 @@
   color: black;
 }
 
-.csvTableCell {
+.csvTableHeader {
+  font-weight: 600;
+  font-size: 0.8125rem;
+}
+
+.csvTableSalaryHeader {
+  justify-content: end;
+  padding-right: 1.25rem;
+}
+
+.csvTableCell,
+.csvTableHeader {
   display: flex;
   align-items: center;
-  font-size: 0.95rem;
   padding: 0.25rem;
 }
 
-.csvTableCell:nth-child(4n + 1),
-.csvTableCell:nth-child(4n + 2) {
+.csvTableCell {
+  font-size: 0.95rem;
+}
+
+.csvTableCell:nth-child(4n),
+.csvTableCell:nth-child(4n + 3) {
   background-color: #f5f5f5;
 }
 
-[data-scheme="dark"] .csvTableCell:nth-child(4n + 1),
-[data-scheme="dark"] .csvTableCell:nth-child(4n + 2) {
+[data-scheme="dark"] .csvTableCell:nth-child(4n),
+[data-scheme="dark"] .csvTableCell:nth-child(4n + 3) {
   background-color: #212121;
 }
 
@@ -85,6 +99,7 @@
   background-color: transparent;
 }
 
+.csvTableHeaderLabel,
 .csvTableYearLabel {
   padding: 0.5rem;
 }