From 078f452cdc54e85ccfc1e5a4f39f0f4e8208b0a8 Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@live.com.ar>
Date: Fri, 17 Jan 2025 12:32:05 -0300
Subject: [PATCH] Move component styles to scss module. Add subtle shadow on
 hover.

---
 .../common/CalloutNavCard.module.scss         | 20 +++++++++++++++++++
 .../src/features/common/CalloutNavCard.tsx    | 15 ++++----------
 2 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 clients/admin-ui/src/features/common/CalloutNavCard.module.scss

diff --git a/clients/admin-ui/src/features/common/CalloutNavCard.module.scss b/clients/admin-ui/src/features/common/CalloutNavCard.module.scss
new file mode 100644
index 0000000000..f50302a420
--- /dev/null
+++ 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
index 0606585ca1..49eeb21678 100644
--- 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