Refactor settings page to use JSX and follow component file folder structure

1 files changed, 51 insertions, 0 deletions

diff --git a/ui/app/components/pages/settings/settings-tab/index.scss b/ui/app/components/pages/settings/settings-tab/index.scss
new file mode 100644
index 000000000..76a0cec6f
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/index.scss
@@ -0,0 +1,51 @@
+.settings-tab {
+  &__error {
+    padding-bottom: 20px;
+    text-align: center;
+    color: $crimson;
+  }
+
+  &__rpc-save-button {
+    align-self: flex-end;
+    padding: 5px;
+    text-transform: uppercase;
+    color: $dusty-gray;
+    cursor: pointer;
+  }
+
+  &__rpc-save-button {
+    align-self: flex-end;
+    padding: 5px;
+    text-transform: uppercase;
+    color: $dusty-gray;
+    cursor: pointer;
+  }
+
+  &__button--red {
+    border-color: lighten($monzo, 10%);
+    color: $monzo;
+
+    &:active {
+      background: lighten($monzo, 55%);
+      border-color: $monzo;
+    }
+
+    &:hover {
+      border-color: $monzo;
+    }
+  }
+
+  &__button--orange {
+    border-color: lighten($ecstasy, 20%);
+    color: $ecstasy;
+
+    &:active {
+      background: lighten($ecstasy, 40%);
+      border-color: $ecstasy;
+    }
+
+    &:hover {
+      border-color: $ecstasy;
+    }
+  }
+}