fix: adjust styles for custom amount

impress-org · Oct 22, 2024 · 3fdb460 · 3fdb460
1 parent dee8ef3
commit 3fdb460
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/index.js b/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/index.js
@@ -105,7 +105,6 @@ const AmountControl = ({currency, onChange, value, options, min, max}) => {
                         value={selectValue}
                         onChange={setSelectValue}
                     />
-                <div>
                     {selectValue === CUSTOM_AMOUNT && (
                         <div className="give-donor-dashboard-currency-control">
                             <label
@@ -133,7 +132,6 @@ const AmountControl = ({currency, onChange, value, options, min, max}) => {
                             </div>
                         </div>
                     )}
-                </div>
             </FieldRow>
             {validationError && (
                 <FieldRow>

diff --git a/...onorDashboards/resources/js/app/components/subscription-manager/amount-control/style.scss b/...onorDashboards/resources/js/app/components/subscription-manager/amount-control/style.scss
@@ -10,24 +10,26 @@ $errorColor: #c91f1f;
 }
 
 .give-donor-dashboard-amount-inputs {
+    flex: 1;
     display: flex;
     flex-direction: column;
 
-
     .give-donor-dashboard-field-row {
+        flex: 1;
         display: flex;
+        align-items: center;
         padding: 0;
 
         .give-donor-dashboard-select-control {
             display: flex;
-            min-width: 100%;
+            width: 100%;
             margin: 0;
         }
     }
 }
 
 .give-donor-dashboard-currency-control {
-    margin-top: 10px;
+    margin-bottom: 2px;
 
     .give-donor-dashboard-currency-control__label {
         font-family: Montserrat, Arial, Helvetica, sans-serif;
@@ -47,10 +49,10 @@ $errorColor: #c91f1f;
         outline: 0 !important;
         min-width: 190px;
         width: 100%;
-        margin-top: 8px;
+        margin-top: 6px;
         border: 1px solid #b8b8b8;
         overflow: hidden;
-        padding: 0;
+        padding: 1px;
         box-shadow: 0 0 0 0 var(--give-donor-dashboard-accent-color);
         transition: box-shadow 0.1s ease;