From a8a1793faf8d9deeb415cd1e91de265673bef721 Mon Sep 17 00:00:00 2001
From: Catrina <kishka@mymacmail.com>
Date: Sun, 25 Jan 2026 07:57:48 -0500
Subject: [PATCH] > Changed add-friend-page header to use the optimized one I
 made > Added a new 'undo' svg to use as a 'go back' button > Added a new
 'user-multiple' svg to use instead of the emoji on home-page > Changed emoji
 on home-page to be the new svg > Changed svgs on signup page to new ones(old
 ones deleted in a previous commit)

---
 app/src/add-friend-page/add-friend.css  | 30 +++++++++++++
 app/src/add-friend-page/add-friend.html | 47 +++++++++++++++----
 app/src/assets/user-multiple.svg        |  4 ++
 app/src/home-page/home.html             | 60 ++++++++++++++++++++-----
 app/src/signup-page/signup.css          |  8 ++--
 app/src/signup-page/signup.html         |  4 +-
 6 files changed, 129 insertions(+), 24 deletions(-)
 create mode 100644 app/src/assets/user-multiple.svg

diff --git a/app/src/add-friend-page/add-friend.css b/app/src/add-friend-page/add-friend.css
index f49144f..e0f21b5 100644
--- a/app/src/add-friend-page/add-friend.css
+++ b/app/src/add-friend-page/add-friend.css
@@ -6,6 +6,36 @@ body {
 	justify-content: center;
 }
 
