From 5d24410af27422118d323ecd1191ad8483bf44cb Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@jkrbinvestments.com>
Date: Mon, 8 Apr 2019 14:02:11 +0800
Subject: [PATCH] Styled Theming + media template introduction (#902)

* styled theming + screen sizes

* media templates

* mobile-first with min-width media templates

* media templates as export

* sidebar toggle as styled

* combime theming into styled

* tslinting

* rm meda from ThemeProvider

* spacing

* unnecessary; semi; colons;

* typed media function

* abstract theme primary color

* bye bye styled
---
 packages/apps/src/Apps.tsx                    | 59 +++++++++++--------
 packages/apps/src/SideBar/SideBar.css         | 25 +-------
 packages/apps/src/SideBar/index.tsx           | 44 +++++++++++++-
 packages/ui-app/package.json                  |  4 +-
 packages/ui-app/src/constants.ts              |  6 ++
 packages/ui-app/src/media.ts                  | 19 ++++++
 packages/ui-app/src/styles/app.css            |  9 ---
 packages/ui-app/src/styles/media.css          | 12 +---
 packages/ui-app/src/styles/theme.ts           | 10 ++++
 packages/ui-app/src/styles/theme/polkadot.css |  7 ---
 yarn.lock                                     | 10 ++++
 11 files changed, 128 insertions(+), 77 deletions(-)
 create mode 100644 packages/ui-app/src/media.ts
 create mode 100644 packages/ui-app/src/styles/theme.ts

diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 9fa5b1ee6c..9b05a3e5a0 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -7,7 +7,6 @@ import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD
 
 import React from 'react';
 import store from 'store';
-import styled from 'styled-components';
 import { classes } from '@polkadot/ui-app/util';
 import Signer from '@polkadot/ui-signer';
 import settings from '@polkadot/ui-settings';
@@ -18,6 +17,9 @@ import Connecting from './Connecting';
 import Content from './Content';
 import SideBar from './SideBar';
 
+import styled, { ThemeProvider } from 'styled-components';
+import { media } from '@polkadot/ui-app/media';
+
 type Props = BareProps & {};
 
 type State = {
@@ -31,8 +33,15 @@ const Wrapper = styled.div`
   align-items: stretch;
   box-sizing: border-box;
   display: flex;
-  height: 100%;
   min-height: 100vh;
+
+  header {
+    margin-bottom: 0.8rem;
+    text-align: center;
+    ${media.TABLET`
+      margin-bottom: 1.1rem;
+   `}
+  }
 `;
 
 class Apps extends React.Component<Props, State> {
@@ -66,28 +75,32 @@ class Apps extends React.Component<Props, State> {
 
     const { isCollapsed, isMenu, menuOpen } = this.state;
     return (
-      <Wrapper
-        className={
-          classes('apps-Wrapper',
-                   !isCollapsed ? 'expanded' : 'collapsed',
-                   isMenu ? 'fixed' : '',
-                   menuOpen ? 'menu-open' : '',
-                   `theme--${settings.uiTheme}`)
-        }
+      <ThemeProvider
+        theme={{ theme: settings.uiTheme }}
       >
-        {this.renderMenuBg()}
-        <SideBar
-          collapse={this.collapse}
-          handleResize={this.handleResize}
-          menuOpen={menuOpen}
-          isCollapsed={isCollapsed}
-          toggleMenu={this.toggleMenu}
-        />
-        <Signer>
-          <Content />
-        </Signer>
-        <Connecting />
-      </Wrapper>
+        <Wrapper
+          className={
+            classes('apps-Wrapper',
+                     !isCollapsed ? 'expanded' : 'collapsed',
+                     isMenu ? 'fixed' : '',
+                     menuOpen ? 'menu-open' : '',
+                     `theme--${settings.uiTheme}`)
+          }
+        >
+          {this.renderMenuBg()}
+          <SideBar
+            collapse={this.collapse}
+            handleResize={this.handleResize}
+            menuOpen={menuOpen}
+            isCollapsed={isCollapsed}
+            toggleMenu={this.toggleMenu}
+          />
+          <Signer>
+            <Content />
+          </Signer>
+          <Connecting />
+        </Wrapper>
+      </ThemeProvider>
     );
   }
 
diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css
index eb694445e0..44dd993611 100644
--- a/packages/apps/src/SideBar/SideBar.css
+++ b/packages/apps/src/SideBar/SideBar.css
@@ -24,7 +24,7 @@
       opacity: 0;
       width: 0;
     }
-    
+
     &.open {
       opacity: 1;
     }
@@ -43,27 +43,6 @@
     &.expanded {
       width: 12rem;
     }
-
-    > img {
-      background: #333;
-      border-radius: 50%;
-      cursor: pointer;
-      left: 0.9rem;
-      opacity: 0;
-      padding: 4px;
-      position: absolute;
-      transition: opacity 0.2s ease-in, top 0.2s ease-in;
-      top: -2.9rem;
-      width: 2.6rem;
-     
-      &.delayed {
-        transition-delay: 0.4s;
-      }
-      &.open {
-        opacity: 1;
-        top: 0.9rem;
-      }
-    }
   }
 
   .apps--SideBar {
@@ -75,7 +54,7 @@
     left: 0;
     transition: left 0.3s linear;
     width: 100%;
-    
+
     .ui.vertical.menu {
       display: flex;
       height: 100vh;
diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx
index 30c7ffcc0b..ddf92cc3cb 100644
--- a/packages/apps/src/SideBar/index.tsx
+++ b/packages/apps/src/SideBar/index.tsx
@@ -17,7 +17,11 @@ import Item from './Item';
 import NodeInfo from './NodeInfo';
 import getLogo from './logos';
 
+import styled from 'styled-components';
+import { media } from '@polkadot/ui-app/media';
 import { Responsive } from 'semantic-ui-react';
+import theme from 'styled-theming';
+import { primaryColor } from '@polkadot/ui-app/styles/theme';
 
 type Props = I18nProps & {
   collapse: () => void,
@@ -27,6 +31,38 @@ type Props = I18nProps & {
   toggleMenu: () => void
 };
 
+const Toggle = styled.img`
+  background: ${theme('theme', {
+    substrate: primaryColor,
+    polkadot: 'none'
+  })};
+  padding: ${theme('theme', {
+    substrate: '4px',
+    polkadot: 'none'
+  })};
+  border-radius: 50%;
+  cursor: pointer;
+  left: 0.9rem;
+  opacity: 0;
+  position: absolute;
+  top: 0px;
+  transition: opacity 0.2s ease-in, top 0.2s ease-in;
+  width: 2.6rem;
+
+  &.delayed {
+    transition-delay: 0.4s;
+  }
+  &.open {
+    opacity: 1;
+    top: 0.9rem;
+  }
+
+  ${media.TABLET`
+    opacity: 0 !important;
+    top: -2.9rem !important;
+  `}
+`;
+
 class SideBar extends React.PureComponent<Props> {
   render () {
     const { isCollapsed } = this.props;
@@ -35,8 +71,10 @@ class SideBar extends React.PureComponent<Props> {
       <Responsive
         onUpdate={this.props.handleResize}
         className={
-          classes('apps-SideBar-Wrapper',
-                  isCollapsed ? 'collapsed' : 'expanded')
+          classes(
+            'apps-SideBar-Wrapper',
+              isCollapsed ? 'collapsed' : 'expanded'
+            )
         }
       >
         {this.renderMenuToggle()}
@@ -152,7 +190,7 @@ class SideBar extends React.PureComponent<Props> {
     const { toggleMenu, menuOpen } = this.props;
 
     return (
-      <img
+      <Toggle
         alt='logo'
         className={menuOpen ? 'closed' : 'open delayed'}
         onClick={toggleMenu}
diff --git a/packages/ui-app/package.json b/packages/ui-app/package.json
index 0ccee9a658..328c4375dc 100644
--- a/packages/ui-app/package.json
+++ b/packages/ui-app/package.json
@@ -22,6 +22,7 @@
     "@types/react-copy-to-clipboard": "^4.2.6",
     "@types/react-dropzone": "^4.2.2",
     "@types/react-router-dom": "^4.3.0q",
+    "@types/styled-theming": "^2.2.0",
     "chart.js": "^2.7.2",
     "codeflask": "^1.4.0",
     "i18next": "^15.0.9",
@@ -37,6 +38,7 @@
     "react-router-dom": "^5.0.0",
     "semantic-ui-css": "^2.3.1",
     "semantic-ui-react": "^0.86.0",
-    "store": "^2.0.12"
+    "store": "^2.0.12",
+    "styled-theming": "^2.2.0"
   }
 }
diff --git a/packages/ui-app/src/constants.ts b/packages/ui-app/src/constants.ts
index a6495279f3..f64234f272 100644
--- a/packages/ui-app/src/constants.ts
+++ b/packages/ui-app/src/constants.ts
@@ -6,3 +6,9 @@ export enum BitLengthOption {
   CHAIN_SPEC = 128,
   NORMAL_NUMBERS = 32
 }
+
+export enum ScreenSizes {
+  DESKTOP = 992,
+  TABLET = 768,
+  PHONE = 576
+}
diff --git a/packages/ui-app/src/media.ts b/packages/ui-app/src/media.ts
new file mode 100644
index 0000000000..48221c41e2
--- /dev/null
+++ b/packages/ui-app/src/media.ts
@@ -0,0 +1,19 @@
+// Copyright 2017-2019 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { css } from 'styled-components';
+import { ScreenSizes } from './constants';
+
+export const media: any = Object
+ .keys(ScreenSizes)
+ .reduce((acc: any, label: any) => {
+   let size: any = ScreenSizes[label];
+   acc[label] = (...args: any) => (
+    css`
+     @media ( min-width: ${size / 16}em) {
+      ${css`${{ ...args }}`}
+     }
+    `);
+   return acc;
+ }, {});
diff --git a/packages/ui-app/src/styles/app.css b/packages/ui-app/src/styles/app.css
index 8b02241dd4..f6bfa8632e 100644
--- a/packages/ui-app/src/styles/app.css
+++ b/packages/ui-app/src/styles/app.css
@@ -95,12 +95,3 @@ article {
     padding: 0;
   }
 }
-
-header {
-  margin-bottom: 1.1rem;
-  text-align: center;
-
-  @media(max-width: 767px) {
-    margin-bottom: 0.8rem;
-  }
-}
diff --git a/packages/ui-app/src/styles/media.css b/packages/ui-app/src/styles/media.css
index 629e9df3d8..f905033186 100644
--- a/packages/ui-app/src/styles/media.css
+++ b/packages/ui-app/src/styles/media.css
@@ -70,7 +70,7 @@ th.ui--media-small {
     height: auto;
     visibility: visible;
     width: auto;
-    
+
   }
 
   td.ui--media-small,
@@ -85,13 +85,3 @@ th.ui--media-small {
     padding-left: 5.2rem !important;
   }
 }
-
-/* sidebar */
-@media (min-width: 768px) {
-  .apps-SideBar-Wrapper {
-    > img {
-      opacity: 0 !important;
-      top: -2.9rem !important;
-    }
-  }
-}
diff --git a/packages/ui-app/src/styles/theme.ts b/packages/ui-app/src/styles/theme.ts
new file mode 100644
index 0000000000..783d6321a6
--- /dev/null
+++ b/packages/ui-app/src/styles/theme.ts
@@ -0,0 +1,10 @@
+/* Copyright 2017-2019 @polkadot/ui-app authors & contributors
+/* This software may be modified and distributed under the terms
+/* of the Apache-2.0 license. See the LICENSE file for details. */
+
+import theme from 'styled-theming';
+
+export const primaryColor = theme('theme', {
+  substrate: '#333',
+  polkadot: '#E6007A'
+});
diff --git a/packages/ui-app/src/styles/theme/polkadot.css b/packages/ui-app/src/styles/theme/polkadot.css
index 3d9afb0914..dd5ceb9a57 100644
--- a/packages/ui-app/src/styles/theme/polkadot.css
+++ b/packages/ui-app/src/styles/theme/polkadot.css
@@ -92,13 +92,6 @@
     background-color: $red;
   }
 
-  .apps-SideBar-Wrapper {
-    > img {
-      background: none !important;
-      padding: 0 !important;
-    }
-  }
-
   a.apps--SideBar-Item-NavLink:hover {
     color: $nav-link;
     transition: 0.15s;
diff --git a/yarn.lock b/yarn.lock
index 3e31e067f2..873a39f12f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2496,6 +2496,11 @@
     "@types/react" "*"
     csstype "^2.2.0"
 
+"@types/styled-theming@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@types/styled-theming/-/styled-theming-2.2.0.tgz#0c4971dae7d36e1553779864caf27cc02bb3e8e2"
+  integrity sha512-IwS8K1jvn1yw3A6oSuA9zXjWW5zOQhM/psUSfehR1k0r60WWlLa1/S7El40loOMSy8blusgn7r5y/dhyEd0kKw==
+
 "@types/tapable@*":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
@@ -12919,6 +12924,11 @@ styled-components@^4.2.0:
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"
 
+styled-theming@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/styled-theming/-/styled-theming-2.2.0.tgz#3084e43d40eaab4bc11ebafd3de04e3622fee37e"
+  integrity sha1-MITkPUDqq0vBHrr9PeBONiL+434=
+
 stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"