feat: style improvements and sorting relevant themes by name

src/interface/components/ThemeSelector.tsx

@@ -11,7 +11,7 @@ import SpinnerIcon from './LoadingSpinner';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import useVisibility from './useVisibility';
-import { debounce, throttle } from 'lodash';
+import { debounce } from 'lodash';
 import { Mutex } from '../../seqta/utils/mutex';
 
 interface ThemeSelectorProps {

src/interface/components/store/header.tsx

@@ -4,17 +4,21 @@ import logoDark from '../../../resources/icons/betterseqta-light-full.png';
 export default function header({ searchTerm, setSearchTerm }: { searchTerm: string, setSearchTerm: (value: string) => void }) {
   return <header className="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">
     <div className="flex items-center justify-between px-4 py-1">
-      <div className="cursor-pointer" onClick={() => setSearchTerm('')}>
+      <div className="flex gap-4 cursor-pointer place-items-center" onClick={() => setSearchTerm('')}>
         <img src={logo} className="h-14 dark:hidden" />
         <img src={logoDark} className="hidden h-14 dark:block" />
+
+        <div className="w-[1px] h-10 my-auto bg-zinc-400 dark:bg-zinc-600" />
+
+        <h1 className="text-xl font-semibold">Theme Store</h1>
       </div>
-      <div className="relative">
+      <div className="relative flex gap-2">
         <input
           type="text"
           placeholder="Search themes..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="px-4 py-2 pl-10 bg-gray-100 rounded-full dark:bg-zinc-700 dark:text-gray-100 focus:outline-none focus:border-transparent" />
+          className="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
         <svg
           className="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
           fill="none"

src/interface/pages/Store.tsx

@@ -254,10 +254,10 @@ const Store = () => {
                       <motion.div className="my-8 border-b border-zinc-200 dark:border-zinc-700" variants={textVariants} />
 
                       <motion.h3 className="mb-4 text-lg font-bold" variants={textVariants}>
-                        More Themes
+                        Similar Themes
                       </motion.h3>
                       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                        {gridThemes.filter(theme => theme.id !== displayTheme.id).map((theme, index) => (
+                        {gridThemes.filter(theme => theme.id !== displayTheme.id).sort((a, b) => a.name.localeCompare(displayTheme.name) - b.name.localeCompare(displayTheme.name)).map((theme, index) => (
                           <motion.div key={index} onClick={() => { setDisplayTheme(null); setDisplayTheme(theme); }} className='w-full cursor-pointer' variants={textVariants}>
                             <div
                               className="w-full overflow-clip rounded-xl transition-all duration-300 relative group/card flex flex-col hover:shadow-xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] h-auto"