From 369ace5b104757240c1878dc81e85da8b558ce9e Mon Sep 17 00:00:00 2001
From: Drumming2008 <89492541+Drumming2008@users.noreply.github.com>
Date: Fri, 12 Apr 2024 14:09:27 -0700
Subject: [PATCH 1/4] Update dashboard_card.scss

Updated the box shadow to transition when hovered, and added a small background to the cards so they look more modern.
---
 app/stylesheets/bundles/dashboard_card.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/stylesheets/bundles/dashboard_card.scss b/app/stylesheets/bundles/dashboard_card.scss
index d068518bea24..5828b4213678 100644
--- a/app/stylesheets/bundles/dashboard_card.scss
+++ b/app/stylesheets/bundles/dashboard_card.scss
@@ -83,17 +83,21 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
 
 .ic-DashboardCard {
   box-sizing: border-box;
-  box-shadow: 0 2px 5px rgba(black, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
   border-radius: 4px; // to keep consistency between dashboard cards and planner app
   overflow: hidden;
-  background: $ic-color-light;
+  background: rgba(0, 0, 0, 0.02);
   width: $ic-DashboardCard-width;
   display: inline-block;
   vertical-align: top;
   margin: direction-sides($ic-sp*3 0 0 $ic-sp*3);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 
   .no-touch & {
-    &:hover { box-shadow: 0 4px 10px rgba(black, 0.35); }
+    &:is(:hover, :focus-within) {
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      transform: translateY(-2px);
+    }
   }
 }
 
@@ -118,7 +122,6 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
 .ic-DashboardCard__header_hero {
   box-sizing: border-box;
   height: 146px;
-  border: 1px solid rgba(black, 0.1);
 }
 
 .ic-DashboardCard__header_image {

From af0e2ccda151ed6a7ba4e76eb86d1efaae0cbb0a Mon Sep 17 00:00:00 2001
From: Drumming2008 <89492541+Drumming2008@users.noreply.github.com>
Date: Fri, 12 Apr 2024 14:51:15 -0700
Subject: [PATCH 2/4] Update dashboard_card.scss

---
 app/stylesheets/bundles/dashboard_card.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/stylesheets/bundles/dashboard_card.scss b/app/stylesheets/bundles/dashboard_card.scss
index 5828b4213678..400f1be12597 100644
--- a/app/stylesheets/bundles/dashboard_card.scss
+++ b/app/stylesheets/bundles/dashboard_card.scss
@@ -86,17 +86,17 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
   border-radius: 4px; // to keep consistency between dashboard cards and planner app
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.02);
+  background: rgba(0, 0, 0, 0.02); // because the box shadow only shows on hover, add a slight gray background so the card stands out
   width: $ic-DashboardCard-width;
   display: inline-block;
   vertical-align: top;
   margin: direction-sides($ic-sp*3 0 0 $ic-sp*3);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease; // add transition to the box-shadow and transform
 
   .no-touch & {
     &:is(:hover, :focus-within) {
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      transform: translateY(-2px);
+      transform: translateY(-2px); // transform the card up so with the shadow it looks even more like it's floating
     }
   }
 }

From b5ba215b8e104433dae0c9db60f3f6dccb9b3391 Mon Sep 17 00:00:00 2001
From: Drumming2008 <89492541+Drumming2008@users.noreply.github.com>
Date: Sun, 14 Apr 2024 20:35:15 -0700
Subject: [PATCH 3/4] Update dashboard_card.scss comments

---
 app/stylesheets/bundles/dashboard_card.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/stylesheets/bundles/dashboard_card.scss b/app/stylesheets/bundles/dashboard_card.scss
index 400f1be12597..a6128710ec29 100644
--- a/app/stylesheets/bundles/dashboard_card.scss
+++ b/app/stylesheets/bundles/dashboard_card.scss
@@ -91,7 +91,7 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
   display: inline-block;
   vertical-align: top;
   margin: direction-sides($ic-sp*3 0 0 $ic-sp*3);
-  transition: transform 0.2s ease, box-shadow 0.2s ease; // add transition to the box-shadow and transform
+  transition: transform 0.2s ease, box-shadow 0.2s ease; // add appearance transition
 
   .no-touch & {
     &:is(:hover, :focus-within) {

From 9b3e0fe2d446620189a12900b43470a18f1686ef Mon Sep 17 00:00:00 2001
From: Drumming2008 <89492541+Drumming2008@users.noreply.github.com>
Date: Sun, 14 Apr 2024 20:45:23 -0700
Subject: [PATCH 4/4] Update dashboard_card.scss

---
 app/stylesheets/bundles/dashboard_card.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/stylesheets/bundles/dashboard_card.scss b/app/stylesheets/bundles/dashboard_card.scss
index a6128710ec29..98fa487c7e1a 100644
--- a/app/stylesheets/bundles/dashboard_card.scss
+++ b/app/stylesheets/bundles/dashboard_card.scss
@@ -133,7 +133,6 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
 .ic-DashboardCard__header_content {
   box-sizing: border-box;
   padding: $ic-sp $ic-sp*1.5 0;
-  background: $ic-color-light;
 }
 
 @mixin dashcardHeaderButton {