Merge pull request #629 from MyEtherWallet/ui/fix-hardware-ledger-modal

Responsive UI update for Network and Address model [5.0.2]
MyEtherWallet · Feb 13, 2019 · 826b53a · 826b53a
2 parents 0109c75 + a4e4904
commit 826b53a
Show file tree

Hide file tree

Showing 8 changed files with 753 additions and 304 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### Bug
 
+- Fix NetworkAddress layout responsiveness [#629](https://github.com/MyEtherWallet/MyEtherWallet/pull/629)
 - Reduce side paddings of footer links to make them fit to mobile width [#636](https://github.com/MyEtherWallet/MyEtherWallet/pull/636)
 
 ### Release v5.0.1
@@ -39,7 +40,7 @@
 - Added ENS test name registration to ROP, RIN and Goerli [#589](https://github.com/MyEtherWallet/MyEtherWallet/pull/589)
 
 ### Bug
-- Reduce side paddings of footer links to make them fit to mobile width [#636](https://github.com/MyEtherWallet/MyEtherWallet/pull/636)
+
 - Sentry bug fixes [#589](https://github.com/MyEtherWallet/MyEtherWallet/pull/589)
 - store addresses validation differently, better handling of kyber api no response [#588](https://github.com/MyEtherWallet/MyEtherWallet/pull/588)
 - Handle failure to fetch errors [#590](https://github.com/MyEtherWallet/MyEtherWallet/pull/590)

diff --git a/src/darklist/address-darklist.json b/src/darklist/address-darklist.json
diff --git a/.../AccessWalletLayout/components/NetworkAndAddressModal/NetworkAndAddressModal-desktop.scss b/.../AccessWalletLayout/components/NetworkAndAddressModal/NetworkAndAddressModal-desktop.scss
@@ -14,7 +14,11 @@ $red-filled-button-background--hover: #ff7795;
 $red-filled-button-background--click: #ff5a7f;
 
 @media all and (min-width: calc(#{$tablet-width} + 1px)) {
-  $collapse-button-color: #334758;
+  $collapse-button-color: $dark-blue-12;
+
+  .modal-content-container {
+    padding: 10px;
+  }
 
   .collapse-container {
     margin-bottom: 10px;
@@ -34,19 +38,40 @@ $red-filled-button-background--click: #ff5a7f;
 
         .network-content {
           display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
-          grid-column-gap: 20px;
-          padding-left: 30px;
+          grid-template-columns: 1fr 1fr;
+          grid-gap: 0px;
         }
 
         .network-title {
           display: flex;
           align-items: center;
           margin-bottom: 5px;
 
-          img {
-            height: 25px;
+          .network-icon-container {
+            width: 35px;
+            height: 35px;
+            text-align: center;
+            background-color: $light-grey-12;
+            border-radius: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             margin-right: 10px;
+            overflow: hidden;
+            img {
+              height: 60%;
+              margin: 0;
+            }
+
+            .no-icon {
+              text-align: center;
+
+              p {
+                font-weight: 700;
+                font-size: 10px;
+                line-height: 10px;
+              }
+            }
           }
 
           p {
@@ -66,12 +91,27 @@ $red-filled-button-background--click: #ff5a7f;
       background-color: $collapse-button-color !important;
       border-color: $collapse-button-color !important;
       display: flex;
+      align-items: center;
+
+      .network {
+        display: flex;
+        align-items: center;
+      }
 
       p {
+        text-align: left;
         font-weight: 600;
         color: white;
-        span {
-          font-weight: 400;
+      }
+      .network-name {
+        font-weight: 400;
+        font-size: 12px;
+        margin-left: 5px;
+      }
+
+      div {
+        p {
+          line-height: 16px;
         }
       }
 
@@ -80,16 +120,16 @@ $red-filled-button-background--click: #ff5a7f;
       }
 
       .button-number {
-        line-height: 18px;
+        $number-size: 20px;
+
         border: 1px solid white;
         border-radius: 100%;
-        text-align: center;
         margin-right: 10px;
-
-        $number-size: 20px;
-
         width: $number-size;
         height: $number-size;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     }
   }
@@ -126,7 +166,7 @@ $red-filled-button-background--click: #ff5a7f;
 
     .content-container-2 {
       background-color: $background-color-1;
-      margin: 0 -30px;
+      margin: 0 -20px;
       margin-bottom: 30px;
       padding: 0;
 
@@ -185,78 +225,80 @@ $red-filled-button-background--click: #ff5a7f;
       }
     }
   }
-} // @media all and (min-width: calc(#{$tablet-width} + 1px))
-
-.current-network {
-  background-color: $mew-green;
-  border-radius: 5px;
-  color: $white;
-  padding: 5px;
-}
 
-.network-content {
-  p {
-    cursor: pointer;
-  }
-}
-
-.custom-path-container {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: [col] 15% [col] 85%;
-  grid-template-rows: [row] auto [row] auto [row];
-  label {
-    border: 0;
-    font-weight: 500;
-    font-size: 14px;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
+  .network-content {
+    p {
+      //background-color: $light-grey-1;
+      cursor: pointer;
+      border-radius: 5px;
+      padding: 2px 7px;
+      user-select: none;
+    }
 
-  input {
-    background-color: $background-color-1;
-    border: 0;
-    font-size: 14px;
-    padding: 10px;
-    //width: 50%;
+    .current-network {
+      background-color: $dark-blue-2;
+      color: $white;
+    }
   }
 
-  .submit-button {
-    text-align: center;
-    user-select: none;
-    font-weight: 500;
-    cursor: pointer;
-    font-size: 14px;
-    border-radius: 4px;
-
-    &.cancel {
-      background-color: $red-filled-button-background;
-      border: 1px solid $red-filled-button-background;
+  .custom-path-container {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: [col] 15% [col] 85%;
+    grid-template-rows: [row] auto [row] auto [row];
+    label {
+      border: 0;
+      font-weight: 500;
+      font-size: 14px;
+      margin-bottom: 10px;
+      padding: 10px;
     }
 
-    &.submit {
-      background-color: $green-filled-button-background;
-      border: 1px solid $green-filled-button-background;
+    input {
+      background-color: $background-color-1;
+      border: 0;
+      font-size: 14px;
+      padding: 10px;
+      //width: 50%;
     }
 
-    color: $color-white;
+    .submit-button {
+      text-align: center;
+      user-select: none;
+      font-weight: 500;
+      cursor: pointer;
+      font-size: 14px;
+      border-radius: 4px;
+
+      &.cancel {
+        background-color: $red-filled-button-background;
+        border: 1px solid $red-filled-button-background;
+      }
+
+      &.submit {
+        background-color: $green-filled-button-background;
+        border: 1px solid $green-filled-button-background;
+      }
 
-    &:hover {
-      background-color: $green-filled-button-background--hover;
-      border: 1px solid $green-filled-button-background--hover;
-    }
+      color: $color-white;
 
-    &:active {
-      background-color: $green-filled-button-background--click;
-      border: 1px solid $green-filled-button-background--click;
+      &:hover {
+        background-color: $green-filled-button-background--hover;
+        border: 1px solid $green-filled-button-background--hover;
+      }
+
+      &:active {
+        background-color: $green-filled-button-background--click;
+        border: 1px solid $green-filled-button-background--click;
+      }
     }
   }
-}
 
-.custom-networks {
-  display: grid;
-  grid-column-gap: 35px;
-  grid-template-columns: 1fr 1fr;
-}
+  .custom-networks {
+    display: grid;
+    grid-column-gap: 35px;
+    grid-template-columns: 1fr 1fr;
+  }
+} // @media all and (min-width: calc(#{$tablet-width} + 1px))