diff --git a/index.html b/index.html index 018fb91..bc40cdf 100644 --- a/index.html +++ b/index.html @@ -74,15 +74,13 @@ Parking Lot Map - - Select a city: - - + diff --git a/src/css/_about.scss b/src/css/_about.scss index 1e34629..624334a 100644 --- a/src/css/_about.scss +++ b/src/css/_about.scss @@ -19,7 +19,7 @@ div.about-text-popup { } div.about-text-popup svg.fa-circle-xmark { - color: #4d4d4d; + color: colors.$gray-light; } div.about-text-container { diff --git a/src/css/_header.scss b/src/css/_header.scss index 7b095c3..6b8f4ce 100644 --- a/src/css/_header.scss +++ b/src/css/_header.scss @@ -49,14 +49,9 @@ header { align-items: center; gap: 0.7em; height: 40px; - margin-bottom: 6px; } } -#city-dropdown label { - font-weight: normal; -} - .choices__inner { border: 2px solid colors.$black-translucent; border-radius: 10px; diff --git a/src/js/dropdown.ts b/src/js/dropdown.ts index 446da63..00da840 100644 --- a/src/js/dropdown.ts +++ b/src/js/dropdown.ts @@ -3,7 +3,7 @@ import "choices.js/public/assets/styles/choices.css"; import scoreCardsData from "../../data/score-cards.json"; import { CityId, ScoreCardDetails, dropdownChoice } from "./types"; -export const DROPDOWN = new Choices("#city-choice", { +export const DROPDOWN = new Choices("#city-dropdown", { allowHTML: false, itemSelectText: "Select", searchEnabled: true, diff --git a/src/js/setUpSite.ts b/src/js/setUpSite.ts index 292fb5b..1dc2866 100644 --- a/src/js/setUpSite.ts +++ b/src/js/setUpSite.ts @@ -231,7 +231,7 @@ const setUpCitiesLayer = async ( allBoundaries.addTo(map); // Set up map to update when city selection changes. - const cityToggleElement = document.getElementById("city-choice"); + const cityToggleElement = document.getElementById("city-dropdown"); if (cityToggleElement instanceof HTMLSelectElement) { cityToggleElement.addEventListener("change", async () => { const cityId = cityToggleElement.value; @@ -260,7 +260,7 @@ const setUpCitiesLayer = async ( snapToCity(map, cities[cityId].layer); setScorecard(cityId, cities[cityId]); } else { - throw new Error("#city-choice is not a select element"); + throw new Error("#city-dropdown is not a select element"); } }; diff --git a/tests/app/setUpSite.test.ts b/tests/app/setUpSite.test.ts index 4cd08ac..4408999 100644 --- a/tests/app/setUpSite.test.ts +++ b/tests/app/setUpSite.test.ts @@ -59,7 +59,7 @@ test("correctly load the city score card", async ({ page }) => { const [content, cityToggleValue] = await page.evaluate(() => { const cityChoice: HTMLSelectElement | null = - document.querySelector("#city-choice"); + document.querySelector("#city-dropdown"); const cityToggle = cityChoice?.value; const detailsTitles = Array.from( @@ -138,7 +138,7 @@ test.describe("the share feature", () => { ); const title = titlePopup?.textContent; const cityChoice: HTMLSelectElement | null = - document.querySelector("#city-choice"); + document.querySelector("#city-dropdown"); const cityToggle = cityChoice?.value; return [title, cityToggle]; }); @@ -161,7 +161,7 @@ test.describe("the share feature", () => { const title = titlePopup?.textContent; const cityChoiceSelector: HTMLSelectElement | null = - document.querySelector("#city-choice"); + document.querySelector("#city-dropdown"); const cityToggle = cityChoiceSelector?.value; return [title, cityToggle]; }); @@ -257,7 +257,7 @@ test("scorecard pulls up city closest to center", async ({ page }) => { const titlePopup = document.querySelector(".leaflet-popup-content .title"); const title = titlePopup?.textContent; const cityChoice: HTMLSelectElement | null = - document.querySelector("#city-choice"); + document.querySelector("#city-dropdown"); return [title, cityChoice?.value]; }); expect(scoreCardTitle).toEqual("Birmingham, AL");