From 3bdcc6ba38230245b8d9d19ee75add5cde216989 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 21 Aug 2018 14:32:59 +0200 Subject: [PATCH] Update sidebar logo, spacing & colours (#243) * Update sidebar logo, spacing & colours * Cleanup styles (combine imports) * Adjust overall base font colour * Align overall background colours * Ease out accent colours --- .../src/BlockHeader/BlockHeader.css | 8 +- packages/apps/src/SideBar/Item.css | 19 ---- packages/apps/src/SideBar/Item.tsx | 2 - packages/apps/src/SideBar/SideBar.css | 36 +++++- packages/apps/src/SideBar/index.tsx | 6 + packages/apps/src/index.css | 4 + packages/apps/src/static/polkadot.svg | 104 ++++++++++++++++++ packages/apps/src/static/types.d.ts | 8 ++ packages/ui-app/src/styles/app.css | 8 +- packages/ui-app/src/styles/semantic.css | 6 +- 10 files changed, 170 insertions(+), 31 deletions(-) delete mode 100644 packages/apps/src/SideBar/Item.css create mode 100644 packages/apps/src/static/polkadot.svg create mode 100644 packages/apps/src/static/types.d.ts diff --git a/packages/app-explorer/src/BlockHeader/BlockHeader.css b/packages/app-explorer/src/BlockHeader/BlockHeader.css index b84dfad78f..8792bf7d0a 100644 --- a/packages/app-explorer/src/BlockHeader/BlockHeader.css +++ b/packages/app-explorer/src/BlockHeader/BlockHeader.css @@ -13,7 +13,7 @@ } .explorer--BlockHeader:nth-child(even) { - background: #f9f9f9; + background: #fcfcfc; } .explorer--BlockHeader > div { @@ -40,9 +40,6 @@ text-align: left; } -.explorer--BlockHeader > .details > .hash { -} - .explorer--BlockHeader > .details > .contains { border: 0; font-size: 0.75em; @@ -57,6 +54,3 @@ opacity: 0.75; text-align: right; } - -.explorer--BlockHeader > .details > .contains td.hash { -} diff --git a/packages/apps/src/SideBar/Item.css b/packages/apps/src/SideBar/Item.css deleted file mode 100644 index 6a29a930ae..0000000000 --- a/packages/apps/src/SideBar/Item.css +++ /dev/null @@ -1,19 +0,0 @@ -/* Copyright 2017-2018 @polkadot/apps authors & contributors -/* This software may be modified and distributed under the terms -/* of the ISC license. See the LICENSE file for details. */ - -.apps--SideBar-Item { - padding: 0 !important; -} - -.apps--SideBar-Item-NavLink { - display: block; - padding: 0.75em 0.75em; - white-space: nowrap; -} - -.apps--SideBar-Item-NavLink-active { - background: white; - border-radius: 0.28571429rem 0 0 0.28571429rem; - color: inherit; -} diff --git a/packages/apps/src/SideBar/Item.tsx b/packages/apps/src/SideBar/Item.tsx index 3bc9113868..382e2a01f8 100644 --- a/packages/apps/src/SideBar/Item.tsx +++ b/packages/apps/src/SideBar/Item.tsx @@ -5,8 +5,6 @@ import { I18nProps } from '@polkadot/ui-app/types'; import { Route } from '../types'; -import './Item.css'; - import React from 'react'; import { withRouter } from 'react-router'; import { NavLink } from 'react-router-dom'; diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css index b3b22caaa6..13cd61af83 100644 --- a/packages/apps/src/SideBar/SideBar.css +++ b/packages/apps/src/SideBar/SideBar.css @@ -3,7 +3,8 @@ /* of the ISC license. See the LICENSE file for details. */ .apps--SideBar { - background: #f9f9f9; + background: #fcfcfc; + border-right: 1px solid rgba(34, 36, 38, 0.15); flex-shrink: 0; min-width: 10em; padding: 0.75em 0 0 0.75em; @@ -21,3 +22,36 @@ bottom: 1.5em; left: 1.5em; } + +.apps--SideBar-logo { + width: 100%; + margin: 0 0 0.75rem 0.5rem; + width: 10rem; +} + +.apps--SideBar-Item { + overflow-x: visible; + padding: 0 !important; + text-align: left; +} + +.apps--SideBar-Item-NavLink { + color: #4E4E4E; + display: block; + padding: 0.75em 0.75em; + white-space: nowrap; +} + +.apps--SideBar-Item-NavLink-active { + background: white; + border-radius: 0.28571429rem 0 0 0.28571429rem; + border: 1px solid rgba(34, 36, 38, 0.15); + border-right-color: white; + color: #D75EA1; + margin-right: -1px; + /* color: inherit; */ +} + +.apps--SideBar-Item-NavLink:hover { + color: #D75EA1; +} diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx index a6877a44ce..ddd0a7177f 100644 --- a/packages/apps/src/SideBar/index.tsx +++ b/packages/apps/src/SideBar/index.tsx @@ -11,6 +11,7 @@ import Icon from '@polkadot/ui-app/Icon'; import Menu from '@polkadot/ui-app/Menu'; import classes from '@polkadot/ui-app/util/classes'; +import polkadotLogo from '../static/polkadot.svg'; import routing from '../routing'; import translate from '../translate'; import Item from './Item'; @@ -32,6 +33,11 @@ class SideBar extends React.PureComponent { secondary vertical > + polkadot { routing.routes .filter((route) => diff --git a/packages/apps/src/index.css b/packages/apps/src/index.css index 9555cbbe55..ed05ac532d 100644 --- a/packages/apps/src/index.css +++ b/packages/apps/src/index.css @@ -24,3 +24,7 @@ opacity: 0.5; text-align: right; } + +.apps--NodeInfo div { + margin-bottom: -0.125em; +} diff --git a/packages/apps/src/static/polkadot.svg b/packages/apps/src/static/polkadot.svg new file mode 100644 index 0000000000..5cb9729be5 --- /dev/null +++ b/packages/apps/src/static/polkadot.svg @@ -0,0 +1,104 @@ + diff --git a/packages/apps/src/static/types.d.ts b/packages/apps/src/static/types.d.ts new file mode 100644 index 0000000000..f2d6943e37 --- /dev/null +++ b/packages/apps/src/static/types.d.ts @@ -0,0 +1,8 @@ +// Copyright 2017-2018 @polkadot/apps authors & contributors +// This software may be modified and distributed under the terms +// of the ISC license. See the LICENSE file for details. + +declare module '*.svg' { + const content: any; + export default content; +} diff --git a/packages/ui-app/src/styles/app.css b/packages/ui-app/src/styles/app.css index 8f035bafb2..b154d13459 100644 --- a/packages/ui-app/src/styles/app.css +++ b/packages/ui-app/src/styles/app.css @@ -12,7 +12,7 @@ body { } #root { - color: #333; + color: #4e4e4e; font-family: sans-serif; height: 100%; } @@ -22,3 +22,9 @@ h1 { font-weight: 100; text-transform: lowercase; } + +/* +a:hover { + color: #D75EA1; +} +*/ diff --git a/packages/ui-app/src/styles/semantic.css b/packages/ui-app/src/styles/semantic.css index 9b87292854..aa0f9a5e64 100644 --- a/packages/ui-app/src/styles/semantic.css +++ b/packages/ui-app/src/styles/semantic.css @@ -3,7 +3,7 @@ /* of the ISC license. See the LICENSE file for details. */ .ui.hidden.divider { - margin: 0.75rem 0; + margin: 0.5rem 0; } .ui.dropdown { @@ -73,6 +73,10 @@ min-width: 0 !important; } +.ui.secondary.vertical.menu > .item { + margin: 0; +} + .ui[class*="left icon"].input.left.icon > input { padding-left: 4rem !important; }