@blerp/design 1.3.16 → 1.4.1

package/dist/esm/NewCollectionModal.js

@@ -1,15 +1,109 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';
-import React, { useState, useRef, cloneElement } from 'react';
-import styled from 'styled-components';
-import ImageUploadModal from './ImageUploadModal.js';
-import { Button, Modal, Stack, Text, Input, Dropdown, Toggle } from './index.js';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React, { useState, cloneElement, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import ImageUploadModal from './ImageUpload.js';
+import { Button, Stack, Text, Input, Dropdown, Toggle } from './index.js';
 import { useWindowSize } from './ScreenSizeHook.js';
 
-var _templateObject;
-styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-const NewCollectionModal = _ref => {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const COLORS = {
+  backdrop: "rgba(0, 0, 0, 0.8)",
+  bgModal: "#1E1F22",
+  // Dark Gray (Discord-like)
+  bgInput: "#2B2D31",
+  textMain: "#F2F3F5",
+  textMuted: "#B5BAC1",
+  border: "#3F4147",
+  primary: "#5865F2",
+  danger: "#DA373C"
+}; // --- 1. Safe Portal Component (Prevents SSR Crashes) ---
+
+const Portal = _ref => {
+  let {
+    children
+  } = _ref;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true); // Optional: Lock body scroll when modal is open
+
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+  if (!mounted) return null;
+  return /*#__PURE__*/ReactDOM.createPortal(children, document.body);
+}; // --- 2. The Robust Modal Wrapper ---
+
+
+const DarkModal = _ref2 => {
+  let {
+    isOpen,
+    onClose,
+    children,
+    zIndex = 1300
+  } = _ref2;
+  if (!isOpen) return null;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: COLORS.backdrop,
+      zIndex: zIndex,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backdropFilter: "blur(4px)",
+      animation: "fadeIn 0.2s ease-out"
+    },
+    onMouseDown: onClose // Close on backdrop click
+
+  }, /*#__PURE__*/React.createElement("div", {
+    onMouseDown: e => e.stopPropagation(),
+    style: {
+      position: 'relative',
+      zIndex: zIndex + 1
+    }
+  }, children)), /*#__PURE__*/React.createElement("style", null, "@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }"));
+}; // --- Icons ---
+
+
+const Icon = _ref3 => {
+  let {
+    path,
+    size = "24px",
+    style,
+    onClick
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    style: _objectSpread({
+      display: 'inline-block',
+      flexShrink: 0,
+      cursor: onClick ? 'pointer' : 'default'
+    }, style),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("path", {
+    d: path
+  }));
+};
+
+const paths = {
+  close: "M18.3 5.71a.9959.9959 0 00-1.41 0L12 10.59 7.11 5.7a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z",
+  upload: "M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z"
+}; // --- MAIN COMPONENT ---
+
+const NewCollectionModal = _ref4 => {
   var _collectionToBeEdited, _collectionToBeEdited2, _collectionToBeEdited3;
 
   let {
@@ -19,272 +113,173 @@ const NewCollectionModal = _ref => {
     collectionToBeEdited,
     handleChangePremium,
     onClose,
-    children,
-    isAdmin
-  } = _ref;
-  const [open, setopen] = useState(false);
+    isAdmin,
+    open: externalOpen // NEW: Controlled prop
+
+  } = _ref4;
+  // State for uncontrolled mode (triggered by button)
+  const [internalOpen, setInternalOpen] = useState(false); // Determine if controlled or uncontrolled
+
+  const isControlled = externalOpen !== undefined;
+  const isOpen = isControlled ? externalOpen : internalOpen;
   const [imageFile, setImageFile] = useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited = collectionToBeEdited.image) === null || _collectionToBeEdited === void 0 ? void 0 : _collectionToBeEdited.original);
   const [imageURL, setImageURL] = useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited2 = collectionToBeEdited.image) === null || _collectionToBeEdited2 === void 0 ? void 0 : (_collectionToBeEdited3 = _collectionToBeEdited2.original) === null || _collectionToBeEdited3 === void 0 ? void 0 : _collectionToBeEdited3.url);
