@blerp/design 1.3.16 → 1.4.1

package/dist/cjs/NewCollectionModal.js

@@ -2,26 +2,118 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
-var FileUploadRoundedIcon = require('@mui/icons-material/FileUploadRounded');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var styled = require('styled-components');
-var ImageUploadModal = require('./ImageUploadModal.js');
+var ReactDOM = require('react-dom');
+var ImageUpload = require('./ImageUpload.js');
 var index = require('./index.js');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
-var FileUploadRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(FileUploadRoundedIcon);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var _templateObject;
-styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default']([""])));
-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__default["default"](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] = React.useState(false);
+  React.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__default["default"].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__default["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+    onMouseDown: e => e.stopPropagation(),
+    style: {
+      position: 'relative',
+      zIndex: zIndex + 1
+    }
+  }, children)), /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].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 {
@@ -31,272 +123,173 @@ const NewCollectionModal = _ref => {
     collectionToBeEdited,
     handleChangePremium,
     onClose,
-    children,
-    isAdmin
-  } = _ref;
-  const [open, setopen] = React.useState(false);
+    isAdmin,
+    open: externalOpen // NEW: Controlled prop
+
+  } = _ref4;
+  // State for uncontrolled mode (triggered by button)
+  const [internalOpen, setInternalOpen] = React.useState(false); // Determine if controlled or uncontrolled
+
+  const isControlled = externalOpen !== undefined;
+  const isOpen = isControlled ? externalOpen : internalOpen;
   const [imageFile, setImageFile] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited = collectionToBeEdited.image) === null || _collectionToBeEdited === void 0 ? void 0 : _collectionToBeEdited.original);
   const [imageURL, setImageURL] = React.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] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.title);
-  const [descriptionInput, setDescriptionInput] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.description);
+  const [titleInput, setTitleInput] = React.useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.title) || "");
+  const [descriptionInput, setDescriptionInput] = React.useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.description) || "");
   const [visibility, setVisibility] = React.useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility) || "PUBLIC");
-  const [price, setPrice] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.price);
-  const triggerRef = React.useRef();
+  const [price, setPrice] = React.useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.price) || 0);
   const [editImage, setEditImage] = React.useState(false);
-  React.useState(false);
   const size = ScreenSizeHook.useWindowSize();
