Don't display input error in red on typing

2 files changed, 6 insertions, 12 deletions

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 28a6f4807..49585a124 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -301,16 +301,6 @@
   color: pvar(--mainForegroundColor);
   background-color: pvar(--inputBackgroundColor);
   outline: none;
-
-  // Input box-shadow on focus
-  &:focus-within,
-  &:focus {
-    box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
-
-    &.input-error {
-      box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
-    }
-  }
 }
 
 .input-group {
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index 4a04cabba..87ad6a45d 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -69,6 +69,10 @@
   margin-bottom: 1rem;
 }
 
+.input-error:not(:focus) {
+  border-color: $red !important;
+}
+
 .form-error,
 .form-warning {
   display: block;
@@ -79,8 +83,8 @@
   color: $red;
 }
 
-.input-error {
-  border-color: $red !important;
+.input-error:focus + .form-error {
+  color: pvar(--mainForegroundColor);
 }
 
 .form-group-description {