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

Recreated most of the login screen with the new designs

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-12 14:57:30 +01:00
parent e864e16064
commit 9ce45dfc30
4 changed files with 61 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,18 +5,27 @@ interface Props {
children: ReactNode;
color?: "orange" | "green" | "blue";
variant?: "outline" | "solid";
onClick: () => void;
className?: string;
disabled?: boolean;
onClick?: () => void;
}
export default function Button({color = "green", variant = "solid", children, onClick}: 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 hover:bg-mti-green-dark disabled:text-mti-green disabled:bg-mti-green-ultralight",
blue: "bg-mti-blue hover:bg-mti-blue-dark disabled:text-mti-blue disabled:bg-mti-blue-ultralight",
orange: "bg-mti-orange hover:bg-mti-orange-dark disabled:text-mti-orange disabled:bg-mti-orange-ultralight",
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",
};
return (
<button onClick={onClick} className={clsx("py-3 px-6 text-white", colorClassNames[color])}>
<button
onClick={onClick}
className={clsx(
"py-4 px-6 text-white rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
className,
colorClassNames[color],
)}
disabled={disabled}>
{children}
</button>
);