Merge pull request #425 from MandeepPaul/fix/#367-spacing/padding-iss…

…ue-on-a-text-editor-popup fix/#367-improved dialog styles on text-editor popup
bluewave-labs · Dec 25, 2024 · f389418 · f389418
2 parents d41ff4d + 25e2693
commit f389418
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/frontend/src/components/RichTextEditor/EditorLinkDialog/DialogStyles.js b/frontend/src/components/RichTextEditor/EditorLinkDialog/DialogStyles.js
@@ -0,0 +1,18 @@
+export const dialogStyles = {
+  paper: {
+    padding: 2,
+    borderRadius: "4px",
+  },
+  title: {
+    padding: 0,
+  },
+  content: {
+    padding: 0,
+    paddingBottom: 2,
+    overflow: "hidden",
+  },
+  actions: {
+    paddingBottom: 0,
+    paddingRight: 0,
+  },
+};
diff --git a/frontend/src/components/RichTextEditor/EditorLinkDialog/LinkDialog.jsx b/frontend/src/components/RichTextEditor/EditorLinkDialog/LinkDialog.jsx
@@ -7,6 +7,7 @@ import {
 } from "@mui/material";
 import Button from "../../Button/Button";
 import CustomTextField from "../../TextFieldComponents/CustomTextField/CustomTextField";
+import { dialogStyles } from "./DialogStyles";
 
 const LinkDialog = ({
   open,
@@ -18,17 +19,25 @@ const LinkDialog = ({
   handleOpenLink = () => {},
 }) => {
   return (
-    <Dialog open={open} onClose={handleClose}>
-      <DialogTitle>{isLinkActive ? "Edit Link" : "Add Link"}</DialogTitle>
-      <DialogContent>
+    <Dialog
+      PaperProps={{
+        sx: dialogStyles.paper,
+      }}
+      open={open}
+      onClose={handleClose}
+    >
+      <DialogTitle sx={dialogStyles.title}>
+        {isLinkActive ? "Edit link" : "Add link"}
+      </DialogTitle>
+      <DialogContent sx={dialogStyles.content}>
         <CustomTextField
           type="url"
           placeholder="https://"
           value={url}
           onChange={(e) => setUrl(e.target.value)}
         />
       </DialogContent>
-      <DialogActions>
+      <DialogActions sx={dialogStyles.actions}>
         {isLinkActive && (
           <Button
             text="Open Link"
@@ -37,16 +46,17 @@ const LinkDialog = ({
             onClick={handleOpenLink}
           />
         )}
-        <Button
-          text={url ? "Insert/Update" : "Remove Link"}
-          onClick={handleInsertLink}
-        />
+
         <Button
           text="Cancel"
           buttonType="secondary"
           variant="text"
           onClick={handleClose}
         />
+        <Button
+          text={url ? "Insert/Update" : "Remove link"}
+          onClick={handleInsertLink}
+        />
       </DialogActions>
     </Dialog>
   );