public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: ui of button (#5552) 

Co-authored-by: alannnc <alannnc@gmail.com>
pull/5659/head^2
Udit Takkar 2022-11-24 01:23:12 +05:30 committed by GitHub
parent 4086a666ae
commit 33271a88b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/ui/v2/core/banner.tsx
View File

@ -3,8 +3,6 @@ import { Icon } from "react-feather";
import classNames from "@calcom/lib/classNames";
import { Button } from "../../components/button";
const stylesByVariant = {
neutral: { background: "bg-gray-100 ", text: "!text-gray-800", hover: "hover:!bg-gray-200" },
warning: { background: "bg-orange-100 ", text: "!text-orange-800", hover: "hover:!bg-orange-200" },
@ -24,7 +22,6 @@ export type BannerProps = {
const Banner = (props: BannerProps) => {
const { variant, errorMessage, title, description, className, Icon, ...rest } = props;
const buttonStyle = classNames(stylesByVariant[variant].text, stylesByVariant[variant].hover);
const [show, setShow] = useState(true);
if (!show) {
return null;
@ -38,29 +35,28 @@ const Banner = (props: BannerProps) => {
className
)}
{...rest}>
<div className={classNames("flex flex-row text-sm")}>
<div className="mr-3">{Icon && <Icon className="h-4 w-4" />}</div>
<div className={classNames("flex flex-col text-sm")}>
<div className="mb-2">{Icon && <Icon className="h-4 w-4" />}</div>
<div className="flex flex-col space-y-2">
<h1 className="font-semibold leading-none">{title}</h1>
{description && <h2 className="font-normal leading-4">{description}</h2>}
{props.variant === "error" && <p className="ml-4 pt-2 font-mono text-xs">{errorMessage}</p>}
</div>
</div>
<div className="ml-auto self-start text-sm font-medium">
{props.actionText && (
<Button color="minimal" className={buttonStyle} onClick={() => props.onAction}>
Action
</Button>
)}
<Button
color="minimal"
className={buttonStyle}
onClick={(e) => {
setShow(false);
props.onDismiss(e);
}}>
Dismiss
</Button>
<div className="mt-4 flex w-full items-center gap-4 self-start text-sm font-medium">
{props.actionText && (
<button className="text-sm font-medium leading-4" onClick={() => props.onAction}>
Action
</button>
)}
<button
className="text-sm font-medium leading-4"
onClick={(e) => {
setShow(false);
props.onDismiss(e);
}}>
Dismiss
</button>
</div>
</div>
</div>
);