From d09f0b3f0ae89c8ed4aa85158f55e62be10a4a77 Mon Sep 17 00:00:00 2001
From: Mats van Reenen <mail@matsvanreenen.nl>
Date: Thu, 31 Dec 2020 22:30:16 +0100
Subject: [PATCH] change thema

---
 app/assets/images/development-expand.svg |  11 -
 app/assets/images/pending-expand.svg     |  11 -
 app/assets/images/production-expand.svg  |  11 -
 app/assets/images/rejected-expand.svg    |  11 -
 app/assets/images/testing-expand.svg     |  11 -
 index.html                               |  16 +-
 src/stylesheets/app.scss                 | 369 +++++++++--------------
 7 files changed, 161 insertions(+), 279 deletions(-)
 delete mode 100644 app/assets/images/development-expand.svg
 delete mode 100644 app/assets/images/pending-expand.svg
 delete mode 100644 app/assets/images/production-expand.svg
 delete mode 100644 app/assets/images/rejected-expand.svg
 delete mode 100644 app/assets/images/testing-expand.svg

diff --git a/app/assets/images/development-expand.svg b/app/assets/images/development-expand.svg
deleted file mode 100644
index 692d0df..0000000
--- a/app/assets/images/development-expand.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#a8e063">
-  <path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
-  <path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
-  <path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
-  <path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
-  <path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
-  <path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
-</svg>
\ No newline at end of file
diff --git a/app/assets/images/pending-expand.svg b/app/assets/images/pending-expand.svg
deleted file mode 100644
index 23807df..0000000
--- a/app/assets/images/pending-expand.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#ffcc33">
-  <path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
-  <path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
-  <path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
-  <path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
-  <path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
-  <path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
-</svg>
\ No newline at end of file
diff --git a/app/assets/images/production-expand.svg b/app/assets/images/production-expand.svg
deleted file mode 100644
index 6789912..0000000
--- a/app/assets/images/production-expand.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#3CD3AD">
-  <path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
-  <path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
-  <path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
-  <path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
-  <path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
-  <path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
-</svg>
\ No newline at end of file
diff --git a/app/assets/images/rejected-expand.svg b/app/assets/images/rejected-expand.svg
deleted file mode 100644
index ac33e5d..0000000
--- a/app/assets/images/rejected-expand.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#ef473a">
-  <path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
-  <path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
-  <path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
-  <path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
-  <path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
-  <path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
-</svg>
\ No newline at end of file
diff --git a/app/assets/images/testing-expand.svg b/app/assets/images/testing-expand.svg
deleted file mode 100644
index e9cf6da..0000000
--- a/app/assets/images/testing-expand.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#3a7bd5">
-  <path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
-  <path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
-  <path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
-  <path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
-  <path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
-  <path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
-   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
-</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 9f0e39d..9b1ef34 100644
--- a/index.html
+++ b/index.html
@@ -103,13 +103,27 @@
     <script id="task-card-template" type="text/x-handlebars-template">
       {{#each this}}
         <div class="card" data-task-id="{{id}}">
-          <a href="#" class="expand-card"></a>
+          <a href="#" class="expand-card">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" >
+              <path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
+              <path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
+              <path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
+              c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
+              <path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
+              <path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
+              <path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
+              c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
+            </svg>
+          </a>
           <h5>{{title}}</h5>
           <div class="card-details">
+            <h6>Description</h6>
             <p data-field="description">{{description}}</p>
+            <h6>URL</h6>
             <p data-field="remote_url">
               {{#checkIfEmptyRemoteURL remote_url}}{{/checkIfEmptyRemoteURL}}
             </p>
+            <h6>Assigned to</h6>
             <p data-field="assigned_to">
               {{#checkIfEmptyAssigned assigned_to}}{{/checkIfEmptyAssigned}}
             </p>
diff --git a/src/stylesheets/app.scss b/src/stylesheets/app.scss
index 3651ae9..018bf20 100644
--- a/src/stylesheets/app.scss
+++ b/src/stylesheets/app.scss
@@ -9,7 +9,7 @@
  */
 
 
-@import 'https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400';
+@import 'https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap';
 
 //Colors
 
@@ -17,9 +17,6 @@ $base-color: rgba(0,0,0,.4);
 $primary-color: #fff;
 $secondary-color: rgba(255,255,255,.1);
 
-$grad-start: #000428;
-$grad-end: #004e92;
-
 * {
   margin: 0;
   padding: 0;
@@ -32,11 +29,16 @@ html, body, .wrapper {
 }
 
 body {
-  font-weight: 300;
-  font-family: Hind Vadodara;
-  background-image: linear-gradient(to left, $grad-start, $grad-end);
+  font-family: 'Roboto', sans-serif;
+  background: #000;
   color: $primary-color;
   font-size: 14px;
+  color: #CCC;
+  overflow: hidden;
+}
+
+h1, h2, h3, h4, h5, h6{
+  font-family: 'Ubuntu', sans-serif;
 }
 
 ul {
@@ -61,8 +63,6 @@ a {
 }
 
 header {
-  background-color: $base-color;
-  
   li {
     padding: 15px;
     float: left;
@@ -70,6 +70,7 @@ header {
     text-align: center;
     position: relative;
     text-transform: uppercase;
+    border-right: 1px solid #333;
     
     &:after {
       content: "";
@@ -79,34 +80,40 @@ header {
       width: 100%;
       height: 1px;
     }
-    
+
     &:nth-child(1) {
-      &:after {
-        background: linear-gradient(to left, #cb2d3e , #ef473a);
+      border-bottom: 1px solid #ef473a;
+      & .card{
+        border-left: 1px solid #ef473a;
       }
     }
     
     &:nth-child(2) {
-      &:after {
-        background: linear-gradient(to left, #ffb347 , #ffcc33);
+      border-bottom: 1px solid #ffcc33;
+      & .card{
+        border-left: 1px solid #ffcc33;
       }
     }
     
     &:nth-child(3) {
-      &:after {
-        background: linear-gradient(to left, #56ab2f , #a8e063);
+      border-bottom: 1px solid #a8e063;
+      & .card{
+        border-left: 1px solid #a8e063;
       }
     }
     
     &:nth-child(4) {
-      &:after {
-        background: linear-gradient(to left, #00d2ff , #3a7bd5);
+      border-bottom: 1px solid #3a7bd5;
+      & .card{
+        border-left: 1px solid #3a7bd5;
       }
     }
     
     &:nth-child(5) {
-      &:after {
-        background: linear-gradient(to left, #4CB8C4 , #3CD3AD);
+      border: none;
+      border-bottom: 1px solid #3CD3AD;
+      & .card{
+        border-left: 1px solid #3CD3AD;
       }
     }
   }
@@ -124,154 +131,107 @@ header {
   > div {
     float: left;
     height: 100%;
-    border-right: 1px solid $base-color;
+    border-right: 2px solid #333;
     width: 20%;
-    overflow: scroll;
+    overflow-x: hidden;
+    overflow-y: auto;
+    transition: .1s ease-in-out background-color;
   }
 }
 
 
 //Cards
 .card {
-  background-color: $base-color;
+  background-color: rgba(255, 255, 255, .125);
   min-height: 50px;
   margin: 10px;
   position: relative;
   overflow: hidden;
-  height: 40px;
-  box-shadow: 3px 3px 3px rgba(0,0,0,.1);
+  height: 50px;
   z-index: 2;
-  
-  &:before {
-    content: "";
-    position: absolute;
-    height: 100%;
-    width: 1px;
-  }
-  
-  p:before,
-  h5:after {
-    .rejected & {
-      color: #ef473a;
-    }
-    
-    .pending & {
-      color: #ffcc33;
-    }
-    
-    .development & {
-      color: #a8e063;
-    }
-    
-    .testing & {
-      color: #3a7bd5;
-    }
-    
-    .production & {
-      color: #3CD3AD;
-    }
-  }
-  
+
   h5 {
-    font-size: 13px;
-    line-height: 50px;
-    padding-left: 10px;
-    font-weight: 300;
+    font-size: 14px;
+    padding: 16px 0 16px 10px;
     cursor: move;
+    color: #CCC;
   }
-  
+
   &.edit-mode {
     h5 {
-      position: relative;
-      
       &:after {
-        top: 50%;
-        margin-left: 5px;
-        margin-top: 1px;
-        transform: translateY(-50%);
-        position: absolute;
-        font-size: 9px;
-        content: "(Edit Mode Enabled)";
+        content: "*";
       }
     }
   }
-  
-  .rejected & {
-    &:before {
-      background: linear-gradient(to left, #cb2d3e , #ef473a);
-    }
-  }
-  
-  .pending & {
-    &:before {
-      background: linear-gradient(to left, #ffb347 , #ffcc33);
-    }
-  }
-  
-  .development & {
-    &:before {
-      background: linear-gradient(to left, #56ab2f , #a8e063);
-    }
-  }
-  
-  .testing & {
-    &:before {
-      background: linear-gradient(to left, #00d2ff , #3a7bd5);
-    }
-  }
-  
-  .production & {
-    &:before {
-      background: linear-gradient(to left, #4CB8C4 , #3CD3AD);
-    }
-  }
-  
+
   &.expanded {
     overflow: auto !important;
     height: auto !important;
   }
+
+  .expand-card {
+    height: 25px;
+    width: 25px;
+    position: absolute;
+    top: 25px;
+    cursor: pointer;
+    transform: translateY(-50%);
+    right: 15px;
+  }
+
+  h5:after {
+    .rejected &    { color: #ef473a; }
+    .pending &     { color: #ffcc33; }
+    .development & { color: #a8e063; }
+    .testing &     { color: #3a7bd5; }
+    .production &  { color: #3CD3AD; }
+  }
+  svg {
+    .rejected &    { fill: #ef473a; }
+    .pending &     { fill: #ffcc33; }
+    .development & { fill: #a8e063; }
+    .testing &     { fill: #3a7bd5; }
+    .production &  { fill: #3CD3AD; }
+  }
+
+  .rejected & {
+    color: #ef473a;
+    border-left: 2px solid #ef473a;
+  }
+  .pending & {
+    color: #ffcc33;
+    border-left: 2px solid #ffcc33;
+  }
+  .development & {
+    color: #a8e063;
+    border-left: 2px solid #a8e063;
+  }
+  .testing & {
+    color: #3a7bd5;
+    border-left: 2px solid #3a7bd5;
+  }
+  .production & {
+    color: #3CD3AD;
+    border-left: 2px solid #3CD3AD;
+  }
 }
 
 .card-details {
-  padding: 10px;
-  font-size: 12px;
-  word-wrap: break-word;
-  padding-top: 0;
-  
   p {
-    margin-bottom: 10px;
-    position: relative;
-    
-    &:before {
-      position: absolute;
-      left: 0;
-    }
-    
-    &:nth-child(1) {
-      padding-left: 67px;
-      
-      &:before {
-        content: "Description : ";
-      }
-    }
-    
-    &:nth-child(2) {
-      padding-left: 72px;
-      
-      &:before {
-        content: "Remote URL : ";
-      }
-    }
-    
-    &:nth-child(3) {
-      padding-left: 70px;
-      
-      &:before {
-        content: "Assigned To : ";
-      }
-    }
+    color: #CCC;
+    padding: 10px;
+    font-size: 12px;
+    word-wrap: break-word;
+    padding-top: 0;
   }
-  
+
+  h6{
+    padding: 5px;
+    padding-left: 10px;
+    font-size: 13px;
+  }
+
   a {
     border-bottom: 1px dotted #fff;
     
@@ -282,23 +242,16 @@ header {
 }
 
 .dragged-over {
-  background-color: rgba(0,0,0,.1);
+  background-color: rgba(128,128,128,.125);
 }
 
-@keyframes rotate180 {
-  to {
-    transform: rotate(180deg);
-  }
-}
-
-
 .modal {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background-image: linear-gradient(to left, $grad-start, $grad-end);
+  background: #000;
   z-index: 2;
 }
 
@@ -310,9 +263,9 @@ header {
   margin: auto;
   width: 100%;
   transform: translateX(-50%) translateY(-50%);
-  
+
   .close-modal {
-    border: 1px solid rgba(255,255,255,.1);
+    border: 1px solid rgba(255,255,255,.4);
     border-radius: 50%;
     width: 50px;
     height: 50px;
@@ -330,7 +283,7 @@ header {
       border-color: #fff;
     }
   }
-  
+
   h3 {
     font-weight: 100;
     font-size: 30px;
@@ -340,11 +293,11 @@ header {
 
 .add-task-form, .change-status-form {
   text-align: center;
-  
+
   li {
     margin-top: 30px;
   }
-  
+
   [type=text],
   [type=submit],
   textarea {
@@ -356,89 +309,52 @@ header {
     line-height: 24px;
     padding: 15px 10px;
     appearance: none;
-    border: 1px solid rgba(255,255,255,.07);
+    border: 1px solid rgba(255,255,255,.25);
     background-color: transparent;
     transition: border-color .25s linear;
     
     &::-webkit-input-placeholder {
       color: rgba(255,255,255,.3);
     }
-    
+
     &:focus {
       border-color: #fff;
     }
   }
-  
+
   [type=submit] {
     cursor: pointer;
     border-color: transparent;
   }
-  
+
   textarea {
     resize: none;
     min-height: 100px;
   }
 }
 
-.expand-card {
-  height: 19px;
-  width: 19px;
-  background-size: auto 100%;
-  display: inline-block;
-  position: absolute;
-  top: 25px;
-  cursor: pointer;
-  transform: translateY(-50%);
-  right: 15px;
-  padding: 3px;
-  
-  .rejected & {
-    background-image: url('../images/rejected-expand.svg');
-  }
-  
-  .pending & {
-    background-image: url('../images/pending-expand.svg');
-  }
-  
-  .development & {
-    background-image: url('../images/development-expand.svg');
-  }
-  
-  .testing & {
-    background-image: url('../images/testing-expand.svg');
-  }
-  
-  .production & {
-    background-image: url('../images/production-expand.svg');
-  }
-  
-  svg {
-    fill: #fff;
-  }
-}
-
 .removed-task-notification {
   position: absolute;
-  top: 10%;
+  top: 90%;
   left: 50%;
   transform: translateX(-50%);
   padding: 5px 20px;
-  color: #515151;
+  color: #FFF;
   border-radius: 3px;
-  background-color: rgba(255,255,255,.8);
-  box-sizing: 0 0 3px rgba(0,0,0,.6);
+  background-color: rgba(50,50,50,.8);
 }
 
 footer {
   height: 50px;
   position: relative;
-  border-top: 1px solid $base-color;
+  border-top: 1px solid #333;
+  background-color: #151515;
 }
 
 .remove {
   display: block;
   background-color: #ef473a;
-  border-radius: 50%;
+  border-radius: 15px;
   height: 30px;
   width: 30px;
   text-align: center;
@@ -468,11 +384,17 @@ footer {
   
   &:hover {
     img {
-      animation: rotate180 .2s linear;
+      animation: rotate90 .14s linear;
     }
   }
 }
 
+@keyframes rotate90 {
+  to {
+    transform: rotate(90deg);
+  }
+}
+
 [data-tooltip] {
   position: relative;
   
@@ -511,17 +433,18 @@ footer {
 .create-task-branding {
   text-transform: uppercase;
   font-size: 18px;
-  padding: 10px;
-  
+  padding: 14px;
+  color: #fff;
+
   sup {
     position: absolute;
     font-size: 9px;
     margin-top: -6px;
     margin-left: -3px;
   }
-  
+
   span {
-    color: rgba(255,255,255,.6);
+    color: rgb(153,153,153);
   }
 }
 
@@ -542,26 +465,26 @@ footer {
   }
 }
 
-.onboard {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, .7);
-  z-index: 2;
-}
+// .onboard {
+//   position: fixed;
+//   top: 0;
+//   left: 0;
+//   right: 0;
+//   bottom: 0;
+//   background-color: rgba(0, 0, 0, .7);
+//   z-index: 2;
+// }
 
-.onboard-modal {
-  height: 300px;
-  width: 450px;
-  background-color: #fff;
-  border-radius: 3px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+// .onboard-modal {
+//   height: 300px;
+//   width: 450px;
+//   background-color: #fff;
+//   border-radius: 3px;
+//   position: absolute;
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+// }
 
 .tips {
   position: absolute;