From 6eb7d9e1b85683fbf8c5ebb9dac996842dc709ca Mon Sep 17 00:00:00 2001
From: gravel <gravel@noreply.codeberg.org>
Date: Sun, 14 Jan 2024 23:28:12 +0000
Subject: [PATCH] Update modal share button

---
 output/index.css                | 33 ++++++++++++++++++++-------------
 sites/+components/qr-modals.php | 15 ++++++++-------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/output/index.css b/output/index.css
index 6c71ee74..329022c7 100644
--- a/output/index.css
+++ b/output/index.css
@@ -185,11 +185,11 @@ header {
 	align-items: flex-start;
 	padding-top: var(--body-margin);
 	padding-inline: var(--body-margin);
-	--icon-size: 2.5rem;
+	--feather-icon-size: 2.5rem;
 }
 
 header .feather-icon, #search .feather-icon {
-	font-size: var(--icon-size);
+	font-size: var(--feather-icon-size);
 }
 
 #header-start, #header-end {
@@ -225,8 +225,8 @@ html:not(.js) :is(#search-container, #search-container *) {
 #search-action-post { order: 2; }
 
 #search-bar {
-	--icon-size: 2rem;
-	height: var(--icon-size);
+	--feather-icon-size: 2rem;
+	height: var(--feather-icon-size);
 	width: 15rem;
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
@@ -575,7 +575,8 @@ footer, aside {
 	height: var(var(--modal-height));
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
-	--icon-size: 4rem;
+	--room-icon-size: 4rem;
+	--feather-icon-size: 2rem;
 }
 
 #details-modal-contents {
@@ -637,24 +638,30 @@ footer, aside {
 }
 
 #details-modal-title {
-	margin-bottom: calc( var(--icon-size) * 0.1 );
+	margin-bottom: calc( var(--room-icon-size) * 0.1 );
 }
 
 #details-modal-community-icon-wrapper {
 	position: relative;
 	box-sizing: border-box;
-	--strip: calc( var(--icon-size) / 25 );
-	--padding-size: calc( var(--icon-size) - 1 * var(--strip) );
-	top: calc(var(--icon-size) * 0.5 - 0.6rem);
-	width: var(--icon-size);
-	height: var(--icon-size);
-	margin-right: calc( var(--icon-size) * 0.3 );
-	/* box-shadow: var(--primary-color) 0 0 calc( var(--icon-size) / 10 ); */
+	--strip: calc( var(--room-icon-size) / 25 );
+	--padding-size: calc( var(--room-icon-size) - 1 * var(--strip) );
+	top: calc(var(--room-icon-size) * 0.5 - 0.6rem);
+	width: var(--room-icon-size);
+	height: var(--room-icon-size);
+	margin-right: calc( var(--room-icon-size) * 0.3 );
+	/* box-shadow: var(--primary-color) 0 0 calc( var(--room-icon-size) / 10 ); */
 	border: var(--primary-color) var(--strip) solid;
 	padding: var(--strip);
 	border-radius: 100%;
 }
 
+#details-modal-copy-room-details-link {
+	position: relative;
+	margin-left: 0.5em;
+	top: calc( var(--feather-icon-size) * 0.5 - 1ex );
+}
+
 #details-modal-community-icon-wrapper:is([data-has-icon="false"], [data-icon-safety="-1"]) {
 	display: none;
 }
diff --git a/sites/+components/qr-modals.php b/sites/+components/qr-modals.php
index 29cf28c1..aa02df45 100644
--- a/sites/+components/qr-modals.php
+++ b/sites/+components/qr-modals.php
@@ -31,6 +31,14 @@
 							title="Open preview in new tab"
 							href="#"
 						></a>
+						<img
+							id="details-modal-copy-room-details-link"
+							class="feather-icon clickable enter-clicks"
+							src="/assets/icons/share-2.svg"
+							alt="Share"
+							title="Share this Community"
+							tabindex="0"
+						>
 					</div>
 					<p id="details-modal-description">
 						<span id="details-modal-description-inner" data-hydrate-with="description"></span>
@@ -110,13 +118,6 @@
 				>
 				Copy ID
 				</button>
-				<button
-					id="details-modal-copy-room-details-link"
-					class="themed-button"
-					title="Copy link to show details about this Community"
-				>
-					Share
-				</button>
 				<gap></gap>
 				<div id="details-modal-pane-selection" class="hidden">
 					<button