refactor: style popup menu

thedevs-network · Mar 16, 2020 · ca77873 · ca77873
1 parent 4e6213e
commit ca77873
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 75 deletions.
diff --git a/src/Popup/Header.tsx b/src/Popup/Header.tsx
@@ -90,9 +90,16 @@ const Header: React.FC<HeaderProperties> = ({ userConfig, pageReloadFlag, setPag
                     <img src="assets/logo.png" alt="logo" />
                 </div>
                 <div className="action__buttons--holder">
-                    <button
-                        type="button"
-                        className="icon"
+                    <Icon
+                        className="icon refresh__icon"
+                        name={
+                            // eslint-disable-next-line no-nested-ternary
+                            loading
+                                ? 'spinner'
+                                : errored && errored.error !== null
+                                ? (errored && !errored.error && 'tick') || 'cross'
+                                : 'refresh'
+                        }
                         onClick={(): Promise<void> => {
                             return fetchUserDomains({
                                 userConfig,
@@ -102,22 +109,8 @@ const Header: React.FC<HeaderProperties> = ({ userConfig, pageReloadFlag, setPag
                                 setPageReloadFlag,
                             });
                         }}
-                    >
-                        {/* eslint-disable no-nested-ternary */}
-                        <Icon
-                            className="refresh__icon"
-                            name={
-                                loading
-                                    ? 'spinner'
-                                    : errored && errored.error !== null
-                                    ? (errored && !errored.error && 'tick') || 'cross'
-                                    : 'refresh'
-                            }
-                        />
-                    </button>
-                    <button type="button" className="icon" onClick={openExtOptionsPage}>
-                        <Icon name="settings" />
-                    </button>
+                    />
+                    <Icon className="icon settings__icon" name="settings" onClick={openExtOptionsPage} />
                 </div>
             </header>
         </>

diff --git a/src/Popup/PopupBody.tsx b/src/Popup/PopupBody.tsx
@@ -30,34 +30,32 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
             <div className="popup__body">
                 {!error ? (
                     <>
-                        <button
-                            className="icon__button"
-                            type="button"
+                        <Icon
+                            className="icon qr__icon"
+                            name="qrcode"
                             onClick={(): void => {
                                 return setQRView(!QRView);
                             }}
-                        >
-                            <Icon className="qr__icon" name="qrcode" />
-                        </button>
+                        />
                         {!copied ? (
                             <CopyToClipboard
                                 text={message}
                                 onCopy={(): void => {
                                     return setCopied(true);
                                 }}
                             >
-                                <Icon className="copy__icon" name="copy" />
+                                <Icon className="icon copy__icon" name="copy" />
                             </CopyToClipboard>
                         ) : (
-                            <Icon name="tick" />
+                            <Icon className="icon check__icon" name="tick" />
                         )}
                         <CopyToClipboard
                             text={message}
                             onCopy={(): void => {
                                 return setCopied(true);
                             }}
                         >
-                            <p>{removeProtocol(message)}</p>
+                            <h1 className="link">{removeProtocol(message)}</h1>
                         </CopyToClipboard>
                     </>
                 ) : (

diff --git a/src/Popup/styles.scss b/src/Popup/styles.scss
@@ -1,13 +1,59 @@
 @import "../styles/fonts";
 @import "../styles/reset";
 @import "../styles/variables";
+@import "../styles/components";
 
 body {
   color: $black;
 }
 
+
+#header {
+  padding: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .logo__holder {
+    img {
+      width: 30px !important;
+      height: 30px !important;
+    }
+  }
+
+  .action__buttons--holder {
+    display: flex;
+
+    .icon {
+      background-color: transparent;
+      box-shadow: none;
+      height: 35px;
+      width: 35px;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .refresh__icon {
+
+      svg {
+        stroke: rgb(187, 187, 187);
+        stroke-width: 2.5;
+      }
+    }
+  }
+
+  .settings__icon {
+    svg {
+      fill: rgb(187, 187, 187);
+      stroke: none;
+    }
+  }
+}
+
 #popup {
-  min-height: 300px;
+  min-height: 350px;
   min-width: 250px;
   font-size: 1.125em;
 
@@ -49,54 +95,44 @@ body {
       font-size: 1.2em;
     }
 
-    .copy__icon {
-      display: block;
-      padding-right: 5px;
+    .link {
+      border-bottom: 1px dotted $StatsTotalUnderline;
+      font-size: 1.602em;
       cursor: pointer;
+      min-width: 0px;
+      padding-bottom: 2px;
+      color: rgb(41, 71, 86);
+      font-weight: 300;
+      margin: 0px;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .copy__icon,
+    .check__icon {
+      margin: 0px 16px 0px 0px;
+
+      svg {
+        stroke: rgb(101, 189, 137);
+        stroke-width: 2.5;
+      }
     }
 
     .qr__icon {
-      display: block;
-      padding-right: 5px;
-      padding-top: 5px;
-      cursor: pointer;
+      margin: 0px 8px 0px 0px;
+
+      svg {
+        fill: rgb(89, 89, 89);
+        stroke: none;
+      }
     }
   }
 
   .qr__holder {
     display: flex;
     justify-content: center;
-    padding-top: 10px;
-  }
-}
-
-#header {
-  padding: 15px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .logo__holder {
-    img {
-      width: 30px !important;
-      height: 30px !important;
-    }
-  }
-
-  .action__buttons--holder {
-    .icon {
-      vertical-align: middle;
-      border: none;
-      align-items: center;
-      justify-content: center;
-      border-radius: 100%;
-      background-color: transparent !important;
-      cursor: pointer;
-    }
-
-    .refresh__icon {
-      cursor: pointer;
-      padding-right: 5px;
-    }
+    padding: 17px 15px 0px 15px;
   }
 }
diff --git a/src/components/Icon/ArrowLeft.tsx b/src/components/Icon/ArrowLeft.tsx
@@ -3,13 +3,17 @@ import React from 'react';
 const ArrowLeft: React.FC = () => {
     return (
         <svg
-            viewBox="-5 -5 24 24"
-            width={24}
-            height={24}
-            preserveAspectRatio="xMinYMin"
-            className="arrow-left_svg__jam arrow-left_svg__jam-arrow-left"
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            fill="none"
+            stroke="#000"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
         >
-            <path d="M3.414 7.657l3.95 3.95A1 1 0 015.95 13.02L.293 7.364a.997.997 0 010-1.414L5.95.293a1 1 0 111.414 1.414l-3.95 3.95H13a1 1 0 010 2H3.414z" />
+            <path d="M19 12H6m6-7l-7 7 7 7" />
         </svg>
     );
 };

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -30,6 +30,7 @@ type Props = {
     hoverStroke?: string;
     strokeWidth?: string;
     className?: string;
+    onClick?: () => void;
 };
 
 const Icon: React.FC<Props> = ({ name, ...rest }) => {

diff --git a/src/styles/_components.scss b/src/styles/_components.scss
@@ -0,0 +1,27 @@
+.icon {
+  min-width: 0px;
+  width: 30px;
+  height: 30px;
+  background-color: rgb(235, 255, 243);
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+  box-shadow: rgba(138, 158, 168, 0.12) 0px 2px 1px;
+  padding: 6px;
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial;
+  outline: none;
+  transition: transform 0.4s ease-out 0s;
+  border-radius: 100%;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    transition: all 0.2s ease-out 0s;
+  }
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -5,7 +5,8 @@ $grey-white: #f3f3f3;
 $white: #ffffff;
 
 // **** fonts ****
-$font-nunito: "Nunito", sans-serif;
+$font-nunito: "Nunito",
+sans-serif;
 
 // font weights
 $thin: 100;
@@ -22,3 +23,6 @@ $exblack: 900;
 .d-none {
   display: none !important;
 }
+
+$CopyIconBg: hsl(144, 100%, 96%);
+$StatsTotalUnderline: hsl(200, 35%, 65%);