From 33271a88b17a54bad62db22d85dfd452fa74b6f5 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Thu, 24 Nov 2022 01:23:12 +0530
Subject: [PATCH] fix: ui of button (#5552)

Co-authored-by: alannnc <alannnc@gmail.com>
---
 packages/ui/v2/core/banner.tsx | 38 +++++++++++++++-------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/ui/v2/core/banner.tsx b/packages/ui/v2/core/banner.tsx
index 3a4acb7199..d7ae94215c 100644
--- a/packages/ui/v2/core/banner.tsx
+++ b/packages/ui/v2/core/banner.tsx
@@ -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>
   );