Fix style

.prettierrc

@@ -9,5 +9,7 @@
 			"files": "*.svelte",
 			"options": { "parser": "svelte" }
 		}
-	]
+	],
+	"tailwindAttributes": ["extraProps", "containerClasses"],
+	"tailwindFunctions": ["clsx"]
 }

src/lib/components/Init.svelte

@@ -19,7 +19,7 @@
 		<img src="/img/setup.svg" alt="Setup" class="max-w-[48px]" />
 		<h1 class="mt-4 text-2xl font-bold">Setup Required</h1>
 		<AppParagraph
-			extraProps="my-4 text-center max-w-xs"
+			extraProps="my-4 max-w-xs text-center"
 			text="You are yet to setup Holo Key Manager. Click “start setup” to begin."
 		/>
 	</div>

src/lib/components/Login.svelte

@@ -18,7 +18,7 @@
 		<img src="/img/holo_logo.svg" alt="Login" class="w-18 h-18" />
 		<h1 class="mt-4 text-2xl font-bold">Welcome Back</h1>
 		<AppParagraph
-			extraProps="my-4 text-center max-w-xs"
+			extraProps="my-4 max-w-xs text-center"
 			text="Please enter your password to login into Holo Key Manager"
 		/>
 		<InputPassword

src/routes/setup-keys/done/+page.svelte

@@ -6,11 +6,11 @@
 <Title>Setup Complete</Title>
 <div class="mb-4 w-full border-b-[0.5px] border-light-gray">
 	<AppParagraph
-		extraProps="mx-auto text-center max-w-xs"
+		extraProps="mx-auto max-w-xs text-center"
 		text="Your Holo Key Manager setup is now complete."
 	/>
 	<AppParagraph
-		extraProps="mx-auto text-center max-w-xs mb-4"
+		extraProps="mx-auto mb-4 max-w-xs text-center"
 		text="You can now login to the extension by clicking the extension icon."
 	/>
 </div>

src/routes/setup-keys/download/+page.svelte

@@ -51,7 +51,7 @@
 
 <Title>Save Seed Files and Keys</Title>
 <AppParagraph
-	extraProps="mx-auto text-center max-w-md"
+	extraProps="mx-auto max-w-md text-center"
 	text="All done, please save your files. Remember to back them up an external drive you store in a secure location."
 />
 

src/routes/setup-keys/generate-keys/+page.svelte

@@ -35,7 +35,7 @@
 	<img src="/img/download.svg" alt="Download" class="my-4 w-12" />
 	<Title>Generate Seed & Key files</Title>
 	<AppParagraph
-		extraProps="mx-auto text-center max-w-md"
+		extraProps="mx-auto max-w-md text-center"
 		text="Click the button below to generate and save your seed and key files. Please save this on your external hard drive or USB drive."
 	/>
 	<p class="mt-4 text-center text-base font-bold text-secondary">Context:</p>

src/routes/setup-pass/app-password/+page.svelte

@@ -16,7 +16,7 @@
 
 <Title>Set Key Manager Password</Title>
 <AppParagraph
-	extraProps="mx-auto text-center max-w-sm"
+	extraProps="mx-auto max-w-sm text-center"
 	text="This password secures your Key Manager extension, it would be requested each time you launch it."
 />
 <div class="w-full p-6">

src/routes/setup-pass/import-key/+page.svelte

@@ -18,14 +18,14 @@
 
 <Title>Import Your Device Seed</Title>
 <AppParagraph
-	extraProps="text-center my-4 max-w-xs"
+	extraProps="my-4 max-w-xs text-center"
 	text="Kindly import your device seed file below to recover your Key Manager"
 />
 <div class="w-full p-6 px-16">
 	<Dropzone
-		containerClasses={clsx('p-4 border rounded-lg flex flex-col justify-center items-center', {
-			'bg-white border-primary': file,
-			'bg-primary-background py-12 px-0 border-purple': !file
+		containerClasses={clsx('flex flex-col items-center justify-center rounded-lg border p-4', {
+			'border-primary bg-white': file,
+			'border-purple bg-primary-background px-0 py-12': !file
 		})}
 		inputElement={false}
 		on:drop={handleFilesSelect}

src/routes/setup-pass/start/+page.svelte

@@ -6,9 +6,9 @@
 <img src="/img/holo_logo.svg" alt="Holo Key Manager Logo" class="my-4 w-12" />
 <Title>Holo Key Manager</Title>
 <div class="mb-4 w-full border-b-[0.5px] border-light-gray">
-	<AppParagraph extraProps="mx-auto text-center max-w-xs" text="Welcome to Holo Key Manager." />
+	<AppParagraph extraProps="mx-auto max-w-xs text-center" text="Welcome to Holo Key Manager." />
 	<AppParagraph
-		extraProps="mx-auto text-center max-w-xs mb-4"
+		extraProps="mx-auto mb-4 max-w-xs text-center"
 		text="Let’s setup up your hApps key manager."
 	/>
 </div>

static/manifest.json

@@ -1,7 +1,7 @@
 {
 	"name": "Holo key manager",
 	"description": "A browser extension to manage holo keys",
-	"version": "0.0.24",
+	"version": "0.0.25",
 	"manifest_version": 3,
 	"browser_specific_settings": {
 		"gecko": {