From 6b4fc867cba9ace55209bef4ba19173987fbbb4d Mon Sep 17 00:00:00 2001
From: Josemaria Nriagu <49484425+josenriagu@users.noreply.github.com>
Date: Wed, 25 May 2022 11:23:05 +0100
Subject: [PATCH] fix(ui): update theme colors (#1669)

- update interface
---
 ui/design/src/components/TransparencyLogBanner/index.tsx  | 8 ++++----
 .../src/components/TransparencyLogMiniCard/index.tsx      | 2 +-
 ui/design/src/styles/themes/dark/colors-dark.ts           | 4 +++-
 ui/design/src/styles/themes/interfaces.ts                 | 2 ++
 ui/design/src/styles/themes/light/colors-light.ts         | 2 ++
 ui/design/src/styles/themes/utils/create-grommet-theme.ts | 2 ++
 6 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/design/src/components/TransparencyLogBanner/index.tsx b/ui/design/src/components/TransparencyLogBanner/index.tsx
index 5c880744a0..fea2075bb2 100644
--- a/ui/design/src/components/TransparencyLogBanner/index.tsx
+++ b/ui/design/src/components/TransparencyLogBanner/index.tsx
@@ -59,8 +59,8 @@ const TransparencyLogBanner: React.FC<ITransparencyLogBannerProps> = props => {
 
   const stats = [
     { count: keptCount + delistedCount, label: totalCountLabel, color: 'grey' },
-    { count: keptCount, label: keptCountLabel, color: 'green' },
-    { count: delistedCount, label: delistedCountLabel, color: 'red' },
+    { count: keptCount, label: keptCountLabel, color: 'altGreen' },
+    { count: delistedCount, label: delistedCountLabel, color: 'altRed' },
   ];
 
   const handleClickCodeOfConduct = () => {
@@ -93,12 +93,12 @@ const TransparencyLogBanner: React.FC<ITransparencyLogBannerProps> = props => {
             values={[
               {
                 value: delistedCount,
-                color: 'red',
+                color: 'altRed',
                 label: delistedCountLabel,
               },
               {
                 value: keptCount,
-                color: 'green',
+                color: 'altGreen',
                 label: keptCountLabel,
               },
             ]}
diff --git a/ui/design/src/components/TransparencyLogMiniCard/index.tsx b/ui/design/src/components/TransparencyLogMiniCard/index.tsx
index c38609ce16..6da33e1e6b 100644
--- a/ui/design/src/components/TransparencyLogMiniCard/index.tsx
+++ b/ui/design/src/components/TransparencyLogMiniCard/index.tsx
@@ -61,7 +61,7 @@ const TransparencyLogMiniCard: React.FC<ITransparencyLogMiniCardProps> = props =
               height="8px"
               margin={{ right: 'xsmall' }}
               round="50%"
-              background={isDelisted ? 'red' : 'green'}
+              background={isDelisted ? 'altRed' : 'altGreen'}
             />
             <Text size="large" weight="bold" style={{ textTransform: 'capitalize' }}>
               {title}
diff --git a/ui/design/src/styles/themes/dark/colors-dark.ts b/ui/design/src/styles/themes/dark/colors-dark.ts
index cee4f07ccb..da11659fa3 100644
--- a/ui/design/src/styles/themes/dark/colors-dark.ts
+++ b/ui/design/src/styles/themes/dark/colors-dark.ts
@@ -43,9 +43,11 @@ const colors: IColorsDark = {
   subtitleText: '#F4F5F7', // cadetGrey
   errorText: '#FF5050', // red
   darkText: '#47484A', // system/off white/dark
-  accentText: '#4E71FF', // blue
+  accentText: '#8B9FFF', // blue
   inputText: '#47484A', // system/off white/dark
   background: '#0D1A2D', // dark blue
+  altRed: '#FF5050',
+  altGreen: '#36B37E',
   overlay: 'rgba(0, 0, 0, 0.6)', // black, 60% opacity
   beigeBackground: '#F8F4F4', // lightBeige
   ultraLightBackground: '#E7E9EC', // ultralightGrey
diff --git a/ui/design/src/styles/themes/interfaces.ts b/ui/design/src/styles/themes/interfaces.ts
index 9f2b7f9a26..5d0aa19b7c 100644
--- a/ui/design/src/styles/themes/interfaces.ts
+++ b/ui/design/src/styles/themes/interfaces.ts
@@ -58,4 +58,6 @@ export interface IColors {
   titleText: string;
   subtitleText: string;
   activeCardBackground: string;
+  altRed: string;
+  altGreen: string;
 }
diff --git a/ui/design/src/styles/themes/light/colors-light.ts b/ui/design/src/styles/themes/light/colors-light.ts
index 07c6337375..6078a72403 100644
--- a/ui/design/src/styles/themes/light/colors-light.ts
+++ b/ui/design/src/styles/themes/light/colors-light.ts
@@ -50,6 +50,8 @@ const colors: IColorsLight = {
   accentText: '#4666E6', // blue
   inputText: '#425166', // darkBlue
   background: '#FFFFFF', // white
+  altRed: '#FF5050',
+  altGreen: '#36B37E',
   overlay: 'rgba(0, 0, 0, 0.6)', // black, 60% opacity
   ultraLightBackground: '#FBFCFD', // ultralightGrey
   beigeBackground: '#F8F4F4', // lightBeige
diff --git a/ui/design/src/styles/themes/utils/create-grommet-theme.ts b/ui/design/src/styles/themes/utils/create-grommet-theme.ts
index 406d62059a..360b86baa7 100644
--- a/ui/design/src/styles/themes/utils/create-grommet-theme.ts
+++ b/ui/design/src/styles/themes/utils/create-grommet-theme.ts
@@ -57,6 +57,8 @@ const createGrommetTheme = (styledComponentsTheme: DefaultTheme) => {
         brand: styledComponentsTheme.colors.accent,
         darkBorder: styledComponentsTheme.colors.darkBorder,
         background: styledComponentsTheme.colors.background,
+        altRed: styledComponentsTheme.colors.altRed,
+        altGreen: styledComponentsTheme.colors.altGreen,
         overlay: styledComponentsTheme.colors.overlay,
         darkBackground: styledComponentsTheme.colors.darkBackground,
         modalBackground: styledComponentsTheme.colors.modalBackground,