Code cleanup for connected-indicator-info-popup

MetaMask · Apr 14, 2020 · 593fdff · 593fdff
1 parent c52caf6
commit 593fdff
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 33 deletions.
diff --git a/ui/app/components/ui/popover/index.scss b/ui/app/components/ui/popover/index.scss
@@ -111,7 +111,7 @@
     }
   }
 
-  &-tooltip {
+  &-arrow {
     width: 22px;
     height: 22px;
     background: white;

diff --git a/ui/app/components/ui/popover/popover.component.js b/ui/app/components/ui/popover/popover.component.js
@@ -13,7 +13,7 @@ const Popover = ({
   onBack,
   onClose,
   className,
-  showTooltip,
+  showArrow,
   CustomBackground,
 }) => {
   const t = useContext(I18nContext)
@@ -24,7 +24,7 @@ const Popover = ({
         : <div className="popover-bg" onClick={onClose} />
       }
       <section className={classnames('popover-wrap', className)}>
-        { showTooltip ? <div className="popover-tooltip" /> : null}
+        { showArrow ? <div className="popover-arrow" /> : null}
         <header className="popover-header">
           <div className="popover-header__title">
             <h2 title={title}>

diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
@@ -167,9 +167,9 @@ export default class Home extends PureComponent {
     return (
       <Popover
         title={ t('whatsthis') }
-        onClose={() => setConnectedStatusPopoverHasBeenShown()}
+        onClose={setConnectedStatusPopoverHasBeenShown}
         className="home__connected-status-popover"
-        showTooltip
+        showArrow
         CustomBackground={({ onClose }) => {
           return (
             <div
@@ -180,20 +180,20 @@ export default class Home extends PureComponent {
             </div>
           )
         }}
-      >
-        <main className="home__connect-status-text">
-          <div>{ t('metaMaskConnectStatusParagraphOne') }</div>
-          <div>{ t('metaMaskConnectStatusParagraphTwo') }</div>
-        </main>
-        <div className="home__connect-status-button-container">
+        footer={(
           <Button
             type="primary"
-            className="home__connect-status-button"
-            onClick={() => setConnectedStatusPopoverHasBeenShown()}
+            onClick={setConnectedStatusPopoverHasBeenShown}
           >
             { t('dismiss') }
           </Button>
-        </div>
+        )}
+        footerClassName="home__connected-status-popover-footer"
+      >
+        <main className="home__connect-status-text">
+          <div>{ t('metaMaskConnectStatusParagraphOne') }</div>
+          <div>{ t('metaMaskConnectStatusParagraphTwo') }</div>
+        </main>
       </Popover>
     )
   }

diff --git a/ui/app/pages/home/index.scss b/ui/app/pages/home/index.scss
@@ -67,11 +67,11 @@
 
   &__connected-status-popover-bg {
     height: 34px;
-    width: 96px;
+    width: 110px;
     border-radius: 34px;
     position: absolute;
     top: 82px;
-    left: 18px;
+    left: 12px;
     opacity: 1;
     box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.2);
     background: none;
@@ -82,24 +82,15 @@
     width: 100%;
   }
 
-  &__connect-status-button-container {
-    border-top: 1px solid #D2D8DD;
-    width: 100%;
-    display: flex;
-    height: 100%;
+  &__connect-status-popover-footer {
+    margin: 0;
     justify-content: flex-end;
-    align-items: center;
-    padding-right: 22px;
-    margin-top: 20px;
 
-    .button {
+    button {
+      height: 39px;
+      width: 133px;
+      border-radius: 39px;
       padding: 0;
     }
   }
-
-  &__connect-status-button {
-    height: 39px;
-    width: 133px;
-    border-radius: 39px;
-  }
 }
diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js
@@ -2182,10 +2182,10 @@ export function setMkrMigrationReminderTimestamp (timestamp) {
 }
 
 export function setConnectedStatusPopoverHasBeenShown () {
-  return (dispatch) => {
+  return () => {
     background.setConnectedStatusPopoverHasBeenShown((err) => {
       if (err) {
-        return dispatch(displayWarning(err.message))
+        throw new Error(err.message)
       }
     })
   }