From 485dc64c5f2ac406ec7d05a066a1629693869fe5 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Tue, 9 Jul 2024 10:20:34 -0400
Subject: [PATCH] add hover state to accordions and tweaks styles (#27577)

---
 .../workspace-optimization/dashboard.scss         | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/workspace-optimization/dashboard.scss b/webapp/channels/src/components/admin_console/workspace-optimization/dashboard.scss
index e6ed2afe23..32e1733d65 100644
--- a/webapp/channels/src/components/admin_console/workspace-optimization/dashboard.scss
+++ b/webapp/channels/src/components/admin_console/workspace-optimization/dashboard.scss
@@ -24,7 +24,6 @@
 }
 
 .WorkspaceOptimizationDashboard {
-    background-color: #fff;
 
     button[class*=' StyledChip'],
     button[class^='StyledChip'] {
@@ -146,7 +145,8 @@
             &__title {
                 margin-bottom: 8px;
                 color: var(--sys-denim-center-channel-text);
-                font-size: 22px;
+                font-family: Metropolis, sans-serif;
+                font-size: 20px;
                 font-weight: 700;
                 line-height: 28px;
             }
@@ -179,11 +179,20 @@
         margin-left: 4px;
 
         li.accordion-card {
+            overflow: hidden;
             box-sizing: border-box;
-            border: 1px solid rgba(63, 67, 80, 0.08) !important;
+            border: var(--border-light);
+            border-radius: var(--radius-s);
             margin-top: 16px;
             background-color: var(--sys-center-channel-bg);
 
+            &:has(.accordion-card-header[role="button"]){
+                &:hover {
+                    border: var(--border-dark);
+                    box-shadow: var(--elevation-2);
+                }
+            }
+
             .accordion-card-header {
                 max-height: 92px;
                 padding: 0;