From 919b38c63ae8e53e59b1bdcd2240b0335e8b4657 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Thu, 5 Mar 2020 09:16:48 -0500
Subject: [PATCH] ui: Update the shadows for radio buttons and the cards
 (#7391)

* Update box-shadowing for cards and radio buttons to low
* Update box-shadowing for hover cards to middle
* Create a new box-shadow CSS variable for form elements
---
 ui-v2/app/styles/base/components/buttons/skin.scss           | 2 +-
 ui-v2/app/styles/base/components/form-elements/skin.scss     | 1 +
 ui-v2/app/styles/base/components/stats-card/skin.scss        | 4 ++--
 ui-v2/app/styles/base/decoration/base-variables.scss         | 5 +++--
 ui-v2/app/styles/components/expanded-single-select/skin.scss | 2 +-
 ui-v2/app/styles/components/table.scss                       | 2 +-
 6 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/ui-v2/app/styles/base/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss
index 8a79fdb11..c5914057f 100644
--- a/ui-v2/app/styles/base/components/buttons/skin.scss
+++ b/ui-v2/app/styles/base/components/buttons/skin.scss
@@ -27,7 +27,7 @@
   @extend %button;
   border-width: 1px;
   border-radius: $decor-radius-100;
-  box-shadow: $decor-elevation-200;
+  box-shadow: $decor-elevation-300;
 }
 /* color */
 %copy-button {
diff --git a/ui-v2/app/styles/base/components/form-elements/skin.scss b/ui-v2/app/styles/base/components/form-elements/skin.scss
index 69471f11b..c65a20963 100644
--- a/ui-v2/app/styles/base/components/form-elements/skin.scss
+++ b/ui-v2/app/styles/base/components/form-elements/skin.scss
@@ -7,6 +7,7 @@
 %form-element-text-input {
   -moz-appearance: none;
   -webkit-appearance: none;
+  box-shadow: inset $decor-elevation-100;
   border-radius: $decor-radius-100;
   border: $decor-border-100;
   outline: none;
diff --git a/ui-v2/app/styles/base/components/stats-card/skin.scss b/ui-v2/app/styles/base/components/stats-card/skin.scss
index df036158f..14f552fdb 100644
--- a/ui-v2/app/styles/base/components/stats-card/skin.scss
+++ b/ui-v2/app/styles/base/components/stats-card/skin.scss
@@ -14,11 +14,11 @@
 }
 %stats-card,
 %stats-card header::before {
-  box-shadow: $decor-elevation-400;
+  box-shadow: $decor-elevation-300;
 }
 %stats-card:hover,
 %stats-card:focus {
-  box-shadow: $decor-elevation-600;
+  box-shadow: $decor-elevation-400;
 }
 %stats-card header > :not(a):last-child {
   border: $decor-border-100;
diff --git a/ui-v2/app/styles/base/decoration/base-variables.scss b/ui-v2/app/styles/base/decoration/base-variables.scss
index 5342e1cc5..1a77c0cba 100644
--- a/ui-v2/app/styles/base/decoration/base-variables.scss
+++ b/ui-v2/app/styles/base/decoration/base-variables.scss
@@ -7,8 +7,9 @@ $decor-border-000: none;
 $decor-border-100: 1px solid;
 $decor-border-200: 2px solid;
 $decor-border-300: 3px solid;
-$decor-elevation-100: 0 2px 4px rgba(0, 0, 0, 0.1);
-$decor-elevation-200: 0 5px 1px -2px rgba($black, 0.12);
+$decor-elevation-100: 0 3px 2px rgba(0, 0, 0, 0.06);
+$decor-elevation-200: 0 2px 4px rgba(0, 0, 0, 0.1);
+$decor-elevation-300: 0 5px 1px -2px rgba($black, 0.12);
 $decor-elevation-400: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1);
 $decor-elevation-600: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
 $decor-elevation-800: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);
diff --git a/ui-v2/app/styles/components/expanded-single-select/skin.scss b/ui-v2/app/styles/components/expanded-single-select/skin.scss
index 2bf1ab2cc..4e009bc97 100644
--- a/ui-v2/app/styles/components/expanded-single-select/skin.scss
+++ b/ui-v2/app/styles/components/expanded-single-select/skin.scss
@@ -4,7 +4,7 @@
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
 %expanded-single-select input[type='radio']:focus + * {
-  box-shadow: $decor-elevation-400;
+  box-shadow: $decor-elevation-300;
 }
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss
index 9b7f97ec6..c67c7518e 100644
--- a/ui-v2/app/styles/components/table.scss
+++ b/ui-v2/app/styles/components/table.scss
@@ -45,7 +45,7 @@ table:not(.sessions) td:first-child {
 }
 
 table:not(.sessions) tbody tr:hover {
-  box-shadow: $decor-elevation-100;
+  box-shadow: $decor-elevation-300;
 }
 /* Header Tooltips/Icon*/
 th {