🐛 Adjust xs styles

LiskHQ · Mar 29, 2018 · 88fdd0f · 88fdd0f
1 parent 74091cf
commit 88fdd0f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/components/savedAccounts/card.css b/src/components/savedAccounts/card.css
@@ -4,10 +4,12 @@
   --font-size-card-h2: 30px;
   --font-size-card-h2-s: 24px;
   --address-font-size: 17px;
+  --address-font-size-s: 14px;
   --small-font-size: 20px;
   --card-width: 347px;
   --card-height: 436px;
   --card-width-m: 267px;
+  --card-width-s: 227px;
   --card-height-m: 336px;
 }
 
@@ -217,9 +219,26 @@
 
 @media (--small-viewport) {
   .card {
-    width: var(--card-width-m);
-    height: 320px;
+    width: var(--card-width-s);
+    height: 280px;
     margin: 0px 24px;
+
+    & h2 {
+      margin: 15px 0;
+      padding: 0;
+      font-size: var(--font-size-card-h2-s);
+    }
+
+    & .removeButton {
+      position: absolute;
+      top: -10px;
+      left: -50%;
+      transform: translateX(50%);
+    }
+  }
+
+  .address {
+    font-size: var(--address-font-size-s);
   }
 
   .cardIcon {

diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css
@@ -8,6 +8,7 @@
   --h1-padding-xl: 85px;
   --h1-padding-l: 40px;
   --h1-padding-m: 25px;
+  --add-button-bottom-margin: calc(100vh - (55px +  98px)); /* stylelint-disable-line */
 }
 
 .content {
@@ -148,6 +149,15 @@
     & > h1 {
       font-size: var(--font-size-ids-h1-s);
     }
+
+    & > .closeButton[type='button'] {
+      height: 40px;
+      width: 40px;
+
+      & > span[data-react-toolbox='font-icon'] {
+        line-height: 40px;
+      }
+    }
   }
 
   .closeButton {
@@ -156,16 +166,16 @@
   }
 
   .cardsWrapper {
-    padding: 0;
+    padding-bottom: 100px;
   }
 
   .addAcctiveAccountButton {
-    bottom: 18vh; /* stylelint-disable-line */
+    top: var(--add-button-bottom-margin);
   }
 
   .deviceIos {
     & .addAcctiveAccountButton {
-      bottom: 95px; /* stylelint-disable-line */
+      top: var(--add-button-bottom-margin);
     }
   }
 
@@ -175,7 +185,7 @@
     }
 
     & .addAcctiveAccountButton {
-      bottom: 120px;
+      top: var(--add-button-bottom-margin);
     }
   }
 }