improved contrast ratio

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
@@ -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) =>
@@ -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>
</>
+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
+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 && (