global styling setup

README.md

@@ -8,8 +8,6 @@
 [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
 [![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb)
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
 - [Development](#development)
 - [Testing](#testing)
 - [Code Style](#code-style)
@@ -17,6 +15,8 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Development
 
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
 ```bash
 npm start
 ```

package.json

@@ -27,6 +27,7 @@
     "@types/react": "16.7.20",
     "@types/react-dom": "16.0.11",
     "@types/react-router-dom": "^4.3.1",
+    "node-sass": "^4.11.0",
     "prettier": "^1.16.1",
     "prettier-stylelint": "^0.4.2",
     "react-scripts": "2.1.3",

public/index.html

@@ -7,26 +7,101 @@
             name="viewport"
             content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
-    <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+        <meta name="theme-color" content="#141414" />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+        <title>Commons Marketplace</title>
+
+        <link
+            rel="preload"
+            href="%PUBLIC_URL%/fonts/SharpSansDispNo1-Bold.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin
+        />
+        <link
+            rel="preload"
+            href="%PUBLIC_URL%/fonts/SharpSans-Medium.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin
+        />
+        <link
+            rel="preload"
+            href="%PUBLIC_URL%/fonts/SharpSans-Bold.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin
+        />
+
+        <style>
+            @font-face {
+                font-family: 'Sharp Sans Display';
+                src: url('%PUBLIC_URL%/fonts/SharpSansDispNo1-Bold.woff2')
+                        format('woff2'),
+                    url('%PUBLIC_URL%/fonts/SharpSansDispNo1-Bold.woff')
+                        format('woff');
+                font-weight: 600;
+                font-style: normal;
+                font-stretch: normal;
+                font-display: swap;
+            }
+
+            @font-face {
+                font-family: 'Sharp Sans Medium';
+                src: url('%PUBLIC_URL%/fonts/SharpSans-Medium.woff2')
+                        format('woff2'),
+                    url('%PUBLIC_URL%/fonts/SharpSans-Medium.woff')
+                        format('woff');
+                font-weight: 500;
+                font-style: normal;
+                font-stretch: normal;
+                font-display: swap;
+            }
+
+            @font-face {
+                font-family: 'Sharp Sans Bold';
+                src: url('%PUBLIC_URL%/fonts/SharpSans-Bold.woff2')
+                        format('woff2'),
+                    url('%PUBLIC_URL%/fonts/SharpSans-Bold.woff') format('woff');
+                font-weight: 600;
+                font-style: normal;
+                font-stretch: normal;
+                font-display: swap;
+            }
+
+            .loader {
+                display: block;
+                position: relative;
+                margin-top: calc(50vh - 15px);
+            }
+
+            .loader:before {
+                content: '';
+                box-sizing: border-box;
+                position: absolute;
+                top: -80%;
+                left: 50%;
+                width: 20px;
+                height: 20px;
+                margin-top: -10px;
+                margin-left: -10px;
+                border-radius: 50%;
+                border: 2px solid #7b1173;
+                border-top-color: #e000cf;
+                animation: spinner 0.6s linear infinite;
+            }
+
+            @keyframes spinner {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+        </style>
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+        <div id="root"><span class="loader"></span></div>
         <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -36,6 +111,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+    --></body>
 </html>

public/manifest.json

@@ -1,15 +1,25 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Commons",
+  "name": "Commons Marketplace",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "icons/favicon_512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/favicon_256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/favicon_128.png",
+      "sizes": "128x128",
+      "type": "image/png"
     }
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#141414",
+  "background_color": "#141414"
 }

src/App.css

@@ -1,33 +0,0 @@
-.App {
-    text-align: center;
-}
-
-.App-logo {
-    animation: App-logo-spin infinite 20s linear;
-    height: 40vmin;
-}
-
-.App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: #fff;
-}
-
-.App-link {
-    color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}

src/App.module.scss

@@ -0,0 +1,3 @@
+.app {
+    height: 100%;
+}

src/App.tsx

@@ -1,14 +1,18 @@
 import React, { Component } from 'react'
-import './App.css'
-import { User, userDefults } from './context/User'
+import styles from './App.module.scss'
+import { User, userDefaults } from './context/User'
+import './styles/global.scss'
+
 import Routes from './Routes'
 
 class App extends Component {
     public render() {
         return (
-            <User.Provider value={userDefults}>
+            <div className={styles.app}>
+                <User.Provider value={userDefaults}>
                     <Routes />
                 </User.Provider>
+            </div>
         )
     }
 }

src/context/User.ts

@@ -1,7 +1,7 @@
 import React from 'react'
 
-export const userDefults = {
+export const userDefaults = {
     logged: false
 }
 
-export const User = React.createContext(userDefults)
+export const User = React.createContext(userDefaults)

src/index.css

@@ -1,14 +0,0 @@
-body {
-    margin: 0;
-    padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-        Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-        sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-        monospace;
-}

src/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import './index.css'
 import * as serviceWorker from './serviceWorker'
 
 ReactDOM.render(<App />, document.getElementById('root'))

src/pages/Home.module.scss

@@ -0,0 +1,10 @@
+@import '../styles/variables';
+
+.home {
+    background: $brand-black;
+    color: $brand-white;
+    min-height: calc(100vh - #{$page-frame} * 2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/pages/Home.tsx

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
+import styles from './Home.module.scss'
 
 class Home extends Component {
     public render() {
-        return <div>Home</div>
+        return <div className={styles.home}>Home</div>
     }
 }
 

src/styles/_variables.scss

@@ -0,0 +1,62 @@
+// Colors
+$brand-white: #fff;
+$brand-black: #141414;
+$brand-pink: #ff4092;
+$brand-purple: #7b1173;
+$brand-violet: #e000cf;
+$brand-blue: #11597b;
+
+$brand-grey: #41474e;
+$brand-grey-light: #8b98a9;
+$brand-grey-dark: #303030;
+$brand-grey-lighter: #e2e2e2;
+
+$green: #5fb359;
+$red: #d80606;
+$orange: #b35f36;
+$yellow: #eac146;
+
+$brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
+
+// Fonts
+$font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, Arial, sans-serif;
+$font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, Arial, sans-serif;
+$font-family-button: 'Sharp Sans Bold', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, Arial, sans-serif;
+$font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
+    'Courier New', monospace;
+
+$font-size-root: 15px;
+$font-size-base: 1rem;
+$font-size-large: 1.2rem;
+$font-size-small: .85rem;
+$font-size-mini: .65rem;
+$font-size-text: $font-size-base;
+$font-size-label: $font-size-base;
+$font-size-title: 1.4rem;
+$font-size-h1: 3rem;
+$font-size-h2: 1.7rem;
+$font-size-h3: 1.4rem;
+$font-size-h4: $font-size-large;
+$font-size-h5: 1.1rem;
+
+$font-weight-base: 500;
+$font-weight-bold: 600;
+
+$line-height: 1.6;
+
+// Sizes
+$spacer: 2rem;
+$page-frame: .75rem;
+
+$break-point--small: 640px;
+$break-point--medium: 860px;
+$break-point--large: 1140px;
+$break-point--huge: 1400px;
+$brand-border-width: 1px;
+
+$border-radius: .2rem;
+
+$narrowWidth: 35rem;

src/styles/global.scss

@@ -0,0 +1,341 @@
+// stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
+
+@import 'variables';
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+/* stylelint-disable selector-max-id */
+html,
+body,
+#root {
+    height: 100%;
+}
+
+/* stylelint-enable selector-max-id */
+
+html {
+    font-size: $font-size-root;
+}
+
+body {
+    color: $brand-black;
+    font-size: $font-size-base;
+    font-family: $font-family-base;
+    font-weight: $font-weight-base;
+    line-height: $line-height;
+    background: darken($brand-white, 1%);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    margin: 0;
+
+    @media screen and (min-width: $break-point--small) {
+        padding: $page-frame;
+    }
+}
+
+a {
+    text-decoration: none;
+    color: $brand-pink;
+    transition: .2s ease-out;
+
+    &:hover,
+    &:focus {
+        color: darken($brand-pink, 15%);
+        text-decoration: none;
+        transform: translate3d(0, -.1rem, 0);
+    }
+
+    &:active {
+        color: darken($brand-pink, 15%);
+        text-decoration: none;
+        transform: none;
+        transition: none;
+    }
+}
+
+p {
+    margin: 0;
+    margin-bottom: $spacer / $line-height;
+}
+
+// Lists
+/////////////////////////////////////
+
+ul {
+    li {
+        &:before {
+            content: ' \25AA'; // Black Small Square: ▪ ▪
+            top: -2px;
+        }
+    }
+}
+
+ol {
+    counter-reset: ol-counter;
+
+    li {
+        &:before {
+            content: counter(ol-counter) '.';
+            counter-increment: ol-counter;
+            font-family: $font-family-button;
+            top: -1px;
+        }
+    }
+
+    ul li:before {
+        content: ' \25AA';
+    }
+}
+
+ul,
+ol {
+    margin-top: 0;
+    margin-bottom: $spacer;
+    padding-left: $spacer / $line-height;
+    list-style: none;
+
+    li {
+        position: relative;
+        display: block;
+
+        &:before {
+            position: absolute;
+            left: -($spacer / $line-height);
+            color: $brand-grey-light;
+            user-select: none;
+        }
+
+        + li {
+            margin-top: $spacer / 8;
+        }
+
+        ul,
+        ol,
+        p {
+            margin-bottom: 0;
+            margin-top: $spacer / 8;
+        }
+    }
+}
+
+// Inline typography
+/////////////////////////////////////
+
+b,
+strong,
+.bold {
+    font-family: $font-family-button;
+    font-weight: 600;
+}
+
+em,
+.italic {
+    font-style: italic;
+}
+
+abbr[title],
+dfn {
+    text-transform: none;
+    font-style: normal;
+    font-size: inherit;
+    border-bottom: 1px dashed $brand-grey-light;
+    cursor: help;
+    font-feature-settings: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: $font-family-title;
+    color: inherit;
+    line-height: 1.2;
+    font-weight: 600;
+}
+
+h1 {
+    font-size: $font-size-h1;
+}
+
+h2 {
+    font-size: $font-size-h2;
+}
+
+h3 {
+    font-size: $font-size-h3;
+}
+
+h4 {
+    font-size: $font-size-h4;
+}
+
+h5 {
+    font-size: $font-size-h5;
+}
+
+// Responsive Media
+/////////////////////////////////////
+
+figure,
+img,
+svg,
+video,
+audio,
+embed,
+canvas,
+picture {
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+    display: block;
+}
+
+hr {
+    margin: $spacer 0;
+    border: 0;
+    border-bottom: .1rem solid $brand-grey-lighter;
+}
+
+// Quotes
+/////////////////////////////////////
+
+q {
+    font-style: italic;
+}
+
+cite {
+    font-style: normal;
+    text-transform: uppercase;
+}
+
+blockquote,
+blockquote > p {
+    font-style: italic;
+    color: lighten($brand-grey, 15%);
+}
+
+blockquote {
+    margin: 0 0 $spacer;
+    padding-left: $spacer / 2;
+    border-left: .2rem solid $brand-grey-lighter;
+
+    @media screen and (min-width: $break-point--small) {
+        padding-left: $spacer / $line-height;
+    }
+}
+
+// Tables
+/////////////////////////////////////
+
+table {
+    width: 100%;
+    margin-bottom: $spacer * $line-height;
+    border-collapse: collapse;
+    display: block;
+
+    // make 'em scrollable
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    th,
+    td {
+        border: 0;
+        margin: 0;
+        padding: $spacer / 2;
+        border-bottom: 1px solid $brand-grey-lighter;
+        text-align: left;
+        font-size: 90%;
+
+        &[align='center'] {
+            text-align: center;
+        }
+
+        &[align='right'] {
+            text-align: right;
+        }
+    }
+
+    th {
+        font-family: $font-family-button;
+        font-weight: 600;
+    }
+}
+
+// Code
+/////////////////////////////////////
+
+code,
+kbd,
+pre,
+samp {
+    // lots of !important to overwrite prims.js theme
+    font-family: $font-family-monospace !important;
+    font-size: $font-size-small !important;
+    border-radius: $border-radius !important;
+    text-shadow: none !important;
+
+    h1 &,
+    h2 &,
+    h3 &,
+    h4 &,
+    h5 & {
+        font-size: inherit !important;
+    }
+}
+
+:not(pre) > code {
+    background: darken($brand-white, 5%) !important;
+    color: $brand-grey-dark !important;
+    display: inline-block;
+    padding-left: .3rem !important;
+    padding-right: .3rem !important;
+}
+
+pre {
+    display: block;
+    margin-bottom: $spacer !important;
+    padding: 0 !important;
+    background: $brand-black !important;
+
+    // make 'em scrollable
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    code {
+        padding: $spacer;
+        white-space: pre;
+        display: block;
+        color: $brand-grey-lighter !important;
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
+        overflow: auto;
+    }
+}
+
+// Selection
+/////////////////////////////////////
+
+::-moz-selection {
+    background: $brand-grey-light;
+    color: #fff;
+}
+
+::selection {
+    background: $brand-grey-light;
+    color: #fff;
+}
+
+// Gatsby specific
+/////////////////////////////////////
+
+.anchor {
+    margin-top: .6rem;
+}