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

replace tw colors with semantic colors [WIP]

Browse Source
This commit is contained in:
daniel31x13
2023-11-24 09:39:38 -05:00
parent 75d4fce8ec
commit a8172a9dbe
51 changed files with 166 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_app.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export default function App({
reverseOrder={false}
toastOptions={{
className:
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
"border border-neutral-content dark:bg-neutral-900 dark:text-white",
}}
/>
<Component {...pageProps} />
pages/choose-username.tsx
+2 -2
View File
@@ -41,12 +41,12 @@ export default function ChooseUsername() {
return (
<CenteredForm>
<form onSubmit={submitUsername}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight">
Choose a Username
</p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" />
<hr className="border-1 border-neutral-content" />
<div>
<p className="text-sm w-fit font-semibold mb-1">Username</p>
pages/collections/[id].tsx
+2 -2
View File
@@ -58,7 +58,7 @@ export default function Index() {
settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
}}
className="border border-solid border-sky-100 dark:border-neutral-700 rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"
className="border border-solid border-neutral-content 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 sm:items-start">
{activeCollection && (
@@ -111,7 +111,7 @@ export default function Index() {
.slice(0, 4)}
{activeCollection?.members.length &&
activeCollection.members.length - 4 > 0 ? (
<div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
<div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 -mr-3">
+{activeCollection?.members?.length - 4}
</div>
) : null}
pages/collections/index.tsx
+4 -4
View File
@@ -37,7 +37,7 @@ export default function Collections() {
<div className="flex items-center gap-3">
<FontAwesomeIcon
icon={faFolder}
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
/>
<div>
<p className="text-3xl capitalize font-thin">
@@ -117,7 +117,7 @@ export default function Collections() {
})}
<div
className="p-5 bg-gray-50 dark:bg-neutral-800 self-stretch border border-solid border-sky-100 dark:border-neutral-700 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 bg-gray-50 dark:bg-neutral-800 self-stretch border border-solid border-neutral-content 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",
@@ -129,7 +129,7 @@ export default function Collections() {
<p className="group-hover:opacity-0 duration-100">New Collection</p>
<FontAwesomeIcon
icon={faPlus}
className="w-8 h-8 text-sky-500 dark:text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
className="w-8 h-8 text-primary group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
/>
</div>
</div>
@@ -139,7 +139,7 @@ export default function Collections() {
<div className="flex items-center gap-3 my-5">
<FontAwesomeIcon
icon={faFolder}
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
/>
<div>
<p className="text-3xl capitalize font-thin">
pages/confirmation.tsx
+2 -2
View File
@@ -5,12 +5,12 @@ import React from "react";
export default function EmailConfirmaion() {
return (
<CenteredForm>
<div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-sky-100 dark:border-neutral-700 bg-slate-50 dark:bg-neutral-800">
<div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-slate-50 dark:bg-neutral-800">
<p className="text-center text-2xl sm:text-3xl font-extralight mb-2 ">
Please check your Email
</p>
<hr className="border-1 border-sky-100 dark:border-neutral-700 my-3" />
<hr className="border-1 border-neutral my-3" />
<p>A sign in link has been sent to your email address.</p>
pages/dashboard.tsx
+12 -12
View File
@@ -110,7 +110,7 @@ export default function Dashboard() {
<div className="flex items-center gap-3">
<FontAwesomeIcon
icon={faChartSimple}
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
/>
<div>
<p className="text-3xl capitalize font-thin">Dashboard</p>
@@ -120,15 +120,15 @@ export default function Dashboard() {
</div>
<div>
<div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-sky-100 dark:border-neutral-700 bg-gray-100 dark:bg-neutral-800">
<div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200 dark:bg-neutral-800">
<DashboardItem
name={numberOfLinks === 1 ? "Link" : "Links"}
value={numberOfLinks}
icon={faLink}
/>
<hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
<div className="h-24 border-1 border-l border-sky-100 dark:border-neutral-700 hidden md:block"></div>
<hr className="border-neutral-content md:hidden my-5" />
<div className="h-24 border-1 border-l border-neutral-content hidden md:block"></div>
<DashboardItem
name={collections.length === 1 ? "Collection" : "Collections"}
@@ -136,8 +136,8 @@ export default function Dashboard() {
icon={faFolder}
/>
<hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
<div className="h-24 border-1 border-r border-sky-100 dark:border-neutral-700 hidden md:block"></div>
<hr className="border-neutral-content md:hidden my-5" />
<div className="h-24 border-1 border-r border-neutral-content hidden md:block"></div>
<DashboardItem
name={tags.length === 1 ? "Tag" : "Tags"}
@@ -151,7 +151,7 @@ export default function Dashboard() {
<div className="flex gap-2 items-center">
<FontAwesomeIcon
icon={faClockRotateLeft}
className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
className="w-5 h-5 text-primary drop-shadow"
/>
<p className="text-2xl">Recently Added Links</p>
</div>
@@ -181,7 +181,7 @@ export default function Dashboard() {
) : (
<div
style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
>
<p className="text-center text-2xl">
View Your Recently Added Links Here!
@@ -215,7 +215,7 @@ export default function Dashboard() {
<div
onClick={() => setImportDropdown(!importDropdown)}
id="import-dropdown"
className="flex gap-2 select-none text-sm cursor-pointer p-2 px-3 rounded-md border dark:hover:border-sky-600 text-black border-black dark:text-white dark:border-white hover:border-sky-500 hover:dark:border-sky-500 hover:text-sky-500 hover:dark:text-sky-500 duration-100 group"
className="flex gap-2 select-none text-sm cursor-pointer p-2 px-3 rounded-md border dark:hover:border-sky-600 text-black border-black dark:text-white dark:border-white hover:border-primary hover:dark:border-primary hover:text-primary duration-100 group"
>
<FontAwesomeIcon
icon={faFileImport}
@@ -236,7 +236,7 @@ export default function Dashboard() {
if (target.id !== "import-dropdown")
setImportDropdown(false);
}}
className={`absolute top-10 left-0 w-52 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
className={`absolute top-10 left-0 w-52 py-1 shadow-md border border-neutral-content bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
>
<div className="cursor-pointer rounded-md">
<label
@@ -286,7 +286,7 @@ export default function Dashboard() {
<div className="flex gap-2 items-center">
<FontAwesomeIcon
icon={faThumbTack}
className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
className="w-5 h-5 text-primary drop-shadow"
/>
<p className="text-2xl">Pinned Links</p>
</div>
@@ -318,7 +318,7 @@ export default function Dashboard() {
) : (
<div
style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
>
<p className="text-center text-2xl">
Pin Your Favorite Links Here!
pages/forgot.tsx
+2 -2
View File
@@ -43,12 +43,12 @@ export default function Forgot() {
return (
<CenteredForm>
<form onSubmit={sendConfirmation}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight">
Password Recovery
</p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" />
<hr className="border-1 border-neutral-content" />
<div>
<p>
pages/links/[id].tsx
+2 -2
View File
@@ -152,7 +152,7 @@ export default function Index() {
>
<div
id="link-banner"
className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-sky-100 dark:border-neutral-700 shadow-md"
className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-neutral-content shadow-md"
>
<div id="link-banner-inner" className="link-banner-inner"></div>
@@ -259,7 +259,7 @@ export default function Index() {
}}
></div>
) : (
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
<div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
{link?.readabilityPath === "pending" ? (
<p className="text-center">
Generating readable format, please wait...
pages/links/index.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default function Links() {
<div className="flex items-center gap-3">
<FontAwesomeIcon
icon={faLink}
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
/>
<div>
<p className="text-3xl capitalize font-thin">All Links</p>
pages/links/pinned.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ export default function PinnedLinks() {
<div className="flex items-center gap-3">
<FontAwesomeIcon
icon={faThumbTack}
className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
/>
<div>
<p className="text-3xl capitalize font-thin">Pinned Links</p>
@@ -64,7 +64,7 @@ export default function PinnedLinks() {
) : (
<div
style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
>
<p className="text-center text-2xl">
Pin Your Favorite Links Here!
pages/login.tsx
+2 -2
View File
@@ -63,12 +63,12 @@ export default function Login() {
return (
<CenteredForm text="Sign in to your account">
<form onSubmit={loginUser}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight">
Enter your credentials
</p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" />
<hr className="border-1 border-neutral-content" />
<div>
<p className="text-sm w-fit font-semibold mb-1">
pages/public/collections/[id].tsx
+1 -1
View File
@@ -179,7 +179,7 @@ export default function PublicCollections() {
.slice(0, 3)}
{collection?.members.length &&
collection.members.length - 3 > 0 ? (
<div className="w-8 h-8 min-w-[2rem] text-white text-sm flex items-center justify-center rounded-full border-2 bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700">
<div className="w-8 h-8 min-w-[2rem] text-white text-sm flex items-center justify-center rounded-full border-2 bg-sky-600 dark:bg-sky-600 border-slate-200">
+{collection?.members?.length - 3}
</div>
) : null}
pages/public/links/[id].tsx
+2 -2
View File
@@ -152,7 +152,7 @@ export default function Index() {
>
<div
id="link-banner"
className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-sky-100 dark:border-neutral-700 shadow-md"
className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-neutral-content shadow-md"
>
<div id="link-banner-inner" className="link-banner-inner"></div>
@@ -259,7 +259,7 @@ export default function Index() {
}}
></div>
) : (
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
<div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
{link?.readabilityPath === "pending" ? (
<p className="text-center">
Generating readable format, please wait...
pages/register.tsx
+3 -3
View File
@@ -104,7 +104,7 @@ export default function Register() {
}
>
{process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? (
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
<p>
Registration is disabled for this instance, please contact the admin
in case of any issues.
@@ -112,12 +112,12 @@ export default function Register() {
</div>
) : (
<form onSubmit={registerUser}>
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight">
Enter your details
</p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" />
<hr className="border-1 border-neutral-content" />
<div>
<p className="text-sm w-fit font-semibold mb-1">Display Name</p>
pages/search.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export default function Search() {
<div className="flex gap-2">
<FontAwesomeIcon
icon={faSearch}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize font-thin">
Search Results
pages/settings/account.tsx
+10 -10
View File
@@ -153,7 +153,7 @@ export default function Account() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Account Settings</p>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<div className="flex flex-col gap-10">
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
@@ -206,13 +206,13 @@ export default function Account() {
image: "",
})
}
className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
>
<FontAwesomeIcon icon={faClose} className="w-3 h-3" />
</div>
)}
<div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
<label className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
<label className="border border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
Browse...
<input
type="file"
@@ -235,7 +235,7 @@ export default function Account() {
</p>
</div>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<div className="flex gap-3 flex-col">
<div>
@@ -247,7 +247,7 @@ export default function Account() {
>
<div
id="import-dropdown"
className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
className="border border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
>
Import From
</div>
@@ -258,7 +258,7 @@ export default function Account() {
if (target.id !== "import-dropdown")
setImportDropdown(false);
}}
className={`absolute top-7 left-0 w-52 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
className={`absolute top-7 left-0 w-52 py-1 shadow-md border border-neutral-content bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
>
<div className="cursor-pointer rounded-md">
<label
@@ -304,7 +304,7 @@ export default function Account() {
<div>
<p className="mb-2">Download your data instantly.</p>
<Link className="w-fit" href="/api/v1/migration">
<div className="border w-fit border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
<div className="border w-fit border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
Export Data
</div>
</Link>
@@ -319,7 +319,7 @@ export default function Account() {
</p>
</div>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<Checkbox
label="Make profile private"
@@ -339,7 +339,7 @@ export default function Account() {
visibility to your profile. Separated by comma.
</p>
<textarea
className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
placeholder="Your profile is hidden from everyone right now..."
value={whitelistedUsersTextbox}
onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
@@ -362,7 +362,7 @@ export default function Account() {
</p>
</div>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<p>
This will permanently delete ALL the Links, Collections, Tags, and
pages/settings/api.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export default function Api() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">API Keys (Soon)</p>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<div className="flex flex-col gap-3">
<div className="badge bg-orange-500 rounded-md border border-black w-fit px-2 text-black">
pages/settings/appearance.tsx
+8 -8
View File
@@ -69,16 +69,16 @@ export default function Appearance() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Appearance</p>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<div className="flex flex-col gap-10">
<div>
<p className="mb-3">Select Theme</p>
<div className="flex gap-3 w-full">
<div
className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
localStorage.getItem("theme") === "dark"
? "dark:outline-sky-500 text-sky-500"
? "dark:outline-primary text-primary"
: "text-white"
}`}
onClick={() => updateSettings({ theme: "dark" })}
@@ -86,19 +86,19 @@ export default function Appearance() {
<FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
<p className="text-2xl">Dark Theme</p>
{/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
</div>
<div
className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
localStorage.getItem("theme") === "light"
? "outline-sky-500 text-sky-500"
? "outline-primary text-primary"
: "text-black"
}`}
onClick={() => updateSettings({ theme: "light" })}
>
<FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
<p className="text-2xl">Light Theme</p>
{/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
</div>
</div>
</div>
@@ -107,7 +107,7 @@ export default function Appearance() {
<div className="flex items-center gap-2 w-full rounded-md h-8">
<p className="truncate w-full pr-7 text-3xl font-thin">Link Card</p>
</div>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<Checkbox
label="Display Icons"
state={user.displayLinkIcons}
pages/settings/archive.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export default function Archive() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Archive Settings</p>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<p>Formats to Archive webpages:</p>
<div className="p-3">
pages/settings/billing.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export default function Billing() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Billing Settings</p>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<div className="w-full mx-auto flex flex-col gap-3 justify-between">
<p className="text-md">
pages/settings/delete.tsx
+6 -6
View File
@@ -54,7 +54,7 @@ export default function Password() {
return (
<CenteredForm>
<div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 dark:border-neutral-700 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
<Link
href="/settings/account"
className="absolute top-4 left-4 gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
@@ -67,7 +67,7 @@ export default function Password() {
</p>
</div>
<hr className="border-1 border-sky-100 dark:border-neutral-700" />
<hr className="border-1 border-neutral-content" />
<p>
This will permanently delete all the Links, Collections, Tags, and
@@ -92,8 +92,8 @@ export default function Password() {
) : undefined}
{process.env.NEXT_PUBLIC_STRIPE ? (
<fieldset className="border rounded-md p-2 border-sky-500">
<legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-sky-500">
<fieldset className="border rounded-md p-2 border-primary">
<legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-primary">
<b>Optional</b>{" "}
<i className="min-[390px]:text-sm text-xs">
(but it really helps us improve!)
@@ -102,7 +102,7 @@ export default function Password() {
<label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col">
<p className="text-sm">Reason for cancellation:</p>
<select
className="rounded-md p-1 border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
className="rounded-md p-1 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
>
@@ -127,7 +127,7 @@ export default function Password() {
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="e.g. I needed a feature that..."
className="resize-none w-full rounded-md p-2 border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
className="resize-none w-full rounded-md p-2 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
/>
</div>
</fieldset>
pages/settings/password.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function Password() {
<SettingsLayout>
<p className="capitalize text-3xl font-thin inline">Change Password</p>
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
<hr className="my-3 border-1 border-neutral-content" />
<p className="mb-3">
To change your password, please fill out the following. Your password
pages/subscribe.tsx
+5 -5
View File
@@ -30,12 +30,12 @@ export default function Subscribe() {
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
}-day free trial, cancel anytime!`}
>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between dark:border-neutral-700 max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
<p className="sm:text-3xl text-2xl text-center font-extralight">
Subscribe to Linkwarden!
</p>
<hr className="border-1 border-sky-100 dark:border-neutral-700" />
<hr className="border-1 border-neutral-content" />
<div>
<p>
@@ -47,7 +47,7 @@ export default function Subscribe() {
</p>
</div>
<div className="flex text-white dark:text-black gap-3 border border-solid border-sky-100 dark:border-neutral-700 w-4/5 mx-auto p-1 rounded-xl relative">
<div className="flex text-white dark:text-black gap-3 border border-solid border-neutral-content w-4/5 mx-auto p-1 rounded-xl relative">
<button
onClick={() => setPlan(Plan.monthly)}
className={`w-full duration-100 text-sm rounded-lg p-1 ${
@@ -84,8 +84,8 @@ export default function Subscribe() {
<p className="font-semibold">
Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
</p>
<fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-sky-100 dark:border-neutral-700">
<legend className="w-fit font-extralight px-2 border border-sky-100 dark:border-neutral-700 rounded-md text-xl">
<fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-neutral-content">
<legend className="w-fit font-extralight px-2 border border-neutral rounded-md text-xl">
Total
</legend>
pages/tags/[id].tsx
+2 -2
View File
@@ -107,7 +107,7 @@ export default function Index() {
<div className="flex gap-2 items-end font-thin">
<FontAwesomeIcon
icon={faHashtag}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500"
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary"
/>
{renameTag ? (
<>
@@ -115,7 +115,7 @@ export default function Index() {
<input
type="text"
autoFocus
className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-sky-100 dark:border-b-neutral-700"
className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content dark:border-b-neutral-700"
value={newTagName}
onChange={(e) => setNewTagName(e.target.value)}
/>