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
components/LinkCard.tsx
+7 -7
View File
@@ -106,7 +106,7 @@ export default function LinkCard({ link, count, className }: Props) {
return (
<div
className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
className={`bg-gradient-to-tr from-slate-200 dark:from-sky-800 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
>
{(permissions === true ||
permissions?.canUpdate ||
@@ -114,7 +114,7 @@ export default function LinkCard({ link, count, className }: Props) {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + link.id}
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
className="text-gray-500 dark:text-sky-400 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
@@ -156,8 +156,8 @@ export default function LinkCard({ link, count, className }: Props) {
<div className="flex justify-between gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between w-full">
<div className="flex items-baseline gap-1">
<p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
<p className="text-lg text-sky-700 font-bold truncate capitalize w-full pr-8">
<p className="text-sm text-sky-500 dark:text-sky-200 font-bold">{count + 1}.</p>
<p className="text-lg text-sky-700 dark:text-sky-200 font-bold truncate capitalize w-full pr-8">
{link.name || link.description}
</p>
</div>
@@ -168,16 +168,16 @@ export default function LinkCard({ link, count, className }: Props) {
className="w-4 h-4 mt-1 drop-shadow"
style={{ color: collection?.color }}
/>
<p className="text-sky-900 truncate capitalize">
<p className="text-sky-900 dark:text-sky-300 truncate capitalize">
{collection?.name}
</p>
</div>
</div>
<div className="flex items-center gap-1 w-full pr-20 text-gray-500">
<div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-sky-500">
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
<p className="truncate w-full">{shortendURL}</p>
</div>
<div className="flex items-center gap-1 text-gray-500">
<div className="flex items-center gap-1 text-gray-500 dark:text-sky-500">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p>{formattedDate}</p>
</div>