egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on dark mode

Browse Source
This commit is contained in:
Gisbi
2023-08-02 19:53:55 +02:00
parent ffb1098a15
commit 64c417c1be
27 changed files with 162 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/collections/[id].tsx
+5 -5
View File
@@ -50,7 +50,7 @@ export default function Index() {
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full">
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
<div className="bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
<div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
{activeCollection && (
<div className="flex gap-3 items-center">
@@ -60,7 +60,7 @@ export default function Index() {
style={{ color: activeCollection?.color }}
className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold w-full py-1 break-words hyphens-auto">
<p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-300 font-bold w-full py-1 break-words hyphens-auto">
{activeCollection?.name}
</p>
</div>
@@ -116,7 +116,7 @@ export default function Index() {
) : null}
</div>
<div className="text-gray-600 flex justify-between items-end gap-5">
<div className="text-gray-600 dark:text-sky-400 flex justify-between items-end gap-5">
<p>{activeCollection?.description}</p>
<div className="flex items-center gap-2">
<div className="relative">
@@ -128,7 +128,7 @@ export default function Index() {
<FontAwesomeIcon
icon={faSort}
id="sort-dropdown"
className="w-5 h-5 text-gray-500"
className="w-5 h-5 text-gray-500 dark:text-sky-400"
/>
</div>
@@ -150,7 +150,7 @@ export default function Index() {
icon={faEllipsis}
id="expand-dropdown"
title="More"
className="w-5 h-5 text-gray-500"
className="w-5 h-5 text-gray-500 dark:text-sky-400"
/>
</div>
{expandDropdown ? (
pages/collections/index.tsx
+8 -8
View File
@@ -37,9 +37,9 @@ export default function Collections() {
<div className="flex gap-2">
<FontAwesomeIcon
icon={faFolder}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
All Collections
</p>
</div>
@@ -52,7 +52,7 @@ export default function Collections() {
<FontAwesomeIcon
icon={faEllipsis}
id="expand-dropdown"
className="w-5 h-5 text-gray-500"
className="w-5 h-5 text-gray-500 dark:text-sky-500"
/>
</div>
@@ -86,12 +86,12 @@ export default function Collections() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
id="sort-dropdown"
className="w-5 h-5 text-gray-500"
className="w-5 h-5 text-gray-500 dark:text-sky-500"
/>
</div>
@@ -111,7 +111,7 @@ export default function Collections() {
})}
<div
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
onClick={() => {
setModal({
modal: "COLLECTION",
@@ -120,12 +120,12 @@ export default function Collections() {
});
}}
>
<p className="text-sky-900 group-hover:opacity-0 duration-100">
<p className="text-sky-900 dark:text-sky-400 group-hover:opacity-0 duration-100">
New Collection
</p>
<FontAwesomeIcon
icon={faPlus}
className="w-8 h-8 text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
className="w-8 h-8 text-sky-500 dark:text-sky-300 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
/>
</div>
</div>