CSS design adjustments (#92)

* CSS design adjustments

* Desktop CSS (layouts and modals)

src/components/CurrencyInputPanel/currency-panel.scss

@@ -55,6 +55,7 @@
   }
 
   &__input {
+    font-size: 1.5rem;
     @extend %borderless-input;
     &--error {
       color: $salmon-red;
@@ -139,6 +140,7 @@
 
   &__selected-token-logo {
     margin-right: .4rem;
+    border-radius: 1rem;
     object-fit: contain;
   }
 }
@@ -178,12 +180,16 @@
     @extend %row-nowrap;
     align-items: center;
     padding: 1rem 1.5rem;
+    margin: .25rem .5rem;
     justify-content: space-between;
     cursor: pointer;
     user-select: none;
 
     &--selected {
-      background: $mercury-gray;
+      background-color: $concrete-gray;
+      box-sizing: border-box;
+      border: 1px solid $mercury-gray;
+      border-radius: 2.5rem;
 
       .token-modal__token-label {
         color: $black;
@@ -211,12 +217,28 @@
 
   &__token-logo {
     object-fit: contain;
+    border-radius: 1rem;
   }
 
   &__token-label {
-    color: $silver-gray;
+    color: $dove-gray;
     font-weight: 200;
   }
+
+  @media only screen and (min-device-width : 768px) {
+    max-width: 560px;
+    max-height: 768px;
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 1rem;
+    padding-bottom: 1rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    margin-top: 4rem;
+  }
 }
 
 
@@ -227,5 +249,3 @@
 .token-modal-appear.modal-container-appear-active {
   bottom: 0;
 }
-
-

src/components/Header/header.scss

@@ -5,12 +5,14 @@
 
   &__top {
     @extend %row-nowrap;
-    padding: 1.5rem 1.5rem .5rem 1.5rem;
+    padding: 1.25rem .75rem;
     align-items: center;
+    border-bottom: 1px solid $concrete-gray;
   }
 
   &__title {
     font-size: 1rem;
+    font-weight: 500;
     margin-left: 1rem;
     line-height: 1.5rem;
     color: $wisteria-purple;
@@ -22,7 +24,7 @@
   }
 
   &__navigation {
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
   }
 
   &--inactive {
@@ -65,5 +67,17 @@
       margin-left: 1rem;
     }
   }
-}
 
+  @media only screen and (min-device-width : 768px) {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    width: 100vw;
+
+    &__top {
+      border: none;
+      padding: 1.25rem;
+    }
+  }
+}

src/components/Modal/modal.scss

@@ -6,6 +6,7 @@
   width: 100vw;
   background-color: rgba($black, .6);
   z-index: 1000;
+  
 }
 
 .modal-container-appear {

src/components/Tab/tab.scss

@@ -3,7 +3,7 @@
 .tabs {
   @extend %row-nowrap;
   align-items: center;
-  height: 3rem;
+  height: 2.5rem;
   background-color: $concrete-gray;
   border-radius: 3rem;
   box-shadow: 0 0 0 .5px darken($concrete-gray, 5);
@@ -21,7 +21,7 @@
   @extend %row-nowrap;
   align-items: center;
   justify-content: center;
-  height: 3rem;
+  height: 2.5rem;
   flex: 1 0 auto;
   border-radius: 3rem;
   transition: 300ms ease-in-out;

src/components/Web3Status/index.js

@@ -84,6 +84,13 @@ class Web3Status extends Component {
         })}
         onClick={this.handleClick}
       >
+        <div className="web3-status__text">
+          {
+            hasPendingTransactions ?
+              getPendingText(pendingTransactions) :
+              getText(address)
+          }
+        </div>
         <div
           className="web3-status__identicon"
           ref={el => {
@@ -96,16 +103,9 @@ class Web3Status extends Component {
             }
 
             el.innerHTML = '';
-            el.appendChild(Jazzicon(18, parseInt(address.slice(2), 16)));
+            el.appendChild(Jazzicon(16, parseInt(address.slice(2), 16)));
           }}
         />
-        <div className="web3-status__text">
-          {
-            hasPendingTransactions ?
-              getPendingText(pendingTransactions) :
-              getText(address)
-          }
-        </div>
         {this.renderModal()}
       </div>
     );

