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