many coloring changes and improvements

This commit is contained in:
Daniel
2023-08-11 01:11:02 -04:00
parent 1eb1467a02
commit 7da89a35e2
37 changed files with 189 additions and 178 deletions
+23 -19
View File
@@ -85,7 +85,7 @@ export default function Dashboard() {
icon={faChartSimple}
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 dark:text-sky-400 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
Dashboard
</p>
</div>
@@ -95,24 +95,28 @@ export default function Dashboard() {
<div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{numberOfLinks}</p>
<p className="text-sky-900 dark:text-sky-500 text-xl">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{numberOfLinks}
</p>
<p className="text-black dark:text-white text-xl">
{numberOfLinks === 1 ? "Link" : "Links"}
</p>
</div>
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-700 dark:text-sky-300">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{collections.length}
</p>
<p className="text-sky-900 dark:text-sky-500 text-xl">
<p className="text-black dark:text-white text-xl">
{collections.length === 1 ? "Collection" : "Collections"}
</p>
</div>
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{tags.length}</p>
<p className="text-sky-900 dark:text-sky-500 text-xl">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
{tags.length}
</p>
<p className="text-black dark:text-white text-xl">
{tags.length === 1 ? "Tag" : "Tags"}
</p>
</div>
@@ -131,13 +135,13 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-700 text-xl">Pinned Links</p>
<p className="text-black text-xl">Pinned Links</p>
<div className="text-sky-700 flex items-center gap-2">
<div className="text-black flex items-center gap-2">
{linkPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-sky-300 ${
className={`w-4 h-4 text-black ${
linkPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
@@ -164,10 +168,10 @@ export default function Dashboard() {
</Disclosure>
) : (
<div className="border border-solid border-sky-100 dark:border-sky-800 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
<p className="text-center text-2xl text-sky-700 dark:text-sky-300">
<p className="text-center text-2xl text-black dark:text-white">
No Pinned Links
</p>
<p className="text-center text-sky-900 dark:text-sky-500 text-sm">
<p className="text-center text-black dark:text-white text-sm">
You can Pin Links by clicking on the three dots on each Link and
clicking &quot;Pin to Dashboard.&quot;
</p>
@@ -182,13 +186,13 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-700 text-xl">Pinned Collections</p>
<p className="text-black text-xl">Pinned Collections</p>
<div className="text-sky-700 flex items-center gap-2">
<div className="text-black flex items-center gap-2">
{collectionPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-sky-300 ${
className={`w-4 h-4 text-black ${
collectionPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
@@ -219,13 +223,13 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-700 text-xl">Pinned Tags</p>
<p className="text-black text-xl">Pinned Tags</p>
<div className="text-sky-700 flex items-center gap-2">
<div className="text-black flex items-center gap-2">
{tagPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-sky-300 ${
className={`w-4 h-4 text-black ${
tagPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
@@ -244,7 +248,7 @@ export default function Dashboard() {
<Link
href={`/tags/${e.id}`}
key={i}
className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-sky-700"
className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-black"
>
{e.name}
</Link>