From 7935ad6496450b320e2dbd078d943c83bb0bf217 Mon Sep 17 00:00:00 2001
From: Tom Carden <tomc@rewiringamerica.org>
Date: Sat, 30 Sep 2023 18:05:09 -0600
Subject: [PATCH] adjust input and select margins to match state design

---
 src/calculator-form.ts         | 11 +++++------
 src/select.ts                  |  2 +-
 src/state-incentive-details.ts |  6 ++++--
 src/styles.ts                  |  3 +++
 src/styles/input.ts            |  4 +---
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/calculator-form.ts b/src/calculator-form.ts
index 3959d00..2193b59 100644
--- 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
index 18bbf0d..2bd3373 100644
--- 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
index 7970645..92072c2 100644
--- 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
index 97a9b04..6a72748 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -68,6 +68,7 @@ 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;
@@ -75,6 +76,7 @@ export const baseStyles = css`
     --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
index 086aeb2..c744a9d 100644
--- 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 {