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-06 16:13:45 +02:00
parent 64c417c1be
commit 93ebc09faf
10 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Modal/Link/LinkDetails.tsx
+15 -15
View File
@@ -131,7 +131,7 @@ export default function LinkDetails({ link }: Props) {
height={42}
alt=""
id={"favicon-" + link.id}
className="select-none mt-2 rounded-md shadow border-[3px] border-white bg-white aspect-square"
className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-sky-800 bg-white dark:bg-blue-950 aspect-square"
draggable="false"
onLoad={(e) => {
try {
@@ -151,14 +151,14 @@ export default function LinkDetails({ link }: Props) {
/>
)}
<div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
<p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
<p className="text-2xl text-sky-700 dark:text-sky-300 capitalize break-words hyphens-auto">
{link.name}
</p>
<Link
href={link.url}
target="_blank"
rel="noreferrer"
className="text-sm text-gray-500 break-all hover:underline cursor-pointer w-fit"
className="text-sm text-gray-500 dark:text-sky-400 break-all hover:underline cursor-pointer w-fit"
>
{url ? url.host : link.url}
</Link>
@@ -176,7 +176,7 @@ export default function LinkDetails({ link }: Props) {
/>
<p
title={collection?.name}
className="text-sky-900 text-lg truncate max-w-[12rem]"
className="text-sky-900 dark:text-sky-500 text-lg truncate max-w-[12rem]"
>
{collection?.name}
</p>
@@ -194,19 +194,19 @@ export default function LinkDetails({ link }: Props) {
</div>
{link.description && (
<>
<div className="text-gray-500 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
<div className="text-gray-500 dark:text-sky-400 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
{link.description}
</div>
</>
)}
<div className="flex justify-between items-center">
<div className="flex items-center gap-1 text-gray-500">
<div className="flex items-center gap-1 text-gray-500 dark:text-sky-400">
<FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
<p className=" text-gray-500">Archived Formats:</p>
<p>Archived Formats:</p>
</div>
<div
className="flex items-center gap-1 text-gray-500"
className="flex items-center gap-1 text-gray-500 dark:text-sky-400"
title={"Created at: " + formattedDate}
>
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
@@ -214,16 +214,16 @@ export default function LinkDetails({ link }: Props) {
</div>
</div>
<div className="flex flex-col gap-2">
<div className="flex justify-between items-center p-2 border border-sky-100 rounded-md">
<div className="flex justify-between items-center p-2 border border-sky-100 dark:border-sky-800 rounded-md">
<div className="flex gap-2 items-center">
<div className="text-white bg-sky-300 p-2 rounded-md">
<div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
</div>
<p className="text-gray-500">Screenshot</p>
<p className="text-gray-500 dark:text-sky-400">Screenshot</p>
</div>
<div className="flex text-sky-500 gap-1">
<div className="flex text-sky-400 gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.png`}
target="_blank"
@@ -248,13 +248,13 @@ export default function LinkDetails({ link }: Props) {
</div>
</div>
<div className="flex justify-between items-center p-2 border border-sky-100 rounded-md">
<div className="flex justify-between items-center p-2 border border-sky-100 dark:border-sky-800 rounded-md">
<div className="flex gap-2 items-center">
<div className="text-white bg-sky-300 p-2 rounded-md">
<div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
</div>
<p className="text-gray-500">PDF</p>
<p className="text-gray-500 dark:text-sky-400">PDF</p>
</div>
<div className="flex text-sky-500 gap-1">