From 819436c87fb1ec915c202c3b0fe40a594ca4929a Mon Sep 17 00:00:00 2001
From: holybaechu <joonhoo0524@naver.com>
Date: Sat, 24 Feb 2024 10:18:25 +0900
Subject: [PATCH] Responsive design to buttons in main page

---
 src/components/Button.svelte | 2 +-
 src/components/Header.svelte | 4 ++--
 src/routes/+page.svelte      | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index c4ff999..f1d400d 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -4,6 +4,6 @@
     export let target = "";
 </script>
 
-<a target="{target}" on:click href="{href}" class="flex py-2 px-4 rounded-lg font-semibold text-center no-underline {className}">
+<a target="{target}" on:click href="{href}" class="flex py-2 px-4 rounded-lg font-semibold text-center no-underline items-center {className}">
     <slot/>
 </a>
\ No newline at end of file
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 653e65e..d7490ed 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -27,14 +27,14 @@
 
 			<!-- Invite Btn -->
 			<Button className="hidden md:flex bg-primary hover:bg-accent mr-5" target="_blank" href="/invite">
-				<div class="flex h-full">Invite<img src={Logo} class="h-[24px] object-contain" alt="Boost Notifications Logo"/>Boost Notifications</div>
+				<img src={Logo} class="h-[24px] object-contain" alt="Boost Notifications Logo"/> <div class="flex h-full items-center">Invite Boost Notifications</div>
 			</Button>
 		</div>
     </div>
 	
 	{#if hamburgerMenuOpen}
 		<div
-			class="font-semibold space-y-5 w-full hover:*:text-secondary *:block backdrop-blur-md p-5"
+			class="font-semibold space-y-5 w-full hover:*:text-secondary *:block backdrop-blur-md p-5 text-center"
 		>
 			{@html
 				document.getElementById("nav-links")?.innerHTML
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index de0d773..887cb6f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,10 +19,10 @@
 		Get notified when someone boosts your server with <strong class="text-white">flawless customization powered by Discord embeds</strong>, and reward them with custom roles
 	</div>
 
-	<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3 justify-center">
+	<div class="flex space-y-0 space-x-3 justify-center">
 		<!-- Invite Btn -->
-		<Button target="_blank" className="bg-primary hover:bg-accent" href="/invite">
-			<div class="flex h-full justify-center sm:justify-start">Invite<img src={Logo} class="h-[24px] object-contain" alt="Boost Notifications Logo"/>Boost Notifications</div>
+		<Button target="_blank" className="bg-primary hover:bg-accent sm:flex-row" href="/invite">
+			<img src={Logo} class="h-[24px] object-contain" alt="Boost Notifications Logo"/> <div class="flex h-full items-center">Invite Boost Notifications</div>
 		</Button>
 	
 		<!-- Support Btn -->