feat(ux): use secondary accent color for status UI (#2055)

polkadot-cloud · Apr 2, 2024 · bf16d80 · bf16d80
1 parent b536faf
commit bf16d80
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 23 deletions.
diff --git 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
@@ -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
@@ -4,22 +4,23 @@
 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;
   align-items: center;
   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
@@ -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
@@ -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
@@ -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
@@ -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%);