From c6ebb13d30db4f5f4c21e4cf2a30761d0e86f6cf Mon Sep 17 00:00:00 2001
From: Spencer Flagg <work@spencerflagg.com>
Date: Tue, 30 Jan 2024 23:09:21 +0100
Subject: [PATCH] dismiss modal; calendar icons; moved counters css

---
 src/lib/components/Action.svelte           | 12 +++++--
 src/lib/components/counters.svelte         | 32 +++++++++++++++++++
 src/lib/components/svgs/Milk.svelte        |  6 ++++
 src/lib/components/svgs/Moon.svelte        |  4 +++
 src/lib/components/svgs/Poop.svelte        |  7 ++++
 src/lib/components/svgs/Sun.svelte         |  5 +++
 src/lib/components/svgs/ToiletPaper.svelte |  8 +++++
 src/routes/calendar/+page.svelte           | 30 +++++++++++++++---
 src/styles/app.css                         | 37 +++-------------------
 9 files changed, 101 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/components/svgs/Milk.svelte
 create mode 100644 src/lib/components/svgs/Moon.svelte
 create mode 100644 src/lib/components/svgs/Poop.svelte
 create mode 100644 src/lib/components/svgs/Sun.svelte
 create mode 100644 src/lib/components/svgs/ToiletPaper.svelte

diff --git a/src/lib/components/Action.svelte b/src/lib/components/Action.svelte
index 1059469..1d1c167 100644
--- a/src/lib/components/Action.svelte
+++ b/src/lib/components/Action.svelte
@@ -27,6 +27,13 @@
 	const closeDialog = () => {
 		dialog.close();
 	};
+
+	const onDismiss = (event) => {
+		if (event.target === dialog) {
+			dialog.close();
+		}
+	}
+
 </script>
 
 <style lang="scss">
@@ -57,6 +64,7 @@
 
 	dialog {
 		width: 50vw;
+		min-width: 16ch;
 		height: 50vh;
 		border-radius: 3rem;
 		border: none;
@@ -83,7 +91,7 @@
 	action.timestamp
 ).toLocaleTimeString('en-NL', { hour: '2-digit', minute: '2-digit' })}
 
-<dialog bind:this={dialog}>
+<dialog bind:this={dialog} on:click={onDismiss}>
 	<div class="dialog__content">
 		<div class="">
 			<h3>
@@ -98,7 +106,7 @@
 			<button class="button--edit-time" on:click={() => adjustTime(-1)}>-1</button>
 			<button class="button--edit-time" on:click={() => adjustTime(1)}>+1</button>
 			<button class="button--edit-time" on:click={() => adjustTime(5)}>+5</button>
-			<button class="button--edit-time" on:click={deleteAction}>Delete</button>
+			<button class="button button-outline button--edit-time" on:click={deleteAction}>Delete</button>
 		</div>
 		<div class=""><button class="button--close" on:click={closeDialog}>Done Editing</button></div>
 	</div>
diff --git a/src/lib/components/counters.svelte b/src/lib/components/counters.svelte
index 402c314..b5ab93c 100644
--- a/src/lib/components/counters.svelte
+++ b/src/lib/components/counters.svelte
@@ -55,6 +55,38 @@
       };
     });
   </script>
