From 5b65c111d1575f769599b5cc8f39d423de97d15d Mon Sep 17 00:00:00 2001 From: MiZiet <55240109+MiZiet@users.noreply.github.com> Date: Wed, 24 Mar 2021 10:27:37 +0100 Subject: [PATCH] Add new menu styling (#4317) * POC displaying route in Tabs * WIP Add new menu style Co-authored-by: Krzysztof Jelski * Rename Section to CurrentSection * Add new Tabs styling * WIP Add new menu styling * Set menu's max-width * Add theme styles to menu * Change font size and font weight * Remove r * Remove console logs * Update header styles * Fix settings link padding * Change nav link font weight * Change settings link font weight * Fix settings link paddings * Change nav links font size * Add menu padding * Change badge paddings * Change counter badge color to grey * Add space between menu items * Change chain name font styles * Remove color setting from chain css class * Restore previous whitish color * Move NodeInfo component to .menuContainer * Restore font-weights * Increase the max-width of chain name * Set darker color for TabsSectionDelimiter * Center vertically the left chain icon * Change ChainInfo's elements align and font-sizes * storke highlight * Restore ChainInfo alignment * Revert badges colors * Align right search bar * Change menu styling to prevent menu lists blending * Remove scrollbar from tabs * Resolve problem with search bar placement * Add margin-bottom to settings tab * Change setting padding when there is no badge * Make tab underline to ignore badge and move it under tabs bar * WIP Change menu * Apply contrast to menu hover * Add bright menu hover for chains with dark chain color * Add chain color to menu list * Set menu list hover * Add badge styles * Align items badge Co-authored-by: Krzysztof Jelski Co-authored-by: Krzysztof Jelski Co-authored-by: alexcherman Co-authored-by: Jaco Greeff Co-authored-by: Ewa Kowalska --- packages/apps/public/index.html | 5 +- packages/apps/src/Content/index.tsx | 40 ++++----- packages/apps/src/Menu/ChainInfo.tsx | 16 +++- packages/apps/src/Menu/Grouping.tsx | 53 +++++++++--- packages/apps/src/Menu/Item.tsx | 57 ++++++++++--- packages/apps/src/Menu/NodeInfo.tsx | 2 +- packages/apps/src/Menu/index.tsx | 85 +++++++++++-------- packages/react-components/src/Badge.tsx | 15 ++-- .../react-components/src/FilterOverlay.tsx | 9 +- packages/react-components/src/HelpOverlay.tsx | 3 +- .../src/Tabs/CurrentSection.tsx | 45 ++++++++++ packages/react-components/src/Tabs/Tab.tsx | 54 +++++++++--- .../src/Tabs/TabsSectionDelimiter.tsx | 31 +++++++ packages/react-components/src/Tabs/index.tsx | 57 +++++++++---- packages/react-components/src/Tabs/types.ts | 7 ++ packages/react-components/src/index.tsx | 2 +- packages/react-components/src/styles/index.ts | 75 ++++++++++++++-- 17 files changed, 424 insertions(+), 132 deletions(-) create mode 100644 packages/react-components/src/Tabs/CurrentSection.tsx create mode 100644 packages/react-components/src/Tabs/TabsSectionDelimiter.tsx diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html index 5ffd498441..297d9fe8fb 100644 --- a/packages/apps/public/index.html +++ b/packages/apps/public/index.html @@ -16,6 +16,7 @@ --font-weight-normal: 400; --width-full: 1750px; --width-half: 875px; + --bg-menu-hover: rgba(255, 255, 255, 0.2); } [data-theme="dark"] { @@ -23,10 +24,9 @@ --bg-input-error: #48393f; --bg-inverse: rgba(78, 78, 78, 0.66); --bg-menu: #26272c; - --bg-menu-hover: rgba(255, 255, 255, 0.05); --bg-page: #26272c; --bg-table: #3b3d3f; - --bg-tabs: #3b3d3f; + --bg-tabs: #38393f; --bg-toggle: #58595f; --border-table: #343536; --border-tabs: #343536; @@ -44,7 +44,6 @@ --bg-input-error: #fff6f6; --bg-inverse: rgba(244, 242, 240, 0.91); --bg-menu: #ffffff; - --bg-menu-hover: rgba(255, 255, 255, 0.5); --bg-page: #f5f3f1; --bg-table: #ffffff; --bg-tabs: #ffffff; diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index 9ebfb62295..350e678df3 100644 --- a/packages/apps/src/Content/index.tsx +++ b/packages/apps/src/Content/index.tsx @@ -8,7 +8,7 @@ import { useLocation } from 'react-router-dom'; import styled from 'styled-components'; import createRoutes from '@polkadot/apps-routing'; -import { ErrorBoundary, Spinner, StatusContext } from '@polkadot/react-components'; +import { ErrorBoundary, SectionContext, Spinner, StatusContext } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import { findMissingApis } from '../endpoint'; @@ -38,7 +38,7 @@ function Content ({ className }: Props): React.ReactElement { const { api, isApiConnected, isApiReady } = useApi(); const { queueAction } = useContext(StatusContext); - const { Component, display: { needsApi }, name } = useMemo( + const { Component, display: { needsApi }, icon, name, text } = useMemo( (): Route => { const app = location.pathname.slice(1) || ''; @@ -61,23 +61,25 @@ function Content ({ className }: Props): React.ReactElement { <> - {missingApis.length - ? ( - - ) - : ( - - ) - } + + {missingApis.length + ? ( + + ) + : ( + + ) + } + diff --git a/packages/apps/src/Menu/ChainInfo.tsx b/packages/apps/src/Menu/ChainInfo.tsx index d856fedb46..0289e94d67 100644 --- a/packages/apps/src/Menu/ChainInfo.tsx +++ b/packages/apps/src/Menu/ChainInfo.tsx @@ -58,7 +58,7 @@ function ChainInfo ({ className }: Props): React.ReactElement { export default React.memo(styled(ChainInfo)` box-sizing: border-box; - padding: 0.75rem 1rem 0.75rem 1.5rem; + padding: 0.642rem 1rem 0.642rem 1.5rem; margin: 0; .apps--SideBar-logo-inner { @@ -91,16 +91,24 @@ export default React.memo(styled(ChainInfo)` .info { flex: 1; padding-right: 0.5rem; + text-align: right; - .bestNumber, .chain { + max-width: 16rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .chain, .bestNumber { font-size: 0.9rem; line-height: 1.2; } .runtimeVersion { - font-size: 0.75rem; - line-height: 1.2; + font-size: 0.75rem; + line-height: 1.2; + letter-spacing: -0.01em; } } } diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx index 0cc312d1e3..b4b6dd8d4f 100644 --- a/packages/apps/src/Menu/Grouping.tsx +++ b/packages/apps/src/Menu/Grouping.tsx @@ -12,15 +12,17 @@ import Item from './Item'; interface Props extends Group { className?: string; + isActive: boolean; } const SHA_COL = 'rgba(34, 36, 38, 0.12)'; const SHA_OFF = '5px'; -function Grouping ({ className = '', name, routes }: Props): React.ReactElement { +function Grouping ({ className = '', isActive, name, routes }: Props): React.ReactElement { if (routes.length === 1) { return ( @@ -28,12 +30,12 @@ function Grouping ({ className = '', name, routes }: Props): React.ReactElement< } return ( -
  • -
    +
  • +
    {name}
    -