Update modal for filtering per UX team suggestions

* Clicking away from dialog will now close the dialog * Looks closer to UX design
WycliffeAssociates · Jan 2, 2024 · e8170e8 · e8170e8
1 parent 56f7937
commit e8170e8
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 386 deletions.
diff --git a/frontend/src/components/Books.svelte b/frontend/src/components/Books.svelte
@@ -308,36 +308,38 @@
               </button>
             </div>
             {#if showFilterMenu}
-              <Modal
-                title="Filter"
-                open={showFilterMenu}
-                on:close={() => (showFilterMenu = false)}
-              >
+              <Modal title="Filter" bind:showFilterMenu>
                 <svelte:fragment slot="body">
-                  <div class="flex items-center">
-                    <input
-                      id="show-ot-radio-button"
-                      type="radio"
-                      value={true}
-                      bind:group={showOldTestament}
-                      class="radio checked:bg-[#015ad9]"
-                    />
-                    <label for="show-ot-radio-button" class="text-[#33445C] pl-1"
-                      >Old Testament</label
+                  <label for="show-ot-radio-button">
+                    <div
+                      class="flex items-center radio-target
+                                h-[48px] pl-4 pr-8 py-2"
                     >
-                  </div>
-                  <div class="flex items-center">
-                    <input
-                      id="show-nt-radio-button"
-                      type="radio"
-                      value={false}
-                      bind:group={showOldTestament}
-                      class="radio checked:bg-[#015ad9]"
-                    />
-                    <label for="show-nt-radio-button" class="text-[#33445C] pl-1"
-                      >New Testament</label
+                      <input
+                        id="show-ot-radio-button"
+                        type="radio"
+                        value={true}
+                        bind:group={showOldTestament}
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                      />
+                      <span class="text-[#33445C] pl-1">Old Testament</span>
+                    </div>
+                  </label>
+                  <label for="show-nt-radio-button">
+                    <div
+                      class="flex items-center radio-target
+                                h-[48px] pl-4 pr-8 py-2"
                     >
-                  </div>
+                      <input
+                        id="show-nt-radio-button"
+                        type="radio"
+                        value={false}
+                        bind:group={showOldTestament}
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                      />
+                      <span class="text-[#33445C] pl-1">New Testament</span>
+                    </div>
+                  </label>
                 </svelte:fragment>
               </Modal>
             {/if}
@@ -446,36 +448,38 @@
               </button>
             </div>
             {#if showFilterMenu}
-              <Modal
-                title="Filter"
-                open={showFilterMenu}
-                on:close={() => (showFilterMenu = false)}
-              >
+              <Modal title="Filter" bind:showFilterMenu>
                 <svelte:fragment slot="body">
-                  <div class="flex items-center">
-                    <input
-                      id="show-gateway-radio-button"
-                      type="radio"
-                      value={true}
-                      bind:group={showOldTestament}
-                      class="radio checked:bg-[#015ad9]"
-                    />
-                    <label for="show-gateway-radio-button" class="text-[#33445C] pl-1"
-                      >Old Testament</label
+                  <label for="show-gateway-radio-button">
+                    <div
+                      class="flex items-center radio-target
+                                h-[48px] pl-4 pr-8 py-2"
                     >
-                  </div>
-                  <div class="flex items-center">
-                    <input
-                      id="show-heart-radio-button"
-                      type="radio"
-                      value={false}
-                      bind:group={showOldTestament}
-                      class="radio checked:bg-[#015ad9]"
-                    />
-                    <label for="show-heart-radio-button" class="text-[#33445C] pl-1"
-                      >New Testament</label
+                      <input
+                        id="show-gateway-radio-button"
+                        type="radio"
+                        value={true}
+                        bind:group={showOldTestament}
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                      />
+                      <span class="text-[#33445C] pl-1">Old Testament</span>
+                    </div>
+                  </label>
+                  <label for="show-heart-radio-button">
+                    <div
+                      class="flex items-center radio-target
+                                h-[48px] pl-4 pr-8 py-2"
                     >
-                  </div>
+                      <input
+                        id="show-heart-radio-button"
+                        type="radio"
+                        value={false}
+                        bind:group={showOldTestament}
+                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                      />
+                      <span class="text-[#33445C] pl-1">New Testament</span>
+                    </div>
+                  </label>
                 </svelte:fragment>
               </Modal>
             {/if}