Added modal custom padding property

src/components/Button/Button.stories.tsx

@@ -38,11 +38,8 @@ const Template: StoryFn<ButtonProps> = (args) => (
       Content
     </Button>{" "}
     -- CHILDREN BUTTON
-    <Button
-      id={"random_btn2"}
-      label={"Content"}
-      variant={args.variant}
-    /> -- LABEL BUTTON
+    <Button id={"random_btn2"} label={"Content"} variant={args.variant} /> --
+    LABEL BUTTON
     <Button id={"random_btn1"} icon={<TestIcon />} variant={args.variant}>
       Content
     </Button>{" "}

src/components/ModalBox/ModalBox.stories.tsx

@@ -37,6 +37,7 @@ const Template: StoryFn<ModalBoxProps> = ({
   widthLimit,
   customMaxWidth,
   backgroundOverlay,
+  customContentPadding,
 }) => {
   const [openModal, setOpenModal] = useState<boolean>(false);
 
@@ -62,6 +63,7 @@ const Template: StoryFn<ModalBoxProps> = ({
           titleIcon={titleIcon}
           widthLimit={widthLimit}
           customMaxWidth={customMaxWidth}
+          customContentPadding={customContentPadding}
         >
           <h1>Inside my Computer</h1>
           <p>
@@ -127,6 +129,15 @@ NoOverlayBG.args = {
   backgroundOverlay: false,
 };
 
+export const CustomPadding = Template.bind({});
+
+CustomPadding.args = {
+  title: "Test Title",
+  titleIcon: <TestIcon />,
+  backgroundOverlay: false,
+  customContentPadding: 0,
+};
+
 export const CustomMaxWidth = Template.bind({});
 
 CustomMaxWidth.args = {

src/components/ModalBox/ModalBox.styles.ts

@@ -18,7 +18,11 @@ import { css, Theme } from "@emotion/react";
 
 import { CssProperties } from "../../../styled-system/types";
 
-export const modalContainer = (theme: Theme, width: CssProperties["width"]) =>
+export const modalContainer = (
+  theme: Theme,
+  width: CssProperties["width"],
+  padding: CssProperties["padding"],
+) =>
   css({
     fontFamily: "'Geist', sans-serif",
     color: theme.colors["Color/Neutral/Text/colorTextLabel"],
@@ -31,7 +35,7 @@ export const modalContainer = (theme: Theme, width: CssProperties["width"]) =>
     boxSizing: "border-box",
     "& .dialogContent": {
       boxSizing: "border-box",
-      padding: 24,
+      padding: padding,
       maxHeight: "calc(100vh - 150px)",
       overflowY: "auto",
     },

src/components/ModalBox/ModalBox.types.ts

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
+import React, { CSSProperties } from "react";
 
 import { OverrideTheme } from "../../global/global.types";
 
@@ -27,5 +27,6 @@ export interface ModalBoxProps {
   titleIcon?: React.ReactNode;
   backgroundOverlay?: boolean;
   customMaxWidth?: number | string;
+  customContentPadding?: CSSProperties["padding"];
   sx?: OverrideTheme;
 }

src/components/ModalBox/index.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { FC, useEffect, useState } from "react";
+import { FC } from "react";
 import { createPortal } from "react-dom";
 import { useTheme } from "@emotion/react";
 
@@ -33,6 +33,7 @@ const ModalBox: FC<ModalBoxProps> = ({
   titleIcon,
   backgroundOverlay = true,
   customMaxWidth = 750,
+  customContentPadding = 24,
   sx,
 }) => {
   const theme = useTheme();
@@ -41,6 +42,7 @@ const ModalBox: FC<ModalBoxProps> = ({
   const containerStyles = modalContainer(
     theme,
     widthLimit ? customMaxWidth : "100%",
+    customContentPadding,
   );
   const titleStyles = modalTitleBar(theme);