feat(Clockface 4): Progressbar (#900)

influxdata · Nov 8, 2022 · 782ca5a · 782ca5a
1 parent 5561802
commit 782ca5a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/src/Components/ProgressBar/ProgressBar.scss b/src/Components/ProgressBar/ProgressBar.scss
@@ -10,7 +10,7 @@
   height: 12px;
   box-sizing: border-box;
   padding: $cf-space-3xs 0;
-  background-color: $cf-grey-5;
+  background-color: $cf-grey-1;
   display: inline-flex;
   position: relative;
 }
@@ -25,7 +25,7 @@
 .cf-progress-bar--text {
   margin-top: $cf-space-2xs;
   width: 100%;
-  color: $cf-grey-55;
+  color: #88889b;
   display: inline-flex;
   justify-content: space-between;
   font-size: $cf-text-base-0;

diff --git a/src/Components/ProgressBar/ProgressBar.tsx b/src/Components/ProgressBar/ProgressBar.tsx
@@ -45,7 +45,7 @@ export const ProgressBar = forwardRef<ProgressBarRef, ProgressBarProps>(
       max = 100,
       label,
       className,
-      color = InfluxColors.White,
+      color = InfluxColors.Lavender,
       barGradient,
       valueText,
       maxText,

diff --git a/src/Constants/colors.ts b/src/Constants/colors.ts
@@ -487,6 +487,22 @@ export const influxGradients = {
     start: InfluxColors.Pool,
     stop: InfluxColors.Pulsar,
   },
+
+  // New gradients
+  LightMode: {
+    start: '#D30971',
+    stop: '#9B2AFF',
+  },
+
+  DarkMode: {
+    start: '#F863B0',
+    stop: '#BC61E6',
+  },
+
+  TurquoiseChartreuse: {
+    start: '#5EE4E4',
+    stop: '#D6F622',
+  },
 }
 
 export const dropdownScrollColors = {

diff --git a/src/Types/index.tsx b/src/Types/index.tsx
@@ -140,6 +140,9 @@ export enum Gradients {
   DangerLight = 'DangerLight',
   Danger = 'Danger',
   DangerDark = 'DangerDark',
+  DarkMode = 'DarkMode',
+  LightMode = 'LightMode',
+  TurquoiseChartreuse = 'TurquoiseChartreuse',
 }
 
 export enum DropdownMenuTheme {