From 085551b7e6b7dab21c21b99a40c4f79c413799d5 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 17 Oct 2017 22:36:53 -0700
Subject: New Account modal

---
 ui/app/css/itcss/components/account-menu.scss | 63 ++++++++++++++++++++++++++-
 ui/app/css/itcss/components/confirm.scss      |  2 +-
 ui/app/css/itcss/components/header.scss       |  4 ++
 ui/app/css/itcss/components/menu.scss         |  4 ++
 ui/app/css/itcss/components/network.scss      |  1 +
 ui/app/css/itcss/tools/utilities.scss         | 16 +++----
 6 files changed, 79 insertions(+), 11 deletions(-)

(limited to 'ui/app/css/itcss')

diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 5ed42f627..857903ce1 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -39,6 +39,7 @@
     font-size: 12px;
     line-height: 23px;
     padding: 0 24px;
+    font-weight: 200;
   }
 
   img {
@@ -50,8 +51,68 @@
     display: flex;
     flex-flow: column nowrap;
     overflow-y: auto;
-    height: 272px;
+    max-height: 240px;
     position: relative;
     z-index: 200;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media screen and (max-width: 575px) {
+      max-height: 215px;
+    }
+
+    .keyring-label {
+      margin-top: 5px;
+    }
+  }
+
+  &__account {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 16px 14px;
+    flex: 0 0 auto;
+
+    @media screen and (max-width: 575px) {
+      padding: 12px 14px;
+    }
+  }
+
+  &__account-info {
+    flex: 1 0 auto;
+    display: flex;
+    flex-flow: column nowrap;
+    padding-top: 4px;
+  }
+
+  &__check-mark {
+    width: 14px;
+    flex: 0 0 auto;
+  }
+
+  .identicon {
+    margin: 0 12px 0 0;
+    flex: 0 0 auto;
+  }
+
+  &__name {
+    color: $white;
+    font-size: 18px;
+    font-weight: 200;
+    line-height: 16px;
+  }
+
+  &__balance {
+    color: $dusty-gray;
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  &__action {
+    font-size: 16px;
+    line-height: 18px;
+    font-weight: 200;
+    cursor: pointer;
   }
 }
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 15c752923..d4f0fe5ac 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -37,7 +37,7 @@
     overflow-y: auto;
     top: 0;
     box-shadow: none;
-    height: calc(100vh - 41px - 100px);
+    height: calc(100vh - 58px - 100px);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index 512cbd995..ef84dc3f4 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -58,6 +58,10 @@
   text-transform: uppercase;
   font-weight: 400;
   color: #22232c; // $shark
+
+  @media screen and (max-width: 575px) {
+    display: none;
+  }
 }
 
 h2.page-subtitle {
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index 0f83146a8..c98ee70d9 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -13,6 +13,10 @@
     position: relative;
     z-index: 200;
 
+    @media screen and (max-width: 575px) {
+      padding: 14px;
+    }
+
     &--clickable {
       cursor: pointer;
 
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index bf699ac57..bb8c4eea8 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -2,6 +2,7 @@
   border: 1px solid $shark;
   border-radius: 82px;
   padding: 6px;
+  flex: 0 0 auto;
 
   &.ethereum-network {
     border-color: rgb(3, 135, 137);
diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss
index 4a55303b9..ca9fd0d9c 100644
--- a/ui/app/css/itcss/tools/utilities.scss
+++ b/ui/app/css/itcss/tools/utilities.scss
@@ -231,17 +231,15 @@ hr.horizontal-line {
 
 .keyring-label {
   z-index: 1;
-  font-size: 11px;
-  background: rgba(255, 0, 0, .8);
-  bottom: -47px;
-  color: $white;
+  font-size: 8px;
+  line-height: 8px;
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
   border-radius: 10px;
-  height: 20px;
-  min-width: 20px;
-  position: absolute;
-  top: 0px;
-  right: 5px;
   padding: 4px;
+  width: 41px;
+  text-align: center;
+  height: 15px;
 }
 
 .ether-balance {
-- 
cgit v1.2.3