Adds basic tab content to gas customizer, with styled button group (static, for now).

1 files changed, 60 insertions, 0 deletions

diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/gas-customization/gas-price-button-group/index.scss
new file mode 100644
index 000000000..e2670edd5
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-price-button-group/index.scss
@@ -0,0 +1,60 @@
+.gas-price-button-group {
+  margin-top: 22px;
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  padding-left: 20px;
+  padding-right: 20px;
+
+  &__primary-currency {
+    font-size: 18px;
+    height: 20.5px;
+    margin-bottom: 7.5px;
+  }
+
+  &__time-estimate {
+    margin-top: 5.5px;
+    color: $silver-chalice;
+    height: 15.4px;
+  }
+
+
+  .button-group__button, .button-group__button--active {
+    height: 130px;
+    max-width: 108px;
+    font-size: 12px;
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+    padding-top: 17px;
+    border-radius: 4px;
+    border: 2px solid $spindle;
+    background: $white;
+    color: $scorpion;
+
+    div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    i {
+      &:last-child {
+        display: none;
+      }
+    }
+  }
+
+  .button-group__button--active {
+    border: 2px solid $curious-blue;
+    color: $scorpion;
+
+    i {
+      &:last-child {
+        display: flex;
+        color: $curious-blue;
+        margin-top: 8px
+      }
+    }
+  }
+}