feat: GHOST branding and theme across components and build configs

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';

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')
       })

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-mono: 0.889em "Ubuntu Mono", Consolas, monaco, "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-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;
       }

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",

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",

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",

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' })
     }
   ];
 }

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 {

packages/apps/src/overlays/BeforeInit.tsx

@@ -54,9 +54,9 @@ const StyledDiv = styled.div`
     }
 
     @keyframes greyAnim${n} {
-      0% { background: #a6a6a6; }
+      0% { background: var(--grey-anim-start); }
-      50% { background: darkorange; }
+      50% { background: var(--grey-anim-middle); }
-      100% { background: #a6a6a6; }
+      100% { background: var(--grey-anim-start); }
     }
   `).join('')}
 `;

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`)
       })

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')
       })

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;
     }
 `;

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;
     }
 `;

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;
   }
 `;

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;
     }
   }
 

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;
   }
 

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;
     }
   }