adjust input and select margins to match state design

rewiringamerica · Oct 1, 2023 · 7935ad6 · 7935ad6
1 parent 1a45b6b
commit 7935ad6
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git a/src/calculator-form.ts b/src/calculator-form.ts
@@ -105,7 +105,6 @@ export const formTemplate = (
             >${questionIcon(tooltipSize, tooltipSize)}</sl-tooltip
           >
         </label>
-        <br />
         ${select({
           id: 'project',
           required: true,
@@ -131,7 +130,7 @@ export const formTemplate = (
               >${questionIcon(tooltipSize, tooltipSize)}</sl-tooltip
             >
           </label>
-          <br />
+
           <input
             tabindex="0"
             id="zip"
@@ -155,7 +154,7 @@ export const formTemplate = (
               >${questionIcon(tooltipSize, tooltipSize)}</sl-tooltip
             >
           </label>
-          <br />
+
           ${select({
             id: 'owner_status',
             required: true,
@@ -173,7 +172,7 @@ export const formTemplate = (
               >${questionIcon(tooltipSize, tooltipSize)}</sl-tooltip
             >
           </label>
-          <br />
+
           <ra-currency-input
             id="household_income"
             placeholder="$60,000"
@@ -198,7 +197,7 @@ export const formTemplate = (
               ${questionIcon(tooltipSize, tooltipSize)}</sl-tooltip
             >
           </label>
-          <br />
+
           ${select({
             id: 'tax_filing',
             required: true,
@@ -216,7 +215,7 @@ export const formTemplate = (
               >${questionIcon(tooltipSize, tooltipSize)}</sl-tooltip
             >
           </label>
-          <br />
+
           ${select({
             id: 'household_size',
             required: true,

diff --git a/src/select.ts b/src/select.ts
@@ -100,7 +100,7 @@ export const selectStyles = css`
     background-color: var(--ra-select-background-color);
     background-image: var(--ra-select-background-image);
 
-    margin-top: 4px;
+    margin: var(--ra-select-margin);
   }
 
   .select select[disabled] {

diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
@@ -14,10 +14,10 @@ export const stateIncentivesStyles = css`
     --ra-embed-card-border-radius: 0.75rem;
     /* labels */
     --ra-form-label-font-size: 11px;
-    --ra-form-label-line-height: 125%;
+    --ra-form-label-line-height: 20px;
     --ra-form-label-font-weight: 700;
     --ra-form-label-font-style: normal;
-    --ra-form-label-margin: 0;
+    --ra-form-label-margin: 0 0 8px 0;
     --ra-form-label-text-transform: uppercase;
     --ra-form-label-letter-spacing: 0.55px;
     /* button */
@@ -28,9 +28,11 @@ export const stateIncentivesStyles = css`
     --ra-select-border: 1px solid #E2E2E2;
     --ra-select-focus-color: var(--rewiring-purple);
     --ra-select-background-image: none;
+    --ra-select-margin: 0;
     /* input */
     --ra-input-border: 1px solid #E2E2E2;
     --ra-input-focus-color: var(--rewiring-purple);
+    --ra-input-margin: 0;
   }
 
 

diff --git a/src/styles.ts b/src/styles.ts
@@ -68,13 +68,15 @@ export const baseStyles = css`
     --ra-select-padding: 0.5rem 1rem;
     --ra-select-arrow-color: #222;
     --ra-select-focus-color: blue;
+    --ra-select-margin: 4px 0 0 0;
     /* input styles */
     --ra-input-border: 1px solid #cccccc;
     --ra-input-focus-color: blue;
     --ra-input-padding: 0.5rem 1rem;
     --ra-input-font-size: var(--ra-embed-font-size);
     --ra-input-line-height: var(--ra-embed-line-height);
     --ra-input-border-radius: 4px;
+    --ra-input-margin: 4px 0 0 0;
   }
 
   :host {
@@ -119,6 +121,7 @@ export const baseStyles = css`
   }
 
   label {
+    display: block;
     font-size: var(--ra-form-label-font-size);
     line-height: var(--ra-form-label-line-height);
     font-weight: var(--ra-form-label-font-weight);

diff --git a/src/styles/input.ts b/src/styles/input.ts
@@ -8,9 +8,7 @@ export const inputStyles = css`
     border: var(--ra-input-border);
     border-radius: var(--ra-input-border-radius);
     width: 100%;
-    margin-top: 4px;
-    margin-left: 0;
-    margin-right: 0;
+    margin: var(--ra-input-margin);
   }
 
   input:focus {