-  const [titleInput, setTitleInput] = useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.title);
-  const [descriptionInput, setDescriptionInput] = useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.description);
+  const [titleInput, setTitleInput] = useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.title) || "");
+  const [descriptionInput, setDescriptionInput] = useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.description) || "");
   const [visibility, setVisibility] = useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility) || "PUBLIC");
-  const [price, setPrice] = useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.price);
-  const triggerRef = useRef();
+  const [price, setPrice] = useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.price) || 0);
   const [editImage, setEditImage] = useState(false);
-  useState(false);
   const size = useWindowSize();
+  const isMobile = size.width <= 600;
 
   const handleClose = () => {
-    setopen(false);
-
-    if (onClose) {
-      onClose();
-    }
+    if (!isControlled) setInternalOpen(false);
+    if (onClose) onClose();
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, trigger ? /*#__PURE__*/cloneElement(trigger, {
-    ref: triggerRef,
-    onClick: () => setopen(true)
-  }) : /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setopen(true),
+  return /*#__PURE__*/React.createElement(React.Fragment, null, trigger && !isControlled ? /*#__PURE__*/cloneElement(trigger, {
+    onClick: () => setInternalOpen(true)
+  }) : !isControlled && !trigger ? /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setInternalOpen(true),
     color: "grey4",
     sx: {
       fontSize: "10px"
     }
-  }, "Organize Collection"), /*#__PURE__*/React.createElement(Modal, {
-    "aria-labelledby": "transition-modal-title",
-    "aria-describedby": "transition-modal-description",
-    open: open,
-    onClose: () => handleClose(),
-    closeAfterTransition: true
+  }, "Organize Collection") : null, /*#__PURE__*/React.createElement(DarkModal, {
+    isOpen: isOpen,
+    onClose: handleClose,
+    zIndex: 1300
   }, /*#__PURE__*/React.createElement(Stack, {
     sx: {
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      width: 600,
-      height: 520,
+      width: isMobile ? "100vw" : "600px",
+      maxHeight: "90vh",
       overflowY: "auto",
-      bgcolor: "white.main",
-      border: "none",
-      boxShadow: 24,
-      borderRadius: "8px",
-      pt: 2,
-      px: 6,
-      pb: 3,
-      alignItems: "center",
-      justifyContent: "flex-start",
-      "@media(max-width: 600px)": {
-        height: "100vh",
-        width: "98vw"
-      }
+      backgroundColor: COLORS.bgModal,
+      color: COLORS.textMain,
+      borderRadius: isMobile ? "0" : "16px",
+      border: "1px solid ".concat(COLORS.border),
+      padding: isMobile ? "20px" : "32px 48px 40px",
+      boxShadow: "0 20px 60px rgba(0,0,0,0.5)"
     }
-  }, /*#__PURE__*/React.createElement(Modal, {
-    sx: {
-      backdropFilter: "blur(8px)",
-      overflow: "scroll"
-    },
-    open: editImage,
-    onClose: () => setEditImage(false),
-    "aria-labelledby": "image-update-modal",
-    "aria-describedby": "image-update-modal"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      position: "absolute",
-      height: size.width > 600 ? 600 : "100%",
-      overflowY: "auto",
-      top: size.width > 600 ? "48%" : "0",
-      left: size.width > 600 ? "50%" : "0",
-      transform: size.width > 600 ? "translate(-50%, -50%)" : "0",
-      width: size.width > 600 ? 275 : "100vw",
-      minWidth: "320px",
-      bgcolor: "white.main",
-      boxShadow: 24,
-      borderRadius: size.width > 600 ? "8px" : "0",
-      p: size.width > 600 ? 4 : 0,
-      padding: size.width > 600 ? "16px 32px 32px" : "16px 0",
-      ":focus": {
-        border: "none",
-        outline: "none"
-      }
-    }
-  }, /*#__PURE__*/React.createElement(ImageUploadModal, {
-    prevImage: collectionToBeEdited ? imageURL : undefined,
-    updateImage: newImage => {
-      setImageURL(URL.createObjectURL(newImage));
-      setImageFile(newImage);
-    },
-    width: "150px",
-    open: editImage,
-    onClose: () => setEditImage(false),
-    title: "Collection Image",
-    sizeInfo: "Minimum size is 64px X 64px",
-    isSquareImage: true
-  }))), /*#__PURE__*/React.createElement(CloseRoundedIcon, {
-    sx: {
-      color: "notBlack.main",
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: handleClose,
+    style: {
       position: "absolute",
-      right: 10,
-      top: 10,
+      top: "20px",
+      right: "20px",
       cursor: "pointer",
-      "@media(max-width: 600px)": {
-        right: 50,
-        top: 30
-      }
-    },
-    onClick: () => handleClose()
-  }), /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      minWidth: "320px"
+      padding: "8px",
+      color: COLORS.textMuted
     }
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: paths.close
+  })), /*#__PURE__*/React.createElement(Text, {
+    fontSize: "28px",
+    fontWeight: "700",
+    fontColor: COLORS.textMain,
     sx: {
-      alignSelf: size.width > 600 ? "flex-start" : "center"
-    },
-    fontSize: "40px",
-    margin: size.width > 600 ? "9px 0" : "24px 0 9px"
-  }, collectionToBeEdited ? "Edit" : "New", " Collection"), /*#__PURE__*/React.createElement(Stack, {
-    direction: size.width > 600 ? "row" : "column",
-    sx: {
-      width: "100%",
-      marginTop: "8px",
-      minHeight: size.width > 600 ? "272px" : "470px",
-      justifyContent: size.width > 600 ? "center" : "space-between"
+      mb: 4
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
-    alignItems: "center",
-    justifyContent: "flex-start",
-    marginRight: size.width > 600 ? size.width > 700 ? "48px" : "32px" : "0"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      width: "180px",
-      position: "relative",
-      justifyContent: "flex-start",
-      "&:hover": {
-        width: "180px",
-        background: "notBlack.main"
-      }
+  }, collectionToBeEdited ? "Edit" : "New", " Collection"), /*#__PURE__*/React.createElement(Stack, {
+    direction: isMobile ? "column" : "row",
+    spacing: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: () => setEditImage(true),
+    style: {
+      width: "160px",
+      height: "160px",
+      borderRadius: "12px",
+      backgroundColor: COLORS.bgInput,
+      border: "2px dashed ".concat(COLORS.border),
+      cursor: "pointer",
+      overflow: "hidden",
+      flexShrink: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
     }
   }, imageURL ? /*#__PURE__*/React.createElement("img", {
+    src: imageURL,
+    alt: "Preview",
     style: {
-      objectFit: "cover",
-      width: "100%",
-      minWidth: "75px",
-      height: "auto",
-      borderRadius: "8px"
-    },
-    alt: "uploaded img",
-    src: imageURL
-  }) : /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      justifyContent: "center",
-      width: "calc(100% - 2px)",
-      minWidth: "75px",
-      height: "176px",
-      borderRadius: "8px",
-      border: "1px solid",
-      color: "grey3.main"
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      textAlign: "center"
-    }
-  }, "Click here to upload a photo for this collection")), /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      position: "absolute",
-      justifyContent: "flex-end",
-      alignItems: "flex-end",
-      top: "0",
-      right: "0",
       width: "100%",
       height: "100%",
