From 71cee2d20c8f415246b0f3937ab0bbc4f8ea2959 Mon Sep 17 00:00:00 2001
From: Lennart K <18233294+lennart-k@users.noreply.github.com>
Date: Fri, 4 Jul 2025 21:12:28 +0200
Subject: [PATCH] frontend: Add some iconography

---
 crates/frontend/public/assets/style.css             | 12 ++++++++++++
 crates/frontend/public/templates/icons/calendar.svg |  8 ++++++++
 crates/frontend/public/templates/icons/group.svg    |  8 ++++++++
 crates/frontend/public/templates/icons/user.svg     |  6 ++++++
 crates/frontend/public/templates/pages/user.html    |  6 +++---
 5 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 crates/frontend/public/templates/icons/calendar.svg
 create mode 100644 crates/frontend/public/templates/icons/group.svg
 create mode 100644 crates/frontend/public/templates/icons/user.svg

diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index 95ee5dc..69f988f 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -93,6 +93,12 @@ header {
       &.active {
         background: color-mix(in srgb, var(--background-darker), var(--dilute-color) 15%);
       }
+
+      svg.icon {
+        width: 1.3em;
+        vertical-align: bottom;
+        margin-right: 6px;
+      }
     }
   }
 
@@ -308,3 +314,9 @@ input[type="password"] {
     color: var(--text-on-background-color);
     margin: 2px;
 }
+
+svg.icon {
+  stroke-width: 2px;
+  color: var(--text-on-background-color);
+  stroke: var(--text-on-background-color);
+}
diff --git a/crates/frontend/public/templates/icons/calendar.svg b/crates/frontend/public/templates/icons/calendar.svg
new file mode 100644
index 0000000..85723fa
--- /dev/null
+++ b/crates/frontend/public/templates/icons/calendar.svg
@@ -0,0 +1,8 @@
+<!-- Adapted from https://iconoir.com/ -->
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
+  <path d="M15 4V2M15 4V6M15 4H10.5M3 10V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10H3Z" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M3 10V6C3 4.89543 3.89543 4 5 4H7" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M7 2V6" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M21 10V6C21 4.89543 20.1046 4 19 4H18.5" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>
diff --git a/crates/frontend/public/templates/icons/group.svg b/crates/frontend/public/templates/icons/group.svg
new file mode 100644
index 0000000..4798833
--- /dev/null
+++ b/crates/frontend/public/templates/icons/group.svg
@@ -0,0 +1,8 @@
+<!-- Adapted from https://iconoir.com/ -->
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
+  <path d="M1 20V19C1 15.134 4.13401 12 8 12V12C11.866 12 15 15.134 15 19V20" stroke-linecap="round"></path>
+  <path d="M13 14V14C13 11.2386 15.2386 9 18 9V9C20.7614 9 23 11.2386 23 14V14.5" stroke-linecap="round"></path>
+  <path d="M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M18 9C19.6569 9 21 7.65685 21 6C21 4.34315 19.6569 3 18 3C16.3431 3 15 4.34315 15 6C15 7.65685 16.3431 9 18 9Z" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>
diff --git a/crates/frontend/public/templates/icons/user.svg b/crates/frontend/public/templates/icons/user.svg
new file mode 100644
index 0000000..ceff411
--- /dev/null
+++ b/crates/frontend/public/templates/icons/user.svg
@@ -0,0 +1,6 @@
+<!-- Adapted from https://iconoir.com/ -->
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
+  <path d="M5 20V19C5 15.134 8.13401 12 12 12V12C15.866 12 19 15.134 19 19V20" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>
diff --git a/crates/frontend/public/templates/pages/user.html b/crates/frontend/public/templates/pages/user.html
index 926e571..8b9ea6c 100644
--- a/crates/frontend/public/templates/pages/user.html
+++ b/crates/frontend/public/templates/pages/user.html
@@ -7,9 +7,9 @@
 {% endblock %}
 {% block header_center %}
 <nav class="header-center">
-  <a href="/frontend/user/{{ user.id }}" {% if S::name() == "profile" %}class="active"{% endif %}>Profile</a>
-  <a href="/frontend/user/{{ user.id }}/calendar" {% if S::name() == "calendars" %}class="active"{% endif %}>Calendars</a>
-  <a href="/frontend/user/{{ user.id }}/addressbook" {% if S::name() == "addressbooks" %}class="active"{% endif %}>Addressbooks</a>
+  <a href="/frontend/user/{{ user.id }}" {% if S::name() == "profile" %}class="active"{% endif %}>{% include "icons/user.svg" %}Profile</a>
+  <a href="/frontend/user/{{ user.id }}/calendar" {% if S::name() == "calendars" %}class="active"{% endif %}>{% include "icons/calendar.svg" %}Calendars</a>
+  <a href="/frontend/user/{{ user.id }}/addressbook" {% if S::name() == "addressbooks" %}class="active"{% endif %}>{% include "icons/group.svg" %}Addressbooks</a>
 </nav>
 {% endblock %}