From 15df6b1f3465eb816b1ac0f51385cb489c8dc76c Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Mon, 18 Mar 2024 15:42:33 -0400 Subject: [PATCH] Add styles --- src/components/organisms/Calendar/Calendar.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/organisms/Calendar/Calendar.js b/src/components/organisms/Calendar/Calendar.js index 51153963..ea4965bc 100644 --- a/src/components/organisms/Calendar/Calendar.js +++ b/src/components/organisms/Calendar/Calendar.js @@ -169,17 +169,25 @@ class Calendar extends HTMLElement { switch (filter.type) { case 'radio': { const radioFiltersContainer = document.createElement('fieldset'); + radioFiltersContainer.classList.add( + 'd-flex', + 'flex-wrap', + 'm-3', + 'justify-content-center', + ); const legend = document.createElement('legend'); legend.classList.add('visually-hidden'); legend.innerText = filter.legend; radioFiltersContainer.appendChild(legend); filter.values.forEach((value) => { const radioButtonContainer = document.createElement('div'); + radioButtonContainer.classList.add('m-2'); const radioButtonInput = document.createElement('input'); radioButtonInput.setAttribute('type', 'radio'); radioButtonInput.setAttribute('id', value); radioButtonInput.setAttribute('name', filter.key); radioButtonInput.setAttribute('value', value); + radioButtonInput.classList.add('btn-check'); // Bind event handler to this instance. radioButtonInput.addEventListener( 'click', @@ -188,6 +196,7 @@ class Calendar extends HTMLElement { radioButtonContainer.appendChild(radioButtonInput); const radioButtonLabel = document.createElement('label'); radioButtonLabel.setAttribute('for', value); + radioButtonLabel.classList.add('btn', 'btn-primary'); radioButtonLabel.innerText = value; radioButtonContainer.appendChild(radioButtonLabel); radioFiltersContainer.appendChild(radioButtonContainer);