From bacdd69e82d0a206a520cbfe7d038564bd83fa4a Mon Sep 17 00:00:00 2001
From: Jonathan <jonathanelian64@gmail.com>
Date: Sun, 28 Jan 2024 18:21:51 -0700
Subject: [PATCH] feat: font increase and decrease buttons

---
 src/components/Navbar.svelte             |  2 +-
 src/components/Passage.svelte            | 23 ++++++++------
 src/components/StudyChapter.svelte       | 29 +++++++++++++++++-
 src/components/Switch.svelte             |  5 +--
 src/components/icons/DecreaseFont.svelte |  8 +++++
 src/components/icons/IncreaseFont.svelte | 13 ++++++++
 src/routes/+layout.svelte                | 39 ++++++++++++------------
 src/routes/notes/+page.svelte            |  4 +--
 src/services/alert.js                    |  2 +-
 src/state/config.js                      | 14 +++++++++
 src/state/dark.js                        |  3 --
 11 files changed, 99 insertions(+), 43 deletions(-)
 create mode 100644 src/components/icons/DecreaseFont.svelte
 create mode 100644 src/components/icons/IncreaseFont.svelte
 create mode 100644 src/state/config.js
 delete mode 100644 src/state/dark.js

diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index eb33272..46712fc 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -8,7 +8,7 @@
   import { signOut, updateUserInfo } from '@/services/api/auth'
 
   import Link from './Link.svelte'
