Merge pull request #170 from meriadec/master

Global syles in storybook + visual updates

.eslintrc

@@ -8,6 +8,7 @@
     "__PROD__": false,
     "__SENTRY_URL__": false,
     "__PRINT_MODE__": false,
+    "__GLOBAL_STYLES__": false,
     "__static": false,
     "window": false,
     "document": false,

flow-defs/globals.js

@@ -5,6 +5,7 @@ declare var __PROD__: boolean
 declare var __ENV__: string
 declare var __PRINT_MODE__: string
 declare var __SENTRY_URL__: string
+declare var __GLOBAL_STYLES__: string
 declare var __static: string
 
 declare var ResizeObserver: Class<any>

src/components/SelectAccount/index.js

@@ -24,12 +24,12 @@ const mapStateToProps: MapStateToProps<*, *, *> = state => ({
 const renderItem = item => (
   <Box horizontal alignItems="center">
     <Box grow>
-      <Text color="dark" fontSize={0} fontWeight="bold">
+      <Text color="dark" fontSize={4} fontWeight="bold">
         {item.name}
       </Text>
     </Box>
     <Box>
-      <Text color="mouse" fontSize={0}>
+      <Text color="mouse" fontSize={4}>
         {formatBTC(item.balance)}
       </Text>
     </Box>
@@ -51,6 +51,7 @@ export const SelectAccount = ({ accounts, onChange, value, t }: Props) => (
     keyProp="id"
     items={accounts}
     placeholder={t('SelectAccount.placeholder')}
+    fontSize={4}
     onChange={onChange}
   />
 )

src/components/base/Input/index.js

@@ -1,14 +1,17 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-
 import styled from 'styled-components'
 import { space } from 'styled-system'
 
+import fontFamily from 'styles/styled/fontFamily'
+
 const Base = styled.input.attrs({
-  p: 2,
+  p: 4,
+  ff: 'Open Sans|SemiBold',
 })`
   ${space};
+  ${fontFamily};
   border: 1px solid ${p => p.theme.colors.mouse};
   border-radius: 3px;
   display: flex;

src/components/base/Select/index.js

@@ -35,9 +35,11 @@ type Props = {
 const Container = styled(Box).attrs({ relative: true, color: 'graphite' })``
 
 const TriggerBtn = styled(Box).attrs({
-  p: 2,
+  ff: 'Open Sans|SemiBold',
+  p: 4,
+  pr: 5,
 })`
-  min-height: 58px;
+  min-height: 64px;
   ${space};
   border: 1px solid ${p => p.theme.colors.mouse};
   border-radius: 3px;
@@ -247,7 +249,9 @@ class Select extends PureComponent<Props> {
                       <Text color="mouse">{placeholder}</Text>
                     )}
                   </Box>
-                  <Triangles />
+                  <FloatingTriangles>
+                    <Triangles />
+                  </FloatingTriangles>
                 </TriggerBtn>
               )}
               {isOpen &&

src/components/modals/Send.js

@@ -29,9 +29,9 @@ const Steps = {
         }
       }}
     >
-      <Box flow={3}>
+      <Box flow={5}>
         <Text fontSize={6}>{t('send.title')}</Text>
-        <Box flow={1}>
+        <Box flow={2}>
           <Label>Account to debit</Label>
           <SelectAccount onChange={props.onChangeInput('account')} value={props.value.account} />
         </Box>

src/globals.js

@@ -5,3 +5,4 @@ const { NODE_ENV } = process.env
 global.__ENV__ = NODE_ENV === 'development' ? NODE_ENV : 'production'
 global.__DEV__ = global.__ENV__ === 'development'
 global.__PROD__ = !global.__DEV__
+global.__GLOBAL_STYLES__ = require('./styles/reset')

src/index.ejs

@@ -4,40 +4,8 @@
     <title><%= process.env.npm_package_productName %></title>
     <meta charset="utf-8">
     <style>
