add Introductory Walkthrough App

morpheus-client/components/ArtWorkList/ArtWorkList.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import ButtonSecondary from "../buttons/ButtonSecondary/ButtonSecondary";
+import Button from "../buttons/Button/Button";
 import ArtworkCard from "../ArtworkCard/ArtworkCard";
 import { ArtWork } from "@/models/models";
 import styles from "./ArtWorkList.module.scss";
@@ -34,7 +34,7 @@ const ArtWorkList = (props: ArtWorkListProps) => {
   return (
     <div className={styles.artworksContainer}>
       <div className={styles.header}>
-        <p className="body-2 white mb-3">Newest</p>
+        <p className="mb-3 body-2 white">Newest</p>
       </div>
 
       <div className={styles.artworksList}>
@@ -52,11 +52,12 @@ const ArtWorkList = (props: ArtWorkListProps) => {
         )}
       </div>
 
-      <ButtonSecondary
+      <Button
         styles={{ marginTop: "24px", width: "220px" }}
         loading={false}
         text={"Create a new artwork"}
         onClick={handleAddArtwork}
+        variant="secondary"
       />
     </div>
   );

morpheus-client/components/ArtworkCard/ArtworkForm/ArtworkForm.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import ButtonPrimary from "../../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../../buttons/Button/Button";
 import CollectionSelect from "../../CollectionSelect/CollectionSelect";
 import { CloseIcon } from "../../icons/close";
 import { saveArtWork, updateArtWork } from "@/services/artworks";