src/components/Web3Status/web3-status.scss

@@ -2,9 +2,8 @@
 
 .web3-status {
   @extend %row-nowrap;
-  width: 10rem;
+  height: 2rem;
   font-size: .9rem;
-  line-height: 1rem;
   align-items: center;
   border: 1px solid $mercury-gray;
   padding: .5rem;
@@ -14,18 +13,18 @@
   box-sizing: border-box;
 
   &__identicon {
-    height: 1.125rem;
-    width: 1.125rem;
+    height: 1rem;
+    width: 1rem;
     border-radius: 1.125rem;
     background-color: $silver-gray;
   }
 
   &__text {
     flex: 1 1 auto;
-    width: 0;
     overflow: hidden;
-    margin-left: 1rem;
-    font-size: .85rem;
+    margin-right: .75rem;
+    margin-left: .25rem;
+    font-size: .75rem;
   }
 
   &__pending-container {
@@ -96,5 +95,3 @@
 .pending-modal-appear.modal-container-appear-active {
   bottom: 0;
 }
-
-

src/index.scss

@@ -23,7 +23,8 @@ html, body {
   z-index: 100;
   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
   @media only screen and (min-device-width : 768px) {
-    background-color: $concrete-gray;
+    justify-content: center;
+    align-items: center;
   }
 }
 

src/pages/App.scss

@@ -6,7 +6,7 @@
     position: relative;
 
     @media only screen and (min-device-width : 768px) {
-      box-shadow: 0 0 8px 1px $mercury-gray;
+      margin-top: 4rem;
     }
 
     & > div {
@@ -25,8 +25,6 @@
   @extend %col-nowrap;
 
   @media only screen and (min-device-width : 768px) {
-    max-width: 400px;
-    max-height: 600px;
-    margin: auto;
+    max-width: 560px;
   }
-}
\ No newline at end of file
+}

src/pages/Pool/pool.scss

@@ -91,9 +91,24 @@
   transition: 250ms ease-in-out;
   padding: 1rem 0 .5rem;
 
+  @media only screen and (min-device-width : 768px) {
+    max-width: 560px;
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 1rem;
+    padding-bottom: 1rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    margin-top: 4rem;
+  }
+
   &__item {
     padding: 1rem;
     font-size: 1rem;
+    cursor: pointer;
 
     &:hover {
       background-color: $concrete-gray;

src/pages/Swap/swap.scss

@@ -45,26 +45,46 @@
   }
 
   &__summary-wrapper {
-    margin: 2rem 1rem;
+    background-color: $concrete-gray;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+    padding: 1rem;
     color: #737373;
     font-size: .75rem;
     text-align: center;
+    cursor: pointer;
   }
 
   &__summary-modal {
     background-color: $white;
     position: relative;
     bottom: 12rem;
-    height: 12rem;
+    min-height: 12rem;
+    max-height: 12rem;
     z-index: 2000;
     padding: 1rem;
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
     transition: 250ms ease-in-out;
 
+    @media only screen and (min-device-width : 768px) {
+      max-width: 560px;
+      position: absolute;
+      margin-left: auto;
+      margin-right: auto;
+      border-radius: 1rem;
+      padding-bottom: 1rem;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      margin-top: 4rem;
+    }
+
     .swap__open-details-container {
       padding: 0.5rem 0;
       margin-bottom: 1rem;
+      cursor: pointer;
     }
   }
 
@@ -72,7 +92,6 @@
     @extend %row-nowrap;
     align-items: center;
     justify-content: space-between;
-    padding: .625rem 1rem;
     font-size: .75rem;
     color: $royal-blue;
 

src/variables.scss

@@ -15,7 +15,7 @@ $malibu-blue: #5CA2FF;
 $royal-blue: #2F80ED;
 
 // Purple
-$wisteria-purple: #AE60B9;
+$wisteria-purple: #DC6BE5;
 
 // Red
 $salmon-red: #FF6871;
@@ -70,6 +70,6 @@ $pizazz-orange: #FF8F05;
 
 
   &::placeholder {
-    color: $chalice-gray;
+    color: $mercury-gray;
   }
 }