feat: Make Settings icon more consistent with the NavItems

Author: Ushie

src/layout/Navbar/NavButton.svelte

@@ -81,9 +81,6 @@
 	}
 
 	@media (max-width: 767px) {
-		li {
-			border-radius: 100px;
-		}
 		a {
 			padding: 0.75rem 1.25rem;
 			justify-content: left;

src/layout/Navbar/NavHost.svelte

@@ -91,9 +91,11 @@
 					</ul>
 				</div>
 				<div id="secondary-navigation">
-					<button on:click={() => (modals.settings = !modals.settings)} aria-label="Settings">
-						<Cog size="20px" color="var(--surface-six)" />
-					</button>
+					<span class:selected={modals.settings}>
+						<button on:click={() => (modals.settings = !modals.settings)} aria-label="Settings">
+							<Cog size="20px" color={modals.settings ? 'var(--primary)' : 'var(--surface-six)'} />
+						</button>
+					</span>
 				</div>
 			</div>
 		</div>
@@ -119,6 +121,23 @@
 <SessionExpiredModal bind:loginOpen={modals.login} />
 
 <style lang="scss">
+	#secondary-navigation {
+		display: flex;
+
+		span {
+			border-radius: 10px;
+			padding: 10px 16px;
+
+			&:hover {
+				background-color: var(--surface-three);
+			}
+
+			&.selected {
+				background-color: var(--tertiary);
+			}
+		}
+	}
+
 	#logo {
 		padding: 0.5rem;
 	}
@@ -149,13 +168,6 @@
 		background-color: var(--surface-eight);
 	}
 
-	#main-navigation,
-	#secondary-navigation {
-		align-items: center;
-		display: flex;
-		gap: 2rem;
-	}
-
 	img {
 		height: 22px;
 	}