Merge pull request #24 from rossbulat/rb-chain-styling

feat: override accent secondary with chain color
polkadot-cloud · Mar 10, 2024 · ea286b7 · ea286b7
2 parents de213ea + 2069822
commit ea286b7
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 93 deletions.
diff --git a/src/IntegrityChecks/index.ts b/src/IntegrityChecks/index.ts
@@ -4,7 +4,6 @@
 import type { Tabs } from 'contexts/Tabs/types';
 import { NetworkDirectory } from 'config/networks';
 import { defaultTagsConfig } from 'contexts/Tags/defaults';
-
 import type { TagsConfig, TagsList } from 'contexts/Tags/types';
 import type { AppliedTags } from 'contexts/ChainFilter/types';
 
@@ -68,19 +67,21 @@ export const performTabsCheck = ({
 // Checks if a tabId exists for each key of the provided string data.
 export const sanitizeKeysForTabExistence = (
   activeTabs: Tabs,
-  entries?: Record<number, string>
+  entries?: Record<string, string>
 ) => {
-  const result = entries;
-  let updated = false;
+  const updated = false;
 
-  if (result) {
-    Object.entries(result).forEach(([tabId, entry]) => {
-      if (!activeTabs?.find(({ id }) => id === Number(tabId)) || entry === '') {
-        delete result[Number(tabId)];
-        updated = true;
-      }
-    });
-  }
+  const result = Object.fromEntries(
+    Object.entries(entries || {}).reduce(
+      (acc: [string, string][], [tabId, entry]) => {
+        if (activeTabs.find(({ id }) => id === Number(tabId)) && entry !== '') {
+          return acc.concat([[tabId, entry]]);
+        }
+        return acc;
+      },
+      []
+    )
+  );
 
   return {
     updated,
@@ -109,7 +110,7 @@ export const sanitizeTags = ({
       for (const chain of chains) {
         if (!NetworkDirectory[chain]) {
           // If error, fallback to defaults if exist, otherwise filter out the chain.
-          result[tagId] =
+          result.tagId =
             defaultTagsConfig[tagId] || chains.filter((c) => c !== chain);
           updated = true;
         }
@@ -139,25 +140,27 @@ export const sanitizeAppliedTags = ({
   tags: TagsList;
   appliedTags: AppliedTags;
 }) => {
-  const result = appliedTags;
-  let updated = false;
+  const updated = false;
 
-  if (result) {
-    Object.entries(appliedTags).forEach(([tabId, applied]) => {
-      if (!activeTabs?.find(({ id }) => id === Number(tabId))) {
-        delete result[Number(tabId)];
-        updated = true;
-      } else {
+  const result = Object.fromEntries(
+    Object.entries(appliedTags || {}).reduce(
+      (acc: [string, string[]][], [tabId, applied]) => {
+        if (!activeTabs?.find(({ id }) => id === Number(tabId))) {
+          return acc;
+        }
         // Check if each `applied` value is a valid tag id, and remove otherwise.
-        applied.forEach((tagId) => {
+        applied = applied.reduce((acc2: string[], tagId) => {
           if (!tags?.[tagId]) {
-            result[Number(tabId)].splice(applied.indexOf(tagId), 1);
-            updated = true;
+            return acc2;
           }
-        });
-      }
-    });
-  }
+          return acc2.concat(tagId);
+        }, []);
+
+        return acc.concat([[tabId, applied]]);
+      },
+      []
+    )
+  );
 
   return {
     updated,

diff --git a/src/config/networks/index.ts b/src/config/networks/index.ts
@@ -14,6 +14,7 @@ export interface NetworkDirectoryItem {
   };
   name: string;
   unit: string;
+  color: string;
   providers: Record<string, string>;
 }
 
@@ -27,6 +28,7 @@ export const NetworkDirectory: NetworkDirectory = {
     },
     name: 'Polkadot Relay Chain',
     unit: 'DOT',
+    color: '#c10e7d',
     providers: {
       'Automata 1RPC': 'wss://1rpc.io/dot',
       Dwellir: 'wss://polkadot-rpc.dwellir.com',
@@ -45,6 +47,7 @@ export const NetworkDirectory: NetworkDirectory = {
     },
     name: 'Kusama Relay Chain',
     unit: 'KSM',
+    color: '#000',
     providers: {
       'Automata 1RPC': 'wss://1rpc.io/ksm',
       Dwellir: 'wss://kusama-rpc.dwellir.com',
@@ -63,6 +66,7 @@ export const NetworkDirectory: NetworkDirectory = {
     },
     name: 'Rococo Relay Chain',
     unit: 'ROC',
+    color: '#552bbf',
     providers: {
       Parity: 'wss://rococo-rpc.polkadot.io',
     },
@@ -73,6 +77,7 @@ export const NetworkDirectory: NetworkDirectory = {
     },
     name: 'Westend Relay Chain',
     unit: 'WND',
+    color: '#c63860',
     providers: {
       Dwellir: 'wss://westend-rpc.dwellir.com',
       'Dwellir Tunisia': 'wss://westend-rpc-tn.dwellir.com',

diff --git a/src/library/HeaderMenu/Wrappers.ts b/src/library/HeaderMenu/Wrappers.ts
@@ -46,10 +46,10 @@ export const HeaderMenuWrapper = styled.div`
         color: var(--text-color-secondary);
 
         &:hover {
-          color: var(--accent-color-primary);
+          color: var(--accent-color-secondary);
         }
         &.active {
-          color: var(--accent-color-primary);
+          color: var(--accent-color-secondary);
         }
 
         > .icon {
@@ -90,7 +90,7 @@ export const ButtonWrapper = styled.button`
     background-color: var(--button-secondary-background);
 
     &:hover {
-      color: var(--accent-color-primary);
+      color: var(--accent-color-secondary);
     }
 
     > svg {
@@ -100,7 +100,7 @@ export const ButtonWrapper = styled.button`
 
   &.active {
     > svg {
-      color: var(--accent-color-primary);
+      color: var(--accent-color-secondary);
     }
   }
 

diff --git a/src/screens/Common/PageWithMenu/index.tsx b/src/screens/Common/PageWithMenu/index.tsx
@@ -5,15 +5,49 @@ import { Body } from 'library/Body';
 import { Page as PageWrapper } from 'library/Page';
 import { SectionProvider } from 'library/Page/provider';
 import type { PageWithMenuProps } from './types';
+import { NetworkDirectory, type DirectoryId } from 'config/networks';
+import { useTabs } from 'contexts/Tabs';
+import { accentColors } from 'theme/accents/developer-console';
+import { useApi } from 'contexts/Api';
 
 // Renders a page and menu, with state controlling the active section of the page.
-export const PageWithMenu = ({ pageId, Page, Menu }: PageWithMenuProps) => (
-  <SectionProvider pageId={pageId}>
-    <Menu />
-    <Body>
-      <PageWrapper>
-        <Page />
-      </PageWrapper>
-    </Body>
-  </SectionProvider>
-);
+export const PageWithMenu = ({ pageId, Page, Menu }: PageWithMenuProps) => {
+  const { getApiStatus } = useApi();
+  const { getActiveTab, activeTabId } = useTabs();
+
+  const tab = getActiveTab();
+  const apiStatus = getApiStatus(activeTabId);
+
+  // Get colors from active chain id.
+  const chainId: DirectoryId | undefined =
+    (tab?.chain?.id as DirectoryId) || undefined;
+
+  const apiConnected = ['ready', 'connected', 'connecting'].includes(apiStatus);
+  const networkColor = NetworkDirectory[chainId]?.color;
+
+  // Get chain color, if present.
+  const color = !apiConnected
+    ? accentColors.primary.light
+    : networkColor
+      ? networkColor
+      : accentColors.secondary.light;
+
+  return (
+    <div
+      style={
+        color
+          ? Object.fromEntries([['--accent-color-secondary', color]])
+          : undefined
+      }
+    >
+      <SectionProvider pageId={pageId}>
+        <Menu />
+        <Body>
+          <PageWrapper>
+            <Page />
+          </PageWrapper>
+        </Body>
+      </SectionProvider>
+    </div>
+  );
+};
diff --git a/src/screens/Settings/Menu.tsx b/src/screens/Settings/Menu.tsx
@@ -7,13 +7,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate } from 'react-router-dom';
 import { SettingsSections, ScreenLabel } from './Route';
+import { accentColors } from 'theme/accents/developer-console';
 
 export const SettingsMenu = () => {
   const navigate = useNavigate();
   const { activeSection, setActiveSection } = useSection();
 
   return (
-    <HeaderMenuWrapper>
+    <HeaderMenuWrapper
+      /* Overriding tab color to be the same as primary color. */
+      style={Object.fromEntries([
+        ['--accent-color-secondary', accentColors.primary.light],
+      ])}
+    >
       <div className="menu">
         <section>
           <div className="label">{ScreenLabel}</div>

diff --git a/src/theme/accents/developer-console.css b/src/theme/accents/developer-console.css
@@ -7,18 +7,4 @@ SPDX-License-Identifier: GPL-3.0-only */
 
   --accent-color-secondary-light: rgb(178 60 129); /* #b23c81 */
   --accent-color-secondary-dark: rgb(178 60 129);
-
-  /* NOTE: Below colors are currently not in use. */
-
-  --accent-color-tertiary-light: #dedae8;
-  --accent-color-tertiary-dark: #32264c;
-
-  --accent-color-stroke-light: rgb(211 48 121);
-  --accent-color-stroke-dark: rgb(211 48 121);
-
-  --accent-color-transparent-light: rgb(211 48 121 / 5%);
-  --accent-color-transparent-dark: rgb(211 48 121 / 5%);
-
-  --accent-color-pending-light: rgb(211 48 121 / 50%);
-  --accent-color-pending-dark: rgb(211 48 121 / 50%);
 }
diff --git a/src/theme/accents/developer-console.ts b/src/theme/accents/developer-console.ts
@@ -0,0 +1,13 @@
+// Copyright 2024 @rossbulat/console authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+export const accentColors = {
+  primary: {
+    light: '#552bbf',
+    dark: '#6d39ee',
+  },
+  secondary: {
+    light: '#b23c81',
+    dark: '#b23c81',
+  },
+};
diff --git a/src/theme/accents/kusama-relay.css b/src/theme/accents/kusama-relay.css
@@ -7,16 +7,4 @@ SPDX-License-Identifier: GPL-3.0-only */
 
   --accent-color-secondary-light: #414c5c;
   --accent-color-secondary-dark: rgb(141 144 150);
-
-  --accent-color-tertiary-light: #e6e6e6;
-  --accent-color-tertiary-dark: #444444;
-
-  --accent-color-stroke-light: #4c4b63;
-  --accent-color-stroke-dark: #d1d1db;
-
-  --accent-color-transparent-light: rgb(51 51 51 / 5%);
-  --accent-color-transparent-dark: rgb(102 102 102 / 5%);
-
-  --accent-color-pending-light: rgb(51 51 51 / 50%);
-  --accent-color-pending-dark: rgb(102 102 102 / 50%);
 }
diff --git a/src/theme/accents/polkadot-relay.css b/src/theme/accents/polkadot-relay.css
@@ -7,16 +7,4 @@ SPDX-License-Identifier: GPL-3.0-only */
 
   --accent-color-secondary-light: #552bbf;
   --accent-color-secondary-dark: #6d39ee;
-
-  --accent-color-tertiary-light: #dedae8;
-  --accent-color-tertiary-dark: #32264c;
-
-  --accent-color-stroke-light: rgb(211 48 121);
-  --accent-color-stroke-dark: rgb(211 48 121);
-
-  --accent-color-transparent-light: rgb(211 48 121 / 5%);
-  --accent-color-transparent-dark: rgb(211 48 121 / 5%);
-
-  --accent-color-pending-light: rgb(211 48 121 / 50%);
-  --accent-color-pending-dark: rgb(211 48 121 / 50%);
 }
diff --git a/src/theme/accents/westend-relay.css b/src/theme/accents/westend-relay.css
@@ -7,16 +7,4 @@ SPDX-License-Identifier: GPL-3.0-only */
 
   --accent-color-secondary-light: #de6a50;
   --accent-color-secondary-dark: #d7674e;
-
-  --accent-color-tertiary-light: #e8d5d0;
-  --accent-color-tertiary-dark: #46302f;
-
-  --accent-color-stroke-light: #da4e71;
-  --accent-color-stroke-dark: #da4e71;
-
-  --accent-color-transparent-light: rgb(218 78 113 / 5%);
-  --accent-color-transparent-dark: rgb(218 78 113 / 5%);
-
-  --accent-color-pending-light: rgb(218 78 113 / 50%);
-  --accent-color-pending-dark: rgb(218 78 113 / 50%);
 }