feat: add size prop to modal component

Author: bishalshrestha013

packages/ui/src/Modal/index.tsx

@@ -7,23 +7,29 @@ interface ModalProperties {
   className?: string;
   footer?: React.ReactNode;
   header?: string | JSX.Element;
-  visible: boolean;
   onHide: () => void;
+  size?: "medium" | "large";
+  visible: boolean;
 }
 
 const Modal: React.FC<ModalProperties> = ({
   children,
   className = "",
   footer,
   header,
-  visible = false,
   onHide,
+  size = "medium",
+  visible = false,
 }) => {
-  if (!visible) return null;
+  if (!visible) {
+    return null;
+  }
+
+  const modalClassName = ["dz-modal", className, size].join(" ");
 
   return (
     <div role="dialog" className="dz-modal-overlay">
-      <div className={`dz-modal ${className}`.trim()}>
+      <div className={modalClassName}>
         <div className="dz-modal-header">
           {typeof header === "string" ? (
             <span role="heading">{header}</span>

packages/ui/src/assets/css/modal.css

@@ -13,15 +13,15 @@
 
 .dz-modal {
   background-color: #fff;
-  padding: 1rem;
-  z-index: 1000;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
-  min-width: 300px;
-  max-width: 80%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  color: var(--color);
   max-height: 80%;
+  min-width: 300px;
   overflow-y: auto;
-  color: var(--color);
+  padding: 1rem;
+  width: calc(100% - 2rem);
+  z-index: 1000;
 }
 
 .dz-modal .dz-modal-header {
@@ -53,3 +53,15 @@
   padding: 0.75rem;
   margin-left: auto;
 }
+
+@media screen and (min-width: 576px) {
+  .dz-modal {
+    max-width: 35rem;
+    min-width: 25rem;
+    width: auto;
+  }
+
+  .dz-modal.large {
+    max-width: 56.25rem;
+  }
+}