mentaian uniformity in ui!

src/routes/+HomePage/Galery.svelte

@@ -1,17 +1,15 @@
 <script>
-	import tools from "./tools.json"
+	import tools from "./tools.json";
 </script>
 
 <div id="galarry" class="flex items-center justify-center p-3">
-    <div
+	<div class="flex max-w-[1300px] flex-wrap justify-center gap-5">
-		class="flex flex-wrap justify-center gap-5"
-	>
 		{#each tools as tool}
 			<a href={tool.link} class="flex justify-center">
 				<div class="card flex w-full max-w-xs flex-col items-center text-center">
 					<img
 						class="mb-2 w-full rounded border-2 border-white"
-						src='https://image.thum.io/get/fullpage/wait/5/maxAge/1/https://classroomstuff.xyz/{tool.link}'
+						src="https://image.thum.io/get/fullpage/wait/5/maxAge/1/https://classroomstuff.xyz/{tool.link}"
 						alt="how the tool {tool.name} looks like"
 					/>
 					<div

src/routes/announcer/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { PlayingAnnouncement ,CurrentText} from "./logic/announcerData.svelte.js";
+	import { PlayingAnnouncement, CurrentText } from "./logic/announcerData.svelte.js";
 
 	import List from "./components/CommonAnounceedTexts/list.svelte";
 	import Add from "./components/CustomText/add.svelte";
@@ -11,7 +11,7 @@
 </script>
 
 <div class="flex h-full flex-col items-center justify-center gap-5 p-5">
-	<div class="w-fit rounded-2xl bg-gray-900 p-3">
+	<div class="w-fit rounded border-2 p-3">
 		{#if PlayingAnnouncement.v == true}
 			<p class="text-center text-5xl">{CurrentText.v}</p>
 		{:else}

src/routes/announcer/components/CommonAnounceedTexts/delete.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <button
-	class="cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-120 hover:-rotate-15 hover:bg-gray-600"
+	class="btn dull"
 	aria-label="Delete announcement"
 	onclick={() => DeleteMostUsedAnnouncement(announcementID)}
 >

src/routes/announcer/components/CommonAnounceedTexts/text.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <button
-	class="w-full cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-105 hover:bg-gray-600"
+	class="btn w-full"
 	onclick={() => AnnounceUsingTTS(announcementText)}
 >
 	📢 {announcementText}

src/routes/announcer/components/CustomText/add.svelte

@@ -6,7 +6,7 @@
 {#if CurrentText.v}
 	<div class="flex w-full justify-center mt-2">
 		<button
-			class="text-1xl w-fit cursor-pointer self-center rounded-2xl bg-gray-800 p-2.5 transition-all hover:scale-110 hover:bg-gray-600"
+			class="btn dull"
 			onclick={() => {
 				AddMostUsedAnnouncement(CurrentText.v);
 				CurrentText.v = "";

src/routes/announcer/components/CustomText/input.svelte

@@ -5,5 +5,5 @@
 <input
 	bind:value={CurrentText.v}
 	placeholder="Type in here what you want to announce"
-	class="flex-1 rounded-2xl bg-gray-800 p-2.5 text-2xl"
+	class="input"
 />

src/routes/announcer/components/CustomText/play.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <button
-	class="cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-120 hover:-rotate-15 hover:bg-gray-600"
+	class="btn"
 	onclick={() => AnnounceUsingTTS(CurrentText.v)}
 >
 	📢</button

src/routes/tailwind.css

@@ -8,7 +8,7 @@
 }
 
 .btn {
-	@apply flex cursor-pointer items-center gap-1 rounded border-2 border-white bg-gray-700 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:bg-gray-500 hover:shadow-lg;
+	@apply flex cursor-pointer items-center gap-1 rounded border-2 border-gray-700 bg-gray-800 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:bg-gray-500 hover:border-white hover:shadow-lg;
 
 	&.dull {
 		@apply border-gray-700 bg-transparent text-gray-700 hover:bg-gray-700 hover:text-white;