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
components/Modal/Collection/CollectionInfo.tsx
+6 -6
View File
@@ -60,7 +60,7 @@ export default function CollectionInfo({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<div className="flex flex-col sm:flex-row gap-3">
<div className="w-full">
<p className="text-sm text-sky-500 mb-2">
<p className="text-sm text-sky-700 mb-2">
Name
<RequiredBadge />
</p>
@@ -72,11 +72,11 @@ export default function CollectionInfo({
}
type="text"
placeholder="e.g. Example Collection"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
<div className="color-picker flex justify-between">
<div className="flex flex-col justify-between items-center w-32">
<p className="text-sm w-full text-sky-500 mb-2">Icon Color</p>
<p className="text-sm w-full text-sky-700 mb-2">Icon Color</p>
<div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
@@ -84,7 +84,7 @@ export default function CollectionInfo({
/>
</div>
<div
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-500 hover:bg-slate-200 duration-100"
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 hover:bg-slate-200 duration-100"
onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" })
}
@@ -101,9 +101,9 @@ export default function CollectionInfo({
</div>
<div className="w-full">
<p className="text-sm text-sky-500 mb-2">Description</p>
<p className="text-sm text-sky-700 mb-2">Description</p>
<textarea
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-700"
placeholder="The purpose of this Collection..."
value={collection.description}
onChange={(e) =>
components/Modal/Collection/DeleteCollection.tsx
+2 -2
View File
@@ -83,7 +83,7 @@ export default function DeleteCollection({
<div className="flex flex-col gap-3">
<p className="text-sky-900 select-none text-center">
To confirm, type &quot;
<span className="font-bold text-sky-500">{collection.name}</span>
<span className="font-bold text-sky-700">{collection.name}</span>
&quot; in the box below:
</p>
@@ -93,7 +93,7 @@ export default function DeleteCollection({
onChange={(e) => setInputField(e.target.value)}
type="text"
placeholder={`Type "${collection.name}" Here.`}
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
</>
components/Modal/Collection/TeamManagement.tsx
+12 -12
View File
@@ -117,7 +117,7 @@ export default function TeamManagement({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
{permissions === true && (
<>
<p className="text-sm text-sky-500">Make Public</p>
<p className="text-sm text-sky-700">Make Public</p>
<Checkbox
label="Make this a public collection."
@@ -135,7 +135,7 @@ export default function TeamManagement({
{collection.isPublic ? (
<div>
<p className="text-sm text-sky-500 mb-2">
<p className="text-sm text-sky-700 mb-2">
Public Link (Click to copy)
</p>
<div
@@ -148,7 +148,7 @@ export default function TeamManagement({
console.log(err);
}
}}
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-500 duration-100 cursor-text"
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
>
{publicCollectionURL}
</div>
@@ -159,7 +159,7 @@ export default function TeamManagement({
{permissions === true && (
<>
<p className="text-sm text-sky-500">Member Management</p>
<p className="text-sm text-sky-700">Member Management</p>
<div className="flex items-center gap-2">
<input
@@ -181,7 +181,7 @@ export default function TeamManagement({
}
type="text"
placeholder="Username (without the '@')"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
<div
@@ -193,7 +193,7 @@ export default function TeamManagement({
setMemberState
)
}
className="flex items-center justify-center bg-sky-500 hover:bg-sky-400 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
>
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
</div>
@@ -239,7 +239,7 @@ export default function TeamManagement({
className="border-[3px]"
/>
<div>
<p className="text-sm font-bold text-sky-500">
<p className="text-sm font-bold text-sky-700">
{e.user.name}
</p>
<p className="text-sky-900">@{e.user.username}</p>
@@ -248,7 +248,7 @@ export default function TeamManagement({
<div className="flex sm:block items-center gap-5 min-w-[10rem]">
<div>
<p
className={`font-bold text-sm text-sky-500 ${
className={`font-bold text-sm text-sky-700 ${
permissions === true ? "" : "mb-2"
}`}
>
@@ -305,7 +305,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${
className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@@ -350,7 +350,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${
className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@@ -395,7 +395,7 @@ export default function TeamManagement({
}}
/>
<span
className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${
className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
permissions === true
? "hover:bg-slate-200 duration-75"
: ""
@@ -425,7 +425,7 @@ export default function TeamManagement({
/>
<div>
<div className="flex items-center gap-1">
<p className="text-sm font-bold text-sky-500">
<p className="text-sm font-bold text-sky-700">
{collectionOwner.name}
</p>
<FontAwesomeIcon
components/Modal/Collection/index.tsx
+2 -2
View File
@@ -46,9 +46,9 @@ export default function CollectionModal({
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && (
<p className="text-xl text-sky-500 text-center">New Collection</p>
<p className="text-xl text-sky-700 text-center">New Collection</p>
)}
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600">
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700">
{method === "UPDATE" && (
<>
{isOwner && (
components/Modal/Link/AddOrEditLink.tsx
+8 -8
View File
@@ -125,7 +125,7 @@ export default function AddOrEditLink({
<div className="grid sm:grid-cols-2 gap-3">
<div>
<p className="text-sm text-sky-500 mb-2">
<p className="text-sm text-sky-700 mb-2">
Name
<RequiredBadge />
</p>
@@ -134,13 +134,13 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, name: e.target.value })}
type="text"
placeholder="e.g. Example Link"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
{method === "CREATE" ? (
<div>
<p className="text-sm text-sky-500 mb-2">
<p className="text-sm text-sky-700 mb-2">
URL
<RequiredBadge />
</p>
@@ -149,13 +149,13 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, url: e.target.value })}
type="text"
placeholder="e.g. http://example.com/"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
) : null}
<div>
<p className="text-sm text-sky-500 mb-2">Collection</p>
<p className="text-sm text-sky-700 mb-2">Collection</p>
<CollectionSelection
onChange={setCollection}
// defaultValue={{
@@ -174,7 +174,7 @@ export default function AddOrEditLink({
</div>
<div className={method === "UPDATE" ? "sm:col-span-2" : ""}>
<p className="text-sm text-sky-500 mb-2">Tags</p>
<p className="text-sm text-sky-700 mb-2">Tags</p>
<TagSelection
onChange={setTags}
defaultValue={link.tags.map((e) => {
@@ -183,7 +183,7 @@ export default function AddOrEditLink({
/>
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-500 mb-2">Description</p>
<p className="text-sm text-sky-700 mb-2">Description</p>
<textarea
value={link.description}
onChange={(e) => setLink({ ...link, description: e.target.value })}
@@ -192,7 +192,7 @@ export default function AddOrEditLink({
? "Will be auto generated if nothing is provided."
: ""
}
className="resize-none w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="resize-none w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
</div>
components/Modal/Link/LinkDetails.tsx
+7 -7
View File
@@ -151,7 +151,7 @@ export default function LinkDetails({ link }: Props) {
/>
)}
<div className="flex flex-col gap- justify-end drop-shadow">
<p className="text-2xl text-sky-500 capitalize break-words hyphens-auto">
<p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
{link.name}
</p>
<Link
@@ -223,12 +223,12 @@ export default function LinkDetails({ link }: Props) {
<p className="text-gray-500">Screenshot</p>
</div>
<div className="flex text-sky-600 gap-1">
<div className="flex text-sky-500 gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.png`}
target="_blank"
rel="noreferrer"
className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md"
className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -238,7 +238,7 @@ export default function LinkDetails({ link }: Props) {
<div
onClick={() => handleDownload("png")}
className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md"
className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
@@ -257,12 +257,12 @@ export default function LinkDetails({ link }: Props) {
<p className="text-gray-500">PDF</p>
</div>
<div className="flex text-sky-600 gap-1">
<div className="flex text-sky-500 gap-1">
<Link
href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
target="_blank"
rel="noreferrer"
className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md"
className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -272,7 +272,7 @@ export default function LinkDetails({ link }: Props) {
<div
onClick={() => handleDownload("pdf")}
className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md"
className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
>
<FontAwesomeIcon
icon={faCloudArrowDown}
components/Modal/Link/index.tsx
+2 -2
View File
@@ -33,10 +33,10 @@ export default function LinkModal({
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && (
<p className="text-xl text-sky-500 text-center">New Link</p>
<p className="text-xl text-sky-700 text-center">New Link</p>
)}
<Tab.List
className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600 ${
className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 ${
isOwnerOrMod ? "" : "pb-8"
}`}
>
components/Modal/User/ChangePassword.tsx
+4 -4
View File
@@ -81,23 +81,23 @@ export default function ChangePassword({
return (
<div className="mx-auto sm:w-[35rem] w-80">
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
<p className="text-sm text-sky-500">New Password</p>
<p className="text-sm text-sky-700">New Password</p>
<input
value={newPassword}
onChange={(e) => setNewPassword1(e.target.value)}
type="password"
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
<p className="text-sm text-sky-500">Confirm New Password</p>
<p className="text-sm text-sky-700">Confirm New Password</p>
<input
value={newPassword2}
onChange={(e) => setNewPassword2(e.target.value)}
type="password"
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
<SubmitButton
components/Modal/User/PrivacySettings.tsx
+3 -3
View File
@@ -83,7 +83,7 @@ export default function PrivacySettings({
return (
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
<div>
<p className="text-sm text-sky-500 mb-2">Profile Visibility</p>
<p className="text-sm text-sky-700 mb-2">Profile Visibility</p>
<Checkbox
label="Make profile private"
@@ -98,13 +98,13 @@ export default function PrivacySettings({
{user.isPrivate && (
<div>
<p className="text-sm text-sky-500 my-2">Whitelisted Users</p>
<p className="text-sm text-sky-700 my-2">Whitelisted Users</p>
<p className="text-gray-500 text-sm mb-3">
Please provide the Username of the users you wish to grant
visibility to your profile. Separated by comma.
</p>
<textarea
className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-700"
placeholder="Your profile is hidden from everyone right now..."
value={whitelistedUsersTextbox}
onChange={(e) => {
components/Modal/User/ProfileSettings.tsx
+10 -10
View File
@@ -102,7 +102,7 @@ export default function ProfileSettings({
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
<div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
<p className="text-sm text-sky-500 mb-2 text-center">Profile Photo</p>
<p className="text-sm text-sky-700 mb-2 text-center">Profile Photo</p>
<div className="w-28 h-28 flex items-center justify-center rounded-full relative">
<ProfilePhoto
src={user.profilePic}
@@ -127,7 +127,7 @@ export default function ProfileSettings({
<label
htmlFor="upload-photo"
title="PNG or JPG (Max: 3MB)"
className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500"
className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
>
Browse...
<input
@@ -145,33 +145,33 @@ export default function ProfileSettings({
<div className="flex flex-col gap-3">
<div>
<p className="text-sm text-sky-500 mb-2">Display Name</p>
<p className="text-sm text-sky-700 mb-2">Display Name</p>
<input
type="text"
value={user.name}
onChange={(e) => setUser({ ...user, name: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
<div>
<p className="text-sm text-sky-500 mb-2">Username</p>
<p className="text-sm text-sky-700 mb-2">Username</p>
<input
type="text"
value={user.username || ""}
onChange={(e) => setUser({ ...user, username: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
{emailEnabled ? (
<div>
<p className="text-sm text-sky-500 mb-2">Email</p>
<p className="text-sm text-sky-700 mb-2">Email</p>
<input
type="text"
value={user.email || ""}
onChange={(e) => setUser({ ...user, email: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
) : undefined}
@@ -186,10 +186,10 @@ export default function ProfileSettings({
{/* <hr /> TODO: Export functionality
<p className="text-sky-600">Data Settings</p>
<p className="text-sky-700">Data Settings</p>
<div className="w-fit">
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500">
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
Export Data
</div>
</div> */}
components/Modal/User/index.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export default function UserModal({
return (
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600">
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700">
<Tab
className={({ selected }) =>
selected