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/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