-      backgroundColor: "transparent",
-      transition: "0.2s",
-      "&:hover div": {
-        transition: "0.2s",
-        opacity: "1"
-      }
-    },
+      objectFit: "cover"
+    }
+  }) : /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: paths.upload,
     style: {
-      borderRadius: "50%",
-      zIndex: "6"
-    },
-    onClick: () => setEditImage(true)
-  }, /*#__PURE__*/React.createElement(Stack, {
-    alignItems: "center",
-    justifyContent: "center",
-    sx: {
-      opacity: "0",
-      position: "absolute",
-      top: "0",
-      bottom: "0",
-      left: "0",
-      right: "0",
-      cursor: "pointer",
-      width: "100%",
-      transition: "opacity .2s",
-      background: "black",
-      borderRadius: "8px"
+      color: COLORS.textMuted
     }
-  }, /*#__PURE__*/React.createElement(FileUploadRoundedIcon, {
+  }), /*#__PURE__*/React.createElement(Text, {
+    fontSize: "12px",
+    fontColor: COLORS.textMuted,
     sx: {
-      color: "white.main",
-      fontSize: "40px",
-      height: "120px",
-      width: "120px"
+      mt: 1
     }
-  }))))), /*#__PURE__*/React.createElement(Stack, {
-    justifyContent: "space-between",
+  }, "Upload"))), /*#__PURE__*/React.createElement(Stack, {
+    spacing: 3,
     sx: {
-      // height: "220px",
-      width: "64%",
-      minWidth: "320px",
-      position: "relative",
-      top: size.width > 600 ? "-20px" : "0",
-      margin: "0 auto"
+      flex: 1,
+      width: "100%"
     }
   }, /*#__PURE__*/React.createElement(Input, {
-    disabled: !isAdmin && (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium),
-    color: "notBlack",
-    label: "Collection Name",
+    label: "Name",
     value: titleInput,
     onChange: e => setTitleInput(e.target.value),
-    variant: "standard",
+    variant: "filled",
+    fullWidth: true,
     sx: {
-      margin: "0"
+      "& .MuiInputBase-root": {
+        color: COLORS.textMain
+      },
+      "& .MuiInputLabel-root": {
+        color: COLORS.textMuted
+      },
+      "& .MuiFilledInput-root": {
+        backgroundColor: COLORS.bgInput
+      }
     }
   }), /*#__PURE__*/React.createElement(Input, {
-    disabled: !isAdmin && (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium),
-    label: "Add a description",
-    variant: "filled",
-    color: "notBlack",
+    label: "Description",
     value: descriptionInput,
     onChange: e => setDescriptionInput(e.target.value),
     multiline: true,
-    rows: 4,
+    rows: 3,
+    fullWidth: true,
     sx: {
-      fontSize: "16px",
-      paddingBottom: "12px",
-      marginTop: "18px"
+      "& .MuiInputBase-root": {
+        color: COLORS.textMain
+      },
+      "& .MuiInputLabel-root": {
+        color: COLORS.textMuted
+      },
+      "& .MuiFilledInput-root": {
+        backgroundColor: COLORS.bgInput
+      }
     }
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2,
+    justifyContent: "space-between",
+    flexWrap: "wrap"
+  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
+    fontSize: "12px",
+    fontColor: COLORS.textMuted,
     sx: {
-      width: "40%"
+      mb: 1
     }
-  }, /*#__PURE__*/React.createElement(Text, {
-    marginBottom: "4px",
-    fontSize: "18px"
-  }, "Visibility:"), /*#__PURE__*/React.createElement(Dropdown, {
+  }, "VISIBILITY"), /*#__PURE__*/React.createElement(Dropdown, {
     sx: {
-      height: "40px"
+      height: "40px",
+      color: COLORS.textMain,
+      backgroundColor: COLORS.bgInput,
+      border: "1px solid ".concat(COLORS.border)
     },
     buttonTitle: visibility,
-    handleOptionClicked: option => setVisibility(option.name),
+    handleOptionClicked: opt => setVisibility(opt.name),
     options: [{
       name: "PUBLIC"
     }, {
@@ -292,100 +287,90 @@ const NewCollectionModal = _ref => {
     }, {
       name: "UNLISTED"
     }]
-  })), isAdmin && /*#__PURE__*/React.createElement(Stack, {
+  })), isAdmin && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
+    fontSize: "12px",
+    fontColor: COLORS.textMuted,
     sx: {
-      width: "40%"
+      mb: 1
     }
-  }, /*#__PURE__*/React.createElement(Text, {
-    marginBottom: "4px",
-    fontSize: "18px"
-  }, "Premium:"), /*#__PURE__*/React.createElement(Toggle, {
+  }, "PREMIUM"), /*#__PURE__*/React.createElement(Toggle, {
     checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
-    onClick: () => {
-      setVisibility("PUBLIC");
-      handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
-    }
-  })), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React.createElement(Stack, {
+    onClick: () => handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium))
+  })), (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium) && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
+    fontSize: "12px",
+    fontColor: COLORS.textMuted,
     sx: {
-      width: "40%"
+      mb: 1
     }
