From 471bddb3af76781d7c221702edf16718391b1bdb Mon Sep 17 00:00:00 2001
From: coletteli <73262125+coletteli@users.noreply.github.com>
Date: Fri, 21 Apr 2023 23:36:59 -0400
Subject: [PATCH] aboutButton

---
 src/routes/Homepage.svelte              | 16 ++++++++++++++++
 src/routes/ModalManager.svelte          |  5 +++++
 src/routes/components/AboutModal.svelte |  7 +++++++
 3 files changed, 28 insertions(+)
 create mode 100644 src/routes/components/AboutModal.svelte

diff --git a/src/routes/Homepage.svelte b/src/routes/Homepage.svelte
index 46ee6b8..dffe50c 100644
--- a/src/routes/Homepage.svelte
+++ b/src/routes/Homepage.svelte
@@ -78,6 +78,15 @@
             }
         }
     }
+    const aboutModal = () => {
+        SessionStore.set({
+            inSession: false,
+            sessionLength: 0,
+            modalType: "about",
+            counter: $SessionStore.counter+1,
+            sessionActivity: ""
+        });
+    };
 </script>
 
 <style>
@@ -166,10 +175,17 @@
         padding-left: 3rem;
         font-size: 2rem;
     }
+    #aboutButton {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+}
+
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <img src="logout.png" alt="logout" class="logout_button" on:click={logout}>
+<button id='aboutButton' on:click={aboutModal} class="button">About Us</button>
 {#if $SessionStore.inSession}
     <InSession/>
 {:else}
diff --git a/src/routes/ModalManager.svelte b/src/routes/ModalManager.svelte
index 84a7632..46234bd 100644
--- a/src/routes/ModalManager.svelte
+++ b/src/routes/ModalManager.svelte
@@ -4,6 +4,7 @@
     import FinishedSessionModal from './components/FinishedSessionModal.svelte';
     import ActivitiesModal from './components/ActivitiesModal.svelte';
     import CustomizationModal from './components/CustomizationModal.svelte';
+    import AboutModal from './components/AboutModal.svelte';
     import { writable } from 'svelte/store';
     import Modal from 'svelte-simple-modal';
 
@@ -32,6 +33,10 @@
                 // @ts-ignore
                 modal.set(CustomizationModal);
             }
+            if ($SessionStore.modalType == "about") {
+                // @ts-ignore
+                modal.set(AboutModal);
+            }
             currModal = $SessionStore.modalType;
             counter = $SessionStore.counter;
         }
diff --git a/src/routes/components/AboutModal.svelte b/src/routes/components/AboutModal.svelte
new file mode 100644
index 0000000..e648add
--- /dev/null
+++ b/src/routes/components/AboutModal.svelte
@@ -0,0 +1,7 @@
+<div class="modal-content">
+    <h1>About Us!</h1>
+    <p>StudyHouse is an application aimed to make its users more productive. Through reinforcing techniques, the goal is that as a user, you feel motivated to do your work and rewarded when you complete it. After starting a session, you will receive coins based on the amount of time you were productive for. Once you have chosen to end the timer, the coins earned can be used to unlock furniture and themes to customize your very own study house! The more coins you earn the more you can personalize your study house. 
+
+        Why not stay home and study today?</p>
+  </div>
+  
\ No newline at end of file