feat: edit create profile page and add images

src/components/CreateProfilePage/ProcessFlow.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import ProcessItem from "./ProcessItem"
+import styles from './styles.module.css'
 
 interface Task {
   (): Promise<void>
@@ -32,7 +33,7 @@ const getMultiplier = (currentIdx: number, length: number): number => {
 }
 
 const calculateTop = (currentIdx: number, length: number): number => {
-  const itemHeight = 56
+  const itemHeight = 63
   return getMultiplier(currentIdx, length) * itemHeight
 }
 
@@ -58,7 +59,7 @@ function ProcessFlow({ items, onDone }: ProcessFlowProps): JSX.Element {
     />
   }
   return (
-    <div className='process-items mt-24'>
+    <div className={`${styles['process-items']} mt-24`}>
       {items.map(toItems)}
     </div>
   )

src/components/CreateProfilePage/ProcessItem.tsx

@@ -1,4 +1,5 @@
-import Loader from "../Loader"
+import Loader, { LoaderColor } from "../Loader"
+import styles from "./styles.module.css"
 
 type ProcessItemProps = {
   top: number
@@ -9,15 +10,15 @@ type ProcessItemProps = {
 function ProcessItem({ top, label, isDone }: ProcessItemProps): JSX.Element {
 
   return (
-    <div className='process-item' style={{ top: top }}>
+    <div className={styles['process-item']} style={{ top: top }}>
-      <div className='process-item__pick'>
+      <div className={styles['process-item__pick']}>
         {
           isDone
-          ? <div className='process-item__icon'>&#9989;</div>
+          ? <img className={styles['process-item__icon']} src="/check-mark.png" alt="check" />
-          : <Loader />
+          : <Loader color={LoaderColor.White} />
           }
       </div>
-      <div className='process-item__label'>{label}</div>
+      <div className={styles['process-item__label']}>{label}</div>
     </div>
   )
 }

src/components/CreateProfilePage/index.tsx

@@ -3,9 +3,8 @@ import { useNavigate } from "react-router-dom"
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
 import { useTranslation } from 'react-i18next'
 import ProcessFlow from "./ProcessFlow"
-import Title from "../Title"
 import routes from "../../routes"
-import './styles.css'
+import styles from './styles.module.css'
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
@@ -14,19 +13,19 @@ function CreateProfilePage(): JSX.Element {
   const navigate = useNavigate()
   const [progress, setProgress] = useState(0)
   const processItems = [
-    { task: () => sleep(3300).then(() => setProgress(35)), label: t('zodiac_analysis') },
+    { task: () => sleep(3300).then(() => setProgress(23)), label: t('money_energy') },
-    { task: () => sleep(2550).then(() => setProgress(61)), label: t('drawing_wallpaper') },
+    { task: () => sleep(2550).then(() => setProgress(48)), label: t('sexual_energy') },
-    { task: () => sleep(3789).then(() => setProgress(98)), label: t('preparing_results') },
+    { task: () => sleep(3789).then(() => setProgress(65)), label: t('black_energy') },
+    { task: () => sleep(3789).then(() => setProgress(98)), label: t('relations_energy') },
   ]
   const handleDone = () => Promise.resolve()
     .then(() => setProgress(100))
     .then(() => sleep(1000))
-    .then(() => navigate(routes.client.emailEnter()))
+    .then(() => navigate(routes.client.attention()))
 
   return (
-    <section className='page'>
+    <section className={`${styles.page} page`}>
-      <Title variant="h2" className="mt-24">{t('creating_profile')}</Title>
+      <div className={styles.progressbar}>
-      <div className="progressbar">
         <CircularProgressbar
           value={progress}
           text={`${progress}%`}
@@ -34,8 +33,9 @@ function CreateProfilePage(): JSX.Element {
           styles={buildStyles({
             strokeLinecap: 'butt',
             textSize: '12px',
-            pathColor: '#000',
+            trailColor: "#555",
-            textColor: '#000',
+            pathColor: '#fff',
+            textColor: '#fff',
             pathTransitionDuration: 1,
           })}
         />

src/components/CreateProfilePage/styles.module.css

@@ -1,7 +1,18 @@
+.page {
+  height: calc(100vh - 50px);
+  flex: auto !important;
+  background-color: #000;
+  color: #fff;
+}
+
 .progressbar {
   width: 100%;
   max-width: 250px;
   margin: 24px auto;
+  background-image: url('/goosebumps-aura.png');
+  background-size: 130%;
+  background-repeat: no-repeat;
+  background-position: center center;
 }
 
 .process-items {
@@ -24,5 +35,9 @@
 }
 
 .process-item__icon {
-  font-size: 32px;
+  width: 32px;
+}
+
+.process-item__label {
+  color: red;
 }