Frontend refactor: checkpoint

1 files changed, 66 insertions, 0 deletions

diff --git a/frontend/src/components/fields/StringField.scss b/frontend/src/components/fields/StringField.scss
new file mode 100644
index 0000000..7efac56
--- /dev/null
+++ b/frontend/src/components/fields/StringField.scss
@@ -0,0 +1,66 @@
+@import '../../colors.scss';
+
+.field {
+  margin: 0 10px;
+  position: relative;
+
+  .field-name-wrapper {
+    background-color: $color-primary-2;
+    padding: 3px 7px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  .field-name {
+    font-size: 13px;
+  }
+
+  .field-value {
+    font-size: 13px;
+    padding-left: 0;
+    border-radius: 5px;
+
+    &:focus {
+      background-color: $color-primary-2;
+    }
+  }
+
+  &.field-active {
+    .field-name-wrapper {
+      background-color: $color-primary-4;
+      color: $color-primary-3;
+    }
+
+    .field-value {
+      background-color: $color-primary-4;
+      color: $color-primary-3;
+    }
+  }
+
+  &.field-invalid {
+    .field-name-wrapper {
+      background-color: $color-secondary-2;
+      color: $color-primary-4;
+    }
+
+    .field-value {
+      background-color: $color-secondary-2;
+      color: $color-primary-4;
+    }
+  }
+
+  .field-delete {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10;
+    font-size: 11px;
+    letter-spacing: -0.5px;
+    color: $color-primary-2;
+    cursor: pointer;
+
+    .field-delete-icon {
+      font-weight: 800;
+    }
+  }
+}