+
+  <style>
+.counters {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: max-content;
+  outline: 1px solid var(--c-border);
+  background-color: var(--c-border);
+  padding: 2rem;
+  border-radius: 2rem;
+  font-size: 2.5rem;
+  box-shadow: -10px 10px 20px -10px #00000030;
+}
+
+@media screen and (max-width: 600px) {
+  .counters {
+    margin-right: -2rem;
+    border-radius: 2rem 0 0 2rem;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .counters {
+    margin-right: -2rem;
+    border-radius: 2rem 0 0 2rem;
+    position: fixed;
+    bottom: 2rem;
+    top:auto;
+  }
+}
+  </style>
   
   <div class="counters">
     {#if $awakeMinutes !== null && $awakeMinutes < $asleepMinutes}<div>Awake for <strong>{convertMinutes($awakeMinutes)}</strong></div>{/if}
diff --git a/src/lib/components/svgs/Milk.svelte b/src/lib/components/svgs/Milk.svelte
new file mode 100644
index 0000000..04e5abc
--- /dev/null
+++ b/src/lib/components/svgs/Milk.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-baby-bottle" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M5 10h14" />
+    <path d="M12 2v2" />
+    <path d="M12 4a5 5 0 0 1 5 5v11a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2v-11a5 5 0 0 1 5 -5z" />
+  </svg>
\ No newline at end of file
diff --git a/src/lib/components/svgs/Moon.svelte b/src/lib/components/svgs/Moon.svelte
new file mode 100644
index 0000000..3adc23c
--- /dev/null
+++ b/src/lib/components/svgs/Moon.svelte
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
+  </svg>
\ No newline at end of file
diff --git a/src/lib/components/svgs/Poop.svelte b/src/lib/components/svgs/Poop.svelte
new file mode 100644
index 0000000..1b56341
--- /dev/null
+++ b/src/lib/components/svgs/Poop.svelte
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-poo" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M10 12h.01" />
+    <path d="M14 12h.01" />
+    <path d="M10 16a3.5 3.5 0 0 0 4 0" />
+    <path d="M11 4c2 0 3.5 1.5 3.5 4l.164 0a2.5 2.5 0 0 1 2.196 3.32a3 3 0 0 1 1.615 3.063a3 3 0 0 1 -1.299 5.607l-.176 0h-10a3 3 0 0 1 -1.474 -5.613a3 3 0 0 1 1.615 -3.062a2.5 2.5 0 0 1 2.195 -3.32l.164 0c1.5 0 2.5 -2 1.5 -4z" />
+  </svg>
\ No newline at end of file
diff --git a/src/lib/components/svgs/Sun.svelte b/src/lib/components/svgs/Sun.svelte
new file mode 100644
index 0000000..a2fac7a
--- /dev/null
+++ b/src/lib/components/svgs/Sun.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
+    <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
+  </svg>
\ No newline at end of file
diff --git a/src/lib/components/svgs/ToiletPaper.svelte b/src/lib/components/svgs/ToiletPaper.svelte
new file mode 100644
index 0000000..a533225
--- /dev/null
+++ b/src/lib/components/svgs/ToiletPaper.svelte
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toilet-paper" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M6 10m-3 0a3 7 0 1 0 6 0a3 7 0 1 0 -6 0" />
+    <path d="M21 10c0 -3.866 -1.343 -7 -3 -7" />
+    <path d="M6 3h12" />
+    <path d="M21 10v10l-3 -1l-3 2l-3 -3l-3 2v-10" />
+    <path d="M6 10h.01" />
+  </svg>
\ No newline at end of file
diff --git a/src/routes/calendar/+page.svelte b/src/routes/calendar/+page.svelte
index 0376513..761541a 100644
--- a/src/routes/calendar/+page.svelte
+++ b/src/routes/calendar/+page.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-import { onMount } from 'svelte';
+  import { onMount } from 'svelte';
 	import { pb } from '$lib/pocketbase';
+  import Sun from '$lib/components/svgs/Sun.svelte';
+  import Moon from '$lib/components/svgs/Moon.svelte';
+  import Milk from '$lib/components/svgs/Milk.svelte';
+  import ToiletPaper from '$lib/components/svgs/ToiletPaper.svelte';
+  import Poop from '$lib/components/svgs/Poop.svelte';
 
-    type Action = {
+  type Action = {
 		type: string;
 		timestamp: string;
 	};
@@ -98,7 +103,7 @@ import { onMount } from 'svelte';
       display: flex;
       align-items: center;
       justify-content: space-between;
-      color: rgba(255,255,255,.5);
+      --c-event: rgba(255,255,255,.5);
     }
 
     .event__title {
@@ -106,13 +111,14 @@ import { onMount } from 'svelte';
       font-size: 1.2rem;
       text-transform: uppercase;
       letter-spacing: .2em;
+      color: rgba(255,255,255,.5);
     }
 
     .event__time {
       line-height: 1;
       font-size: 1.2rem;
       font-weight: 300;
-      color: rgba(255,255,255,.75);
+      color: var(--c-event);
     }
   </style>
   
@@ -133,7 +139,21 @@ import { onMount } from 'svelte';
           <div class="hour">
             {#each actions as action (action.id)}
               {#if getDayOfWeek(action.timestamp) === dayIndex && getHourOfDay(action.timestamp) === hour}
-                <div class="event event--{action.type}"><span class="event__title">{action.type}</span><span class="event__time">{formatTime(action.timestamp)}</span></div>
+                <div class="event event--{action.type}">
+                  {#if action.type == 'awake'}
+                    <Sun />
+                  {:else if action.type == 'asleep'}
+                    <Moon />
+                  {:else if action.type == 'food'}
+                    <Milk />
+                  {:else if action.type == 'diaper'}
+                    <ToiletPaper />
+                  {:else if action.type == 'poop'}
+                    <Poop />
+                  {/if}
+                  <!-- <span class="event__title">{action.type}</span> -->
+                  <span class="event__time">{formatTime(action.timestamp)}</span>
+                </div>
               {/if}
             {/each}
           </div>
diff --git a/src/styles/app.css b/src/styles/app.css
index 20dc039..cf908ea 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1,5 +1,5 @@
 :root {
-	--c-primary: darkorange; /* Replace #yourColor with your desired color */
+	--c-primary: #ff5500; /* Replace #yourColor with your desired color */
 }
 
 /* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
@@ -72,9 +72,11 @@ svg path {
 nav ul {
 	list-style: circle inside;
 	display: flex;
+  flex-wrap: wrap;
 	list-style: none;
 	gap: 1em;
 	justify-content: end;
+  margin-bottom: 0;
 }
 
 nav ul li {
@@ -132,35 +134,4 @@ section {
   line-height: 1;
   min-width: 10ch;
   text-align: center;
-}
-
-
-
-.counters {
-  position: absolute;
-  top: 0;
-  right: 0;
-	width: max-content;
-	outline: 1px solid var(--c-border);
-	background-color: var(--c-border);
-	padding: 2rem;
-	border-radius: 2rem;
-  font-size: 2.5rem;
-}
-
-@media screen and (max-width: 600px) {
-  .counters {
-    margin-right: -2rem;
-    border-radius: 2rem 0 0 2rem;
-  }
-}
-
-@media screen and (max-width: 500px) {
-  .counters {
-    margin-right: -2rem;
-    border-radius: 2rem 0 0 2rem;
-    position: fixed;
-    bottom: 2rem;
-    top:auto;
-  }
-}
+}
\ No newline at end of file