-  import { darkTheme } from '@/state/dark'
+  import { darkTheme } from '@/state/config'
   import Logo from './Logo.svelte'
   import Switch from './Switch.svelte'
   import {
diff --git a/src/components/Passage.svelte b/src/components/Passage.svelte
index 2b9a83c..241ec19 100644
--- a/src/components/Passage.svelte
+++ b/src/components/Passage.svelte
@@ -1,4 +1,10 @@
 <script context="module">
+  /**
+   * @typedef {object} Verse
+   * @prop {string} study
+   * @prop {number} number
+   * @prop {string} verse
+   */
   /**
    * @typedef {object} PassageInfo
    * @prop {number} num_chapters
@@ -7,13 +13,6 @@
    * @prop {string} chapter
    * @prop {Array<Verse>} vers
    */
-
-  /**
-   * @typedef {object} Verse
-   * @prop {string} study
-   * @prop {number} number
-   * @prop {string} verse
-   */
 </script>
 
 <script>
@@ -25,6 +24,10 @@
   export let studyMode = false
   export let className = ''
 
+  /**
+   * @type {number}
+   */
+  export let fontSize
   /** @type {PassageInfo} */
   export let info = {
     num_chapters: 50,
@@ -49,15 +52,15 @@
       : 'm-4 w-full max-w-full'
   } ${className}`}
 >
-  <h3 class="mt-4 text-3xl">{formatName(info.name)}: {info.chapter}</h3>
+  <h3 class={`mt-4 text-3xl`}>{formatName(info.name)}: {info.chapter}</h3>
 
   {#if info.vers && info.vers.length > 0}
     <ul class="flex flex-col gap-2 p-4">
       {#each info.vers as v}
         {#if v.study}
-          <h3 class="p-2 text-3xl">{v.study}</h3>
+          <h3 class="p-2" style={`font-size: ${fontSize + 10}px`}>{v.study}</h3>
         {/if}
-        <p class="verse text-2xl">
+        <p class="verse" style={`font-size: ${fontSize}px`}>
           <b>
             {v.number}
           </b>
diff --git a/src/components/StudyChapter.svelte b/src/components/StudyChapter.svelte
index 6f9be5a..0e5b945 100644
--- a/src/components/StudyChapter.svelte
+++ b/src/components/StudyChapter.svelte
@@ -6,6 +6,7 @@
   import { createAlert } from '@/services/alert'
   import Button from '@/components/Button.svelte'
   import { studyMode } from '@/state/study'
+  import { fontSize, setFontSize } from '@/state/config'
   import Passage from '@/components/Passage.svelte'
   import { Stretch } from 'svelte-loading-spinners'
   import { clickOutside } from '@/utils/clickOutside.js'
@@ -16,6 +17,8 @@
   import Note from './icons/Note.svelte'
   import Exit from './icons/Exit.svelte'
   import { scale } from 'svelte/transition'
+  import IncreaseFont from './icons/IncreaseFont.svelte'
+  import DecreaseFont from './icons/DecreaseFont.svelte'
 
   /** @type {string} */
   export let versionRead = 'rv1960'
@@ -52,6 +55,11 @@
   onMount(async () => {
     info = await getData()
     chapters = info.num_chapters
+
+    let configFontSize = localStorage.getItem('fontSize')
+    if (configFontSize) {
+      fontSize.set(parseInt(configFontSize))
+    }
   })
 
   async function getData() {
@@ -167,6 +175,18 @@
         break
     }
   }
+
+  function increaseFont() {
+    if ($fontSize === 25) return
+
+    setFontSize($fontSize + 1)
+  }
+
+  function decreaseFont() {
+    if ($fontSize === 16) return
+
+    setFontSize($fontSize - 1)
+  }
 </script>
 
 <svelte:head>
@@ -410,6 +430,13 @@
       >
         Nuevo Testamento
       </Button>
+
+      <Button color="blue" on:click={increaseFont} disabled={$fontSize === 25}>
+        <IncreaseFont width="1.5rem" height="1.5rem" />
+      </Button>
+      <Button color="blue" on:click={decreaseFont} disabled={$fontSize === 16}>
+        <DecreaseFont width="1.5rem" height="1.5rem" />
+      </Button>
     </div>
   </section>
 
@@ -426,7 +453,7 @@
     <div class="flex max-w-full flex-row max-lg:flex-col">
       {#if !loading}
         <section class={$studyMode ? 'max-w-full xl:w-1/2 2xl:w-2/4' : 'w-full max-w-full'}>
-          <Passage className="max-lg:mb-28" studyMode={$studyMode} {info} />
+          <Passage fontSize={$fontSize} className="max-lg:mb-28" studyMode={$studyMode} {info} />
         </section>
       {/if}
 
diff --git a/src/components/Switch.svelte b/src/components/Switch.svelte
index 0b24be6..cad9f81 100644
--- a/src/components/Switch.svelte
+++ b/src/components/Switch.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { darkTheme } from '@/state/dark'
+  import { darkTheme } from '@/state/config'
 
   export let className = ''
   let darkMode = false
@@ -14,9 +14,6 @@
       ? document.documentElement.classList.add('dark')
       : document.documentElement.classList.remove('dark')
   }
-
-  
-  
 </script>
 
 <div class={className}>
diff --git a/src/components/icons/DecreaseFont.svelte b/src/components/icons/DecreaseFont.svelte
new file mode 100644
index 0000000..4bea2c0
--- /dev/null
+++ b/src/components/icons/DecreaseFont.svelte
@@ -0,0 +1,8 @@
+<script>
+  /** @type {string} */
+  export let className = ''
+  export let width = '24'
+  export let height = '24'
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} class={className}	 viewBox="0 0 24 24"><path fill="currentColor" d="m1.615 18.5l5.289-13h.961l5.289 13h-1.208l-1.448-3.633H4.194L2.746 18.5zm2.939-4.6h5.584L7.435 7.1h-.139zm10.83-1.4v-1h7v1z"/></svg>
\ No newline at end of file
diff --git a/src/components/icons/IncreaseFont.svelte b/src/components/icons/IncreaseFont.svelte
new file mode 100644
index 0000000..13ca75d
--- /dev/null
+++ b/src/components/icons/IncreaseFont.svelte
@@ -0,0 +1,13 @@
+<script>
+  /** @type {string} */
+  export let className = ''
+  export let width = '24'
+  export let height = '24'
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} class={className} viewBox="0 0 24 24">
+  <path
+    fill="currentColor"
+    d="m1.615 18.5l5.289-13h.961l5.289 13h-1.208l-1.448-3.633H4.194L2.746 18.5zm2.939-4.6h5.584l-2.71-6.8h-.132zm13.83 1.6v-3h-3v-1h3v-3h1v3h3v1h-3v3z"
+  />
+</svg>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b5fecf3..d5164e5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,29 +3,27 @@
   import { browser } from '$app/environment'
   import { onMount } from 'svelte'
   import '@/app.css'
-  import { darkTheme } from '@/state/dark'
+  import { darkTheme } from '@/state/config'
 
   export const checkMode = () => {
-
-	  if (browser) {
-		if (
-		  localStorage.theme === 'dark' ||
-		  (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-		) {
-		  document.documentElement.classList.add('dark')
-		  darkTheme.set(true) 
-		} else {
-		  document.documentElement.classList.remove('dark')
-		  darkTheme.set(false) 
-		}
-	
-	  }
+    if (browser) {
+      if (
+        localStorage.theme === 'dark' ||
+        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      ) {
+        document.documentElement.classList.add('dark')
+        darkTheme.set(true)
+      } else {
+        document.documentElement.classList.remove('dark')
+        darkTheme.set(false)
+      }
+    }
   }
 
   onMount(() => checkMode())
 </script>
 
-<div class="flex max-w-[100vw] flex-col justify-between transition-colors theme-transition">
+<div class="theme-transition flex max-w-[100vw] flex-col justify-between transition-colors">
   <Navbar />
 
   <main class="mx-auto flex w-full max-w-screen-xl flex-col p-4">
@@ -34,7 +32,8 @@
 </div>
 
 <style>
-	.theme-transition {
-		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-	}
-</style>
\ No newline at end of file
+  .theme-transition {
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+</style>
diff --git a/src/routes/notes/+page.svelte b/src/routes/notes/+page.svelte
index 51911f7..719f01c 100644
--- a/src/routes/notes/+page.svelte
+++ b/src/routes/notes/+page.svelte
@@ -2,14 +2,12 @@
   import { onMount } from 'svelte'
   import Swal from 'sweetalert2'
 
-  import { user } from '@/state/user'
   import { notes } from '@/state/notes'
-  import { darkTheme } from '@/state/dark'
+  import { darkTheme } from '@/state/config'
   import { createAlert } from '@/services/alert'
   import Button from '@/components/Button.svelte'
   import { Stretch } from 'svelte-loading-spinners'
   import { API_BASE_URL } from '@/constants'
-  import { draft, studyMode } from '@/state/study'
   import { goto } from '$app/navigation'
 
   let loadingNotes = true
diff --git a/src/services/alert.js b/src/services/alert.js
index 0a1db77..6ecb61e 100644
--- a/src/services/alert.js
+++ b/src/services/alert.js
@@ -5,7 +5,7 @@ import { isDarkTheme } from '@/utils/darkTheme'
  * @param {'error'|'loading'|'success'|'normal'=} type
  * @param {number=} duration
  */
-export async function createAlert (message, type = 'normal', duration = 2000) {
+export async function createAlert(message, type = 'normal', duration = 2000) {
   const { toast } = await import('wc-toast')
   const types = ['error', 'loading', 'success']
   /** @type {{ type: 'dark'|'light'|'custom'|undefined }} */
diff --git a/src/state/config.js b/src/state/config.js
new file mode 100644
index 0000000..5a02499
--- /dev/null
+++ b/src/state/config.js
@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store'
+
+export const darkTheme = writable(false)
+
+export const fontSize = writable(16)
+
+/**
+ * 
+ * @param {number} size 
+ */
+export function setFontSize(size) {
+  fontSize.set(size)
+  localStorage.setItem('fontSize', JSON.stringify(size))
+}
\ No newline at end of file
diff --git a/src/state/dark.js b/src/state/dark.js
deleted file mode 100644
index 5ec6f81..0000000
--- a/src/state/dark.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store'
-
-export const darkTheme = writable(false)