Update h1, h2 classes and add empty search

ddxv · Oct 20, 2023 · 9547513 · 9547513
1 parent 908a316
commit 9547513
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -32,6 +32,11 @@
 				</TabAnchor>
 			</TabGroup>
 			<svelte:fragment slot="trail">
+				<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+					<div class="input-group-shim">Search</div>
+					<input type="search" placeholder=" Apps..." />
+					<button class="variant-filled-secondary">Submit</button>
+				</div>
 				<TabGroup
 					justify="justify-end"
 					active="variant-filled-primary"

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -28,21 +28,22 @@
 
 		<!-- --- -->
 	</svelte:fragment>
-	<h1>
+	<h1 class="h1">
 		Welcome to My Apps Dash. Feel free to look around, if you have any questions just reach out or
 		ping me on GitHub.
 	</h1>
 	<p>
-		Visit <a href="https://github.com/ddxv/app-store-dash">github.com/ddxv/app-store-dash</a> to read
-		the documentation
+		Visit <a class="anchor" href="https://github.com/ddxv/app-store-dash"
+			>github.com/ddxv/app-store-dash</a
+		> to read the documentation
 	</p>
 
 	<div>
 		{#if data}
 			{#each Object.entries(data) as [title, collection]}
-				<h1>{title}</h1>
+				<h1 class="h1">{title}</h1>
 				{#each Object.entries(collection) as [appstore, apps]}
-					<h2>{appstore}</h2>
+					<h2 class="h2">{appstore}</h2>
 					<div class="app-grid">
 						{#each apps as app}
 							<div class="app-item">

diff --git a/frontend/src/routes/apps/[id]/+page.svelte b/frontend/src/routes/apps/[id]/+page.svelte
@@ -13,7 +13,7 @@
 			<img src={data.myapp.icon_url_512} alt={data.myapp.name} class="app-icon" />
 		{/if}
 		<div>
-			<h1>{data.myapp.name}</h1>
+			<h1 class="h1">{data.myapp.name}</h1>
 			<Rating total={5} size={50} rating={data.myapp.rating} />
 		</div>
 	</div>
@@ -49,7 +49,7 @@
 	</div>
 	<br />
 
-	<h2>Additional Information</h2>
+	<h2 class="h2">Additional Information</h2>
 	<div class="additional-info">
 		<p>Category: {data.myapp.category}</p>
 		<p>Free: {data.myapp.free}</p>
@@ -67,7 +67,7 @@
 		<p>First Crawled: {data.myapp.created_at}</p>
 	</div>
 
-	<h2>Additional Information</h2>
+	<h2 class="h2">Additional Information</h2>
 	<div class="additional-info">
 		<!-- ... display additional information details -->
 	</div>