form styles

4 files changed, 31 insertions, 13 deletions

diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index e4c490d6..83b1be54 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -43,7 +43,7 @@
 							name="email"
 							type="email"
 							required
-							class="bg-primary p-4 rounded-2xl w-full"
+							class="bg-primary"
 							bind:value={email}
 							autofocus
 						/>
@@ -56,7 +56,7 @@
 						name="username"
 						type="text"
 						required
-						class="bg-primary p-4 rounded-2xl w-full"
+						class="bg-primary"
 						bind:value={username}
 						autofocus={pageID === 'signIn'}
 					/>
@@ -69,7 +69,7 @@
 							name="password"
 							type="text"
 							required
-							class="block bg-primary p-4 rounded-2xl w-full"
+							class="bg-primary"
 							bind:value={password}
 						/>
 					{:else}
@@ -77,7 +77,7 @@
 							name="password"
 							type="password"
 							required
-							class="block bg-primary p-4 rounded-2xl w-full"
+							class="bg-primary"
 							bind:value={password}
 						/>
 					{/if}
@@ -97,7 +97,7 @@
 						<input
 							name="token"
 							type="text"
-							class="bg-primary p-4 rounded-2xl w-full"
+							class="bg-primary"
 							bind:value={twofa}
 							autofocus={pageID === 'signIn'}
 						/>
@@ -133,3 +133,9 @@
 		</div>
 	</div>
 </div>
+
+<style>
+  input {
+    @apply border-none;
+  } 
+  </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ed26835d..8163bd70 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -55,4 +55,19 @@
 	button.primary {
 		@apply rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:bg-primary;
 	}
+
+	input {
+		@apply block border rounded-2xl px-5 py-4 w-full outline-none;
+	}
+
+	select {
+		@apply border rounded-2xl py-4 px-5;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		background: transparent;
+		background-image: url('/icons/down.svg');
+		background-repeat: no-repeat;
+		background-position-x: 100%;
+		background-position-y: 0.7em;
+	}
 </style>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 68af0841..ff718637 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -34,7 +34,6 @@
 	<input
 		type="email"
 		name="email"
-		class="block border rounded-xl p-3 w-full"
 		bind:value={$user.email}
 	/>
 </div>
@@ -45,16 +44,15 @@
 		type="text"
 		name="username"
 		bind:value={$user.username}
-		class="block border rounded-xl p-3 w-full"
 	/>
 </div>
 
 <div class="relative">
 	<label for="password" class="block font-bold block mb-1">{$t('user.settings.newPassword')}</label>
 	{#if revealPassword}
-		<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
+		<input type="text" bind:value={password} />
 	{:else}
-		<input type="password" class="block border rounded-xl p-3 w-full" bind:value={password} />
+		<input type="password" bind:value={password} />
 	{/if}
 	<button
 		type="button"
@@ -70,7 +68,6 @@
 	<input
 		type="text"
 		name="address"
-		class="block border rounded-xl p-3 w-full"
 		bind:value={$user.address}
 	/>
 </div>
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index b9584b97..a76d4bc2 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -193,7 +193,7 @@
 						min="0"
 						max="100"
 						value={tipPercent}
-						class="px-2"
+						class="px-2 py-0"
 						on:input={handleSlide}
 					/>
 
@@ -212,7 +212,7 @@
 
 						<div class="relative">
 							<span
-								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+								class="absolute top-[18px] left-5 font-semibold {!customTipAmount
 									? 'opacity-50'
 									: 'opacity-100'}">$</span
 							>
@@ -221,7 +221,7 @@
 								type="number"
 								min="0"
 								on:input={(e) => handleCustomTipAmount(e)}
-								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+								class="pl-10"
 								placeholder="Other"
 							/>
 							<button