Tweak password input styling

Author: rawilk

resources/sass/utils/_addon.scss

@@ -100,6 +100,10 @@
     @apply border-l-0;
 }
 
+.input-error + .password-toggle {
+    @apply border-red-300;
+}
+
 .has-leading-addon {
     @apply rounded-none;
     @apply rounded-r-md;

resources/sass/utils/_form-group.scss

@@ -41,7 +41,10 @@
 
     &:focus {
         @apply border-red-300;
-        @apply shadow-outline-red;
+
+        &:not(.password-toggleable) {
+            @apply shadow-outline-red;
+        }
     }
 
     &::placeholder {

resources/sass/utils/_input.scss

@@ -24,8 +24,10 @@
 
     &:focus {
         @apply shadow-none;
-        @apply border;
-        border-color: #d2d6dc;
         @apply border-r-0;
+
+        &:not(.input-error) + .password-toggle {
+            @apply border-blue-300;
+        }
     }
 }

src/Components/Inputs/Password.php

@@ -60,10 +60,14 @@ public function inputClass(): string
 
     public function containerClass(): string
     {
+        $shadowColor = $this->hasErrorsAndShow($this->name)
+            ? 'red'
+            : 'blue';
+
         return collect([
             'form-text-container',
             $this->maxWidth,
-            $this->showToggle ? 'focus-within:shadow-outline-blue rounded-md' : null,
+            $this->showToggle ? "focus-within:shadow-outline-{$shadowColor} rounded-md" : null,
         ])->filter()->implode(' ');
     }
 }