Responsive design to buttons in main page

RappyBots · Feb 24, 2024 · 819436c · 819436c
1 parent 420ae4f
commit 819436c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git 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>
diff --git 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
@@ -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 -->