From 782ca5a199fcb23610ea23fcf5e52808e01fb32b Mon Sep 17 00:00:00 2001
From: Chitlange Sahas <chitlangesahas@gmail.com>
Date: Tue, 8 Nov 2022 12:31:23 -0700
Subject: [PATCH] feat(Clockface 4): Progressbar (#900)

---
 src/Components/ProgressBar/ProgressBar.scss |  4 ++--
 src/Components/ProgressBar/ProgressBar.tsx  |  2 +-
 src/Constants/colors.ts                     | 16 ++++++++++++++++
 src/Types/index.tsx                         |  3 +++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/Components/ProgressBar/ProgressBar.scss b/src/Components/ProgressBar/ProgressBar.scss
index 70fbd3ad..7f7d9715 100644
--- 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
index a49f0a85..3305abed 100644
--- 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
index 01f0797c..71216bb6 100644
--- 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
index 8207c2fb..48715f2a 100644
--- 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 {