From 6ee080966147e593855cceb148d26184d6e8520d Mon Sep 17 00:00:00 2001
From: Danny Morabito <danny@arx-ccn.com>
Date: Fri, 29 Nov 2024 14:09:41 +0100
Subject: [PATCH] clean up code and ui

- IconButton component
- make FoldersListSidebar a separate component from the index page
- make move letter to folder better looking
- clean up code on index page
---
 src/components/FoldersListSidebar.svelte |  93 ++++++++++++++++++++
 src/components/IconButton.svelte         |  30 +++++++
 src/components/MailboxFolderItems.svelte |  14 +--
 src/routes/+layout.svelte                |   5 +-
 src/routes/+page.svelte                  | 105 +++--------------------
 static/nostr-lock.svg                    |  59 +++++++++++++
 6 files changed, 204 insertions(+), 102 deletions(-)
 create mode 100644 src/components/FoldersListSidebar.svelte
 create mode 100644 src/components/IconButton.svelte
 create mode 100644 static/nostr-lock.svg

diff --git a/src/components/FoldersListSidebar.svelte b/src/components/FoldersListSidebar.svelte
new file mode 100644
index 0000000..f383e2c
--- /dev/null
+++ b/src/components/FoldersListSidebar.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import IconButton from './IconButton.svelte';
+	import Dialog from './Dialog.svelte';
+	import { createFolder } from '$lib/utils.svelte';
+
+	let { sidebarOpen = $bindable(), folders = $bindable(), changeFolder } = $props<{
+		sidebarOpen: boolean;
+		folders: { id: string; name: string; icon: string }[];
+		changeFolder: (folder: string) => void;
+	}>();
+
+	let isAddingFolder = $state(false);
+	let newFolderName = $state('');
+
+	async function addNewFolderPressed() {
+		const newFolder = await createFolder(newFolderName, '');
+		if (!newFolder) return;
+		await newFolder.publish();
+		folders = [...folders, { id: newFolder.id, name: newFolderName, icon: 'eos-icons:plus' }];
+		newFolderName = '';
+		isAddingFolder = false;
+	}
+
+	function newFolderDialogClosed() {
+		isAddingFolder = false;
+		newFolderName = '';
+	}
+</script>
+
+<Dialog
+	bind:open={isAddingFolder}
+	onClose={newFolderDialogClosed}
+>
+	<div class="title">
+		<h3>Create Folder</h3>
+	</div>
+	<p class="text-secondary">Please enter a name for the new folder:</p>
+
+	<form onsubmit={addNewFolderPressed}>
+		<input
+			autofocus
+			bind:value={newFolderName}
+			placeholder="Folder name"
+			type="text"
+		/>
+
+		<div class="button-group">
+			<button onclick={newFolderDialogClosed} type="button">Cancel</button>
+			<button type="submit">OK</button>
+		</div>
+	</form>
+</Dialog>
+
+<div class="sidebar-container" class:open={sidebarOpen}>
+	<div class="glass sidebar">
+		{#each folders as folder}
+			<button class="folder-item" onclick={() => changeFolder(folder.id)}>
+				<Icon icon={folder.icon} />
+				{folder.name}
+			</button>
+			{#if folder.id === 'trash'}
+				<hr />
+			{/if}
+		{/each}
+		<IconButton icon="eos-icons:plus" onclick={() => isAddingFolder = true} text="Add Folder" />
+	</div>
+</div>
+
+<style>
+  .sidebar-container {
+    width: 0;
+    overflow: hidden;
+    transition: width 0.3s ease-in-out;
+
+    &.open {
+      width: clamp(16rem, 20vw, 20rem);
+    }
+  }
+
+  .folder-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+  }
+
+  .sidebar {
+    display: flex;
+    gap: var(--spacing-sm);
+    flex-direction: column;
+    height: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/IconButton.svelte b/src/components/IconButton.svelte
new file mode 100644
index 0000000..960e31a
--- /dev/null
+++ b/src/components/IconButton.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { goto } from '$app/navigation';
+
+	let { icon, text, href, onclick } = $props<{
+		icon: string;
+		text: string;
+		onclick?: () => void;
+		href?: string;
+	}>();
+
+	if (href)
+		onclick = () => {
+			goto(href);
+		};
+</script>
+
+<button class="button" onclick={onclick}>
+	<Icon icon={icon} />
+	{text}
+</button>
+
+<style>
+  .button {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    cursor: pointer;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/MailboxFolderItems.svelte b/src/components/MailboxFolderItems.svelte
index 7af8a0c..70ea2c9 100644
--- a/src/components/MailboxFolderItems.svelte
+++ b/src/components/MailboxFolderItems.svelte
@@ -7,6 +7,7 @@
 	import Select from './Select.svelte';
 	import type { Letter } from '$lib/letter';
 	import { slide } from 'svelte/transition';
+	import IconButton from './IconButton.svelte';
 
 	let {
 		letters,
@@ -117,7 +118,10 @@
 				<a in:slide out:slide class="letter-item" href="/letters/{letter.id}">
 					<div class="subject-line">
 						<div class="letter-subject">
-							<Icon icon="mdi:letter-outline" /> {letter.subject}
+							{#if !letter.emailAddress}
+								<img src="/nostr-lock.svg" width="32" />
+							{/if}
+							{letter.subject}
 						</div>
 						{#if letter.stamps}
 							<div class="stamps-count">
@@ -152,7 +156,9 @@
 <Dialog
 	bind:open={moveFolderDialogOpen}
 >
-	<h3>Move Letters to Folder</h3>
+	<div class="title">
+		<h3>Move Letters to Folder</h3>
+	</div>
 	<p class="text-secondary">Select a folder to move the selected letters to:</p>
 
 	<Select bind:value={moveFolderName} label="Select folder" options={
@@ -200,9 +206,7 @@
 </h2>
 
 <div class="actions">
-	<button onclick={() => moveFolderDialogOpen = true}>
-		<Icon icon="mdi:folder-move-outline" />
-	</button>
+	<IconButton icon="mdi:folder-move-outline" onclick={() => moveFolderDialogOpen = true} text="Move Letters" />
 </div>
 
 <main class="letter-list">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bd43252..1093d19 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
 	import LoginWithNostr from '../components/LoginWithNostr.svelte';
 	import { onMount } from 'svelte';
 	import { NDKNip07Signer } from '@nostr-dev-kit/ndk';
+	import IconButton from '../components/IconButton.svelte';
 
 	onMount(async () => {
 		if (localStorage.getItem('useNip07')) {
@@ -20,7 +21,7 @@
 	<header id="header">
 		<nav class="actions">
 			{#if $activeUser}
-				<a class="button" href="/compose">Compose</a>
+				<IconButton icon="proicons:compose" text="Compose" href="/compose" />
 			{/if}
 		</nav>
 
@@ -28,7 +29,7 @@
 
 		<nav class="actions">
 			{#if $activeUser}
-				<a class="button" href="/settings">Settings</a>
+				<IconButton icon="si:settings-cute-line" text="Settings" href="/settings" />
 			{/if}
 		</nav>
 	</header>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 66cf337..ccc2a33 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,12 +2,13 @@
 	import { ndk } from '$lib/stores.svelte';
 	import Icon from '@iconify/svelte';
 	import MailboxFolderItems from '../components/MailboxFolderItems.svelte';
-	import { createFolder, decryptSealedMessageIntoReadableType } from '$lib/utils.svelte';
+	import { decryptSealedMessageIntoReadableType } from '$lib/utils.svelte';
 	import { Letter } from '$lib/letter';
-	import Dialog from '../components/Dialog.svelte';
 	import { FolderLabel } from '$lib/folderLabel';
-	import type { NDKEventId } from '@nostr-dev-kit/ndk';
+	import type { NDKEvent, NDKEventId } from '@nostr-dev-kit/ndk';
 	import { LetterToFolderMapping } from '$lib/letterToFolderMapping';
+	import IconButton from '../components/IconButton.svelte';
+	import FoldersListSidebar from '../components/FoldersListSidebar.svelte';
 
 	let sidebarOpen = $state(false);
 
@@ -29,7 +30,7 @@
 		{ id: 'trash', name: 'Trash', icon: 'eos-icons:trash' }
 	]);
 
-	async function decryptMessages(messages) {
+	async function decryptMessages(messages: NDKEvent[]) {
 		const currentMessages = messages;
 		const decryptedFolders = [
 			{ id: 'inbox', name: 'Inbox', icon: 'solar:inbox-bold-duotone' },
@@ -67,81 +68,24 @@
 				return !allLettersInFolders.includes(letter.id);
 			if (!letterLabels.has(activeFolder))
 				return false;
-			return letterLabels.get(activeFolder).includes(letter.id);
+			return letterLabels.get(activeFolder)!.includes(letter.id);
 		});
 		folders = decryptedFolders;
 	}
 
-	messages.subscribe(m => decryptMessages(m));
+	messages.subscribe((m: NDKEvent) => decryptMessages(m));
 
-	function changeFolder(newFolder) {
+	function changeFolder(newFolder: string) {
 		letters = [];
 		activeFolder = newFolder;
 		decryptMessages($messages);
 	}
-
-	async function addNewFolderPressed() {
-		const newFolder = await createFolder(newFolderName, '');
-		if (!newFolder) return;
-		await newFolder.publish();
-		folders = [...folders, { id: newFolder.id, name: newFolderName, icon: 'eos-icons:plus' }];
-		newFolderName = '';
-		isAddingFolder = false;
-	}
-
-	function newFolderDialogClosed() {
-		isAddingFolder = false;
-		newFolderName = '';
-	}
-
-	let isAddingFolder = $state(false);
-	let newFolderName = $state('');
 </script>
 
-<button class="sidebar-button" onclick={() => sidebarOpen = !sidebarOpen}>
-	<Icon icon="mynaui:sidebar-solid" />
-</button>
-
-<Dialog
-	bind:open={isAddingFolder}
-	onClose={newFolderDialogClosed}
->
-	<div class="title">
-		<h3>Create Folder</h3>
-	</div>
-	<p class="text-secondary">Please enter a name for the new folder:</p>
-
-	<form onsubmit={addNewFolderPressed}>
-		<input
-			autofocus
-			bind:value={newFolderName}
-			placeholder="Folder name"
-			type="text"
-		/>
-
-		<div class="button-group">
-			<button onclick={newFolderDialogClosed} type="button">Cancel</button>
-			<button type="submit">OK</button>
-		</div>
-	</form>
-</Dialog>
+<IconButton icon="mynaui:sidebar-solid" onclick={() => sidebarOpen = !sidebarOpen} text="Sidebar" />
 
 <div class="content">
-	<div class="sidebar-container" class:open={sidebarOpen}>
-		<div class="glass sidebar">
-			{#each folders as folder}
-				<button class="folder-item" onclick={() => changeFolder(folder.id)}>
-					<Icon icon={folder.icon} />
-					{folder.name}
-				</button>
-			{/each}
-			<hr />
-			<button class="folder-item" onclick={() => isAddingFolder = true}>
-				<Icon icon="eos-icons:plus" />
-				Add Folder
-			</button>
-		</div>
-	</div>
+	<FoldersListSidebar bind:folders bind:sidebarOpen {changeFolder} />
 
 	<div class="folder-view">
 		{#if letters.length === 0}
@@ -157,41 +101,12 @@
 </div>
 
 <style>
-  .folder-item {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-  }
-
-  .sidebar-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
   .content {
     display: flex;
     gap: var(--spacing-sm);
   }
 
-  .sidebar-container {
-    width: 0;
-    overflow: hidden;
-    transition: width 0.3s ease-in-out;
-
-    &.open {
-      width: clamp(16rem, 20vw, 20rem);
-    }
-  }
-
   .folder-view {
     flex-grow: 1;
   }
-
-  .sidebar {
-    display: flex;
-    gap: var(--spacing-sm);
-    flex-direction: column;
-    height: 100%;
-  }
 </style>
\ No newline at end of file
diff --git a/static/nostr-lock.svg b/static/nostr-lock.svg
new file mode 100644
index 0000000..617132e
--- /dev/null
+++ b/static/nostr-lock.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+        id="Layer_1"
+        data-name="Layer 1"
+        viewBox="0 0 875 875"
+        version="1.1"
+        sodipodi:docname="nostr-lock.svg"
+        inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+        xmlns="http://www.w3.org/2000/svg"
+>
+    <sodipodi:namedview
+            id="namedview1"
+            pagecolor="#ffffff"
+            bordercolor="#000000"
+            borderopacity="0.25"
+            inkscape:showpageshadow="2"
+            inkscape:pageopacity="0.0"
+            inkscape:pagecheckerboard="0"
+            inkscape:deskcolor="#d1d1d1"
+            inkscape:zoom="0.63085714"
+            inkscape:cx="68.161232"
+            inkscape:cy="340.01359"
+            inkscape:window-width="1920"
+            inkscape:window-height="964"
+            inkscape:window-x="3200"
+            inkscape:window-y="29"
+            inkscape:window-maximized="1"
+            inkscape:current-layer="Layer_1"/>
+    <defs
+            id="defs1">
+        <style
+                id="style1">
+            .cls-1 {
+            fill: #fff;
+            stroke: #fff;
+            stroke-miterlimit: 10;
+            stroke-width: 6px;
+            }
+        </style>
+    </defs>
+    <path
+            class="cls-1"
+            d="m 521.51987,617.55834 c 0.10391,5.94611 -5.6344,24.30867 -18.26338,38.39702 -12.62898,14.08835 -26.45757,9.84721 -27.59107,9.52133 -1.13348,-0.32588 -1.45937,-2.1064 -3.72635,-1.78053 -2.26698,0.32588 -4.53396,2.91402 -8.90735,3.40048 -4.37339,0.48645 -8.26031,0.80761 -12.30782,-0.64704 -2.10641,0.32588 -2.42756,0.33532 -3.40048,1.05793 -0.97291,0.72259 -8.4209,5.09599 -10.20142,5.41714 0,3.40047 -0.64703,21.04988 0,26.39618 0.64704,5.3463 1.78052,12.14252 3.56105,17.00237 1.78052,4.85984 1.29407,5.02042 3.56105,4.69454 2.26699,-0.32588 6.3145,0.16058 7.44798,1.9411 1.1335,1.78053 0.64704,3.0746 2.59287,3.88694 1.94583,0.81233 28.66316,8.09501 46.9596,9.06793 12.62898,0.32587 20.24227,1.29406 24.61565,9.2285 0.64704,3.72635 3.56105,6.15391 5.34157,6.64037 1.78053,0.48646 3.88694,0.97291 5.66746,2.75344 1.78053,1.78053 0.48646,3.88694 2.59286,5.50688 2.10641,1.61995 6.96153,4.04751 11.98195,6.47507 5.02042,2.42756 7.12683,6.31449 7.44799,7.60856 0.32115,1.29407 0.80761,5.181 0.80761,5.181 0,0 -4.20809,0 -5.18101,-0.97291 -0.97291,-0.97292 -1.29406,-2.75344 -1.29406,-2.75344 0,0 -2.91402,0.48646 -3.56105,1.61994 -0.64704,1.1335 0.32587,1.29407 -3.72636,0.32588 -4.05222,-0.96819 -5.50688,-1.78053 -8.58147,-4.04751 -3.07459,-2.26698 -7.77386,-8.09502 -11.82137,-7.93443 1.9411,3.88692 2.75344,3.88692 5.02042,5.18099 2.26699,1.29407 3.88693,2.75344 3.88693,2.75344 l -3.40047,2.10641 c 0,0 -2.10641,0.97291 -6.96153,-0.32588 -4.85512,-1.29879 -5.50688,-2.1064 -5.99333,-5.02043 -0.48646,-2.91401 0,-4.37338 -1.29407,-6.80094 -1.29407,-2.42756 -1.94111,-7.44798 -10.5273,-10.04085 -8.58147,-2.59285 -31.4166,-10.04084 -47.28548,-11.66078 -15.86888,-1.61995 -10.68787,-1.29407 -13.27602,-0.64704 -2.58814,0.64704 -7.44798,2.10641 -12.4684,-0.64703 -5.02042,-2.75344 -7.93444,-6.47507 -8.26032,-9.5544 -0.32588,-3.07931 -0.80761,-5.18099 0,-9.06792 0.80762,-3.88693 1.61995,-9.39381 0.80762,-12.62898 -0.81235,-3.23518 -6.64038,-26.39618 -9.39382,-30.28311 -6.1539,0.48645 -23.96389,-0.32588 -23.96389,-0.32588 0,0 -1.13349,-0.32588 -8.26032,2.75344 -7.12683,3.07931 -17.22907,6.49868 -22.0889,9.4127 -4.85985,2.91401 -6.80096,4.5812 -7.61329,6.20114 0.0567,1.41686 -0.58092,3.64607 -1.31769,4.27893 -0.73677,0.63286 -5.89415,1.14294 -5.89415,1.14294 0,0 -2.76289,2.76761 -3.89637,4.70871 -3.2399,4.53396 -26.0703,59.10213 -31.41661,70.76291 -6.39478,15.38243 -4.61425,12.95487 -17.80996,12.95487 -13.19572,0 -3.80664,0.14168 -3.80664,0.14168 0,0 -5.82803,2.77706 -7.93444,2.77706 -2.1064,0 -8.90734,-1.1335 -12.4684,0 -3.56105,1.13348 -7.77386,4.37338 -11.00903,4.85984 -3.23518,0.48645 -2.33783,-0.63286 -3.95777,-1.76636 -1.88916,-0.0992 -6.73955,-0.0567 -6.73955,-0.0567 0,0 0.82178,-3.07459 3.73579,-5.13849 3.88693,-2.75344 11.98195,-7.60856 16.35533,-10.04085 4.37339,-2.43228 8.26032,-3.72635 11.00904,-4.37338 2.74872,-0.64704 8.74205,-2.91402 14.40951,-4.69454 5.66745,-1.78053 9.22848,-3.88693 14.08833,-14.89597 4.85984,-11.00903 23.80331,-52.62705 24.28977,-54.89404 0.29754,-1.39797 1.76164,-3.06042 2.26698,-7.12682 0.31171,-2.52675 -1.17599,-6.15863 0.80761,-10.68788 5.18101,-11.82137 10.20143,-9.55438 12.46841,-9.55438 2.26698,0 8.09502,0.16057 12.4684,-0.64704 4.37339,-0.80762 7.28741,-1.29407 11.66079,-3.72636 4.37339,-2.43228 5.34158,-4.20808 5.34158,-4.20808 l -9.3938,-1.61995 c 0,0 -8.74206,0.32588 -11.82138,-2.1064 -3.07931,-2.43228 -7.2874,-7.44798 -7.2874,-7.44798 l -3.56106,-3.40048 0.48646,4.04751 c 0,0 -2.42755,-4.20809 -3.07459,-4.85984 -0.64703,-0.65176 -4.04751,-3.0746 -5.34158,-5.34158 -1.29407,-2.26698 -3.56105,-11.82137 -3.56105,-11.82137 l -2.91402,6.15391 -0.80761,-8.90735 -2.42756,3.40047 -1.29407,-7.60856 -2.26699,3.88694 -1.61994,-6.80096 -2.75344,2.10641 -1.1335,-4.85985 -2.75343,-1.61994 c 0,0 -6.64037,-4.37339 -7.77386,-4.53397 -1.13349,-0.16058 -2.1064,1.61995 -2.1064,1.61995 l 0.64702,5.66746 -5.76188,-2.96125 -3.30602,-5.62022 c 0,0 1.1146,1.89387 -4.54341,3.55633 -9.70552,0 -10.33838,-1.07682 -11.77414,-1.86082 -0.6187,-3.09821 -2.63065,-4.77484 -2.63065,-4.77484 h -9.71496 l -0.16058,-3.23989 -3.72635,1.45937 0.32588,-4.85984 h -6.64037 l 0.48646,-5.34158 h -4.20809 c 0,0 1.45937,-4.37339 12.14252,-10.84846 10.68316,-6.47506 11.82138,-7.77386 21.86222,-8.09502 10.04084,-0.32587 15.54297,1.29407 21.86218,3.88694 6.31922,2.59285 18.29644,6.47506 20.72873,8.26032 5.34157,-4.69455 13.44132,-9.39382 16.19476,-9.39382 0.48646,-1.13348 2.92346,-5.82331 8.48229,-8.31226 16.67649,-7.46688 51.06851,-16.0578 62.12004,-16.78512 14.73539,-0.97292 3.72635,-0.64703 18.46174,0.97291 14.73539,1.61995 25.58385,3.56105 32.87125,5.99333 5.94139,1.97889 11.82137,4.53397 16.19476,0.97292 2.045,-0.85484 5.57772,-0.63286 8.42089,-2.42756 14.49452,-11.8497 16.39784,-15.27852 20.60593,-19.81248 4.20809,-4.53397 9.51188,-11.7647 10.64537,-21.31908 1.13349,-9.55439 2.1064,-27.52967 -5.02042,-41.61802 -7.12683,-14.08836 -13.60189,-21.37577 -16.35533,-32.71068 -2.75344,-11.33491 -3.88693,-28.82374 -2.91402,-34.49119 0.97291,-5.66746 2.42756,-10.5273 3.2399,-14.40951 0.81233,-3.88221 4.69454,-6.96152 9.39381,-7.77386 4.69454,-0.80761 8.42089,0.64704 10.5273,2.26698 2.1064,1.61995 5.50215,2.96597 6.31449,4.85985 0.16057,0.80761 -0.64704,3.07459 3.88692,3.88692 4.53397,0.80762 7.58023,1.96472 7.58023,1.96472 0,0 7.38658,2.02613 1.46881,3.65079 -5.99333,0.97291 -9.69135,-0.33533 -11.47187,0.79817 -1.78053,1.13349 -3.4052,4.76066 -4.53869,5.2424 -1.13349,0.48173 -3.40047,0.16057 -5.66746,1.9411 -2.26698,1.78052 -4.53396,3.23989 -5.99333,6.80094 -1.45937,3.56106 -2.59286,7.44799 -1.61995,12.62899 0.97291,5.181 4.04751,14.89597 6.80095,20.40284 2.75344,5.50688 9.55439,19.26936 11.49549,22.50925 1.9411,3.2399 7.44798,13.92777 7.93444,25.42326 0.48645,11.4955 0.48645,20.8893 0,25.90972 -0.48646,5.02042 -5.11961,24.39368 -16.78039,40.58844 -3.85388,6.67816 -10.96181,15.06599 -11.65135,16.54425 -0.68482,1.47827 -1.42631,2.30477 -0.76038,3.613 2.18196,4.27421 6.07834,10.45174 6.94736,13.80026 1.08153,3.13599 3.30129,7.61801 3.40991,13.56411 z"
+            id="path1"
+            style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"/>
+    <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="10"
+            stroke-width="67.8322"
+            d="M 244.94984,348.69291 V 213.02847 c 0,-99.93947 80.94645,-180.885909 180.88591,-180.885909 99.93947,0 180.88592,80.946439 180.88592,180.885909 v 135.66444 m -425.0819,0 h 488.39197 c 39.7949,0 72.35436,32.55946 72.35436,72.35437 v 316.55035 c 0,59.69235 -48.83919,108.53154 -108.53156,108.53154 H 217.81695 c -59.69235,0 -108.53155,-48.83919 -108.53155,-108.53154 V 421.04728 c 0,-39.79491 32.55947,-72.35437 72.35437,-72.35437"
+            id="path1-7"
+            sodipodi:nodetypes="csssccsssssssc"
+            style="stroke:#ffffff;stroke-opacity:1;fill:#ffffff;fill-opacity:0"/>
+</svg>