confirmed dark color

This commit is contained in:
Daniel
2023-08-11 00:44:44 -04:00
parent 5d016068c7
commit 1eb1467a02
15 changed files with 66 additions and 51 deletions
+15 -11
View File
@@ -51,7 +51,7 @@ export default function Sidebar({ className }: { className?: string }) {
return (
<div
className={`bg-gray-100 dark:bg-blue-925 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-blue-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
className={`bg-gray-100 dark:bg-sky-900 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-sky-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
>
<div className="flex justify-center gap-2 mt-2">
<Link
@@ -59,16 +59,17 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === "/dashboard"
? "bg-sky-200 dark:bg-sky-600"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
>
<FontAwesomeIcon
icon={faChartSimple}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
/>
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">Dashboard</p>
<p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
Dashboard
</p>
</Link>
<Link
@@ -76,29 +77,32 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === "/links"
? "bg-sky-200 dark:bg-sky-600"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
>
<FontAwesomeIcon
icon={faLink}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
/>
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">Links</p>
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
Links
</p>
</Link>
<Link
href="/collections"
className={`${
active === "/collections" ? "bg-sky-200 dark:bg-sky-600" : "hover:bg-slate-200 hover:dark:bg-sky-800"
active === "/collections"
? "bg-sky-200 dark:bg-sky-600"
: "hover:bg-slate-200 hover:dark:bg-sky-800"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
>
<FontAwesomeIcon
icon={faFolder}
className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
/>
<p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
Collections
</p>
@@ -140,7 +144,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === `/collections/${e.id}`
? "bg-sky-200 dark:bg-sky-700 "
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-blue-925"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-sky-900"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
>
<FontAwesomeIcon
@@ -200,7 +204,7 @@ export default function Sidebar({ className }: { className?: string }) {
className={`${
active === `/tags/${e.id}`
? "bg-sky-200 dark:bg-sky-700"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
: "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
>
<FontAwesomeIcon