-  }, /*#__PURE__*/React.createElement(Text, {
-    marginBottom: "4px",
-    fontSize: "18px"
-  }, "Price:"), /*#__PURE__*/React.createElement(Input, {
-    error: !(price > 0),
-    size: "small",
-    startAdornment: "$",
-    variant: "standard",
-    color: "grey6",
+  }, "PRICE"), /*#__PURE__*/React.createElement(Input, {
     value: price,
-    onChange: e => {
-      setPrice(e.target.value);
+    onChange: e => setPrice(e.target.value),
+    size: "small",
+    sx: {
+      "& input": {
+        color: COLORS.textMain
+      }
     }
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null)))), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    variant: "contained",
-    fontSize: "32px",
+  }))))), /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "center",
+    spacing: 2,
     sx: {
-      width: "40%",
-      minWidth: "200px",
-      height: "48px",
-      fontWeight: "16px",
-      margin: size.width > 600 ? "0px auto 0" : "40px auto 0"
-    },
-    disableElevation: true,
+      mt: 5
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: () => {
-      // what to do if this modal is being used to edit a collection
-      if (collectionToBeEdited) {
-        if (!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium) || collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium && price > 0) {
-          handleCollection({
-            _id: collectionToBeEdited._id,
-            image: imageFile,
-            title: titleInput,
-            description: descriptionInput,
-            visibility: visibility,
-            price: price
-          });
-          handleClose();
-        } else {
-          console.log("price must be set higher than 0");
-        } // what to do if this modal is being used to create a new collection
-
-      } else {
-        if (!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium) || collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium && price > 0) {
-          handleCollection({
-            image: imageFile,
-            title: titleInput,
-            description: descriptionInput,
-            visibility: visibility,
-            price: collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? price : 0
-          });
-          handleClose();
-        } else {
-          console.log("price must be set higher than 0");
-        }
+      handleCollection({
+        _id: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited._id,
+        image: imageFile,
+        title: titleInput,
+        description: descriptionInput,
+        visibility,
+        price: collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? price : 0
+      }); // handleClose();
+    },
+    sx: {
+      backgroundColor: COLORS.primary,
+      color: "#FFF",
+      width: "100%",
+      maxWidth: "280px",
+      height: "44px",
+      borderRadius: "8px",
+      fontWeight: "600",
+      "&:hover": {
+        opacity: 0.9
       }
     }
