Components new design

.storybook/gnosisTheme.js

@@ -10,11 +10,7 @@ export default create({
   appBg: 'white',
   appContentBg: 'white',
   appBorderColor: 'grey',
-  appBorderRadius: 4,
-
-  // Typography
-  fontBase: '"Roboto", sans-serif',
-  fontCode: 'monospace',
+  appBorderRadius: 4,  
 
   // Text colors
   textColor: '#333333',

.storybook/preview.js

@@ -6,15 +6,15 @@ import { ThemeProvider } from 'styled-components';
 import theme from '../src/theme';
 import GlobalStyles from '../src/global';
 
-addDecorator(storyFn => (
-  <ThemeProvider theme={theme}>
+addDecorator((storyFn) => (
+  <>
     <GlobalStyles />
-    {storyFn()}
-  </ThemeProvider>
+    <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
+  </>
 ));
 
 addParameters({
   options: {
-    showRoots: false
-  }
+    showRoots: false,
+  },
 });

.storybook/webpack.config.js

@@ -11,6 +11,18 @@ module.exports = ({ config }) => {
     ]
   });
 
+  // There was a problem with the fonts not being loaded
+  // I took the fix from here: https://github.com/storybookjs/storybook/issues/5936#issuecomment-532902187
+  config.module.rules = config.module.rules.map(rule => {
+    if (rule.test && rule.test.toString().includes('woff')) {
+      return {
+        ...rule,
+        test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/
+      }
+    }
+    return rule
+  })
+
   config.module.rules.push({
     test: /\.(woff|woff2|eot|ttf)$/,
     use: [

src/dataDisplay/Card/card.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Card from './index';
-import { Title } from '../../index';
+import { Button, Dot, Title, Text } from '../../index';
 
 export default {
   title: 'Data Display/Card',
@@ -13,6 +13,42 @@ export default {
 
 export const SimpleCard = (): React.ReactElement => (
   <Card>
+    <Dot color="primary">
+      <Text size="xl" color="white">
+        1
+      </Text>
+    </Dot>
     <Title size="xs">Some text</Title>
+    <Button
+      size="lg"
+      iconType="safe"
+      color="secondary"
+      variant="bordered"
+      iconSize="sm">
+      <Text size="xl" color="secondary">
+        Load Safe
+      </Text>
+    </Button>
+  </Card>
+);
+
+export const CardDisabled = (): React.ReactElement => (
+  <Card disabled>
+    <Dot color="primary">
+      <Text size="xl" color="white">
+        1
+      </Text>
+    </Dot>
+    <Title size="xs">Some text</Title>
+    <Button
+      size="lg"
+      iconType="safe"
+      color="secondary"
+      variant="bordered"
+      iconSize="sm">
+      <Text size="xl" color="secondary">
+        Load Safe
+      </Text>
+    </Button>
   </Card>
 );

src/dataDisplay/Card/index.tsx

@@ -4,22 +4,37 @@ import { rgba } from 'polished';
 
 const StyledCard = styled.div`
   box-shadow: 1px 2px 10px 0
-    ${({ theme }) => rgba(theme.colors.shadow.color, 0.08)};
+    ${({ theme }) => rgba(theme.colors.shadow.color, 0.18)};
   border-radius: 8px;
   padding: 24px;
   background-color: ${({ theme }) => theme.colors.white};
+  position: relative;
+`;
+
+const Disabled = styled.div`
+  opacity: 0.5;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.white};
+  z-index: 1;
+  top: 0;
+  left: 0;
 `;
 
 type Props = {
   className?: string;
+  disabled?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 const Card: React.FC<Props> = ({
   className,
   children,
+  disabled,
   ...rest
 }): React.ReactElement => (
   <StyledCard className={className} {...rest}>
+    {disabled && <Disabled />}
     {children}
   </StyledCard>
 );

src/dataDisplay/Divider/divider.stories.tsx

@@ -19,7 +19,13 @@ export const Horizontal = (): React.ReactElement => (
 );
 
 export const Vertical = (): React.ReactElement => (
-  <div style={{ display: 'flex' }}>
+  <div
+    style={{
+      display: 'flex',
+      height: '150px',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}>
     <div>Some content</div>
     <Divider orientation="vertical" />
     <div>Some content2</div>

src/dataDisplay/Dot/dot.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Dot, Text, Icon } from '../../index';
+
+export default {
+  title: 'Data Display/Dot',
+  component: Dot,
+  parameters: {
+    componentSubtitle: 'Generic Dot container for text or icons.',
+  },
+};
+
+export const DotWithText = (): React.ReactElement => (
+  <Dot color="primary">
+    <Text size="xl" color="white">
+      1
+    </Text>
+  </Dot>
+);
+
+export const DotWithIcon = (): React.ReactElement => (
+  <Dot color="rinkeby">
+    <Icon color="white" type="check" size="sm" />
+  </Dot>
+);

src/dataDisplay/Dot/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ThemeColors } from '../../theme';
+
+type Props = {
+  className?: string;
+  color: ThemeColors;
+};
+
+const StyledDot = styled.div<Props>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  height: 36px;
+  width: 36px;
+  background-color: ${({ theme, color }) => theme.colors[color]};
+`;
+
+const Dot: React.FC<Props> = ({ children, ...rest }): React.ReactElement => (
+  <StyledDot {...rest}>{children}</StyledDot>
+);
+
+export default Dot;

src/dataDisplay/Icon/icon.stories.tsx

@@ -28,7 +28,7 @@ export const Icons = (): React.ReactElement => {
     width: 140px;
     height: 140px;
     border: 1px solid ${({ theme }) => theme.colors.background};
-    font-family: 'Averta', sans-serif;
+    font-family: ${({ theme }) => theme.fonts.fontFamily};
     font-size: 14px;
   `;
 
@@ -88,6 +88,7 @@ export const Icons = (): React.ReactElement => {
     'resync',
     'rocket',
     'scan',
+    'safe',
     'search',
     'sendAgain',
     'sent',

src/dataDisplay/Icon/images/safe.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export default {
+  sm: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16">
+      <g fill="none" fillRule="evenodd">
+        <path d="M0 0H16V16H0z" />
+        <path
+          fill="#B2B5B2"
+          d="M13 3c1.054 0 1.918.816 1.994 1.85l.005.15v6c0 1.054-.815 1.918-1.85 1.994l-.148.007c0 .512-.386.935-.884.993l-.117.007c-.552 0-1-.448-1-1H5c0 .512-.386.935-.883.993L4 14.001c-.553 0-1-.448-1-1-1.054-.001-1.919-.817-1.995-1.852L1 11V5c0-1.053.816-1.917 1.85-1.994L3 3h10zm0 2H3v6h10V5z"
+        />
+        <path
+          fill="#B2B5B2"
+          d="M10.49 6.5c-.827 0-1.5.672-1.5 1.5s.673 1.5 1.5 1.5c.83 0 1.5-.672 1.5-1.5s-.67-1.5-1.5-1.5"
+        />
+      </g>
+    </svg>
+  ),
+  md: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24">
+      <g fill="none" fillRule="evenodd">
+        <path d="M0 0H24V24H0z" />
+        <path
+          fill="#B2B5B2"
+          d="M20 4c1.054 0 1.918.816 1.995 1.85L22 6v12c0 1.054-.816 1.918-1.85 1.994l-.153.005c0 .518-.385.94-.883.998l-.117.007c-.512 0-.935-.386-.993-.884L17.997 20H5.998c0 .518-.386.94-.883.998l-.117.007c-.553 0-1-.447-1-1-1.053-.005-1.916-.821-1.992-1.855L2 17.999V6c0-1.053.817-1.917 1.851-1.994L4.001 4h16zm0 2H4v12h16V6z"
+        />
+        <path
+          fill="#B2B5B2"
+          d="M14.997 8c-2.209 0-4 1.792-4 4 0 2.21 1.791 4 4 4 2.21 0 4-1.79 4-4 0-2.208-1.79-4-4-4m0 2c1.103 0 2 .897 2 2 0 1.104-.897 2-2 2s-2-.896-2-2c0-1.103.897-2 2-2"
+        />
+        <path
+          fill="#B2B5B2"
+          fillRule="nonzero"
+          d="M6.998 8c.513 0 .936.386.994.883L7.998 9v6c0 .552-.447 1-1 1-.513 0-.935-.386-.993-.884L5.998 15V9c0-.552.448-1 1-1z"
+        />
+      </g>
+    </svg>
+  ),
+};

src/dataDisplay/Icon/index.tsx

@@ -57,6 +57,7 @@ import requiredConfirmations from './images/requiredConfirmations';
 import restricted from './images/restricted';
 import resync from './images/resync';
 import rocket from './images/rocket';
+import safe from './images/safe';
 import scan from './images/scan';
 import search from './images/search';
 import sendAgain from './images/sendAgain';
@@ -151,6 +152,7 @@ const icons = {
   restricted,
   resync,
   rocket,
+  safe,
   scan,
   search,
   sendAgain,