Hover states for the library page

newjersey · Jan 22, 2025 · 05923e7 · 05923e7
1 parent 01e5ced
commit 05923e7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/pages/library.css b/src/pages/library.css
@@ -74,17 +74,37 @@
     padding: 0.25rem 0.75rem;
   }
 
+  &:hover,
+  &:focus-within {
+    background-color: var(--gray-medium);
+  }
+
   &:has(:checked) {
     background-color: var(--black);
     color: var(--white);
   }
+
+  &:hover:has(:checked),
+  &:focus-within:has(:checked) {
+    background-color: var(--gray-dark-extra);
+  }
 }
 
 .library-list {
   margin-top: 1.5rem;
   margin-bottom: 6rem;
 }
 
+.library-item.email-template {
+  border-radius: 0.5rem;
+  transition: background-color ease-in 100ms;
+
+  &:hover,
+  &:focus-within {
+    background-color: var(--gray-light);
+  }
+}
+
 .library-name-container {
   align-items: center;
   display: flex;

diff --git a/src/pages/library.tsx b/src/pages/library.tsx
@@ -109,7 +109,7 @@ const LibaryPage: FC = () => {
           {filteredEmailTemplates.length > 0 ? (
             <List className="library-list">
               {filteredEmailTemplates.map(({ id, name, description, path }) => (
-                <ListItem key={id} className="library-item">
+                <ListItem key={id} className="library-item email-template">
                   <Link to={path} className="library-name">
                     {name}
                   </Link>