From d9260cd4b9efc34e51f6d298fdb5e2e42788b33e Mon Sep 17 00:00:00 2001
From: Mikayla <mikayla@thehubbards.org>
Date: Tue, 13 Aug 2024 14:02:43 -0400
Subject: [PATCH] add icons to the tabs on the plan detail page

- changed the <input> to <div> to allow for icons
- created an InfoIcon for the info tab
- used CalendarMonthIcon for the calendar tab

note: it seems that the color of the icons is
not being styled correctly
---
 src/lib/icons/InfoIcon.svelte      | 14 ++++++++++++++
 src/lib/icons/index.js             |  2 ++
 src/routes/plans/[id]/+page.svelte | 26 ++++++++++++++++----------
 3 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/icons/InfoIcon.svelte

diff --git a/src/lib/icons/InfoIcon.svelte b/src/lib/icons/InfoIcon.svelte
new file mode 100644
index 000000000..f50a72131
--- /dev/null
+++ b/src/lib/icons/InfoIcon.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    // info from https://fonts.google.com/icons
+    // Filled = 1
+    // Weight = 400
+    // Grade = 0
+    // Optical size = 24px
+    export let color = 'black';
+</script>
+
+<svg fill={color} xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+    ><path d="M0 0h24v24H0V0z" fill="none" /><path
+        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+    /></svg
+>
diff --git a/src/lib/icons/index.js b/src/lib/icons/index.js
index 2f80952e2..8141f41ba 100644
--- a/src/lib/icons/index.js
+++ b/src/lib/icons/index.js
@@ -16,6 +16,7 @@ import HamburgerIcon from './HamburgerIcon.svelte';
 import HighlightIcon from './HighlightIcon.svelte';
 import HistoryIcon from './HistoryIcon.svelte';
 import HomeIcon from './HomeIcon.svelte';
+import InfoIcon from './InfoIcon.svelte';
 import LaunchIcon from './LaunchIcon.svelte';
 import MoreVertIcon from './MoreVertIcon.svelte';
 import NoteIcon from './NoteIcon.svelte';
@@ -52,6 +53,7 @@ export {
     HistoryIcon,
     HomeIcon,
     ImageIcon,
+    InfoIcon,
     LaunchIcon,
     MoreVertIcon,
     NoteIcon,
diff --git a/src/routes/plans/[id]/+page.svelte b/src/routes/plans/[id]/+page.svelte
index 38264760a..d5717f6a5 100644
--- a/src/routes/plans/[id]/+page.svelte
+++ b/src/routes/plans/[id]/+page.svelte
@@ -15,6 +15,7 @@
     import { base } from '$app/paths';
     import config from '$lib/data/config';
     import { compareVersions } from '$lib/scripts/stringUtils';
+    import { CalendarMonthIcon, InfoIcon } from '$lib/icons';
 
     const imageFolder =
         compareVersions(config.programVersion, '12.0') < 0 ? 'illustrations' : 'plans';
@@ -63,29 +64,34 @@
                 />
             </div>
         {/if}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
             role="tablist"
             class="dy-tabs dy-tabs-bordered"
             style={convertStyle($s['ui.plans.tabs'])}
         >
-            <input
-                type="radio"
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+
+            <div
                 name="my_tabs_1"
-                role="tab"
                 class="dy-tab dy-tab-bordered {selectedTab === 'info' ? 'dy-tab-active' : ''}"
                 on:click={() => (selectedTab = 'info')}
-                aria-label="info logo"
+                aria-label="info icon"
                 style={convertStyle($s['ui.plans.tabs.text'])}
-            />
-            <input
-                type="radio"
+            >
+                <InfoIcon style={convertStyle($s['ui.plans.tabs.icon'])}></InfoIcon>
+            </div>
+
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
                 name="my_tabs_1"
-                role="tab"
                 class="dy-tab {selectedTab === 'calendar' ? 'dy-tab-active' : ''}"
                 on:click={() => (selectedTab = 'calendar')}
                 aria-label="calendar logo"
-                style={convertStyle($s['ui.plans.tabs.text'])}
-            />
+            >
+                <CalendarMonthIcon style={convertStyle($s['ui.plans.tabs.icon'])}
+                ></CalendarMonthIcon>
+            </div>
         </div>
 
         <div id="container" class="plan-chooser">