From a936f0ebe4cd08f02a96c2baffb844863dca9497 Mon Sep 17 00:00:00 2001
From: ifirmawan <firmawaneiwan@gmail.com>
Date: Mon, 4 Sep 2023 11:48:45 +0700
Subject: [PATCH] [#1584] Add systemInfo color & fix custom antd inputs

---
 frontend/src/styles/inputs.scss | 83 +++++++++++++++++++++++----------
 frontend/src/styles/vars.scss   |  1 +
 2 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/frontend/src/styles/inputs.scss b/frontend/src/styles/inputs.scss
index 26bca217c..724e33630 100644
--- a/frontend/src/styles/inputs.scss
+++ b/frontend/src/styles/inputs.scss
@@ -1,30 +1,63 @@
 #root,
 .ant-modal-root {
-  .ant-input,
-  .ant-input-number-input,
-  .ant-input-affix-wrapper {
-    background-color: $primaryGrey;
-    color: $primaryDarkBlue;
-    font-size: $fzXS;
-    line-height: $lhXS;
-    &::placeholder {
-      color: $primaryDarkBlue4;
+  .ant-form {
+    .ant-row {
+      .ant-input,
+      .ant-input-affix-wrapper {
+        height: 54px;
+      }
+      .ant-input,
+      .ant-select-selector,
+      .ant-input-affix-wrapper {
+        border-radius: 8px;
+        color: $primaryDarkBlue;
+        background-color: $primaryGrey;
+        &::placeholder {
+          color: $primaryDarkBlue4;
+        }
+        &:focus {
+          box-shadow: 0px 0px 0px 2px $systemInfo3;
+        }
+      }
+      .ant-input-affix-wrapper {
+        .ant-input {
+          height: auto;
+          background: transparent;
+          border-radius: 0;
+        }
+      }
+      .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
+      .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
+      .ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer)
+        .ant-select-selector {
+        border-width: 2px;
+        border-color: $systemError3 !important;
+      }
+      .ant-select-selector {
+        height: 52px;
+      }
+      .ant-select-single {
+        &.ant-select-show-arrow {
+          .ant-select-selection-item,
+          .ant-select-selection-placeholder {
+            padding-top: 4px;
+          }
+          .ant-select-selection-item {
+            color: $primaryDarkBlue;
+          }
+        }
+      }
+      .ant-switch:focus,
+      .ant-switch-checked:focus {
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: $primaryPurple;
+        outline-style: solid;
+        box-shadow: none;
+      }
+      .ant-switch-checked {
+        background-color: $primaryPurple;
+      }
     }
   }
-  .ant-select:not(.ant-select-customize-input),
-  .ant-select-selector,
-  .ant-input-affix-wrapper {
-    min-height: 42px;
-    border: none;
-  }
-  .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
-  .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
-    padding-top: 4px;
-  }
-  .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
-  .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover {
-    border-width: 2px;
-    border-color: $systemError3;
-    background-color: $primaryGrey;
-  }
 }
diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
index c95691d7b..a49587031 100644
--- a/frontend/src/styles/vars.scss
+++ b/frontend/src/styles/vars.scss
@@ -15,6 +15,7 @@ $primaryDarkBlue4: #677194;
 $primaryDarkBlue5: #344170;
 $primaryNeutral4: #777e90;
 $systemError3: #e00909;
+$systemInfo3: #1d90f5;
 // Headings
 $fzXXXL: 64px;
 $lhXXXL: 72px;