frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

📏 Alignment fixes

Browse Source
This commit is contained in:
Rishi Ghan
2026-02-25 20:15:29 -05:00
parent c005d118ac
commit 6f781af381
3 changed files with 63 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/client/components/Dashboard/Dashboard.tsx
View File

@@ -67,16 +67,19 @@ export const Dashboard = (): ReactElement => {
}); });
return ( return (
<div className="container mx-auto px-4 sm:px-6 lg:px-8"> <>
<PullList />
{recentComics && <RecentlyImported comics={recentComics?.data.docs} />} <div className="container mx-auto px-4 sm:px-6 lg:px-8">
{/* Wanted comics */} <PullList />
<WantedComicsList comics={wantedComics?.data?.docs} /> {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
{/* Library Statistics */} {/* Wanted comics */}
{statistics && <LibraryStatistics stats={statistics?.data} />} <WantedComicsList comics={wantedComics?.data?.docs} />
{/* Volume groups */} {/* Library Statistics */}
<VolumeGroups volumeGroups={volumeGroups?.data} /> {statistics && <LibraryStatistics stats={statistics?.data} />}
</div> {/* Volume groups */}
<VolumeGroups volumeGroups={volumeGroups?.data} />
</div>
</>
); );
}; };

2
src/client/components/Dashboard/PullList.tsx
View File

@@ -142,7 +142,7 @@ export const PullList = (): ReactElement => {
/> />
</div> </div>
</div> </div>
<div className="overflow-hidden mt-3 -mx-4 sm:-mx-8 lg:-mx-16 xl:-mx-20 2xl:-mx-24 pl-4 sm:pl-8 lg:pl-16 xl:pl-20 2xl:pl-24"> <div className="w-lvw -mr-4 sm:-mr-6 lg:-mr-8 mt-3">
{isSuccess && !isLoading && ( {isSuccess && !isLoading && (
<div className="overflow-hidden" ref={emblaRef}> <div className="overflow-hidden" ref={emblaRef}>
<div className="flex"> <div className="flex">

96
src/client/components/shared/Navbar2.tsx
View File

@@ -11,13 +11,14 @@ export const Navbar2 = (): ReactElement => {
}; };
return ( return (
<header className="bg-white dark:bg-gray-900 gap-8 px-5 py-5 h-18 border-b-2 border-gray-300 dark:border-slate-200"> <header className="bg-white dark:bg-gray-900 border-b-2 border-gray-300 dark:border-slate-200">
{/* Logo */} <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
<div className="mx-auto flex"> <div className="flex items-center gap-8">
<img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" /> {/* Logo */}
<img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
{/* Main Navigation */} {/* Main Navigation */}
<div className="flex flex-1 items-center justify-end md:justify-between"> <div className="flex flex-1 items-center justify-end md:justify-between">
<nav <nav
aria-label="ThreeTwo Main Navigation" aria-label="ThreeTwo Main Navigation"
className="hidden md:block" className="hidden md:block"
@@ -78,48 +79,49 @@ export const Navbar2 = (): ReactElement => {
</ul> </ul>
</nav> </nav>
{/* Right-most Nav */} {/* Right-most Nav */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<ul className="flex items-center gap-6 text-md"> <ul className="flex items-center gap-6 text-md">
{/* Settings Icon and text */} {/* Settings Icon and text */}
<li> <li>
<Link <Link
to="/settings" to="/settings"
className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75" className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
>
<span className="w-5 h-5">
<i className="icon-[solar--settings-outline] h-5 w-5"></i>
</span>
<span>Settings</span>
</Link>
</li>
<li>
{/* Light/Dark Mode toggle */}
<div className="flex items-center space-x-2">
<span className="text-gray-600 dark:text-white">Light</span>
<label
htmlFor="toggle"
className="relative inline-flex items-center"
> >
<input <span className="w-5 h-5">
type="checkbox" <i className="icon-[solar--settings-outline] h-5 w-5"></i>
id="toggle" </span>
className="sr-only" <span>Settings</span>
checked={darkMode} </Link>
onChange={toggleDarkMode} </li>
/>
<span className="bg-gray-300 w-10 h-6 rounded-full"></span> <li>
<span {/* Light/Dark Mode toggle */}
className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${ <div className="flex items-center space-x-2">
darkMode ? "translate-x-4" : "" <span className="text-gray-600 dark:text-white">Light</span>
}`} <label
></span> htmlFor="toggle"
</label> className="relative inline-flex items-center"
<span className="text-gray-600 dark:text-white">Dark</span> >
</div> <input
</li> type="checkbox"
</ul> id="toggle"
className="sr-only"
checked={darkMode}
onChange={toggleDarkMode}
/>
<span className="bg-gray-300 w-10 h-6 rounded-full"></span>
<span
className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${
darkMode ? "translate-x-4" : ""
}`}
></span>
</label>
<span className="text-gray-600 dark:text-white">Dark</span>
</div>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>