From 3ca9cf4415ed49c45d6bc4646414f823038a1780 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 1 Nov 2024 18:06:45 +1100
Subject: [PATCH] style(store): improve styling of store

---
 src/interface/components/store/Backgrounds.svelte | 3 +--
 src/interface/pages/store.svelte                  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/interface/components/store/Backgrounds.svelte b/src/interface/components/store/Backgrounds.svelte
index 43cc0287..8dbc4412 100644
--- a/src/interface/components/store/Backgrounds.svelte
+++ b/src/interface/components/store/Backgrounds.svelte
@@ -210,7 +210,7 @@
   <!-- Main Content -->
   <div class="flex-1 overflow-auto">
     <!-- Header -->
-    <div class="sticky top-0 z-10 p-4 bg-white border-b dark:bg-zinc-900 dark:border-zinc-700">
+    <div class="sticky top-0 z-10 p-4 border-b bg-[#F1F1F3] dark:bg-zinc-900 dark:border-zinc-700">
       <div class="flex items-center justify-between mb-4">
         <h1 class="text-2xl font-bold">Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}</h1>
         <div class="flex items-center gap-4">
@@ -219,7 +219,6 @@
             class="p-2 border rounded-lg border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
           >
             <option value="newest">Newest</option>
-            <option value="popular">Most Popular</option>
             <option value="name">Name</option>
           </select>
         </div>
diff --git a/src/interface/pages/store.svelte b/src/interface/pages/store.svelte
index a9579968..e685f1ae 100644
--- a/src/interface/pages/store.svelte
+++ b/src/interface/pages/store.svelte
@@ -98,7 +98,7 @@
   <div class="h-full overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900 dark:text-white pt-[4.25rem]">
     <Header {searchTerm} {setSearchTerm} {darkMode} {activeTab} {setActiveTab} />
     
-    <div class={`px-12 h-full ${activeTab === 'backgrounds' ? 'pt-0' : 'pt-6'}`}>
+    <div class={`px-12 h-full ${activeTab === 'backgrounds' ? 'pt-0' : 'pt-6 md:px-24 lg:px-48'}`}>
       <!-- Loading State -->
       {#if loading}
         <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">