@@ -138,7 +138,7 @@ const ArtworkForm = (props: ArtworkFormProps) => {
       />
 
       <div className={styles.buttonsContainer}>
-        <ButtonPrimary
+        <Button
           text={`${props.artwork.id ? "Update" : "Save"}`}
           loading={isLoading}
           onClick={handleFormSubmit}

morpheus-client/components/Auth/LoginForm/LoginForm.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { SignUpWithGoogle } from "../SocialSignUp/SignUpWithGoogle";
 import InputEmail from "../../Inputs/InputEmail/InputEmail";
 import InputPassword from "../../Inputs/InputPassword/InputPassword";
-import ButtonPrimary from "../../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../../buttons/Button/Button";
 import { useToastContext } from "@/context/ToastContext";
 import { Separator } from "../Separator/Separator";
 import { AuthOption, useAuth } from "@/context/AuthContext";
@@ -79,7 +79,7 @@ export const LoginForm = () => {
           Forgot password?
         </a>
 
-        <ButtonPrimary
+        <Button
           styles={{ marginTop: "32px" }}
           disabled={!formValid}
           loading={loading}

morpheus-client/components/Auth/RegisterForm/RegisterForm.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useAuth } from "@/context/AuthContext";
 import { isAllTrue } from "@/utils/arrays";
-import ButtonPrimary from "../../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../../buttons/Button/Button";
 import { UserIcon } from "../../icons/user";
 import InputEmail from "../../Inputs/InputEmail/InputEmail";
 import InputPassword from "../../Inputs/InputPassword/InputPassword";
@@ -83,7 +83,7 @@ export const RegisterForm = () => {
           disabled={false}
         />
 
-        <ButtonPrimary
+        <Button
           disabled={!formValid}
           loading={loading}
           text={"Create account"}

morpheus-client/components/Auth/ResetForm/ResetForm.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { ArrowBackIcon } from "../../icons/arrowBack";
-import ButtonPrimary from "../../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../../buttons/Button/Button";
 import InputEmail from "../../Inputs/InputEmail/InputEmail";
 import { AuthOption, useAuth } from "@/context/AuthContext";
 import { useToastContext } from "@/context/ToastContext";
@@ -54,7 +54,7 @@ export const ResetForm = () => {
       <form>
         <InputEmail id="inputEmailReset" email={email} setEmail={setEmail} />
 
-        <ButtonPrimary
+        <Button
           disabled={!formValid}
           loading={loading}
           text={"Reset password"}

morpheus-client/components/Auth/SocialSignUp/SignUpWithGoogle.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useAuth } from "@/context/AuthContext";
-import ButtonSecondary from "../../buttons/ButtonSecondary/ButtonSecondary";
+import Button from "../../buttons/Button/Button";
 import { GoogleIcon } from "../../icons/google";
 
 export const SignUpWithGoogle = () => {
@@ -19,12 +19,13 @@ export const SignUpWithGoogle = () => {
   };
 
   return (
-    <ButtonSecondary
+    <Button
       className="base-1 white"
       loading={loading}
       text={"Continue with Google"}
       onClick={handleGoogleLogin}
       icon={<GoogleIcon />}
+      variant="secondary"
     />
   );
 };

morpheus-client/components/CollectionForm/CollectionForm.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import InputTextArea from "../Inputs/InputTextArea/InputTextArea";
 import InputFile from "../Inputs/InputFile/InputFile";
-import ButtonPrimary from "../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../buttons/Button/Button";
 import { ImageIcon } from "@/components/icons/image";
 import { useToastContext } from "@/context/ToastContext";
 import { saveCollection, updateCollection } from "@/services/collection";
@@ -176,7 +176,7 @@ const CollectionForm = (props: CollectionFormProps) => {
       </div>
 
       <div className={styles.buttonsContainer}>
-        <ButtonPrimary
+        <Button
           text={"Save"}
           loading={isLoading}
           onClick={handleFormSubmit}

morpheus-client/components/Collections/Collections.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useEffect, useState } from "react";
 import CollectionCard from "../CollectionCard/CollectionCard";
-import ButtonSecondary from "../buttons/ButtonSecondary/ButtonSecondary";
+import Button from "../buttons/Button/Button";
 import Modal from "../Modal/Modal";
 import CollectionForm from "../CollectionForm/CollectionForm";
 import { Collection } from "@/models/models";
@@ -57,11 +57,12 @@ const Collections = () => {
           )}
         </div>
 
-        <ButtonSecondary
+        <Button
           styles={{ marginTop: "24px", width: "220px" }}
           loading={false}
           text={"Create a new one"}
           onClick={handleAddCollection}
+          variant="secondary"
         />
       </div>
 

morpheus-client/components/EditProfileForm/EditProfileForm.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import ButtonPrimary from "../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../buttons/Button/Button";
 import InputTextArea from "../Inputs/InputTextArea/InputTextArea";
 import InputFile from "../Inputs/InputFile/InputFile";
 import { UserImage } from "../UserCard/UserCard";
@@ -110,7 +110,7 @@ const EditProfileForm = () => {
         styles={{ marginTop: "24px" }}
       />
 
-      <ButtonPrimary
+      <Button
         styles={{ width: "100%", marginTop: "32px" }}
         loading={loading}
         text={"Save changes"}

morpheus-client/components/ImagineBase/ImagineBase.tsx

@@ -4,9 +4,11 @@ import ImageDraggable from "@/components/ImageDraggable/ImageDraggable";
 import ImageGallery from "@/components/ImageGallery/ImageGallery";
 import ImagineInput from "@/components/ImagineInput/ImagineInput";
 import ImagineLayout from "@/layout/ImagineLayout/ImagineLayout";
+import WalkthroughApp from "../WalkthroughApp/WalkthroughApp";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import { UploadMaskIcon } from "@/components/icons/uploadMask";
 import { useImagine } from "@/context/ImagineContext";
+import { useAuth } from "@/context/AuthContext";
 import { MOBILE_SCREEN_WIDTH } from "@/utils/constants";
 import styles from "./ImagineBase.module.scss";
 
@@ -20,6 +22,7 @@ interface MainContainerProps {
 const ImagineBase = (props: MainContainerProps) => {
   const { img2imgFile, setImg2imgFile, maskFile, setMaskFile } = useImagine();
   const { width } = useWindowDimensions();
+  const { user } = useAuth();
   const isMobile = width < MOBILE_SCREEN_WIDTH;
 
   const ImagineInputInstance = (
@@ -67,6 +70,7 @@ const ImagineBase = (props: MainContainerProps) => {
 
         {!isMobile && ImagineInputInstance}
       </main>
+      {user?.is_new_user && <WalkthroughApp />}
     </ImagineLayout>
   );
 };

morpheus-client/components/ImagineInput/ImagineInput.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import ButtonPrimary from "../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../buttons/Button/Button";
 import InputTextArea from "../Inputs/InputTextArea/InputTextArea";
 import { initialText } from "../Inputs/InputText/InputText";
 import MagicPrompt from "../MagicPrompt/MagicPrompt";
@@ -54,7 +54,7 @@ const ImagineInput = (props: ImagineInputProps) => {
         </div>
 
         <div className={styles.ImagineActions}>
-          <ButtonPrimary
+          <Button
             loading={isLoading}
             onClick={props.handleGenerate}
             disabled={!props.isFormValid}

morpheus-client/components/OpenSource/OpenSource.tsx

@@ -1,4 +1,4 @@
-import ButtonPrimary from "@/components/buttons/ButtonPrimary/ButtonPrimary";
+import Button from "@/components/buttons/Button/Button";
 import { StarIcon } from "@/components/icons/star";
 import styles from "./OpenSource.module.scss";
 
@@ -17,7 +17,7 @@ export const OpenSource = () => {
         your own project needs.
       </p>
 
-      <ButtonPrimary
+      <Button
         loading={false}
         onClick={() =>
           window.open("https://github.com/Monadical-SAS/Morpheus/fork")

morpheus-client/components/SearchForm/SearchForm.tsx

@@ -1,5 +1,5 @@
 import InputSearch from "../Inputs/InputSearch/InputSearch";
-import ButtonPrimary from "../buttons/ButtonPrimary/ButtonPrimary";
+import Button from "../buttons/Button/Button";
 import { useState } from "react";
 import { searchArtWorks } from "@/services/artworks";
 import { useToastContext } from "@/context/ToastContext";
@@ -43,7 +43,7 @@ const SearchForm = (props: SearchFormProps) => {
           showLabel={false}
         />
 
-        <ButtonPrimary
+        <Button
           styles={{ width: "192px" }}
           loading={searchLoading}
           text={"Search..."}

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

@@ -0,0 +1,118 @@
+@use "styles/colors";
+@use "styles/media";
+
+.walkthroughAppWrapper {
+  width: 100%;
+  height: 100%;
+
+  .content {
+    width: 100%;
+    height: calc(100% - 48px);
+    padding-bottom: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .welcomeTitle {
+        font-size: 64px;
+        line-height: 48px;
+        background: linear-gradient(158deg, #FF5F9E 0%, #B3005E 100%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        line-height: 72px;
+        letter-spacing: -1.28px;
+        text-align: center;
+
+
+        @include media.mobile {
+          font-size: 40px;
+          line-height: 48px;
+          letter-spacing: -0.96px;
+        }
+      }
+
+      p {
+        margin-top: 40px;
+        padding: 0 100px;
+        text-align: center;
+
+        @include media.mobile {
+          padding: 0;
+          font-size: 20px !important;
+          line-height: 24px;
+        }
+      }
+
+      img {
+        margin-top: 40px;
+        width: auto;
+        height: auto;
+        max-width: 480px;
+        border-radius: 12px;
+
+        @include media.mobile {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+  }
+
+  .onlyRightButton {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    width: 100%;
+    height: 48px;
+  }
+
+  .allButtons {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    height: 48px;
+  }
+
+  .indicators {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    width: 100%;
+
+    @include media.mobile {
+      display: none;
+    }
+
+    .indicatorActive {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: colors.$background-secondary;
+      cursor: pointer;
+    }
+
+    .indicatorInactive {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: colors.$background-primary-5;
+      cursor: pointer;
+    }
+  }
+
+}