ryanamay/pint
1
0
Fork 0
mirror of https://github.com/ryanamay/pint.git synced 2024-09-20 01:50:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: implement scheme options

Browse source
This commit is contained in:
fuwaa 2022-07-31 19:52:46 +08:00
parent cf42328428
commit 15c0c86fac
No known key found for this signature in database
GPG key ID: 2E4F5DC11DE1D654
1 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/popup/QuickChange.tsx
View file

@ -134,18 +134,46 @@ export default function QuickChange() {
<div>
<div className="flex flex-col rounded-lg mt-4 mx-3">
<div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 ">
<div className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2">
<div className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2 mb-1">
<FcIdea className="mx-1" />
<p className="text-semibold">
Need ideas? These colors compliment your current pick!
</p>
</div>
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
<p className="text-semibold">
Scheme Variations
</p>
</div>
<div className="flex flex-row justify-content p-1 ml-2">
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> triade </button>
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> tetrade </button>
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> analogic </button>
</div>
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
<p className="text-semibold">
Color Variations
</p>
</div>
<div className="flex flex-row justify-content p-1 ml-2">
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> default </button>
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> pastel </button>
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> soft </button>
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> light </button>
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> hard </button>
<button className="mr-1 bg-[#163e6d] text-[#3ba6ff] py-[2px] px-2 justify-between align-middle rounded-full table-cell"> pale </button>
</div>
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
<p className="text-semibold">
Generated Colors
</p>
</div>
<div className="flex flex-row justify-content p-1 ml-2 mb-2">
{quickScheme.map((qsColor) => {
return (
<button
title="Use this Color"
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[15px] w-[15px] border-solid border-[#40363d] flex justify-between mr-1"
title={qsColor}
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[15px] w-[15px] border-solid border-[#163e6d] flex justify-between mr-1"
onClick={() => {
setColor(qsColor);
}}