-  }, collectionToBeEdited ? "Save Changes" : "Create Collection"), collectionToBeEdited && deleteCollectionModal ? deleteCollectionModal : /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
+  }, collectionToBeEdited ? "Save Changes" : "Create Collection"), /*#__PURE__*/React.createElement(Button, {
     variant: "text",
-    fontSize: "16px",
-    disableElevation: true,
+    onClick: handleClose,
     sx: {
-      margin: "10px auto"
-    },
-    onClick: () => {
-      handleClose();
+      color: COLORS.textMuted
     }
-  }, "Cancel"), /*#__PURE__*/React.createElement(Text, {
-    fontSize: "14px",
-    textAlign: "center",
-    fontWeight: "lighter",
+  }, "Cancel")))), /*#__PURE__*/React.createElement(DarkModal, {
+    isOpen: editImage,
+    onClose: () => setEditImage(false),
+    zIndex: 1400
+  }, /*#__PURE__*/React.createElement(Stack, {
     sx: {
-      width: "95%"
+      backgroundColor: COLORS.bgModal,
+      padding: "24px",
+      borderRadius: "12px",
+      width: isMobile ? "100vw" : "340px",
+      border: "1px solid ".concat(COLORS.border)
     }
-  }, "By proceeding, you agree to allow Blerp access to the image you choose to upload. Please make sure you have the right to upload the image.")))));
+  }, /*#__PURE__*/React.createElement(ImageUploadModal, {
+    prevImage: collectionToBeEdited ? imageURL : undefined,
+    updateImage: newImage => {
+      setImageURL(URL.createObjectURL(newImage));
+      setImageFile(newImage);
+    },
+    width: "100%",
+    open: editImage,
+    onClose: () => setEditImage(false),
+    title: "Collection Image",
+    sizeInfo: "Minimum size is 64px X 64px",
+    isSquareImage: true
+  }))));
 };
 
-export default NewCollectionModal;
-export { NewCollectionModal };
+export { NewCollectionModal, NewCollectionModal as default };