state calc button is purple, no icon

rewiringamerica · Sep 30, 2023 · a23487e · a23487e
1 parent afc070d
commit a23487e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/src/calculator-form.ts b/src/calculator-form.ts
@@ -1,4 +1,4 @@
-import { html, css, nothing } from 'lit';
+import { html, css, nothing, TemplateResult } from 'lit';
 import { downIcon, questionIcon } from './icons';
 import { select, selectStyles, OptionParam } from './select';
 import { inputStyles } from './styles/input';
@@ -79,6 +79,7 @@ const HOUSEHOLD_SIZE_OPTIONS: OptionParam[] = [1, 2, 3, 4, 5, 6, 7, 8].map(
 type FormOptions = {
   showProjectField: boolean;
   tooltipSize: number;
+  calculateButtonContent: TemplateResult;
 }
 
 export const formTemplate = (
@@ -90,7 +91,7 @@ export const formTemplate = (
     taxFiling,
     householdSize,
   ]: Array<string>,
-  { showProjectField, tooltipSize }: FormOptions,
+  { showProjectField, tooltipSize, calculateButtonContent }: FormOptions,
   onSubmit: (e: SubmitEvent) => void,
   gridClass: string = 'grid-3-2',
 ) => {
@@ -225,7 +226,7 @@ export const formTemplate = (
         </div>
         <div>
           <button class="primary" type="submit">
-            Calculate! ${downIcon(tooltipSize, tooltipSize)}
+            ${calculateButtonContent}
           </button>
         </div>
       </div>

diff --git a/src/calculator.ts b/src/calculator.ts
@@ -13,6 +13,7 @@ import {
 import { CALCULATOR_FOOTER } from './calculator-footer';
 import { fetchApi } from './api/fetch';
 import { NO_PROJECT } from './projects';
+import { downIcon } from './icons';
 
 const loadedTemplate = (
   results: ICalculatedIncentiveResults,
@@ -143,6 +144,8 @@ export class RewiringAmericaCalculator extends LitElement {
   });
 
   override render() {
+    const calculateButtonContent = html`Calculate! ${downIcon(18, 18)}`;
+
     return html`
       <div class="calculator">
         <div class="card card-content">
@@ -158,7 +161,7 @@ export class RewiringAmericaCalculator extends LitElement {
                   this.taxFiling,
                   this.householdSize,
                 ],
-                { tooltipSize: 18, showProjectField: false },
+                { tooltipSize: 18, showProjectField: false, calculateButtonContent },
                 (event: SubmitEvent) => this.submit(event),
               )}
         </div>

diff --git a/src/state-calculator.ts b/src/state-calculator.ts
@@ -245,6 +245,8 @@ export class RewiringAmericaStateCalculator extends LitElement {
       this._utilitiesTask.status === TaskStatus.PENDING ||
       this._task.status === TaskStatus.PENDING;
 
+    const calculateButtonContent = html`Calculate`;
+
     return html`
       <div class="calculator">
         <div class="card card-content">
@@ -260,7 +262,7 @@ export class RewiringAmericaStateCalculator extends LitElement {
                   this.taxFiling,
                   this.householdSize,
                 ],
-                { showProjectField: true, tooltipSize: 13 },
+                { showProjectField: true, tooltipSize: 13, calculateButtonContent },
                 (event: SubmitEvent) => this.submit(event),
                 'grid-3-2-1',
               )}

diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
@@ -20,6 +20,9 @@ export const stateIncentivesStyles = css`
     --ra-form-label-margin: 0;
     --ra-form-label-text-transform: uppercase;
     --ra-form-label-letter-spacing: 0.55px;
+    /* button */
+    --ra-embed-primary-button-background-color: var(--rewiring-purple);
+    --ra-embed-primary-button-text-color: white;
   }