feat: GHOST branding and theme across components and build configs

2026-10-30 02:49:09 -04:00 · 2026-10-30 02:49:09 -04:00 · f9d9dec1f4
commit f9d9dec1f4
parent 396e9e8fea
18 changed files with 65 additions and 26 deletions
--- a/packages/apps-config/src/ui/logos/chains/index.ts
+++ b/packages/apps-config/src/ui/logos/chains/index.ts
@ -18,6 +18,7 @@ export { chainsBitgreenPNG } from './generated/bitgreenPNG.js';
 export { chainsBittensorPNG } from './generated/bittensorPNG.js';
 export { chainsBrainstormPNG } from './generated/brainstormPNG.js';
 export { chainsBulletinSVG } from './generated/bulletinSVG.js';
+export { chainsCasperTestnetSVG } from './generated/CasperTestnetSVG.js';
 export { chainsChainflipPNG } from './generated/chainflipPNG.js';
 export { chainsCommuneaiPNG } from './generated/communeaiPNG.js';
 export { chainsComposableFinancePNG } from './generated/composableFinancePNG.js';
--- a/packages/apps-electron/webpack.renderer.cjs
+++ b/packages/apps-electron/webpack.renderer.cjs
@ -27,7 +27,7 @@ module.exports = merge(
        }]
      }),
      new HtmlWebpackPlugin({
-        PAGE_TITLE: 'Polkadot/Substrate Portal',
+        PAGE_TITLE: 'GHOST Portal',
        minify: false,
        template: path.join(context, '../apps/public/index.html')
      })
--- a/packages/apps/public/favicon.ico
+++ b/packages/apps/public/favicon.ico
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@ -4,13 +4,13 @@
    <meta charset="utf-8">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="manifest.json">
-    <link rel="shortcut icon" href="favicon.ico">
+    <link rel="shortcut icon" href="ghost-favicon.ico">
    <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
    <script type="text/javascript" src="env-config.js"></script>
    <style>
      :root {
-        --font-mono: 0.889em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
-        --font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        --font-mono: 0.889em "Ubuntu Mono", Consolas, monaco, "Liberation Mono", "Courier New", Courier, monospace;
+        --font-sans: 1em Ubuntu, "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        /*
          From https://www.modularscale.com/?1&rem&1.125 and https://type-scale.com/ -
@ -44,7 +44,7 @@
        --bg-menu-hover: rgba(255, 255, 255, 0.2);
      }

