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

much better coloring

Browse Source
This commit is contained in:
Daniel
2023-08-14 23:25:25 -04:00
parent 7da89a35e2
commit 1701ba07d4
44 changed files with 331 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_app.tsx
+13 -6
View File
@@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import "@/styles/globals.css";
import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";
@@ -14,6 +14,10 @@ export default function App({
}: AppProps<{
session: Session;
}>) {
useEffect(() => {
if (!localStorage.getItem("theme")) localStorage.setItem("theme", "light");
}, []);
return (
<SessionProvider session={pageProps.session}>
<Head>
@@ -38,13 +42,16 @@ export default function App({
/>
<link rel="manifest" href="/site.webmanifest" />
</Head>
<Toaster
position="top-center"
reverseOrder={false}
toastOptions={{ className: "border border-sky-100" }}
/>
<AuthRedirect>
<ThemeProvider attribute="class">
<Toaster
position="top-center"
reverseOrder={false}
toastOptions={{
className:
"border border-sky-100 dark:dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
}}
/>
<Component {...pageProps} />
</ThemeProvider>
</AuthRedirect>
pages/choose-username.tsx
+10 -7
View File
@@ -39,13 +39,13 @@ export default function Subscribe() {
return (
<CenteredForm>
<div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
<p className="text-2xl text-center text-black font-bold">
<div className="p-4 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<p className="text-2xl text-center text-black dark:text-white font-bold">
Choose a Username (Last step)
</p>
<div>
<p className="text-sm text-black w-fit font-semibold mb-1">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Username
</p>
@@ -54,13 +54,16 @@ export default function Subscribe() {
placeholder="john"
value={inputedUsername}
onChange={(e) => setInputedUsername(e.target.value)}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 duration-100"
/>
</div>
<div>
<p className="text-md text-gray-500 mt-1">
<p className="text-md text-gray-500 dark:text-gray-400 mt-1">
Feel free to reach out to us at{" "}
<a className="font-semibold" href="mailto:support@linkwarden.app">
<a
className="font-semibold underline"
href="mailto:support@linkwarden.app"
>
support@linkwarden.app
</a>{" "}
in case of any issues.
@@ -76,7 +79,7 @@ export default function Subscribe() {
<div
onClick={() => signOut()}
className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
>
Sign Out
</div>
pages/collections/[id].tsx
+5 -5
View File
@@ -50,7 +50,7 @@ export default function Index() {
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full">
<div className="bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
<div className="bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% 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 items-center sm:items-start">
{activeCollection && (
<div className="flex gap-3 items-center">
@@ -60,7 +60,7 @@ export default function Index() {
style={{ color: activeCollection?.color }}
className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold w-full py-1 break-words hyphens-auto">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white w-full py-1 break-words hyphens-auto">
{activeCollection?.name}
</p>
</div>
@@ -116,14 +116,14 @@ export default function Index() {
) : null}
</div>
<div className="text-gray-600 dark:text-white flex justify-between items-end gap-5">
<div className="text-gray-500 dark:text-gray-300 flex justify-between items-end gap-5">
<p>{activeCollection?.description}</p>
<div className="flex items-center gap-2">
<div className="relative">
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
@@ -144,7 +144,7 @@ export default function Index() {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
pages/collections/index.tsx
+4 -4
View File
@@ -39,7 +39,7 @@ export default function Collections() {
icon={faFolder}
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-black dark:text-white font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
All Collections
</p>
</div>
@@ -47,7 +47,7 @@ export default function Collections() {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
@@ -86,7 +86,7 @@ export default function Collections() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
@@ -111,7 +111,7 @@ export default function Collections() {
})}
<div
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% 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 self-stretch bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% 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",
pages/confirmation.tsx
+5 -5
View File
@@ -5,18 +5,18 @@ import React from "react";
export default function EmailConfirmaion() {
return (
<CenteredForm>
<div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-black">
<p className="text-center text-xl font-bold mb-2 text-black">
<div className="p-4 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 dark:border-neutral-700 bg-slate-50 text-black dark:text-white dark:bg-neutral-800">
<p className="text-center text-xl font-bold mb-2">
Please check your Email
</p>
<p>A sign in link has been sent to your email address.</p>
<p>You can safely close this page.</p>
<hr className="my-5" />
<hr className="my-5 dark:border-neutral-700" />
<p className="text-sm text-gray-500 ">
<p className="text-sm text-gray-500 dark:text-gray-400">
If you didn&apos;t receive anything, go to the{" "}
<Link href="/forgot" className="font-bold">
<Link href="/forgot" className="font-bold underline">
Password Recovery
</Link>{" "}
page and enter your Email to resend the sign in link.
pages/dashboard.tsx
+8 -6
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-black dark:text-white font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
Dashboard
</p>
</div>
@@ -133,15 +133,17 @@ export default function Dashboard() {
onClick={() => {
setLinkPinDisclosure(!linkPinDisclosure);
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner dark:bg-neutral-700 duration-100 py-2 px-4 rounded-full"
>
<p className="text-black text-xl">Pinned Links</p>
<p className="text-black dark:text-white text-xl">
Pinned Links
</p>
<div className="text-black flex items-center gap-2">
<div className="text-black dark:text-white flex items-center gap-2">
{linkPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
className={`w-4 h-4 text-black ${
className={`w-4 h-4 text-black dark:text-white ${
linkPinDisclosure ? "rotate-reverse" : "rotate"
}`}
/>
@@ -167,7 +169,7 @@ export default function Dashboard() {
</div>
</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">
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
<p className="text-center text-2xl text-black dark:text-white">
No Pinned Links
</p>
pages/forgot.tsx
+14 -7
View File
@@ -40,27 +40,31 @@ export default function Forgot() {
return (
<CenteredForm>
<div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
<p className="text-2xl text-black font-bold">Password Recovery</p>
<div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<p className="text-2xl text-black dark:text-white font-bold">
Password Recovery
</p>
<div>
<p className="text-md text-black">
<p className="text-md text-black dark:text-white">
Enter your Email so we can send you a link to recover your account.
Make sure to change your password in the profile settings
afterwards.
</p>
<p className="text-sm text-gray-500">
<p className="text-sm text-gray-500 dark:text-gray-400">
You wont get logged in if you haven&apos;t created an account yet.
</p>
</div>
<div>
<p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Email
</p>
<input
type="text"
placeholder="johnny@example.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 focus:border-sky-700 duration-100"
/>
</div>
@@ -71,7 +75,10 @@ export default function Forgot() {
loading={submitLoader}
/>
<div className="flex items-baseline gap-1 justify-center">
<Link href={"/login"} className="block text-black font-bold">
<Link
href={"/login"}
className="block text-black dark:text-white font-bold"
>
Go back
</Link>
</div>
pages/links.tsx
+2 -2
View File
@@ -26,7 +26,7 @@ export default function Links() {
icon={faLink}
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-black dark:text-white font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
All Links
</p>
</div>
@@ -35,7 +35,7 @@ export default function Links() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
pages/login.tsx
+9 -6
View File
@@ -47,7 +47,7 @@ export default function Login() {
return (
<CenteredForm text="Sign in to your account">
<div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-sky-950 rounded-2xl shadow-md border border-sky-100 dark:border-sky-800">
<div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
<p className="text-2xl text-black dark:text-white text-center font-bold">
Enter your credentials
</p>
@@ -63,7 +63,7 @@ export default function Login() {
placeholder="johnny"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-800 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
</div>
@@ -77,11 +77,14 @@ export default function Login() {
placeholder="••••••••••••••"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-800 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
{emailEnabled && (
<div className="w-fit ml-auto mt-1">
<Link href={"/forgot"} className="text-gray-500 font-semibold">
<Link
href={"/forgot"}
className="text-gray-500 dark:text-gray-400 font-semibold"
>
Forgot Password?
</Link>
</div>
@@ -95,10 +98,10 @@ export default function Login() {
loading={submitLoader}
/>
<div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500 dark:text-white">New here?</p>
<p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
<Link
href={"/register"}
className="block text-black dark:text-white font-bold"
className="block text-black dark:text-white font-semibold"
>
Sign Up
</Link>
pages/public/collections/[id].tsx
+1 -3
View File
@@ -45,9 +45,7 @@ export default function PublicCollections() {
<div
className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
>
<p className="text-5xl text-black font-bold mb-5 capitalize">
{data.name}
</p>
<p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
{data.description && (
<>
pages/register.tsx
+29 -19
View File
@@ -98,12 +98,12 @@ export default function Register() {
: "Create a new account"
}
>
<div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
<p className="text-2xl text-black text-center font-bold">
<div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
<p className="text-2xl text-black dark:text-white text-center font-bold">
Enter your details
</p>
<div>
<p className="text-sm text-black w-fit font-semibold mb-1">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Display Name
</p>
@@ -112,13 +112,13 @@ export default function Register() {
placeholder="Johnny"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
{emailEnabled ? undefined : (
<div>
<p className="text-sm text-black w-fit font-semibold mb-1">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Username
</p>
@@ -127,27 +127,29 @@ export default function Register() {
placeholder="john"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
)}
{emailEnabled ? (
<div>
<p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Email
</p>
<input
type="email"
placeholder="johnny@example.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
) : undefined}
<div className="w-full">
<p className="text-sm text-black w-fit font-semibold mb-1">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Password
</p>
@@ -156,12 +158,12 @@ export default function Register() {
placeholder="••••••••••••••"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
<div className="w-full">
<p className="text-sm text-black w-fit font-semibold mb-1">
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Confirm Password
</p>
@@ -172,31 +174,34 @@ export default function Register() {
onChange={(e) =>
setForm({ ...form, passwordConfirmation: e.target.value })
}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
{process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
<div>
<p className="text-xs text-gray-500">
<p className="text-xs text-gray-500 dark:text-gray-400">
By signing up, you agree to our{" "}
<Link href="https://linkwarden.app/tos" className="font-semibold">
<Link
href="https://linkwarden.app/tos"
className="font-semibold underline"
>
Terms of Service
</Link>{" "}
and{" "}
<Link
href="https://linkwarden.app/privacy-policy"
className="font-semibold"
className="font-semibold underline"
>
Privacy Policy
</Link>
.
</p>
<p className="text-xs text-gray-500">
<p className="text-xs text-gray-500 dark:text-gray-400">
Need help?{" "}
<Link
href="mailto:support@linkwarden.app"
className="font-semibold"
className="font-semibold underline"
>
Get in touch
</Link>
@@ -212,8 +217,13 @@ export default function Register() {
loading={submitLoader}
/>
<div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500">Already have an account?</p>
<Link href={"/login"} className="block text-black font-bold">
<p className="w-fit text-gray-500 dark:text-gray-400">
Already have an account?
</p>
<Link
href={"/login"}
className="block text-black dark:text-white font-bold"
>
Login
</Link>
</div>
pages/search/[query].tsx
+5 -5
View File
@@ -42,7 +42,7 @@ export default function Links() {
icon={faSearch}
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-black dark:text-white font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
Search Results
</p>
</div>
@@ -53,12 +53,12 @@ export default function Links() {
<div
onClick={() => setFilterDropdown(!filterDropdown)}
id="filter-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faFilter}
id="filter-dropdown"
className="w-5 h-5 text-gray-500"
className="w-5 h-5 text-gray-500 dark:text-white"
/>
</div>
@@ -75,12 +75,12 @@ export default function Links() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
id="sort-dropdown"
className="w-5 h-5 text-gray-500"
className="w-5 h-5 text-gray-500 dark:text-white"
/>
</div>
pages/subscribe.tsx
+5 -4
View File
@@ -28,10 +28,11 @@ export default function Subscribe() {
<CenteredForm
text={`${
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
}-Day free trial, then $
${process.env.NEXT_PUBLIC_PRICING}/month afterwards`}
}-Day free trial, then $${
process.env.NEXT_PUBLIC_PRICING
}/month afterwards`}
>
<div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
<div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] dark:border-neutral-700 w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<p className="text-2xl text-center font-bold">
Subscribe to Linkwarden!
</p>
@@ -56,7 +57,7 @@ export default function Subscribe() {
<div
onClick={() => signOut()}
className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
>
Sign Out
</div>
pages/tags/[id].tsx
+3 -3
View File
@@ -38,7 +38,7 @@ export default function Index() {
icon={faHashtag}
className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300"
/>
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
<p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
{activeTag?.name}
</p>
</div>
@@ -48,12 +48,12 @@ export default function Index() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
id="sort-dropdown"
className="w-5 h-5 text-gray-500"
className="w-5 h-5 text-gray-500 dark:text-white"
/>
</div>