+.container {
+	display: flex;
+}
+
+.container div {
+	flex: 1;
+	text-align: center;
+	margin: auto;
+}
+
+.contentHeader {
+	text-align: center;
+	border-bottom: 1px solid #e5e7eb;
+	padding-bottom: 10px;
+}
+
+.icon-btn {
+	border: none;
+	background: none;
+	cursor: pointer;
+	padding: 0.4rem;
+	font-size: 1rem;
+}
+
+.svg-icon {
+	width: 25px;
+	height: 25px;
+	margin: auto;
+}
+
 .app {
 	width: 100%;
 	background: #f9fafb;
diff --git a/app/src/add-friend-page/add-friend.html b/app/src/add-friend-page/add-friend.html
index 2dd427d..401afa0 100644
--- a/app/src/add-friend-page/add-friend.html
+++ b/app/src/add-friend-page/add-friend.html
@@ -8,10 +8,20 @@
 
 	<body>
 		<div class="app" x-data="addFriendPageState">
-			<header>
-				<button class="icon-btn" @click="goBack()">←</button>
-				<h1>Add Friend</h1>
-				<span style="width: 32px"></span>
+			<header class="container">
+				<div style="text-align: left">
+					<button class="icon-btn" @click="goto('home')">
+						<img
+							class="svg-icon"
+							src="/src/assets/undo.svg"
+							alt="Go Back Icon"
+						/>
+					</button>
+				</div>
+				<div style="text-align: center">
+					<strong>Add friend</strong>
+				</div>
+				<div style="text-align: right"></div>
 			</header>
 
 			<div class="content">
@@ -28,15 +38,36 @@
 
 				<div class="card">
 					<label for="friendUserId">Friend user id</label>
-					<input id="friendUserId" type="text" x-model="friend_id" placeholder="Enter their user id" />
+					<input
+						id="friendUserId"
+						type="text"
+						x-model="friend_id"
+						placeholder="Enter their user id"
+					/>
 
 					<label for="friendKey">Friend key</label>
-					<input id="friendKey" type="text" x-model="friend_rand_key" placeholder="Enter their key" />
+					<input
+						id="friendKey"
+						type="text"
+						x-model="friend_rand_key"
+						placeholder="Enter their key"
+					/>
 
 					<label for="friendName">Friend Name</label>
-					<input id="friendName" type="text" x-model="friend_name" placeholder="Enter their name" />
+					<input
+						id="friendName"
+						type="text"
+						x-model="friend_name"
+						placeholder="Enter their name"
+					/>
 
-					<button class="primary" x-bind:disabled="is_doing_stuff" @click="sendFriendRequest()">Send friend request</button>
+					<button
+						class="primary"
+						x-bind:disabled="is_doing_stuff"
+						@click="sendFriendRequest()"
+					>
+						Send friend request
+					</button>
 				</div>
 			</div>
 		</div>
diff --git a/app/src/assets/user-multiple.svg b/app/src/assets/user-multiple.svg
new file mode 100644
index 0000000..5105c20
--- /dev/null
+++ b/app/src/assets/user-multiple.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 18H18.7687C19.2035 18 19.4209 18 19.5817 17.9473C20.1489 17.7612 20.5308 17.1231 20.498 16.4163C20.4887 16.216 20.42 15.9676 20.2825 15.4708C20.168 15.0574 20.1108 14.8507 20.0324 14.6767C19.761 14.0746 19.2766 13.6542 18.7165 13.5346C18.5546 13.5 18.3737 13.5 18.0118 13.5L15.5 13.5346M14.6899 11.6996C15.0858 11.892 15.5303 12 16 12C17.6569 12 19 10.6569 19 9C19 7.34315 17.6569 6 16 6C15.7295 6 15.4674 6.0358 15.2181 6.10291M13.5 8C13.5 10.2091 11.7091 12 9.5 12C7.29086 12 5.5 10.2091 5.5 8C5.5 5.79086 7.29086 4 9.5 4C11.7091 4 13.5 5.79086 13.5 8ZM6.81765 14H12.1824C12.6649 14 12.9061 14 13.1219 14.0461C13.8688 14.2056 14.5147 14.7661 14.8765 15.569C14.9811 15.8009 15.0574 16.0765 15.21 16.6278C15.3933 17.2901 15.485 17.6213 15.4974 17.8884C15.5411 18.8308 15.0318 19.6817 14.2756 19.9297C14.0613 20 13.7714 20 13.1916 20H5.80844C5.22864 20 4.93875 20 4.72441 19.9297C3.96818 19.6817 3.45888 18.8308 3.50261 17.8884C3.51501 17.6213 3.60668 17.2901 3.79003 16.6278C3.94262 16.0765 4.01891 15.8009 4.12346 15.569C4.4853 14.7661 5.13116 14.2056 5.87806 14.0461C6.09387 14 6.33513 14 6.81765 14Z" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/app/src/home-page/home.html b/app/src/home-page/home.html
index c79f4b4..370192c 100644
--- a/app/src/home-page/home.html
+++ b/app/src/home-page/home.html
@@ -15,13 +15,25 @@
 					<!-- <@azom.dev> somehow the "+" emoji does not display in the code for me, but it's temporary anyways -->
 					<!-- <@kishka.cc> we will need to replace these with svgs, as it's the font that messes up the emoji -->
 					<button class="icon-btn" @click="updateServer()">
-						<img class="svg-icon" src="/src/assets/paperplane.svg" alt="Paperplane Flying Icon" />
+						<img
+							class="svg-icon"
+							src="/src/assets/paperplane.svg"
+							alt="Paperplane Flying Icon"
+						/>
 					</button>
 					<button class="icon-btn" @click="addFriend()">
-						<img class="svg-icon" src="/src/assets/user+.svg" alt="Friend Add Icon" />
+						<img
+							class="svg-icon"
+							src="/src/assets/user+.svg"
+							alt="Friend Add Icon"
+						/>
 					</button>
 					<button class="icon-btn" @click="openSettings()">
-						<img class="svg-icon" src="/src/assets/setting.svg" alt="Settings Icon" />
+						<img
+							class="svg-icon"
+							src="/src/assets/setting.svg"
+							alt="Settings Icon"
+						/>
 					</button>
 				</div>
 			</header>
@@ -37,7 +49,9 @@
 			<div class="content">
 				<div class="friends-header">
 					<h2 style="font-size: 1rem; margin: 0">Friends</h2>
-					<span style="color: #6b7280; font-size: 0.9rem">(<span x-text="friends.length"></span>)</span>
+					<span style="color: #6b7280; font-size: 0.9rem"
+						>(<span x-text="friends.length"></span>)</span
+					>
 				</div>
 				<!--TODO idk why but sometimes when i launch the app I see the stuff when you have no friends for a split second before I see them appear, even tho we get them in init -->
 				<template x-if="friends.length > 0">
@@ -46,10 +60,27 @@
 							<div class="friend-card">
 								<strong x-text="friend.name"></strong>
 								<div class="friend-actions">
-									<button class="view-btn" @click="viewLocation(friend.id)"><img class="svg-icon" src="/src/assets/pin-location.svg" alt="Pin Icon" />View</button>
+									<button
+										class="view-btn"
+										@click="viewLocation(friend.id)"
+									>
+										<img
+											class="svg-icon"
+											src="/src/assets/pin-location.svg"
+											alt="Pin Icon"
+										/>View
+									</button>
 
-									<button class="menu-icon" style="margin-bottom: auto" @click="friendOptions(friend.id)">
-										<img class="svg-icon" src="/src/assets/ellipsis-vertical.svg" alt="Options menu" />
+									<button
+										class="menu-icon"
+										style="margin-bottom: auto"
+										@click="friendOptions(friend.id)"
+									>
+										<img
+											class="svg-icon"
+											src="/src/assets/ellipsis-vertical.svg"
+											alt="Multiple Users Icon"
+										/>
 									</button>
 								</div>
 							</div>
@@ -59,7 +90,11 @@
 
 				<template x-if="friends.length === 0">
 					<div class="empty-state">
-						<div style="font-size: 2rem">👥</div>
+						<img
+							class="svg-icon"
+							src="/src/assets/user-multiple.svg"
+							alt="Go Back Icon"
+						/>
 						<h3>No friends yet</h3>
 						<p>Add friends to start sharing locations</p>
 						<button @click="addFriend()">Add Friend</button>
@@ -72,9 +107,14 @@
 				<div class="content" style="text-align: center">
 					<h4>Admin Controls:</h4>
 					<div style="display: flex; justify-content: center">
-						<button @click="generateSignupKey()">Generate signup key</button>
+						<button @click="generateSignupKey()">
+							Generate signup key
+						</button>
 					</div>
-					<div style="display: flex; justify-content: center" x-show="newSignupKey != ''">
+					<div
+						style="display: flex; justify-content: center"
+						x-show="newSignupKey != ''"
+					>
 						<p>New signup key: <a x-text="newSignupKey"></a></p>
 					</div>
 				</div>
diff --git a/app/src/signup-page/signup.css b/app/src/signup-page/signup.css
index e896293..a4346eb 100644
--- a/app/src/signup-page/signup.css
+++ b/app/src/signup-page/signup.css
@@ -34,8 +34,8 @@ body {
 }
 
 .icon-circle img {
-	width: 32px;
-	height: 32px;
+	width: 64px;
+	height: 64px;
 }
 
 h1 {
@@ -107,8 +107,8 @@ button {
 }
 
 .btn-qr img {
-	width: 16px;
-	height: 16px;
+	width: 20px;
+	height: 20px;
 }
 
 .hint {
diff --git a/app/src/signup-page/signup.html b/app/src/signup-page/signup.html
index c6467e6..1961e3f 100644
--- a/app/src/signup-page/signup.html
+++ b/app/src/signup-page/signup.html
@@ -10,7 +10,7 @@
 		<div class="card">
 			<div class="header">
 				<div class="icon-circle">
-					<img src="/src/assets/pin.svg" alt="Pin Icon" />
+					<img src="/src/assets/pin-location.svg" alt="Pin Icon" />
 				</div>
 				<h1>PrivacyPin</h1>
 				<p>Connect with a server to start sharing</p>
@@ -53,7 +53,7 @@
 					class="btn-qr"
 					@click="await scanQR()"
 				>
-					<img src="/src/assets/qr.svg" alt="QR Icon" />
+					<img src="/src/assets/scan-qr.svg" alt="QR Icon" />
 					Scan QR Code
 				</button>
 
-- 
2.51.2