From bf16d80a661ca1d1cd0cf038bcff4525fbff19c8 Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@parity.io>
Date: Tue, 2 Apr 2024 22:35:16 +0700
Subject: [PATCH] feat(ux): use secondary accent color for status UI (#2055)

---
 src/canvas/JoinPool/Wrappers.ts          |  4 ++--
 src/library/Card/Wrappers.ts             |  2 +-
 src/library/Form/Warning/Wrapper.ts      | 13 +++++++------
 src/library/Form/Warning/index.tsx       |  7 +------
 src/library/Pool/Rewards.tsx             |  4 ++--
 src/library/SideMenu/Primary/Wrappers.ts |  8 ++++----
 src/theme/theme.scss                     |  2 --
 7 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts
index d1d76432d..adc3f9bf3 100644
--- a/src/canvas/JoinPool/Wrappers.ts
+++ b/src/canvas/JoinPool/Wrappers.ts
@@ -118,8 +118,8 @@ export const TitleWrapper = styled.div`
               font-size: 1.1rem;
 
               &.blocked {
-                color: var(--status-warning-color);
-                border-color: var(--status-warning-color);
+                color: var(--accent-color-secondary);
+                border-color: var(--accent-color-secondary);
               }
 
               &.destroying {
diff --git a/src/library/Card/Wrappers.ts b/src/library/Card/Wrappers.ts
index a63ebf9f6..c06f80a5f 100644
--- a/src/library/Card/Wrappers.ts
+++ b/src/library/Card/Wrappers.ts
@@ -112,7 +112,7 @@ export const CardWrapper = styled.div<CardWrapperProps>`
   }
 
   &.warning {
-    border: 1px solid var(--status-warning-color);
+    border: 1px solid var(--accent-color-secondary);
   }
 
   &.prompt {
diff --git a/src/library/Form/Warning/Wrapper.ts b/src/library/Form/Warning/Wrapper.ts
index 43da4488f..973a61ab0 100644
--- a/src/library/Form/Warning/Wrapper.ts
+++ b/src/library/Form/Warning/Wrapper.ts
@@ -4,10 +4,10 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-  background: var(--background-warning);
-  border: 1px solid var(--status-warning-color-transparent);
+  background: var(--button-primary-background);
+  border: 1px solid var(--accent-color-secondary);
   margin: 0.5rem 0;
-  padding: 0.75rem 0.75rem;
+  padding: 0.6rem 0.9rem;
   border-radius: 0.75rem;
   display: flex;
   flex-flow: row wrap;
@@ -15,11 +15,12 @@ export const Wrapper = styled.div`
   width: 100%;
 
   > h4 {
-    color: var(--status-warning-color);
+    color: var(--accent-color-secondary);
+    font-family: Inter, sans-serif;
 
     .icon {
-      color: var(--status-warning-color);
-      margin-right: 0.6rem;
+      color: var(--accent-color-secondary);
+      margin-right: 0.5rem;
     }
   }
 `;
diff --git a/src/library/Form/Warning/index.tsx b/src/library/Form/Warning/index.tsx
index 357516409..c9afb6fd4 100644
--- a/src/library/Form/Warning/index.tsx
+++ b/src/library/Form/Warning/index.tsx
@@ -1,16 +1,11 @@
 // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { WarningProps } from '../types';
 import { Wrapper } from './Wrapper';
 
 export const Warning = ({ text }: WarningProps) => (
   <Wrapper>
-    <h4>
-      <FontAwesomeIcon icon={faExclamationTriangle} className="icon" />
-      {text}
-    </h4>
+    <h4>{text}</h4>
   </Wrapper>
 );
diff --git a/src/library/Pool/Rewards.tsx b/src/library/Pool/Rewards.tsx
index f461ac0b7..18bd3f9ba 100644
--- a/src/library/Pool/Rewards.tsx
+++ b/src/library/Pool/Rewards.tsx
@@ -129,7 +129,7 @@ export const RewardsGraph = ({ points = [], syncing }: RewardsGraphProps) => {
             key={`line_coord_${index}`}
             strokeWidth={5}
             opacity={1}
-            stroke="var(--accent-color-tertiary)"
+            stroke="var(--accent-color-transparent)"
             x1={x1}
             y1={y1}
             x2={x2}
@@ -146,7 +146,7 @@ export const RewardsGraph = ({ points = [], syncing }: RewardsGraphProps) => {
             stroke={
               zero
                 ? 'var(--text-color-tertiary)'
-                : 'var(--accent-color-secondary)'
+                : 'var(--accent-color-primary)'
             }
             x1={x1}
             y1={y1}
diff --git a/src/library/SideMenu/Primary/Wrappers.ts b/src/library/SideMenu/Primary/Wrappers.ts
index 083e558b5..7fc18bdb2 100644
--- a/src/library/SideMenu/Primary/Wrappers.ts
+++ b/src/library/SideMenu/Primary/Wrappers.ts
@@ -27,7 +27,7 @@ export const Wrapper = styled(motion.div)`
       border: 1px solid var(--accent-color-primary);
     }
     &.warning {
-      border: 1px solid var(--status-warning-color);
+      border: 1px solid var(--accent-color-secondary);
     }
   }
 
@@ -68,8 +68,8 @@ export const Wrapper = styled(motion.div)`
         border: 1px solid var(--accent-color-primary);
       }
       &.warning {
-        color: var(--status-warning-color);
-        border: 1px solid var(--status-warning-color-transparent);
+        color: var(--accent-color-secondary);
+        border: 1px solid var(--accent-color-secondary);
       }
       border-radius: 0.5rem;
       padding: 0.15rem 0.5rem;
@@ -82,7 +82,7 @@ export const Wrapper = styled(motion.div)`
     }
     &.warning {
       svg {
-        color: var(--status-warning-color);
+        color: var(--accent-color-secondary);
       }
     }
     &.minimised {
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 4e46e8af8..c931951bb 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -12,7 +12,6 @@ SPDX-License-Identifier: GPL-3.0-only */
   --background-canvas-card-secondary: rgb(255 255 255 / 35%);
   --background-floating-card: rgb(255 255 255 / 90%);
   --background-app-footer: rgb(244 225 225 / 75%);
-  --background-warning: #fdf9eb;
   --background-modal: #f9f7f7;
   --background-modal-footer: #efefef;
   --background-status-overlay: rgb(255 255 255 / 85%);
@@ -91,7 +90,6 @@ SPDX-License-Identifier: GPL-3.0-only */
   --background-canvas-card-secondary: rgb(44 40 44 / 35%);
   --background-floating-card: rgb(43 38 43 / 95%);
   --background-app-footer: #262327;
-  --background-warning: #33332a;
   --background-modal: rgb(43 38 43);
   --background-modal-footer: rgb(37 32 37);
   --background-status-overlay: rgb(43 38 43 / 75%);