+  const isMobile = size.width <= 600;
 
   const handleClose = () => {
-    setopen(false);
-
-    if (onClose) {
-      onClose();
-    }
+    if (!isControlled) setInternalOpen(false);
+    if (onClose) onClose();
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, trigger ? /*#__PURE__*/React.cloneElement(trigger, {
-    ref: triggerRef,
-    onClick: () => setopen(true)
-  }) : /*#__PURE__*/React__default['default'].createElement(index.Button, {
-    onClick: () => setopen(true),
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, trigger && !isControlled ? /*#__PURE__*/React.cloneElement(trigger, {
+    onClick: () => setInternalOpen(true)
+  }) : !isControlled && !trigger ? /*#__PURE__*/React__default["default"].createElement(index.Button, {
+    onClick: () => setInternalOpen(true),
     color: "grey4",
     sx: {
       fontSize: "10px"
     }
-  }, "Organize Collection"), /*#__PURE__*/React__default['default'].createElement(index.Modal, {
-    "aria-labelledby": "transition-modal-title",
-    "aria-describedby": "transition-modal-description",
-    open: open,
-    onClose: () => handleClose(),
-    closeAfterTransition: true
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, "Organize Collection") : null, /*#__PURE__*/React__default["default"].createElement(DarkModal, {
+    isOpen: isOpen,
+    onClose: handleClose,
+    zIndex: 1300
+  }, /*#__PURE__*/React__default["default"].createElement(index.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__default['default'].createElement(index.Modal, {
-    sx: {
-      backdropFilter: "blur(8px)",
-      overflow: "scroll"
-    },
-    open: editImage,
-    onClose: () => setEditImage(false),
-    "aria-labelledby": "image-update-modal",
-    "aria-describedby": "image-update-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(index.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__default['default'].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__default['default'].createElement(CloseRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main",
+  }, /*#__PURE__*/React__default["default"].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__default['default'].createElement(index.Stack, {
-    sx: {
-      minWidth: "320px"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    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__default['default'].createElement(index.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"
+      padding: "8px",
+      color: COLORS.textMuted
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    alignItems: "center",
-    justifyContent: "flex-start",
-    marginRight: size.width > 600 ? size.width > 700 ? "48px" : "32px" : "0"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.close
+  })), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    fontSize: "28px",
+    fontWeight: "700",
+    fontColor: COLORS.textMain,
     sx: {
-      width: "180px",
-      position: "relative",
-      justifyContent: "flex-start",
-      "&:hover": {
-        width: "180px",
-        background: "notBlack.main"
-      }
+      mb: 4
     }
-  }, imageURL ? /*#__PURE__*/React__default['default'].createElement("img", {
+  }, collectionToBeEdited ? "Edit" : "New", " Collection"), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    direction: isMobile ? "column" : "row",
+    spacing: 4
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: () => setEditImage(true),
     style: {
-      objectFit: "cover",
-      width: "100%",
-      minWidth: "75px",
-      height: "auto",
-      borderRadius: "8px"
-    },
-    alt: "uploaded img",
-    src: imageURL
-  }) : /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    sx: {
-      justifyContent: "center",
-      width: "calc(100% - 2px)",
-      minWidth: "75px",
-      height: "176px",
-      borderRadius: "8px",
-      border: "1px solid",
-      color: "grey3.main"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    sx: {
-      textAlign: "center"
+      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"
     }
-  }, "Click here to upload a photo for this collection")), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    sx: {
-      position: "absolute",
-      justifyContent: "flex-end",
-      alignItems: "flex-end",
-      top: "0",
-      right: "0",
+  }, imageURL ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: imageURL,
+    alt: "Preview",
+    style: {
       width: "100%",
       height: "100%",
-      backgroundColor: "transparent",
-      transition: "0.2s",
-      "&:hover div": {
-        transition: "0.2s",
-        opacity: "1"
-      }
-    },
+      objectFit: "cover"
+    }
+  }) : /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    alignItems: "center"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.upload,
     style: {
-      borderRadius: "50%",
-      zIndex: "6"
-    },
-    onClick: () => setEditImage(true)
-  }, /*#__PURE__*/React__default['default'].createElement(index.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__default['default'].createElement(FileUploadRoundedIcon__default['default'], {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    fontSize: "12px",
+    fontColor: COLORS.textMuted,
     sx: {
-      color: "white.main",
-      fontSize: "40px",
-      height: "120px",
-      width: "120px"
+      mt: 1
     }
-  }))))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    justifyContent: "space-between",
+  }, "Upload"))), /*#__PURE__*/React__default["default"].createElement(index.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__default['default'].createElement(index.Input, {
-    disabled: !isAdmin && (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium),
-    color: "notBlack",
-    label: "Collection Name",
+  }, /*#__PURE__*/React__default["default"].createElement(index.Input, {
+    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__default['default'].createElement(index.Input, {
-    disabled: !isAdmin && (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium),
-    label: "Add a description",
-    variant: "filled",
-    color: "notBlack",
+  }), /*#__PURE__*/React__default["default"].createElement(index.Input, {
+    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__default['default'].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    spacing: 2,
+    justifyContent: "space-between",
+    flexWrap: "wrap"
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, null, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    fontSize: "12px",
+    fontColor: COLORS.textMuted,
     sx: {
-      width: "40%"
+      mb: 1
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    marginBottom: "4px",
-    fontSize: "18px"
-  }, "Visibility:"), /*#__PURE__*/React__default['default'].createElement(index.Dropdown, {
+  }, "VISIBILITY"), /*#__PURE__*/React__default["default"].createElement(index.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"
     }, {
@@ -304,100 +297,91 @@ const NewCollectionModal = _ref => {
     }, {
       name: "UNLISTED"
     }]
-  })), isAdmin && /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  })), isAdmin && /*#__PURE__*/React__default["default"].createElement(index.Stack, null, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    fontSize: "12px",
+    fontColor: COLORS.textMuted,
     sx: {
-      width: "40%"
+      mb: 1
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    marginBottom: "4px",
-    fontSize: "18px"
-  }, "Premium:"), /*#__PURE__*/React__default['default'].createElement(index.Toggle, {
+  }, "PREMIUM"), /*#__PURE__*/React__default["default"].createElement(index.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__default['default'].createElement(index.Stack, {
+    onClick: () => handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium))
+  })), (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium) && /*#__PURE__*/React__default["default"].createElement(index.Stack, null, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    fontSize: "12px",
+    fontColor: COLORS.textMuted,
     sx: {
-      width: "40%"
+      mb: 1
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    marginBottom: "4px",
-    fontSize: "18px"
-  }, "Price:"), /*#__PURE__*/React__default['default'].createElement(index.Input, {
-    error: !(price > 0),
-    size: "small",
-    startAdornment: "$",
-    variant: "standard",
-    color: "grey6",
+  }, "PRICE"), /*#__PURE__*/React__default["default"].createElement(index.Input, {
     value: price,
-    onChange: e => {
-      setPrice(e.target.value);
+    onChange: e => setPrice(e.target.value),
+    size: "small",
+    sx: {
+      "& input": {
+        color: COLORS.textMain
+      }
     }
-  })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)))), /*#__PURE__*/React__default['default'].createElement(index.Button, {
-    color: "primary",
-    variant: "contained",
-    fontSize: "32px",
+  }))))), /*#__PURE__*/React__default["default"].createElement(index.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__default["default"].createElement(index.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__default['default'].createElement(index.Button, {
-    color: "primary",
+  }, collectionToBeEdited ? "Save Changes" : "Create Collection"), /*#__PURE__*/React__default["default"].createElement(index.Button, {
     variant: "text",
-    fontSize: "16px",
-    disableElevation: true,
+    onClick: handleClose,
     sx: {
-      margin: "10px auto"
-    },
-    onClick: () => {
-      handleClose();
+      color: COLORS.textMuted
     }
-  }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    fontSize: "14px",
-    textAlign: "center",
-    fontWeight: "lighter",
+  }, "Cancel")))), /*#__PURE__*/React__default["default"].createElement(DarkModal, {
+    isOpen: editImage,
+    onClose: () => setEditImage(false),
+    zIndex: 1400
+  }, /*#__PURE__*/React__default["default"].createElement(index.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__default["default"].createElement(ImageUpload, {
+    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
+  }))));
 };
 
 exports.NewCollectionModal = NewCollectionModal;
-exports.default = NewCollectionModal;
+exports["default"] = NewCollectionModal;