-      * {
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        font: inherit;
-        color: inherit;
-        user-select: none;
-        min-width: 0;
 
-        /* it will surely make problem in the future... to be inspected. */
-        flex-shrink: 0;
-      }
-
-      body {
-        cursor: default;
-        font-family: "Museo Sans", "Open Sans", Arial, Helvetica, sans-serif;
-        font-size: 16px;
-        font-weight: 300;
-        line-height: 1.5;
-      }
-
-      input,
-      textarea {
-        font-family: "Open Sans", Arial, Helvetica, sans-serif;;
-        font-weight: 600;
-        line-height: normal;
-      }
-
-      #app {
-        display: none;
-        flex-direction: column;
-        min-height: 100vh;
-      }
+      <%= __GLOBAL_STYLES__ %>
 
       #preload {
         -webkit-app-region: drag;
@@ -55,18 +23,12 @@
         transition: opacity 0.4s ease-in-out;
         z-index: 100;
       }
+
       #preload video {
         height: 144px;
         width: 256px;
       }
 
-      b {
-        font-weight: bold;
-      }
-
-      em {
-        font-style: italic;
-      }
     </style>
     <script>
       <% if (htmlWebpackPlugin.options.nodeModules) { %>

src/styles/global.js

@@ -10,6 +10,7 @@ import '@fortawesome/fontawesome-free-brands'
 
 import { fontFace, rgba } from 'styles/helpers'
 import { radii, colors } from 'styles/theme'
+import reset from './reset'
 
 const fonts = {
   'Open Sans': [
@@ -86,37 +87,13 @@ function transformFonts(allFonts) {
 
 injectGlobal`
   ${transformFonts(fonts)};
-
-  .scroll-content {
-    height: 100%;
-
-    > div {
-      height: 100%;
-    }
-  }
-  .scrollbar-thumb {
-    background: rgb(102, 102, 102) !important;
-    padding: 2px;
-    background-clip: content-box !important;
-  }
-  .scrollbar-track {
-    background: transparent !important;
-    transition: opacity 0.2s ease-in-out !important;
-    z-index: 20 !important;
-  }
-
-  .recharts-wrapper {
-    cursor: inherit !important;
-  }
+  ${reset};
 
   .tippy-tooltip {
     background-color: ${rgba(colors.dark, 0.8)};
     border-radius: ${radii[1]}px;
-    padding: 0;
-  }
-  .tippy-tooltip .tippy-content {
-    background: transparent;
   }
+
   .tippy-popper .tippy-roundarrow {
     fill: ${rgba(colors.dark, 0.8)};
   }

src/styles/reset.js

@@ -0,0 +1,65 @@
+module.exports = `* {
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  user-select: none;
+  min-width: 0;
+
+  /* it will surely make problem in the future... to be inspected. */
+  flex-shrink: 0;
+}
+
+body {
+  cursor: default;
+  font-family: 'Museo Sans', 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.5;
+}
+
+#app {
+  display: none;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+b {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}
+
+.scroll-content {
+  height: 100%;
+
+  > div {
+    height: 100%;
+  }
+}
+.scrollbar-thumb {
+  background: rgb(102, 102, 102) !important;
+  padding: 2px;
+  background-clip: content-box !important;
+}
+.scrollbar-track {
+  background: transparent !important;
+  transition: opacity 0.2s ease-in-out !important;
+  z-index: 20 !important;
+}
+
+.recharts-wrapper {
+  cursor: inherit !important;
+}
+
+.tippy-tooltip .tippy-content {
+  background: transparent;
+}
+
+.tippy-tooltip {
+  padding: 0;
+}`

webpack/plugins.js

@@ -4,6 +4,7 @@ require('../src/globals')
 
 module.exports = [
   new webpack.DefinePlugin({
+    __GLOBAL_STYLES__: JSON.stringify(__GLOBAL_STYLES__),
     __DEV__,
     __PROD__,
     'process.env.NODE_ENV': JSON.stringify(__ENV__),