redesign mint page

.gitignore

@@ -12,4 +12,5 @@ character-assets
 .eslint-cache
 .env
 .eslintcache
-lerna-debug.log
+lerna-debug.log
+.vscode

package.json

@@ -53,6 +53,7 @@
     "eslint-plugin-no-inline-styles": "^1.0.5",
     "eslint-plugin-react": "^7.31.11",
     "prettier": "^2.3.2",
+    "sass": "^1.58.0",
     "vite": "^4.0.0"
   }
 }

src/App.jsx

@@ -18,6 +18,7 @@ import Background from "./components/Background"
 import View from "./pages/View"
 import Save from "./pages/Save"
 import Load from "./pages/Load"
+import Mint from "./pages/Mint"
 import BioPage from "./pages/Bio"
 import Create from "./pages/Create"
 import Landing from "./pages/Landing"
@@ -181,7 +182,7 @@ export default function App() {
   const updateCameraPosition = () => {
     if (!effectManager.camera) return
 
-    if ([ViewMode.BIO, ViewMode.MINT, ViewMode.CHAT].includes(viewMode)) {
+    if ([ViewMode.BIO, ViewMode.CHAT].includes(viewMode)) {
       // auto move camera
       if (viewMode === ViewMode.CHAT) {
         cameraDistance = cameraDistanceChat
@@ -292,7 +293,7 @@ export default function App() {
     ),
     [ViewMode.CREATE]: <Create fetchNewModel={fetchNewModel} />,
     [ViewMode.LOAD]: <Load />,
-    // [ViewMode.MINT]: <Mint />,
+    [ViewMode.MINT]: <Mint />,
     [ViewMode.SAVE]: <Save />,
     [ViewMode.CHAT]: <View templateInfo={templateInfo} />,
   }

src/components/custom-button/IconCollection.jsx

@@ -123,4 +123,12 @@ export const IconCollection = [
     name: 'soundoff',
     file: '/assets/icons/soundoff.svg',
   },
+  {
+    name: 'soundoff',
+    file: '/assets/icons/soundoff.svg',
+  },
+  {
+    name: 'polygon',
+    file: '/assets/icons/polygon.svg',
+  },
 ];

src/pages/Mint.jsx

@@ -1,14 +1,14 @@
 import React from "react"
-import styles from "./Mint.module.css"
+import styles from "./Mint.module.scss"
 import { ViewMode, ViewContext } from "../context/ViewContext"
 
-import Mint from "../components/Mint"
-import ResizableDiv from "../components/Resizable"
+// import Mint from "../components/Mint"
+// import ResizableDiv from "../components/Resizable"
 import CustomButton from "../components/custom-button"
 
 function MintComponent() {
   const { setViewMode } = React.useContext(ViewContext)
-  const [screenshotPosition,  setScreenshotPosition] = React.useState({x:250,y:25,width:256,height:256});
+  // const [screenshotPosition,  setScreenshotPosition] = React.useState({x:250,y:25,width:256,height:256});
 
   const back = () => {
     setViewMode(ViewMode.SAVE)
@@ -18,19 +18,48 @@ function MintComponent() {
     setViewMode(ViewMode.CHAT)
   }
 
+  function MenuTitle() {
+    return (
+      <div className={styles["mainTitleWrap"]}>
+        <div className={styles["topLine"]} />
+        <div className={styles["mainTitle"]}>Mint</div>
+      </div>
+    )
+  }
+
   return (
     <div className={styles.container}>
       <div className={"sectionTitle"}>Mint Your Character</div>
-      <ResizableDiv setScreenshotPosition = {setScreenshotPosition} screenshotPosition = {screenshotPosition}/>
+
+      {/* <ResizableDiv setScreenshotPosition = {setScreenshotPosition} screenshotPosition = {screenshotPosition}/> */}
+
       <div className={styles.mintContainer}>
-        <div className={styles.topLine} />
-        <div className={styles.bottomLine} />
-        <div className={styles.scrollContainer}>
-
-          <Mint screenshotPosition = {screenshotPosition}/>
+        <MenuTitle />
+
+        <div className={styles.mintButtonContainer}>
+          <CustomButton
+            size={16}
+            theme="light"
+            icon="polygon"
+            text="Open Edition"
+            className={styles.mintButton}
+          />
+
+          <div className={styles.divider}></div>
+
+          <CustomButton
+            size={16}
+            theme="light"
+            icon="tokens"
+            text="Genesis Edition"
+            className={styles.mintButton}
+          />
+
+          <span className={styles.genesisText}>(<span className={styles.required}>Genesis pass holders only</span>)</span>
         </div>
       </div>
-      <div className={styles.buttonContainer}>
+
+      <div className={styles.bottomContainer}>
         <CustomButton
           theme="light"
           text="Back"