fix(style): input groups with validation in SendForm

joinmarket-webui · Nov 26, 2023 · a0bc8c8 · a0bc8c8
1 parent efdd731
commit a0bc8c8
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 26 deletions.
diff --git a/src/components/Send/AmountInputField.module.css b/src/components/Send/AmountInputField.module.css
@@ -11,15 +11,7 @@
 
 .button {
   --bs-btn-border-color: var(--bs-border-color) !important;
+  --bs-btn-hover-border-color: var(--bs-btn-border-color) !important;
   border-left: none !important;
   font-size: 0.875rem !important;
 }
-
-/* hack to show feedback element with input-groups */
-:global div.is-invalid .invalid-feedback {
-  display: block;
-}
-
-:global .form-control.is-invalid + button {
-  --bs-btn-border-color: red !important;
-}
diff --git a/src/components/Send/AmountInputField.tsx b/src/components/Send/AmountInputField.tsx
@@ -56,7 +56,7 @@ export const AmountInputField = ({
         ) : (
           <>
             {field.value?.isSweep === true ? (
-              <rb.InputGroup>
+              <rb.InputGroup hasValidation={false}>
                 <rb.Form.Control
                   aria-label={label}
                   name={field.name}
@@ -83,7 +83,7 @@ export const AmountInputField = ({
               </rb.InputGroup>
             ) : (
               <div className={form.touched[field.name] && !!form.errors[field.name] ? 'is-invalid' : ''}>
-                <rb.InputGroup>
+                <rb.InputGroup hasValidation={true}>
                   <rb.Form.Control
                     aria-label={label}
                     name={field.name}
@@ -131,12 +131,12 @@ export const AmountInputField = ({
                       {t('send.button_sweep')}
                     </div>
                   </rb.Button>
+                  <rb.Form.Control.Feedback type="invalid">{form.errors[field.name]}</rb.Form.Control.Feedback>
                 </rb.InputGroup>
               </div>
             )}
           </>
         )}
-        <rb.Form.Control.Feedback type="invalid">{form.errors[field.name]}</rb.Form.Control.Feedback>
       </rb.Form.Group>
     </>
   )

diff --git a/src/components/Send/DestinationInputField.module.css b/src/components/Send/DestinationInputField.module.css
@@ -11,14 +11,6 @@
 
 .button {
   --bs-btn-border-color: var(--bs-border-color) !important;
+  --bs-btn-hover-border-color: var(--bs-btn-border-color) !important;
   border-left: none !important;
 }
-
-/* hack to show feedback element with input-groups */
-:global div.is-invalid .invalid-feedback {
-  display: block;
-}
-
-:global .form-control.is-invalid + button {
-  --bs-btn-border-color: red !important;
-}
diff --git a/src/components/Send/DestinationInputField.tsx b/src/components/Send/DestinationInputField.tsx
@@ -92,7 +92,7 @@ export const DestinationInputField = ({
         ) : (
           <>
             {field.value.fromJar !== null ? (
-              <rb.InputGroup>
+              <rb.InputGroup hasValidation={false}>
                 <rb.Form.Control
                   className={classNames('slashed-zeroes', styles.input, className)}
                   value={`${jarName(field.value.fromJar)} (${field.value.value})`}
@@ -116,7 +116,7 @@ export const DestinationInputField = ({
               </rb.InputGroup>
             ) : (
               <div className={form.touched[field.name] && !!form.errors[field.name] ? 'is-invalid' : ''}>
-                <rb.InputGroup>
+                <rb.InputGroup hasValidation={true}>
                   <rb.Form.Control
                     aria-label={label}
                     name={field.name}
@@ -154,11 +154,10 @@ export const DestinationInputField = ({
                       />
                     </div>
                   </rb.Button>
+                  <rb.Form.Control.Feedback type="invalid">{form.errors[field.name]}</rb.Form.Control.Feedback>
                 </rb.InputGroup>
               </div>
             )}
-
-            <rb.Form.Control.Feedback type="invalid">{form.errors[field.name]}</rb.Form.Control.Feedback>
           </>
         )}
       </rb.Form.Group>

diff --git a/src/index.css b/src/index.css
@@ -523,6 +523,10 @@ h2 {
   color: currentColor;
 }
 
+.form-control.is-invalid + .btn {
+  --bs-btn-border-color: var(--bs-form-invalid-border-color) !important;
+}
+
 .alert-info {
   color: var(--bs-white);
   background-color: var(--bs-gray-800);
@@ -709,13 +713,14 @@ h2 {
 }
 
 :root[data-theme='dark'] .form-control {
+  background-color: var(--bs-light);
   color: var(--bs-body-bg);
-  background-color: var(--bs-white);
 }
 
 :root[data-theme='dark'] .form-control:disabled,
 :root[data-theme='dark'] .form-select:disabled,
 .form-control[readonly] {
+  --bs-border-color: var(--bs-gray-500);
   background-color: var(--bs-gray-500);
 }