Merge remote-tracking branch 'origin/next' into next

AKASHAorg · May 25, 2022 · 05cd426 · 05cd426
2 parents e0e8290 + 6b4fc86
commit 05cd426
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,