Pricing in header on home

HarmlessKey · Nov 2, 2024 · 5fc8f58 · 5fc8f58
1 parent 1581a23
commit 5fc8f58
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/src/components/header/UserMenu.vue b/src/components/header/UserMenu.vue
@@ -81,7 +81,7 @@
 				</div>
 			</q-popup-proxy>
 		</div>
-		<button v-else class="btn btn-clear bg-neutral-6 user-btn">
+		<button v-else class="btn btn-clear btn-sm bg-neutral-6 user-btn">
 			<i class="fas fa-user-circle" />
 			<q-popup-proxy
 				:dark="$store.getters.theme === 'dark'"
@@ -91,18 +91,6 @@
 			>
 				<div class="bg-neutral-8">
 					<q-list>
-						<q-item
-							clickable
-							v-close-popup
-							href="https://discord.gg/dU59jgvcuq"
-							target="_blank"
-							rel="noopener"
-						>
-							<q-item-section avatar
-								><i aria-hidden="true" class="fab fa-discord"></i
-							></q-item-section>
-							<q-item-section>Join our Discord</q-item-section>
-						</q-item>
 						<q-item clickable v-close-popup @click="sign_in_dialog = true">
 							<q-item-section avatar
 								><i aria-hidden="true" class="fas fa-sign-in"></i
@@ -194,12 +182,9 @@ export default {
 		}
 	}
 	.user-btn {
-		font-size: 22px;
-		border-radius: 999px;
-		height: 38px;
-		width: 38px;
 		box-sizing: border-box;
-		padding: 0;
+		font-size: 22px;
+		padding: 0 8px;
 	}
 }
 </style>
diff --git a/src/components/home/Header.vue b/src/components/home/Header.vue
@@ -3,9 +3,25 @@
 		<div class="container">
 			<div class="d-flex items-center">
 				<img class="logo" :src="require(`../../assets/_img/logo/${logo}`)" alt="Shieldmaiden" />
-				<!-- <span class="dot-app">.app</span> -->
 			</div>
-			<UserMenu> Account </UserMenu>
+			<div class="d-flex justify-content-end items-center">
+				<router-link class="btn btn-sm btn-clear" to="/patreon">
+					Pricing
+					<i class="fas fa-coins ml-1" aria-hidden="true" />
+				</router-link>
+				<a
+					class="btn btn-sm btn-clear"
+					href="https://discord.gg/dU59jgvcuq"
+					target="_blank"
+					rel="noopener"
+				>
+					<i class="fab fa-discord" aria-hidden="true" />
+					<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">
+						Join our Discord
+					</q-tooltip>
+				</a>
+				<UserMenu />
+			</div>
 		</div>
 	</header>
 </template>
@@ -65,6 +81,9 @@ header {
 			opacity: 0.3;
 			font-size: 12px;
 		}
+		.btn {
+			box-sizing: border-box;
+		}
 	}
 
 	&.scrolled {