fix(styles): clean up global error style

Implement new Notification component in GlobalError.

app/components/Activity/Activity.scss

@@ -129,7 +129,7 @@
 .activityContainer {
   background: var(--primaryBackground);
   transition: opacity 0.25s;
-  height: calc(100vh - 304px);
+  height: calc(100vh - 225px);
   overflow-y: auto;
   overflow-x: hidden;
   padding-top: 20px;

app/components/GlobalError/GlobalError.js

@@ -1,8 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import MdClose from 'react-icons/lib/md/close'
+import { Transition, animated } from 'react-spring'
 import errorToUserFriendly from 'lib/utils/userFriendlyErrors'
-import styles from './GlobalError.scss'
+import Notification from 'components/UI/Notification'
+import { Box } from 'rebass'
 
 class GlobalError extends React.Component {
   componentDidUpdate(prevProps) {
@@ -16,14 +17,26 @@ class GlobalError extends React.Component {
     const { error, clearError } = this.props
 
     return (
-      <div className={`${styles.container} ${!error ? styles.closed : undefined}`}>
+      <Transition from={{ opacity: 0 }} enter={{ opacity: 1 }} leave={{ opacity: 0 }} native>
-        <div className={styles.content}>
+        {error &&
-          <div className={styles.close} onClick={clearError}>
+          (springStyles => (
-            <MdClose />
+            <Box
-          </div>
+              mt="22px"
-          <h2>{errorToUserFriendly(error)}</h2>
+              px={3}
-        </div>
+              width={1}
-      </div>
+              css={{
+                position: 'absolute',
+                'z-index': 100
+              }}
+            >
+              <animated.div style={springStyles}>
+                <Notification variant="error" onClick={clearError}>
+                  {errorToUserFriendly(error)}
+                </Notification>
+              </animated.div>
+            </Box>
+          ))}
+      </Transition>
     )
   }
 }

app/components/GlobalError/GlobalError.scss

@@ -1,44 +0,0 @@
-@import 'styles/variables.scss';
-
-.container {
-  position: absolute;
-  z-index: z("global-error", "container");
-  background: $red;
-  color: $white;
-  width: 100%;
-  text-align: center;
-  padding: 20px;
-  transition: all 0.25s ease;
-
-  &.closed {
-    max-height: 0;
-    padding: 0;
-
-    .content .close {
-      opacity: 0;
-    }
-  }
-
-  .content {
-    position: relative;
-
-    .close {
-      position: absolute;
-      top: 50%;
-      right: 10%;
-      transform: translateY(-50%);
-      cursor: pointer;
-      font-size: 2rem;
-    }
-
-    h2 {
-      max-width: 75%;
-      margin-left: auto;
-      margin-right: auto;
-      font-size: 15px;
-      line-height: 20px;
-      letter-spacing: 1.5px;
-      font-weight: bold;
-    }
-  }
-}

app/components/UI/GlobalStyle.js

@@ -1,21 +1,17 @@
 import { createGlobalStyle } from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
-  @font-face {
+  html {
-    font-family: 'Roboto';
+    box-sizing: border-box;
-    font-style: normal;
-    font-weight: 300;
-    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
   }
-
-  * { box-sizing: border-box; }
-
   body {
+    position: relative;
+    overflow-y: hidden;
     margin: 0;
-    font-family: 'Roboto Light', 'Roboto', Arial, Helvetica, sans-serif;
+    padding: 0;
-    font-size: 13px;
-    line-height: 1.4;
     -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    font-family: 'Roboto', Arial, Helvetica, sans-serif;
   }
 `
 

app/components/UI/Notification.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Card, Flex, Text } from 'rebass'
-import MdClose from 'react-icons/lib/md/close'
+import X from 'components/Icon/X'
 import SystemSuccess from 'components/Icon/SystemSuccess'
 import SystemWarning from 'components/Icon/SystemWarning'
 import SystemError from 'components/Icon/SystemError'
@@ -27,10 +27,34 @@ class Notification extends React.Component {
     variant: PropTypes.string
   }
 
+  constructor(props) {
+    super(props)
+    this.state = { hover: false }
+    this.hoverOn = this.hoverOn.bind(this)
+    this.hoverOff = this.hoverOff.bind(this)
+  }
+
+  hoverOn() {
+    this.setState({ hover: true })
+  }
+
+  hoverOff() {
+    this.setState({ hover: false })
+  }
+
   render() {
     const { children, processing, variant } = this.props
+    const { hover } = this.state
     return (
-      <Card px={3} py={3} borderRadius="5px" {...this.props}>
+      <Card
+        px={3}
+        py={3}
+        borderRadius="5px"
+        css={{ cursor: 'pointer' }}
+        {...this.props}
+        onMouseEnter={this.hoverOn}
+        onMouseLeave={this.hoverOff}
+      >
         <Flex justifyContent="space-between">
           <Flex>
             {processing && <Spinner size="2em" mr="0.5em" />}
@@ -39,7 +63,7 @@ class Notification extends React.Component {
             {!processing && variant === 'error' && <SystemError />}
             <Text ml={2}>{children}</Text>
           </Flex>
-          <MdClose />
+          <X strokeWidth={hover ? 2 : null} />
         </Flex>
       </Card>
     )

app/containers/Root.js

@@ -4,6 +4,7 @@ import { ConnectedRouter } from 'react-router-redux'
 import { Switch, Route } from 'react-router'
 import PropTypes from 'prop-types'
 import { ThemeProvider } from 'styled-components'
+import GlobalStyle from 'components/UI/GlobalStyle'
 import GlobalError from 'components/GlobalError'
 import { clearError } from 'reducers/error'
 
@@ -238,6 +239,8 @@ class Root extends Component {
 
     if (!onboardingProps.onboarding.onboarded) {
       return (
+        <React.Fragment>
+          <GlobalStyle />
           <ThemeProvider theme={currentThemeSettings}>
             <div>
               <LoadingBolt
@@ -249,6 +252,7 @@ class Root extends Component {
               <Syncing {...syncingProps} />
             </div>
           </ThemeProvider>
+        </React.Fragment>
       )
     }
 
@@ -259,13 +263,18 @@ class Root extends Component {
       lnd.syncStatus !== 'complete'
     ) {
       return (
+        <React.Fragment>
+          <GlobalStyle />
           <ThemeProvider theme={currentThemeSettings}>
             <Syncing {...syncingProps} />
           </ThemeProvider>
+        </React.Fragment>
       )
     }
 
     return (
+      <React.Fragment>
+        <GlobalStyle />
         <ConnectedRouter history={history}>
           <ThemeProvider theme={currentThemeSettings}>
             <div>
@@ -286,6 +295,7 @@ class Root extends Component {
             </div>
           </ThemeProvider>
         </ConnectedRouter>
+      </React.Fragment>
     )
   }
 }

app/styles/app.global.scss

@@ -1,4 +1,4 @@
-@import "~font-awesome/css/font-awesome.css";
+@import '~font-awesome/css/font-awesome.css';
 @import 'reset.scss';
 @import 'variables.scss';
 @import 'tooltip.scss';
@@ -8,26 +8,19 @@
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
+  src: local('Roboto Light'), local('Roboto-Light'),
+    url(https://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcaCWcynf_cDxXwCLxiixG1c.ttf)
+      format('truetype');
 }
 
 body {
-  position: relative;
-  overflow-y: hidden;
-  margin: 0;
-  padding: 0;
-  color: #333;
-  height: 100vh;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   font-family: 'Roboto', Arial, Helvetica, sans-serif;
 }
 
 // disable the pinball scrollers for windows
 *,
-input[type=text],
+input[type='text'],
-input[type=number] {
+input[type='number'] {
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
     -webkit-appearance: none;

test/unit/components/UI/__snapshots__/Notification.spec.js.snap

@@ -28,11 +28,14 @@ exports[`component.UI.Notification should render correctly 1`] = `
   padding-right: 16px;
   padding-top: 16px;
   padding-bottom: 16px;
+  cursor: pointer;
   border-radius: 5px;
 }
 
 <div
   className="c0"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
 >
   <div
     className="c1"
@@ -64,23 +67,19 @@ exports[`component.UI.Notification should render correctly 1`] = `
       />
     </div>
     <svg
-      fill="currentColor"
+      className="feather feather-x"
+      fill="none"
       height="1em"
-      preserveAspectRatio="xMidYMid meet"
+      stroke="currentColor"
-      style={
+      strokeLinecap="round"
-        Object {
+      strokeLinejoin="round"
-          "color": undefined,
+      strokeWidth={null}
-          "verticalAlign": "middle",
+      viewBox="0 0 24 24"
-        }
-      }
-      viewBox="0 0 40 40"
       width="1em"
     >
-      <g>
       <path
-          d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"
+        d="M18 6L6 18M6 6l12 12"
       />
-      </g>
     </svg>
   </div>
 </div>