Update Confirm Contract screen (#3597)

5 files changed, 92 insertions, 28 deletions

diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 1450b71cc..8df8829f2 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -45,6 +45,18 @@
   }
 }
 
+.btn-confirm {
+  background-color: $caribbean-green; // TODO: reusable color in colors.css
+  text-align: center;
+  padding: .8rem 1rem;
+  color: $white;
+  border: 2px solid $caribbean-green;
+  border-radius: 4px;
+  font-size: .85rem;
+  font-weight: 400;
+  transition: border-color .3s ease;
+}
+
 // No longer used in flat design, remove when modal buttons done
 // div.wallet-btn {
 //   border: 1px solid rgb(91, 93, 103);
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 878495290..1977b49ae 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -202,7 +202,7 @@
 }
 
 .confirm-screen-label {
-  font-size: 18px;
+  font-size: 16px;
   line-height: 40px;
   color: $scorpion;
   text-align: left;
@@ -229,7 +229,6 @@ section .confirm-screen-account-number,
 .confirm-screen-row {
   display: flex;
   flex-flow: row nowrap;
-  border-bottom: 1px solid $alto;
   width: 100%;
   align-items: center;
   padding: 12px;
@@ -237,6 +236,10 @@ section .confirm-screen-account-number,
   font-size: 16px;
   line-height: 22px;
   font-weight: 300;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid $alto;
+  }
 }
 
 .confirm-screen-row-detail {
@@ -247,12 +250,9 @@ section .confirm-screen-account-number,
 
 .confirm-screen-total-box {
   background-color: $wild-sand;
-  padding: 20px;
-  padding-left: 35px;
-  border-bottom: 1px solid $alto;
 
   .confirm-screen-label {
-    line-height: 18px;
+    line-height: 21px;
   }
 
   .confirm-screen-row-detail {
@@ -261,7 +261,7 @@ section .confirm-screen-account-number,
 
   &__subtitle {
     font-size: 12px;
-    line-height: 22px;
+    line-height: 16px;
   }
 
   .confirm-screen-row-info {
@@ -304,21 +304,3 @@ section .confirm-screen-account-number,
   font-weight: 300;
   margin: 0 5px;
 }
-
-#pending-tx-form {
-  flex: 1 0 auto;
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  background-color: $white;
-  padding: 12px;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  width: 100%;
-
-  @media screen and (max-width: $break-small) {
-    border-top: 1px solid $alto;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index f107b7aca..ffd43ecbf 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -58,3 +58,4 @@
 
 @import './welcome-screen.scss';
 
+@import './sender-to-recipient.scss';
diff --git a/ui/app/css/itcss/components/sender-to-recipient.scss b/ui/app/css/itcss/components/sender-to-recipient.scss
new file mode 100644
index 000000000..f16013cdf
--- /dev/null
+++ b/ui/app/css/itcss/components/sender-to-recipient.scss
@@ -0,0 +1,58 @@
+.sender-to-recipient {
+  &__container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    border-bottom: 1px solid $geyser;
+    position: relative;
+  }
+
+  &__sender,
+  &__recipient {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    padding: 10px 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__sender {
+    padding-right: 30px;
+  }
+
+  &__recipient {
+    border-left: 1px solid $geyser;
+    padding-left: 30px;
+  }
+
+  &__arrow-container {
+    position: absolute;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__arrow-circle {
+    background: $white;
+    padding: 5px;
+    border: 1px solid $geyser;
+    border-radius: 20px;
+    height: 30px;
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__name {
+    padding-left: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 0077cb661..1fbd9896f 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -82,7 +82,6 @@ input.large-input {
   display: flex;
   flex-flow: column;
   border-radius: 7px;
-  height: 100%;
 
   &__header {
     display: flex;
@@ -116,7 +115,8 @@ input.large-input {
     flex: 0 0 auto;
 
     .btn-clear,
-    .btn-cancel {
+    .btn-cancel,
+    .btn-confirm {
       font-size: 1rem;
     }
   }
@@ -134,9 +134,16 @@ input.large-input {
     }
   }
 
+  &__back-button {
+    color: #2f9ae0;
+    font-size: 1rem;
+    cursor: pointer;
+    padding-bottom: 10px;
+    font-weight: 400;
+  }
+
   &__title {
     color: $black;
-    font-family: Roboto;
     font-size: 2rem;
     font-weight: 500;
     line-height: 2rem;
@@ -188,6 +195,10 @@ input.large-input {
     width: initial;
   }
 
+  &--full-height {
+    height: 100%;
+  }
+
   &__content {
     height: 100%;
     overflow-y: auto;