From ad6a61fee692e7efbc198b9926258545e782e75a Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 18 Jun 2018 11:48:24 +0200
Subject: [PATCH 1/4] Small fix account header

---
 packages/light-ui/src/AccountHeader/AccountHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/light-ui/src/AccountHeader/AccountHeader.js b/packages/light-ui/src/AccountHeader/AccountHeader.js
index 29baa2e5..706597d0 100644
--- a/packages/light-ui/src/AccountHeader/AccountHeader.js
+++ b/packages/light-ui/src/AccountHeader/AccountHeader.js
@@ -41,7 +41,7 @@ const AccountHeader = ({ address, copyAddress, name, ...otherProps }) => {
               <Blockies seed={address.toLowerCase()} scale={2} size={8} />{' '}
               {name}{' '}
               <span className='account_address'>
-                {address.slice(0, 4)}..{address.slice(-2)}
+                {address.slice(0, 4)}..{address.slice(-4)}
               </span>
             </Container>
           )
-- 
GitLab


From aabd41f15b90774947ea04409ba9b7e2be68af79 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 18 Jun 2018 13:26:14 +0200
Subject: [PATCH 2/4] Let overlay really overlay

---
 packages/light-react/src/App/App.js           | 41 +++++++++----------
 packages/light-react/src/Overlay/Overlay.js   | 20 ++++-----
 .../assets/sass/components/_alert-screen.scss |  7 +++-
 .../src/assets/sass/layouts/_wrapper.scss     | 17 +++++++-
 4 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/packages/light-react/src/App/App.js b/packages/light-react/src/App/App.js
index 07aac795..5715372c 100644
--- a/packages/light-react/src/App/App.js
+++ b/packages/light-react/src/App/App.js
@@ -39,7 +39,7 @@ class App extends Component {
                 <polygon points='0 30 60 30 30 0' />
               </svg>
             </div>
-            <div className='window'>{this.renderScreen()}</div>
+            {this.renderScreen()}
           </div>
         </div>
       </Router>
@@ -57,28 +57,27 @@ class App extends Component {
       }
     } = this.props;
 
-    // If we are onboarding, then never show the Overlay. On the other hand, if
-    // we're not onboarding, show the Overlay whenever we have an issue.
-    if (!isOnboarding && status !== STATUS.GOOD) {
-      return <Overlay />;
-    }
-
     return (
-      <Switch>
-        {/* We redirect to Onboarding if necessary, or by default to our
+      <div className='window'>
+        {/* If we are onboarding, then never show the Overlay. On the other hand, if
+            we're not onboarding, show the Overlay whenever we have an issue. */}
+        {!isOnboarding && status !== STATUS.GOOD && <Overlay />}
+        <Switch>
+          {/* We redirect to Onboarding if necessary, or by default to our
         homepage which is Tokens */}
-        <Redirect
-          exact
-          from='/'
-          to={isOnboarding ? '/onboarding' : '/tokens'}
-        />
-        <Route path='/accounts' component={Accounts} />
-        <Route path='/onboarding' component={Onboarding} />
-        <Route path='/send' component={Send} />
-        <Route path='/settings' component={Settings} />
-        <Route path='/tokens' component={Tokens} />
-        <Redirect from='*' to='/' />
-      </Switch>
+          <Redirect
+            exact
+            from='/'
+            to={isOnboarding ? '/onboarding' : '/tokens'}
+          />
+          <Route path='/accounts' component={Accounts} />
+          <Route path='/onboarding' component={Onboarding} />
+          <Route path='/send' component={Send} />
+          <Route path='/settings' component={Settings} />
+          <Route path='/tokens' component={Tokens} />
+          <Redirect from='*' to='/' />
+        </Switch>
+      </div>
     );
   }
 }
