refactor: Update store page header styling and add search functionality

This commit is contained in:
sethburkart123
2024-09-15 08:55:26 +10:00
parent 0b9240a390
commit 92fd20c380
2 changed files with 29 additions and 29 deletions
@@ -12,7 +12,7 @@
};
</script>
<header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800/90 backdrop-blur-xl dark:text-white">
<header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-950/90 backdrop-blur-xl dark:text-white">
<div class="flex items-center justify-between px-4 py-1">
<div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
<img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
+4 -4
View File
@@ -63,12 +63,11 @@
));
</script>
<div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
<div class="w-screen h-screen bg-white pt-[4.25rem] {darkMode ? 'dark' : ''}">
<div class="h-full overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900 dark:text-white">
<Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} darkMode={darkMode} />
<div class="bg-zinc-200/50 dark:bg-zinc-900 dark:text-white pt-[4.25rem] h-full px-12 overflow-y-scroll">
<div class="px-12 pt-12">
<!-- Loading State -->
{#if loading}
<div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
@@ -95,3 +94,4 @@
{/if}
</div>
</div>
</div>