From 9db0a32dac81ad071f3c15651ce5fb830d2ddf4a Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Tue, 6 Feb 2018 21:07:00 -0800
Subject: Update modal header design on send screen (#3196)

---
 ui/app/css/itcss/generic/index.scss | 114 ++++++++++++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)

(limited to 'ui/app/css/itcss/generic/index.scss')

diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 9d55324e3..75f823320 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -69,3 +69,117 @@ textarea.large-input {
 input.large-input {
   height: 36px;
 }
+
+.page-container {
+  width: 400px;
+  background-color: $white;
+  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  z-index: 25;
+  display: flex;
+  flex-flow: column;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+    border-bottom: 1px solid $geyser;
+    padding: 1.6rem 1rem;
+    flex: 0 0 auto;
+  }
+
+  &__footer {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    border-top: 1px solid $geyser;
+    padding: 1.6rem;
+    flex: 0 0 auto;
+  }
+
+  &__footer-button {
+    width: 165px;
+    height: 60px;
+    font-size: 1rem;
+    text-transform: uppercase;
+    margin-right: 1rem;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &__title {
+    color: $tundora;
+    font-family: Roboto;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: initial;
+  }
+
+  &__subtitle {
+    padding-top: .5rem;
+    line-height: initial;
+    font-size: .9rem;
+  }
+
+  &__tabs {
+    padding: 0 1.3rem;
+    display: flex;
+  }
+
+  &__tab {
+    min-width: 5rem;
+    padding: .2rem .8rem .9rem;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 1.1rem;
+    line-height: initial;
+    text-align: center;
+    cursor: pointer;
+    border-bottom: none;
+    margin-right: 1rem;
+
+    &:hover {
+      color: $black;
+    }
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &--selected {
+      color: $curious-blue;
+      border-bottom: 3px solid $curious-blue;
+
+      &:hover {
+        color: $curious-blue;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 250px) {
+  .page-container {
+    &__footer {
+      flex-flow: column-reverse;
+    }
+
+    &__footer-button {
+      width: 100%;
+      margin-bottom: 1rem;
+      margin-right: 0;
+
+      &:first-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 575px) {
+  .page-container {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    background-color: $white;
+  }
+}
-- 
cgit 


From e4c83466befc439f26cdd9c32d130b367bc552a7 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 13 Feb 2018 03:09:15 -0330
Subject: Send screen style updates. (#3234)

---
 ui/app/css/itcss/generic/index.scss | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

(limited to 'ui/app/css/itcss/generic/index.scss')

diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 75f823320..9b3d7475b 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -82,8 +82,20 @@ input.large-input {
     display: flex;
     flex-flow: column;
     border-bottom: 1px solid $geyser;
-    padding: 1.6rem 1rem;
+    padding: 1.15rem 0.95rem;
     flex: 0 0 auto;
+    background: $alabaster;
+    position: relative;
+  }
+
+  &__header-close::after {
+    content: '\00D7';
+    font-size: 40px;
+    color: $tundora;
+    position: absolute;
+    top: 21.5px;
+    right: 28.5px;
+    cursor: pointer;
   }
 
   &__footer {
@@ -93,6 +105,11 @@ input.large-input {
     border-top: 1px solid $geyser;
     padding: 1.6rem;
     flex: 0 0 auto;
+
+    .btn-clear,
+    .btn-cancel {
+      font-size: 1rem;
+    }
   }
 
   &__footer-button {
@@ -101,6 +118,7 @@ input.large-input {
     font-size: 1rem;
     text-transform: uppercase;
     margin-right: 1rem;
+    border-radius: 2px;
 
     &:last-of-type {
       margin-right: 0;
@@ -108,7 +126,7 @@ input.large-input {
   }
 
   &__title {
-    color: $tundora;
+    color: $black;
     font-family: Roboto;
     font-size: 2rem;
     font-weight: 500;
@@ -119,6 +137,7 @@ input.large-input {
     padding-top: .5rem;
     line-height: initial;
     font-size: .9rem;
+    color: $gray;
   }
 
   &__tabs {
-- 
cgit