fix: alert component styles

frontend/src/components/v2/Alert/Alert.stories.tsx

@@ -1,8 +1,8 @@
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Alert, AlertDescription, AlertTitle } from "./Alert";
+import { Alert, AlertDescription } from "./Alert";
 
 const meta: Meta<typeof Alert> = {
   title: "Components/Alert",
@@ -14,12 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof Alert>;
 
-const ExampleComponent = () => (
-  <>
-    <AlertTitle>this is a title</AlertTitle>
-    <AlertDescription>this is a description</AlertDescription>
-  </>
-);
+const ExampleComponent = () => <AlertDescription>this is a description</AlertDescription>;
 
 export const Default: Story = {
   args: {
@@ -41,14 +36,26 @@ export const Destructive: Story = {
   }
 };
 
-export const WithIcon: Story = {
+export const WithCustomIcon: Story = {
   args: {
-    children: (
-      <>
-        <FontAwesomeIcon icon={faTriangleExclamation} />
-        <ExampleComponent />
-      </>
-    ),
-    variant: "warning"
+    children: <ExampleComponent />,
+    variant: "warning",
+    icon: <FontAwesomeIcon icon={faPlus} />
+  }
+};
+
+export const WithOutIcon: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning",
+    icon: null
+  }
+};
+
+export const WithOutTitle: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning",
+    hideTitle: true
   }
 };

frontend/src/components/v2/Alert/Alert.tsx

@@ -1,10 +1,16 @@
+/* eslint-disable react/prop-types */
 import * as React from "react";
+import {
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { type VariantProps, cva } from "cva";
-
-import { cn } from "@app/helpers/classNames";
+import { twMerge } from "tailwind-merge";
 
 const alertVariants = cva(
-  "relative w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm flex items-center gap-x-4",
   {
     variants: {
       variant: {
@@ -19,33 +25,62 @@ const alertVariants = cva(
   }
 );
 
+type AlertProps = {
+  title?: string;
+  hideTitle?: boolean;
+  icon?: React.ReactNode;
+};
+
+const variantTitleMap = {
+  default: "Info",
+  destructive: "Danger",
+  warning: "Warning"
+};
+
+const variantIconMap = {
+  default: faInfoCircle,
+  destructive: faExclamationCircle,
+  warning: faExclamationTriangle
+};
+
 const Alert = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => (
-    <h5
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> & AlertProps
+>(({ className, variant, title, icon, hideTitle = false, children, ...props }, ref) => {
+  const defaultTitle = title ?? variantTitleMap[variant ?? "default"];
+  return (
+    <div
       ref={ref}
-      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      role="alert"
+      className={twMerge(alertVariants({ variant }), className)}
       {...props}
     >
-      {children}
-    </h5>
-  )
-);
-AlertTitle.displayName = "AlertTitle";
+      <div>
+        {typeof icon !== "undefined" ? (
+          <>{icon} </>
+        ) : (
+          <FontAwesomeIcon className="text-lg" icon={variantIconMap[variant ?? "default"]} />
+        )}
+      </div>
+      <div className="flex flex-col gap-y-1">
+        {hideTitle ? null : (
+          <h5 className="font-medium leading-none tracking-tight" {...props}>
+            {defaultTitle}
+          </h5>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+});
+Alert.displayName = "Alert";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  <div ref={ref} className={twMerge("text-sm [&_p]:leading-relaxed", className)} {...props} />
 ));
 AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertDescription, AlertTitle };
+export { Alert, AlertDescription };

frontend/src/components/v2/Alert/index.tsx

@@ -1 +1 @@
-export { Alert, AlertDescription, AlertTitle } from "./Alert";
+export { Alert, AlertDescription } from "./Alert";

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { faArrowRight, faExclamationTriangle, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { integrationSlugNameMapping } from "public/data/frequentConstants";
 
@@ -55,8 +55,7 @@ export const IntegrationsSection = ({
 
       {!bot?.isActive && (
         <div className="px-6 py-4">
-          <Alert variant="warning">
-            <FontAwesomeIcon icon={faExclamationTriangle} />
+          <Alert hideTitle variant="warning">
             <AlertDescription>
               All the active integrations will be disabled. Disable End-to-End Encryption in{" "}
               <Link href={`/project/${currentWorkspace?._id}/settings`} passHref>

frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx

@@ -1,12 +1,9 @@
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   decryptAssymmetric,
   encryptAssymmetric
 } from "@app/components/utilities/cryptography/crypto";
-import { Alert, AlertDescription, AlertTitle, Checkbox } from "@app/components/v2";
+import { Alert, AlertDescription, Checkbox } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useGetUserWsKey, useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";
 
@@ -107,8 +104,6 @@ export const E2EESection = () => {
             </div>
             <div>
               <Alert variant="warning">
-                <FontAwesomeIcon icon={faExclamationTriangle} />
-                <AlertTitle>Warning !</AlertTitle>
                 <AlertDescription>
                   Enabling End-to-end encryption disables all the integrations
                 </AlertDescription>