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

improved contrast ratio

Browse Source
This commit is contained in:
Daniel
2023-07-22 17:49:09 -04:00
parent 43364b571a
commit 8eff4d23a7
34 changed files with 138 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/choose-username.tsx
+3 -3
View File
@@ -50,12 +50,12 @@ export default function Subscribe() {
className="h-12 w-fit mx-auto mt-10"
/>
<div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<p className="text-xl text-sky-500 w-fit font-bold">
<p className="text-xl text-sky-700 w-fit font-bold">
Choose a Username (Last step)
</p>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Username
</p>
@@ -64,7 +64,7 @@ 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-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
<div>
pages/collections/[id].tsx
+5 -5
View File
@@ -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-sky-500 font-bold w-full py-1 break-words hyphens-auto">
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold w-full py-1 break-words hyphens-auto">
{activeCollection?.name}
</p>
</div>
@@ -69,7 +69,7 @@ export default function Index() {
{activeCollection ? (
<div
className={`text-sky-400 min-w-[15rem] ${
className={`min-w-[15rem] ${
activeCollection.members[0] && "mr-3"
}`}
>
@@ -87,7 +87,7 @@ export default function Index() {
className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
>
<div
className={`bg-sky-500 p-2 leading-3 select-none group-hover:bg-sky-400 duration-100 text-white rounded-full text-xs ${
className={`bg-sky-700 p-2 leading-3 select-none group-hover:bg-sky-600 duration-100 text-white rounded-full text-xs ${
activeCollection.members[0] && "mr-1"
}`}
>
@@ -107,7 +107,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-500 border-sky-100 -mr-3">
<div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-700 border-sky-100 -mr-3">
+{activeCollection?.members?.length - 4}
</div>
) : null}
@@ -116,7 +116,7 @@ export default function Index() {
) : null}
</div>
<div className="text-gray-500 flex justify-between items-end gap-5">
<div className="text-gray-600 flex justify-between items-end gap-5">
<p>{activeCollection?.description}</p>
<div className="flex items-center gap-2">
<div className="relative">
pages/collections/index.tsx
+1 -1
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 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
All Collections
</p>
</div>
pages/dashboard.tsx
+11 -11
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 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
Dashboard
</p>
</div>
@@ -95,14 +95,14 @@ export default function Dashboard() {
<div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-500">{numberOfLinks}</p>
<p className="font-bold text-6xl text-sky-700">{numberOfLinks}</p>
<p className="text-sky-900 text-xl">
{numberOfLinks === 1 ? "Link" : "Links"}
</p>
</div>
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-500">
<p className="font-bold text-6xl text-sky-700">
{collections.length}
</p>
<p className="text-sky-900 text-xl">
@@ -111,7 +111,7 @@ export default function Dashboard() {
</div>
<div className="flex items-baseline gap-2">
<p className="font-bold text-6xl text-sky-500">{tags.length}</p>
<p className="font-bold text-6xl text-sky-700">{tags.length}</p>
<p className="text-sky-900 text-xl">
{tags.length === 1 ? "Tag" : "Tags"}
</p>
@@ -131,9 +131,9 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-600 text-xl">Pinned Links</p>
<p className="text-sky-700 text-xl">Pinned Links</p>
<div className="text-sky-600 flex items-center gap-2">
<div className="text-sky-700 flex items-center gap-2">
{linkPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
@@ -164,7 +164,7 @@ export default function Dashboard() {
</Disclosure>
) : (
<div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
<p className="text-center text-2xl text-sky-500">
<p className="text-center text-2xl text-sky-700">
No Pinned Links
</p>
<p className="text-center text-sky-900 text-sm">
@@ -182,9 +182,9 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-600 text-xl">Pinned Collections</p>
<p className="text-sky-700 text-xl">Pinned Collections</p>
<div className="text-sky-600 flex items-center gap-2">
<div className="text-sky-700 flex items-center gap-2">
{collectionPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
@@ -219,9 +219,9 @@ export default function Dashboard() {
}}
className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
>
<p className="text-sky-600 text-xl">Pinned Tags</p>
<p className="text-sky-700 text-xl">Pinned Tags</p>
<div className="text-sky-600 flex items-center gap-2">
<div className="text-sky-700 flex items-center gap-2">
{tagPinDisclosure ? "Hide" : "Show"}
<FontAwesomeIcon
icon={faChevronDown}
pages/forgot.tsx
+4 -4
View File
@@ -47,7 +47,7 @@ export default function Forgot() {
className="h-12 w-fit mx-auto mt-10"
/>
<div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<p className="text-xl text-sky-500 w-fit font-bold">Fogot Password?</p>
<p className="text-xl text-sky-700 w-fit font-bold">Fogot Password?</p>
<p className="text-md text-gray-500 mt-1">
Enter your Email so we can send you a link to recover your account.
</p>
@@ -55,14 +55,14 @@ export default function Forgot() {
Make sure to change your password in the profile settings afterwards.
</p>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">Email</p>
<p className="text-sm text-sky-700 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-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
@@ -73,7 +73,7 @@ export default function Forgot() {
loading={submitLoader}
/>
<div className="flex items-baseline gap-1 justify-center">
<Link href={"/login"} className="block text-sky-500 font-bold">
<Link href={"/login"} className="block text-sky-700 font-bold">
Go back
</Link>
</div>
pages/links.tsx
+1 -1
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 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
All Links
</p>
</div>
pages/login.tsx
+7 -7
View File
@@ -53,15 +53,15 @@ export default function Login() {
alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10"
/>
<p className="text-xl font-semibold text-sky-500 px-2 text-center">
<p className="text-xl font-semibold text-sky-700 px-2 text-center">
Sign in to your account
</p>
<div className="p-2 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<p className="text-xl text-sky-500 w-fit font-bold">
<p className="text-xl text-sky-700 w-fit font-bold">
Enter your credentials
</p>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Username
{emailEnabled ? "/Email" : undefined}
</p>
@@ -71,12 +71,12 @@ 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 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Password
</p>
@@ -85,7 +85,7 @@ 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 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
{emailEnabled && (
<div className="w-fit ml-auto mt-1">
@@ -104,7 +104,7 @@ export default function Login() {
/>
<div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-gray-500">New here?</p>
<Link href={"/register"} className="block text-sky-500 font-bold">
<Link href={"/register"} className="block text-sky-700 font-bold">
Sign Up
</Link>
</div>
pages/public/collections/[id].tsx
+2 -2
View File
@@ -45,7 +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-sky-500 font-bold mb-5 capitalize">
<p className="text-5xl text-sky-700 font-bold mb-5 capitalize">
{data.name}
</p>
@@ -64,7 +64,7 @@ export default function PublicCollections() {
</div>
{/* <p className="text-center font-bold text-gray-500">
List created with <span className="text-sky-500">Linkwarden.</span>
List created with <span className="text-sky-700">Linkwarden.</span>
</p> */}
</div>
) : (
pages/register.tsx
+13 -13
View File
@@ -97,7 +97,7 @@ export default function Register() {
alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10"
/>
<p className="text-center px-2 text-xl font-semibold text-sky-500">
<p className="text-center px-2 text-xl font-semibold text-sky-700">
{process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
? `Start using our premium services with a ${
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
@@ -105,11 +105,11 @@ export default function Register() {
: "Create a new account"}
</p>
<div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<p className="text-xl text-sky-500 w-fit font-bold">
<p className="text-xl text-sky-700 w-fit font-bold">
Enter your details
</p>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Display Name
</p>
@@ -118,13 +118,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-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
{emailEnabled ? undefined : (
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Username
</p>
@@ -133,14 +133,14 @@ 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-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
)}
{emailEnabled ? (
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Email
</p>
@@ -149,14 +149,14 @@ export default function Register() {
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-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
) : undefined}
<div className="flex item-center gap-2">
<div className="w-full">
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Password
</p>
@@ -165,12 +165,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-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
<div className="w-full">
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
<p className="text-sm text-sky-700 w-fit font-semibold mb-1">
Confirm Password
</p>
@@ -181,7 +181,7 @@ 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-500 duration-100"
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
</div>
@@ -193,7 +193,7 @@ export default function Register() {
/>
<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-sky-500 font-bold">
<Link href={"/login"} className="block text-sky-700 font-bold">
Login
</Link>
</div>
pages/search/[query].tsx
+2 -2
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 drop-shadow"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
Search Results
</p>
</div>
@@ -101,7 +101,7 @@ export default function Links() {
) : (
<p className="text-sky-900">
Nothing found.{" "}
<span className="text-sky-500 font-bold text-xl" title="Shruggie">
<span className="text-sky-700 font-bold text-xl" title="Shruggie">
¯\_(ツ)_/¯
</span>
</p>
pages/subscribe.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export default function Subscribe() {
alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10"
/>
<p className="text-xl font-semibold text-sky-500 text-center px-2">
<p className="text-xl font-semibold text-sky-700 text-center px-2">
{process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14} days free trial, then
${process.env.NEXT_PUBLIC_PRICING}/month afterwards
</p>
pages/tags/[id].tsx
+1 -1
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"
/>
<p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
<p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
{activeTag?.name}
</p>
</div>