update styles

EasyPost · Aug 31, 2023 · cf40878 · cf40878
1 parent 265bbe5
commit cf40878
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/easy-ui-react/src/DataGrid/ColumnHeader.tsx b/easy-ui-react/src/DataGrid/ColumnHeader.tsx
@@ -31,17 +31,23 @@ export function ColumnHeader({ column, state }: ColumnHeaderProps) {
       data-col-span={column.colspan}
     >
       {column.rendered}
-      {column.props.allowsSorting &&
-        state.sortDescriptor?.column === column.key && (
-          <span aria-hidden="true" className={styles.sortIcon}>
-            {state.sortDescriptor?.column === column.key &&
-            state.sortDescriptor?.direction === "ascending" ? (
-              <Up />
-            ) : (
-              <Down />
-            )}
-          </span>
-        )}
+      {column.props.allowsSorting && (
+        <span
+          aria-hidden="true"
+          className={classNames(
+            styles.sortIcon,
+            state.sortDescriptor?.column === column.key &&
+              styles.sortIconIsSorted,
+          )}
+        >
+          {state.sortDescriptor?.column === column.key &&
+          state.sortDescriptor?.direction === "ascending" ? (
+            <Up />
+          ) : (
+            <Down />
+          )}
+        </span>
+      )}
     </div>
   );
 }

diff --git a/easy-ui-react/src/DataGrid/DataGrid.module.scss b/easy-ui-react/src/DataGrid/DataGrid.module.scss
@@ -64,6 +64,10 @@
   color: design-token("color.gray.500");
 }
 
+.sortIconIsSorted {
+  color: design-token("color.white");
+}
+
 .row {
   display: contents;
 }
@@ -147,13 +151,11 @@
   .cell {
     background: design-token("color.gray.050");
     color: design-token("color.blue.700");
-    font-weight: 500;
   }
 }
 
 .rowExpanded {
   .cell {
-    font-weight: 600;
     margin-bottom: component-token("data-grid", "expanded-row-height");
   }
 }