From 0f5742aea0d6a4bac945120b4586853f3c1b7c31 Mon Sep 17 00:00:00 2001
From: Steve Paul <steveebenezer@protonmail.com>
Date: Tue, 19 Dec 2023 18:47:04 +0530
Subject: [PATCH] Move submit button to floating nav

---
 src/layouts/Layout.astro | 58 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a5c251a..eab66b5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -36,12 +36,15 @@ const { site, title, tagline } = Astro.props;
 				<p class="nu-c-fs-normal nu-u-text--secondary">{tagline}</p>
 			</div>
 		</header>
-		<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
+		<div class="floating-nav btn-group">
+			<a href="https://forms.gle/pzpG1cbxW6AA57uc9" target="_blank" class="submit-btn">Submit a new tool</a>
+			<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
 			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="var(--icon-secondary)" fill-opacity=".16" d="M8.57 17.93A5.98 5.98 0 0 1 6 13c0-3.31 2.69-6 6-6s6 2.69 6 6c0 2.05-1.03 3.86-2.6 4.94"/><path stroke="var(--icon-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" d="M12 4V2M3 13H1m22 0h-2m-1.222-7.778-1.414 1.414m-12.728 0L4.222 5.222M4 18h16M8 21h8m-7.43-3.07A5.98 5.98 0 0 1 6 13c0-3.31 2.69-6 6-6s6 2.69 6 6c0 2.05-1.03 3.86-2.6 4.94l-6.83-.01Z"/></svg>
 		  </button>
+		</div>
 		<slot />
 
-		<div class="footer">ᕦ(ò_óˇ)ᕤ <a href="https://forms.gle/pzpG1cbxW6AA57uc9" target="_blank" class="nu-u-link--subtle">Submit a new tool</a><br />Built with <a href="https://new-ui.com/?ref=riseofmachine" class="nu-u-link--subtle">New UI</a> </div>
+		<div class="footer">ᕦ(ò_óˇ)ᕤ<br />Built with <a href="https://new-ui.com/?ref=riseofmachine" class="nu-u-link--subtle">New UI</a> </div>
 	</body>
 </html>
 <style is:global>
@@ -56,6 +59,51 @@ const { site, title, tagline } = Astro.props;
 	section { margin-bottom: var(--spacing-10);}
 	p { margin-top: var(--spacing-00);}
 	.nu-u-link--subtle { color: var(--text-secondary) !important;}
+	.floating-nav {
+		position: fixed;
+		top: var(--spacing-07);
+		right: var(--spacing-07);
+		z-index: 999999;
+	}
+	.btn-group {
+		display: flex;
+		gap: var(--spacing-03);
+		align-items: center;
+	}
+	.submit-btn {
+		padding: 8px 24px;
+		border: 1px solid var(--border-muted);
+		outline: none;
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+		color: var(--text-secondary);
+    background-color: var(--background);
+    box-shadow: none;
+		border-radius: var(--spacing-03);
+
+    &:hover {
+      background-color: var(--background-secondary);
+      color: var(--text-primary);
+    }
+
+    &:active {
+      background-color: var(--background);
+      color: var(--text-secondary);
+    }
+
+    &.disabled {
+      background-color: var(--background);
+      color: var(--icon-secondary);
+      pointer-events: none;
+    }
+
+    &:focus {
+      background-color: var(--background);
+      outline: 1px solid var(--button-primary);
+      color: var(--icon-secondary);
+    }
+	}
 	.theme-toggle {
 		z-index: 999;
 		--icon-fill: var(--icon-secondary);
@@ -69,14 +117,12 @@ const { site, title, tagline } = Astro.props;
 		cursor: pointer;
 		touch-action: manipulation;
 		-webkit-tap-highlight-color: transparent;
-		position: fixed;
-		top: var(--spacing-07);
-		right: var(--spacing-07);
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border: 1px solid var(--border-muted);
+		/* border: 1px solid var(--border-muted); */
 		border-radius: var(--spacing-02);
+		/* background-color: var(--background); */
 
 		@nest [data-theme="dark"] & { --icon-fill: var(--icon-secondary); --icon-fill-hover: var(--icon-secondary);}
 	}