fix: improved font sizes and LibraryFilter UI enhancements

DesterLib · Jul 21, 2024 · 17ab2f6 · 17ab2f6
1 parent cbd760a
commit 17ab2f6
Show file tree

Hide file tree

Showing 10 changed files with 510 additions and 493 deletions.
diff --git a/src/index.css b/src/index.css
@@ -9,7 +9,7 @@
 
 @layer base {
   body {
-    @apply bg-[#0E0E0E] text-white overflow-hidden;
+    @apply bg-neutral-950 text-white overflow-hidden;
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     -webkit-user-select: none;

diff --git a/src/lib/components/Cards/LibraryCard.tsx b/src/lib/components/Cards/LibraryCard.tsx
@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { APP_PATHS } from "../../../config/config";
 
-const LibraryCard = ({ item, type = "movie" }: any) => {
+const LibraryCard = ({ item, type = "movie", menuArgs }: any) => {
   const [isHover, setIsHover] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [imageLoading, setImageLoading] = useState(true);

diff --git a/src/lib/components/Filters/LibraryFilter.tsx b/src/lib/components/Filters/LibraryFilter.tsx
@@ -21,7 +21,7 @@ const SelectMenu = ({ title }: any) => {
 
   return (
     <Listbox value={selectedPeople} onChange={setSelectedPeople} multiple>
-      <ListboxButton className="relative flex items-center justify-between w-full rounded-lg bg-white/5 py-1.5 pl-4 pr-2 h-10 text-left text-sm/6 text-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25">
+      <ListboxButton className="relative flex items-center justify-between w-full rounded-lg bg-neutral-800/80 py-1.5 pl-4 pr-2 h-10 text-left text-sm/6 text-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25 shadow-[inset_0_1px_0_0_#ffffff1a]">
         <div className="flex items-center space-x-2">
           <span>{title}</span> <Chip rounded>{selectedPeople.length}</Chip>
         </div>
@@ -31,7 +31,7 @@ const SelectMenu = ({ title }: any) => {
       </ListboxButton>
       <ListboxOptions
         anchor="bottom"
-        className="w-[var(--button-width)] z-50 mt-2 rounded-xl border border-white/5 bg-white/5 backdrop-blur-lg p-1 [--anchor-gap:var(--spacing-1)] focus:outline-none transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0"
+        className="w-[var(--button-width)] z-50 mt-2 rounded-xl border border-white/5 bg-neutral-800/80 backdrop-blur-lg p-1 [--anchor-gap:var(--spacing-1)] focus:outline-none transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0"
       >
         {people.map((person) => (
           <ListboxOption
@@ -52,25 +52,27 @@ const SelectMenu = ({ title }: any) => {
 
 const LibraryFilter = () => {
   return (
-    <div className="py-10 px-16 sticky top-0 bg-[#0E0E0E]/80 backdrop-blur-lg z-40">
-      <div className="space-y-4 p-2 pt-12">
-        <div className="text-xl font-bold flex items-center space-x-2">
+    <div className="pt-2 pb-2 px-16 sticky top-0 bg-neutral-950/80 backdrop-blur-lg z-40">
+      <div className="space-y-6 p-2 pt-2">
+        <div className="text-3xl font-bold flex items-center space-x-2 pt-1">
           <div>Filter</div>
           <div className="h-6 w-6 flex justify-center items-center">
             <HeroIcon iconName="AdjustmentsHorizontalIcon" size="small" />
           </div>
         </div>
-        <div className="flex space-x-2">
-          <SelectMenu title="Category" />
-          <SelectMenu title="Genre" />
-          <SelectMenu title="Type" />
-          <SelectMenu title="Rating" />
-        </div>
-        <div className="flex space-x-2">
-          <SelectMenu title="Popularity" />
-          <SelectMenu title="Year" />
-          <SelectMenu title="Airing Status" />
-          <SelectMenu title="Country of Origin" />
+        <div className="space-y-4">
+          <div className="flex space-x-4">
+            <SelectMenu title="Category" />
+            <SelectMenu title="Genre" />
+            <SelectMenu title="Type" />
+            <SelectMenu title="Rating" />
+          </div>
+          <div className="flex space-x-4">
+            <SelectMenu title="Popularity" />
+            <SelectMenu title="Year" />
+            <SelectMenu title="Airing Status" />
+            <SelectMenu title="Country of Origin" />
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/lib/components/Navigation/NavBar.tsx b/src/lib/components/Navigation/NavBar.tsx
@@ -37,15 +37,15 @@ const Search = ({ isSearch, setIsSearch }: SearchProps) => (
       {isSearch ? (
         <span className="flex space-x-2">
           <div className="h-6 w-6 flex justify-center items-center aspect-square">
-            <HeroIcon size="small" iconName="XMarkIcon" type="outline" />
+            <HeroIcon size="large" iconName="XMarkIcon" type="outline" />
           </div>
           <span>Close</span>
         </span>
       ) : (
         <span className="flex space-x-2">
           <div className="h-6 w-6 flex justify-center items-center aspect-square">
             <HeroIcon
-              size="small"
+              size="large"
               iconName="MagnifyingGlassIcon"
               type="outline"
             />
@@ -126,7 +126,7 @@ const NavBar = ({ routes }: NavbarProps) => {
               >
                 <div className="h-6 w-6 flex justify-center items-center aspect-square">
                   <HeroIcon
-                    size="small"
+                    size="large"
                     iconName="ChevronLeftIcon"
                     type="outline"
                   />

diff --git a/src/lib/components/Sliders/ContentSlider.tsx b/src/lib/components/Sliders/ContentSlider.tsx
@@ -11,7 +11,7 @@ const ContentSlider = ({ title, gradiant, type, data = [] }: any) => {
     <section className="w-full space-y-2 z-0">
       <div className="flex justify-between px-2">
         <div
-          className={`text-4xl/normal font-semibold ${
+          className={`text-2xl/normal font-semibold ${
             gradiant
               ? "bg-gradient-to-r from-blue-400 via-indigo-400 to-white text-transparent bg-clip-text animate-gradient"
               : "text-white"

diff --git a/src/lib/components/Sliders/LibrarySlider.tsx b/src/lib/components/Sliders/LibrarySlider.tsx
@@ -11,7 +11,7 @@ const LibrarySlider = ({ title, gradiant, type, data = [] }: any) => {
     <section className="w-full space-y-2 z-0">
       <div className="flex justify-between px-2">
         <div
-          className={`text-4xl/normal font-semibold ${
+          className={`text-2xl/normal font-semibold ${
             gradiant
               ? "bg-gradient-to-r from-blue-400 via-indigo-400 to-white text-transparent bg-clip-text animate-gradient"
               : "text-white"

diff --git a/src/lib/pages/LibraryPage.tsx b/src/lib/pages/LibraryPage.tsx
@@ -9,7 +9,7 @@ const LibraryPage = () => {
   return (
     <main className="w-full h-screen overflow-y-auto overscroll-none relative">
       <LibraryFilter />
-      <section className="space-y-10  h-full pb-6 px-16">
+      <section className="space-y-10 h-fit pb-6 px-16">
         <div className="flex">
           <LibrarySlider
             title="Bookmarks"

diff --git a/src/lib/stores/app.store.ts b/src/lib/stores/app.store.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface AppState {
+  navbarOpen: boolean;
+  openNavbar: (by: boolean) => void;
+  closeNavbar: (by: boolean) => void;
+}
+
+const useAppStore = create<AppState>()((set) => ({
+  navbarOpen: false,
+  openNavbar: () => set(() => ({ navbarOpen: true })),
+  closeNavbar: () => set(() => ({ navbarOpen: false })),
+}));
+
+export default useAppStore;