-      [data-theme="dark"] {
+      [data-theme="dark-original"] {
        --bg-identicon-circle: #282829;
        --bg-input: #38393f;
        --bg-input-error: #48393f;
@ -72,7 +72,34 @@
        --opacity-gray: 0.1;
      }

-      [data-theme="light"] {
+[data-theme="dark"] {
+    --bg-identicon-circle: #345B87;
+    --bg-page: #1F4671;
+    --bg-menu: #1F4671;
+    --bg-page-gradient: linear-gradient(45deg, rgb(28, 54, 100), rgb(45, 87, 132)) rgb(31, 70, 113);
+    --bg-sidebar: #2a5185;
+    --bg-input: #345B87;
+    --bg-input-error: #5a2a30;
+    --bg-tabs: #1F4671;
+    --bg-tabs-border: #fff;
+    --bg-table: #3d6390;
+    --bg-toggle: #7A99BD;
+    --bg-inverse: rgba(31, 70, 113, 0.8);
+    --bg-static-extra: rgba(174, 196, 221, 0.15);
+    --border-identicon: transparent;
+    --border-input: #7A99BD;
+    --border-table: #fff;
+    --border-tabs: #ffffff30;
+    --color-bounty-info: #AEC4DD;
+    --color-checkbox: #AEC4DD;
+    --color-text: #ECF2FA;
+    --color-error: #F06F73;
+    --opacity-gray: 0.1;
+    --grey-anim-start: #AEC4DD;
+    --grey-anim-middle: #1F4671;
+}
+
+      [data-theme="light-original"] {
        --bg-identicon-circle: #eee;
        --bg-input: #ffffff;
        --bg-input-error: #fff6f6;
@ -119,7 +146,7 @@
      }

      .--tmp {
-        background: grey;
+        background: #50759E;
        filter: blur(2px);
        opacity: 0.15;
      }
--- a/packages/apps/public/locales/en/apps-config.json
+++ b/packages/apps/public/locales/en/apps-config.json
@ -5,8 +5,10 @@
  "rpc.dev.custom.entry": "Custom {{WS_URL}}",
  "rpc.dev.custom.own": "Custom",
  "rpc.dev.local": "Local Node",
+  "rpc.header.casper": "CASPER Testnet",
  "rpc.header.dev": "Development",
  "rpc.header.favorite": "Favorite chains",
+  "rpc.header.ghost": "GHOST Mainnet",
  "rpc.header.kusama.relay": "Kusama & parachains",
  "rpc.header.live": "Live networks",
  "rpc.header.paseo.relay": "Test Paseo & parachains",
--- a/packages/apps/public/locales/en/apps-routing.json
+++ b/packages/apps/public/locales/en/apps-routing.json
@ -16,6 +16,7 @@
  "nav.extrinsics": "Extrinsics",
  "nav.fellowship": "Fellowship",
  "nav.files": "Files (IPFS)",
+  "nav.forum": "Forum",
  "nav.gilt": "Gilt",
  "nav.github": "GitHub",
  "nav.js": "JavaScript",
--- a/packages/apps/public/locales/en/apps.json
+++ b/packages/apps/public/locales/en/apps.json
@ -17,6 +17,7 @@
  "You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure 'wss' endpoint.": "You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure 'wss' endpoint.",
  "You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.": "You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.",
  "custom endpoint": "custom endpoint",
+  "nav.forum": "nav.forum",
  "nav.github": "nav.github",
  "nav.wiki": "nav.wiki",
  "transfer received": "transfer received",
--- a/packages/apps/src/Menu/index.tsx
+++ b/packages/apps/src/Menu/index.tsx
@ -27,16 +27,22 @@ interface Props {
 function createExternals (t: (key: string, optionsOrText?: string | { replace: Record<string, unknown> }, options?: { ns: string }) => string): ItemRoute[] {
  return [
    {
-      href: 'https://github.com/polkadot-js/apps',
+      href: 'https://git.ghostchain.io/ghostchain',
      icon: 'code-branch',
      name: 'github',
-      text: t('nav.github', 'GitHub', { ns: 'apps-routing' })
+      text: t('nav.github', 'Git', { ns: 'apps-routing' })
    },
    {
-      href: 'https://wiki.polkadot.network',
+      href: 'https://docs.ghostchain.io',
      icon: 'book',
      name: 'wiki',
-      text: t('nav.wiki', 'Wiki', { ns: 'apps-routing' })
+      text: t('nav.wiki', 'Docs', { ns: 'apps-routing' })
+    },
+    {
+      href: 'https://ghostforum.org',
+      icon: 'message',
+      name: 'forum',
+      text: t('nav.forum', 'Forum', { ns: 'apps-routing' })
    }
  ];
 }
--- a/packages/apps/src/overlays/Base.tsx
+++ b/packages/apps/src/overlays/Base.tsx
@ -129,7 +129,7 @@ const StyledDiv = styled.div`
      background: rgba(255, 196, 12, 0.05);
    }

-    border-color: rgba(255, 196, 12, 1);
+    border-color: #ED6C02;
  }

  .content {
--- a/packages/apps/src/overlays/BeforeInit.tsx
+++ b/packages/apps/src/overlays/BeforeInit.tsx
@ -54,9 +54,9 @@ const StyledDiv = styled.div`
    }

    @keyframes greyAnim${n} {
-      0% { background: #a6a6a6; }
-      50% { background: darkorange; }
-      100% { background: #a6a6a6; }
+      0% { background: var(--grey-anim-start); }
+      50% { background: var(--grey-anim-middle); }
+      100% { background: var(--grey-anim-start); }
    }
  `).join('')}
 `;
--- a/packages/apps/webpack.config.cjs
+++ b/packages/apps/webpack.config.cjs
@ -22,7 +22,7 @@ module.exports = merge(
    plugins: [
      new SubresourceIntegrityPlugin(),
      new HtmlWebpackPlugin({
-        PAGE_TITLE: 'Polkadot/Substrate Portal',
+        PAGE_TITLE: 'GHOST Portal',
        minify: false,
        template: path.join(context, `${hasPublic ? 'public/' : ''}index.html`)
      })
--- a/packages/apps/webpack.serve.cjs
+++ b/packages/apps/webpack.serve.cjs
@ -22,7 +22,7 @@ module.exports = merge(
    },
    plugins: [
      new HtmlWebpackPlugin({
-        PAGE_TITLE: 'Polkadot/Substrate Portal',
+        PAGE_TITLE: 'GHOST Portal',
        inject: true,
        template: path.join(__dirname, 'public/index.html')
      })
--- a/packages/page-staking-async/src/Actions/SessionKeyInfo.tsx
+++ b/packages/page-staking-async/src/Actions/SessionKeyInfo.tsx
@ -30,7 +30,7 @@ const StyledArticle = styled.article`
    margin-inline: auto !important;

    .ui--Icon {
-        color: rgba(255, 196, 12, 1);
+        color: #ED6C02;
        margin-right: 0.5rem;
    }
 `;
--- a/packages/page-staking-async/src/Validators/StakingAsyncOverview.tsx
+++ b/packages/page-staking-async/src/Validators/StakingAsyncOverview.tsx
@ -45,7 +45,7 @@ const StyledArticle = styled.article`
    margin-inline: auto !important;

    .ui--Icon {
-        color: rgba(255, 196, 12, 1);
+        color: #ED6C02;
        margin-right: 0.5rem;
    }
 `;
--- a/packages/react-components/src/MarkWarning.tsx
+++ b/packages/react-components/src/MarkWarning.tsx
@ -23,7 +23,7 @@ function MarkWarning ({ children, className = '', content, withIcon = true }: Pr

 const StyledArticle = styled.article`
  .ui--Icon {
-    color: rgba(255, 196, 12, 1);
+    color: #ED6C02;
    margin-right: 0.5rem;
  }
 `;
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/packages/react-components/src/Tabs/Tab.tsx
@ -48,16 +48,16 @@ function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRo
 const StyledNavLink = styled(NavLink)`
  align-items: center;
  display: flex;
-  color: #8B8B8B;
+  color: #fff;
  height: 100%;
  padding: 0 1.5rem;
  position: relative;

  &:hover {
-    color: #8B8B8B;
+    color: #fff;

    .tabLinkText::after {
-      background-color: #8B8B8B;
+      background-color: #fff;
    }
  }

@ -70,6 +70,7 @@ const StyledNavLink = styled(NavLink)`
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
+      background: var(--bg-tabs-border) !important;
    }
  }

--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@ -77,7 +77,7 @@ const StyledDiv = styled.div`
  }

  &.lightgreyColor {
-    background: #b6b6b6;
+    background: var(--grey-anim-start);
    opacity: 0.7;
  }

--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@ -356,7 +356,7 @@ export default createGlobalStyle<Props>(({ uiHighlight }: Props) => `
  }

  #root {
-    background: var(--bg-page);
+    background: var(--bg-page-gradient);
    color: var(--color-text);
    font: var(--font-sans);
    font-weight: var(--font-weight-normal);
@ -447,7 +447,7 @@ export default createGlobalStyle<Props>(({ uiHighlight }: Props) => `
        background: rgba(255, 196, 12, 0.05);
      }

-      border-color: rgba(255, 196, 12, 1);
+      border-color: #ED6C02;
    }
  }