feat(Popover): clockface 4 updates (#898)

influxdata · Nov 8, 2022 · 5561802 · 5561802
1 parent 7c47667
commit 5561802
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 31 deletions.
diff --git a/src/Components/Popover/Base/Popover.scss b/src/Components/Popover/Base/Popover.scss
@@ -21,9 +21,10 @@
   position: relative;
   color: $cf-white;
   box-shadow: 0px 0px 16px rgba($cf-grey-95, 0.3);
+  border: $cf-border solid rgba($cf-white, 0.05);
 
   .cf-popover__nav.cf-popover & {
-    @extend %backdrop-blur-blue;
+    @extend %backdrop-blur-dark;
   }
 }
 

diff --git a/src/Components/Popover/Composed/ErrorTooltip.scss b/src/Components/Popover/Composed/ErrorTooltip.scss
@@ -6,7 +6,7 @@
 */
 
 .cf-error-tooltip {
-  color: $c-fire;
+  color: $cf-red;
   display: inline-flex;
   justify-content: center;
   position: relative;
@@ -15,6 +15,6 @@
 
   &:hover {
     cursor: help;
-    color: $c-curacao;
+    color: rgba($cf-red, 0.85);
   }
 }
diff --git a/src/Components/Popover/Composed/QuestionMarkTooltip.scss b/src/Components/Popover/Composed/QuestionMarkTooltip.scss
@@ -24,24 +24,24 @@
   &.cf-question-mark-tooltip__default {
     background-color: $g13-mist;
   }
-  
+
   &.cf-question-mark-tooltip__primary {
-    background-color: $c-pool;
+    background-color: $cf-turquoise;
   }
-  
+
   &.cf-question-mark-tooltip__secondary {
-    background-color: $c-comet;
+    background-color: $cf-lavender;
   }
-  
+
   &.cf-question-mark-tooltip__success {
-    background-color: $c-rainforest;
+    background-color: $cf-green;
   }
-  
+
   &.cf-question-mark-tooltip__warning {
     background-color: $c-thunder;
   }
-  
+
   &.cf-question-mark-tooltip__danger {
-    background-color: $c-dreamsicle;
+    background-color: $cf-red;
   }
 }
diff --git a/src/Components/TreeNav/TreeNav.scss b/src/Components/TreeNav/TreeNav.scss
@@ -504,7 +504,7 @@ $cf-tree-nav--user-padding: (
   flex-direction: column;
   align-items: stretch;
   padding: $cf-space-s $cf-space-s $cf-space-s $cf-tree-nav__small-height;
-  @extend %backdrop-blur-blue;
+  @extend %backdrop-blur-dark;
 
   .cf-tree-nav--username,
   .cf-tree-nav--team {

diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
@@ -644,8 +644,8 @@ $cf-scrollbar-offset: 3px;
 
 // Blur
 %backdrop-blur {
-  -webkit-backdrop-filter: blur(15px);
-  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
 }
 
 %backdrop-bg {
@@ -658,23 +658,7 @@ $cf-scrollbar-offset: 3px;
   }
 }
 
-%backdrop-blue {
-  background-color: rgba($cf-grey-15, 0.9);
-
-  @supports (
-    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
-  ) {
-    background: linear-gradient(0deg, rgba($c-pool, 0.05), rgba($c-pool, 0.05)),
-      #{rgba($cf-grey-95, 0.05)};
-  }
-}
-
 %backdrop-blur-dark {
   @extend %backdrop-blur;
   @extend %backdrop-bg;
 }
-
-%backdrop-blur-blue {
-  @extend %backdrop-blur;
-  @extend %backdrop-blue;
-}