Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add Introductory Walkthrough App #108

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions morpheus-client/components/ArtWorkList/ArtWorkList.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
Original file line number Diff line number Diff line change
@@ -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}
4 changes: 2 additions & 2 deletions morpheus-client/components/Auth/LoginForm/LoginForm.tsx
Original file line number Diff line number Diff line change
@@ -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}
4 changes: 2 additions & 2 deletions morpheus-client/components/Auth/RegisterForm/RegisterForm.tsx
Original file line number Diff line number Diff line change
@@ -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"}
4 changes: 2 additions & 2 deletions morpheus-client/components/Auth/ResetForm/ResetForm.tsx
Original file line number Diff line number Diff line change
@@ -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"}
Original file line number Diff line number Diff line change
@@ -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"
/>
);
};
4 changes: 2 additions & 2 deletions morpheus-client/components/CollectionForm/CollectionForm.tsx
Original file line number Diff line number Diff line change
@@ -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}
5 changes: 3 additions & 2 deletions morpheus-client/components/Collections/Collections.tsx
Original file line number Diff line number Diff line change
@@ -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>

Original file line number Diff line number Diff line change
@@ -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"}
4 changes: 4 additions & 0 deletions morpheus-client/components/ImagineBase/ImagineBase.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
4 changes: 2 additions & 2 deletions morpheus-client/components/ImagineInput/ImagineInput.tsx
Original file line number Diff line number Diff line change
@@ -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}
4 changes: 2 additions & 2 deletions morpheus-client/components/OpenSource/OpenSource.tsx
Original file line number Diff line number Diff line change
@@ -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")
4 changes: 2 additions & 2 deletions morpheus-client/components/SearchForm/SearchForm.tsx
Original file line number Diff line number Diff line change
@@ -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..."}
118 changes: 118 additions & 0 deletions morpheus-client/components/WalkthroughApp/WalkthroughApp.module.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}

}
Loading