show the paint app inside imagine (#105)

* launch the paint app by clicking the "paint an image" link
* add the "use on imagine" button
* rename from ImagineContainer to ImagineLayout
* rename from MainContainer to MainLayout
* add the ImagineBase component to simplify pages relates to imagine
* show image inputs for base image and mask in a row
* add the "paint a mask" link

morpheus-client/components/Excalidraw/Excalidraw.module.scss

@@ -1,34 +1,13 @@
-@use "../../styles/variables";
 @use "styles/media";
 
-.modalContainer {
-  z-index: 9999;
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modalBody {
-  background: white;
-  width: 50vw;
-  max-width: variables.$max-width-landing;
-  height: 50vh;
-  padding: 24px;
-  border-radius: 24px;
-  display: flex;
-  justify-content: center;
-  overflow-y: auto;
+.paintContainer {
+  width: 100%;
+  height: 100%;
+  max-height: calc(100vh - 180px);
 
   @include media.mobile {
-    height: 68vh !important;
-    padding: 16px 16px 0 16px;
+    margin-top: 60px;
+    max-height: calc(100vh - 160px);
   }
 }
+

morpheus-client/components/Excalidraw/Excalidraw.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import dynamic from "next/dynamic";
+import styles from "./Excalidraw.module.scss";
 
 const Excalidraw = () => {
   const Editor = dynamic(
@@ -11,15 +12,9 @@ const Excalidraw = () => {
   );
 
   return (
-    <div
-      style={{
-        width: "100%",
-        height: "100%",
-      }}
-      className="custom-styles"
-    >
+    <div className={styles.paintContainer}>
       <Editor />
     </div>
   );
 };
-export default Excalidraw;
+export default React.memo(Excalidraw);

morpheus-client/components/ImageDraggable/ImageDraggable.module.scss

@@ -1,7 +1,7 @@
 @use "styles/colors";
 @use "styles/media";
 
-.formWrapper {
+.imageDraggable {
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -12,7 +12,7 @@
     max-width: 100%;
     height: auto;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
     text-align: center;
@@ -23,18 +23,41 @@
     @include media.mobile {
       width: 100%;
       height: auto;
+      flex-direction: column;
       padding: 16px;
     }
 
     .separator {
+      display: none;
       width: 100%;
       border-bottom: 5px;
       border-style: solid;
-      margin: 48px 0;
+      margin: 24px 0;
       border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100' fill='none' rx='8' ry='8' stroke='%23312E47FF' stroke-width='4' stroke-dasharray='10%2c 10' stroke-dashoffset='53' stroke-linecap='round'/%3e%3c/svg%3e") 30 round;
 
       @include media.mobile {
-        margin: 16px 0;
+        display: block;
+      }
+    }
+
+    .verticalSeparator {
+      display: block;
+      position: relative;
+      width: 2px;
+      height: 100%;
+      margin: 0 48px;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 10px, #312E47FF 10px, #312E47FF 22px);
+      }
+
+      @include media.mobile {
+        display: none;
       }
     }
   }
@@ -44,6 +67,7 @@
     flex-direction: column;
     align-items: center;
     padding-bottom: 48px;
+    position: relative;
 
     @include media.mobile {
       padding-bottom: 0;
@@ -108,37 +132,38 @@
       left: 0;
     }
   }
+}
+
+.selectedFile {
+  width: 100%;
+  min-height: 294px;
+  position: relative;
+  background-color: colors.$background-secondary;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
 
-  .selectedFile {
-    width: 100%;
-    position: relative;
-    background-color: colors.$background-secondary;
-    border-radius: 8px;
+  .header {
+    height: auto;
     display: flex;
-    flex-direction: column;
-    padding: 8px;
-
-    .header {
-      height: auto;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      align-items: center;
-      padding: 8px;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0 0 8px 0;
 
-      span {
-        margin-left: 8px;
-        cursor: pointer;
-      }
+    span {
+      margin-left: 8px;
+      cursor: pointer;
     }
+  }
 
-    img {
-      width: auto;
-      max-width: 100%;
-      max-height: 100%;
-      border-radius: 8px;
-      object-fit: contain;
-      box-shadow: colors.$box-shadow;
-    }
+  img {
+    width: auto;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 8px;
+    object-fit: contain;
+    box-shadow: colors.$box-shadow;
   }
 }