diff --git a/packages/light-react/src/Overlay/Overlay.js b/packages/light-react/src/Overlay/Overlay.js
index 73567524..9b7bd0a2 100644
--- a/packages/light-react/src/Overlay/Overlay.js
+++ b/packages/light-react/src/Overlay/Overlay.js
@@ -15,17 +15,15 @@ import loading from '../assets/img/icons/loading.svg';
 class Overlays extends Component {
   render () {
     return (
-      <div className='window_content'>
-        <div className='box -padded'>
-          <div className='alert-screen'>
-            <div className='alert-screen_content'>
-              <div className='alert-screen_image'>
-                <img alt='loading' src={loading} />
-              </div>
-              <div className='alert-screen_text'>
-                <h1>{this.renderTitle()}</h1>
-                <p>{this.renderDescription()}</p>
-              </div>
+      <div className='window_overlay'>
+        <div className='alert-screen'>
+          <div className='alert-screen_content'>
+            <div className='alert-screen_image'>
+              <img alt='loading' src={loading} />
+            </div>
+            <div className='alert-screen_text'>
+              <h1>{this.renderTitle()}</h1>
+              <p>{this.renderDescription()}</p>
             </div>
           </div>
         </div>
diff --git a/packages/light-react/src/assets/sass/components/_alert-screen.scss b/packages/light-react/src/assets/sass/components/_alert-screen.scss
index 4a4a4344..5a54d387 100644
--- a/packages/light-react/src/assets/sass/components/_alert-screen.scss
+++ b/packages/light-react/src/assets/sass/components/_alert-screen.scss
@@ -1,5 +1,5 @@
 .alert-screen {
-  height: 22rem;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -18,7 +18,10 @@
   .alert-screen_text {
     margin-top: 1rem;
     text-align: center;
-    h1, h2, big, strong {
+    h1,
+    h2,
+    big,
+    strong {
       font-weight: 600;
       font-size: ms(1);
       line-height: ms(1) * 1.3;
diff --git a/packages/light-react/src/assets/sass/layouts/_wrapper.scss b/packages/light-react/src/assets/sass/layouts/_wrapper.scss
index 470ddbe5..a317fd24 100644
--- a/packages/light-react/src/assets/sass/layouts/_wrapper.scss
+++ b/packages/light-react/src/assets/sass/layouts/_wrapper.scss
@@ -6,7 +6,8 @@
   bottom: 0;
   overflow: hidden;
 
-  .content { // TODO: abstract this out
+  .content {
+    // TODO: abstract this out
     overflow: visible;
     max-width: 22rem;
     margin: 0 auto;
@@ -29,11 +30,23 @@
       background: $chrome;
       border-radius: 0.25rem;
       overflow: hidden;
-      box-shadow: 0 0.125rem 0.75rem rgba($black,0.175), 0 0.125rem 0.125rem rgba($black,0.100);
+      position: relative;
+      box-shadow: 0 0.125rem 0.75rem rgba($black, 0.175),
+        0 0.125rem 0.125rem rgba($black, 0.1);
 
       .window_content {
         min-height: 7.5rem;
       }
+
+      .window_overlay {
+        background-color: $chrome;
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 10;
+      }
     }
   }
 }
-- 
GitLab


From 8907ec4e2ce28a62a612fd97ff80b24ce59592e1 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 18 Jun 2018 13:41:11 +0200
Subject: [PATCH 3/4] Don't allow Overlay to flash (fix #51)

---
 packages/light-react/src/Overlay/Overlay.js | 31 +++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/packages/light-react/src/Overlay/Overlay.js b/packages/light-react/src/Overlay/Overlay.js
index 9b7bd0a2..6c6bef7a 100644
--- a/packages/light-react/src/Overlay/Overlay.js
+++ b/packages/light-react/src/Overlay/Overlay.js
@@ -13,7 +13,38 @@ import loading from '../assets/img/icons/loading.svg';
 @inject('healthStore')
 @observer
 class Overlays extends Component {
+  state = {
+    isVisible: false // Only make Overlay visible if the overlay error persists for 2s or more
+  };
+
+  componentDidUpdate () {
+    this.timeout = setTimeout(() => {
+      this.setState({ isVisible: true });
+    }, 2000);
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timeout);
+  }
+
   render () {
+    const {
+      healthStore: {
+        health: { status }
+      }
+    } = this.props;
+
+    // isVisible is:
+    // - true if the status is anything but ClockNotSync or Syncing
+    // - or else this.state.isVisible
+    const isVisible =
+      ![STATUS.CLOCKNOTSYNC, STATUS.SYNCING].includes(status) ||
+      this.state.isVisible;
+
+    if (!isVisible) {
+      return null;
+    }
+
     return (
       <div className='window_overlay'>
         <div className='alert-screen'>
-- 
GitLab


From 9830dc905459e236cd21b721ca0aee428256b140 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 18 Jun 2018 13:43:21 +0200
Subject: [PATCH 4/4] Change to 3s

---
 packages/light-react/src/Overlay/Overlay.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/light-react/src/Overlay/Overlay.js b/packages/light-react/src/Overlay/Overlay.js
index 6c6bef7a..2009e749 100644
--- a/packages/light-react/src/Overlay/Overlay.js
+++ b/packages/light-react/src/Overlay/Overlay.js
@@ -20,7 +20,7 @@ class Overlays extends Component {
   componentDidUpdate () {
     this.timeout = setTimeout(() => {
       this.setState({ isVisible: true });
-    }, 2000);
+    }, 3000);
   }
 
   componentWillUnmount () {
-- 
GitLab