Refactor and redesign confirm transaction views

1 files changed, 186 insertions, 0 deletions

diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
new file mode 100644
index 000000000..06c3ef709
--- /dev/null
+++ b/ui/app/components/page-container/index.scss
@@ -0,0 +1,186 @@
+.page-container {
+  width: 408px;
+  background-color: $white;
+  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  z-index: 25;
+  display: flex;
+  flex-flow: column;
+  border-radius: 8px;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+    border-bottom: 1px solid $geyser;
+    padding: 16px;
+    flex: 0 0 auto;
+    position: relative;
+
+    &--no-padding-bottom {
+      padding-bottom: 0;
+    }
+  }
+
+  &__header-close {
+    color: $tundora;
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    overflow: hidden;
+
+    &::after {
+      content: '\00D7';
+      font-size: 40px;
+      line-height: 20px;
+    }
+  }
+
+  &__header-row {
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__footer {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    border-top: 1px solid $geyser;
+    padding: 16px;
+    flex: 0 0 auto;
+
+    .btn-default,
+    .btn-confirm {
+      font-size: 1rem;
+    }
+  }
+
+  &__footer-button {
+    height: 55px;
+    font-size: 1rem;
+    text-transform: uppercase;
+    margin-right: 16px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &__back-button {
+    color: #2f9ae0;
+    font-size: 1rem;
+    cursor: pointer;
+    font-weight: 400;
+  }
+
+  &__title {
+    color: $black;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 2rem;
+  }
+
+  &__subtitle {
+    padding-top: .5rem;
+    line-height: initial;
+    font-size: .9rem;
+    color: $gray;
+  }
+
+  &__tabs {
+    display: flex;
+    margin-top: 16px;
+  }
+
+  &__tab {
+    min-width: 5rem;
+    padding: 8px;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 1rem;
+    text-align: center;
+    cursor: pointer;
+    border-bottom: none;
+    margin-right: 16px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &--selected {
+      color: $curious-blue;
+      border-bottom: 3px solid $curious-blue;
+    }
+  }
+
+  &--full-width {
+    width: 100% !important;
+  }
+
+  &--full-height {
+    height: 100% !important;
+    max-height: initial !important;
+    min-height: initial !important;
+  }
+
+  &__content {
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  &__warning-container {
+    background: $linen;
+    padding: 20px;
+    display: flex;
+    align-items: start;
+  }
+
+  &__warning-message {
+    padding-left: 15px;
+  }
+
+  &__warning-title {
+    font-weight: 500;
+  }
+
+  &__warning-icon {
+    padding-top: 5px;
+  }
+}
+
+@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;
+    border-radius: 0;
+    flex: 1;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .page-container {
+    max-height: 82vh;
+    min-height: 570px;
+    flex: 0 0 auto;
+  }
+}