Refactor MeetingModal component and add styling to DialogContent

Author: prakharsingh-74

components/MeetingModal.tsx

@@ -2,27 +2,27 @@ import React, { ReactNode } from 'react'
 import Image from 'next/image'
 import { cn } from '@/lib/utils';
 import {
-    Dialog,
-    DialogContent,
+  Dialog,
+  DialogContent,
 } from "@/components/ui/dialog"
 import { Button } from './ui/button';
 
 interface MeetingModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title: string;
-    className?: string;
-    children?: ReactNode;
-    handleClick?: () => void;
-    buttonText?: string;
-    image?: string;
-    buttonIcon?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  className?: string;
+  children?: ReactNode;
+  handleClick?: () => void;
+  buttonText?: string;
+  image?: string;
+  buttonIcon?: string;
 }
 
 const MeetingModal = ({ isOpen, onClose, title, className, children, handleClick, buttonText, image, buttonIcon }: MeetingModalProps) => {
-    return (
-        <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="flex w-full max-w-[520px] flex-col gap-6 border-none bg-dark-1 px-6 py-9 text-white">
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="flex w-full max-w-[520px] flex-col gap-6 border-none bg-dark-1 px-6 py-9 text-white">
         <div className="flex flex-col gap-6">
           {image && (
             <div className="flex justify-center">
@@ -52,8 +52,8 @@ const MeetingModal = ({ isOpen, onClose, title, className, children, handleClick
           </Button>
         </div>
       </DialogContent>
-        </Dialog>
-    )
+    </Dialog>
+  )
 }
 
 export default MeetingModal;

components/ui/toaster.tsx

@@ -17,7 +17,7 @@ export function Toaster() {
     <ToastProvider>
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
-          <Toast key={id} {...props}>
+          <Toast className="border-none bg-dark-1 text-white" key={id} {...props}>
             <div className="grid gap-1">
               {title && <ToastTitle>{title}</ToastTitle>}
               {description && (