Move component styles to scss module. Add subtle shadow on hover.

ethyca · Jan 17, 2025 · 078f452 · 078f452
1 parent d5f35d2
commit 078f452
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/clients/admin-ui/src/features/common/CalloutNavCard.module.scss b/clients/admin-ui/src/features/common/CalloutNavCard.module.scss
@@ -0,0 +1,20 @@
+.container {
+  border-radius: 6px;
+  display: flex;
+  flex-grow: 1;
+
+  transition: box-shadow 0.2s ease-in-out;
+
+  &:hover {
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.card {
+  flex-grow: 1;
+  border-radius: 0px 6px 6px 0px;
+  border-left: none;
+  background-color: var(--fidesui-corinth);
+}
diff --git a/clients/admin-ui/src/features/common/CalloutNavCard.tsx b/clients/admin-ui/src/features/common/CalloutNavCard.tsx
@@ -1,5 +1,6 @@
 import { AntCard as Card, AntTypography as Typography, Box } from "fidesui";
-import palette from "fidesui/src/palette/palette.module.scss";
+
+import styles from "./CalloutNavCard.module.scss";
 
 interface CalloutNavCardProps {
   color: string;
@@ -17,17 +18,9 @@ const CalloutNavCard = ({
   <Box
     borderLeft={`9px solid ${color}`}
     borderRadius="6px"
-    className="flex grow"
+    className={styles.container}
   >
-    <Card
-      className="grow"
-      style={{
-        backgroundColor: palette.FIDESUI_CORINTH,
-        borderRadius: "0px 6px 6px 0px",
-        borderLeft: "none",
-      }}
-      data-testid={`tile-${title}`}
-    >
+    <Card className={styles.card} data-testid={`tile-${title}`}>
       <div className="mb-1 flex items-center gap-1.5">
         {icon}
         <Typography.Title