devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completed the rest of the Selection screen to the new design

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-13 16:24:01 +01:00
parent b41ee8e2ad
commit efaa32cd68
3 changed files with 103 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Low/Button.tsx
View File

@@ -11,19 +11,31 @@ interface Props {
}
export default function Button({color = "green", variant = "solid", disabled = false, className, children, onClick}: Props) {
const colorClassNames: {[key in typeof color]: string} = {
green: "bg-mti-green-light hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
blue: "bg-mti-blue-light hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
orange: "bg-mti-orange-light hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",
const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
green: {
solid: "bg-mti-green-light text-white hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
outline:
"bg-transparent text-mti-green-light border border-mti-green-light hover:bg-mti-green-light disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark hover:text-white selection:text-white",
},
blue: {
solid: "bg-mti-blue-light text-white hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
outline:
"bg-transparent text-mti-blue-light border border-mti-blue-light hover:bg-mti-blue-light disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark hover:text-white selection:text-white",
},
orange: {
solid: "bg-mti-orange-light text-white hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",
outline:
"bg-transparent text-mti-orange-light border border-mti-orange-light hover:bg-mti-orange-light disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark hover:text-white selection:text-white",
},
};
return (
<button
onClick={onClick}
className={clsx(
"py-4 px-6 text-white rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
className,
colorClassNames[color],
colorClassNames[color][variant],
)}
disabled={disabled}>
{children}