go back

packages/frontend/web/src/components/arrow-left.tsx

@@ -3,20 +3,18 @@ import { useNavigate } from 'react-router-dom';
 export function ArrowLeft() {
   const navigate = useNavigate();
   return (
-    <div className='mb-4 flex items-center justify-between'>
-      <button
-        onClick={async () => {
-          await navigate(-1);
-        }}
-        type='button'
-        className='text-secondary hover:text-orange-500'
-      >
-        <img
-          src='/assets/arrow-left.png'
-          alt='arrow left'
-          className='h-7 w-7 md:h-10 md:w-10'
-        />
-      </button>
-    </div>
+    <button
+      onClick={async () => {
+        await navigate(-1);
+      }}
+      type='button'
+      className='text-secondary hover:text-orange-500'
+    >
+      <img
+        src='/assets/arrow-left.png'
+        alt='arrow left'
+        className='h-7 w-7 md:h-10 md:w-10'
+      />
+    </button>
   );
 }

packages/frontend/web/src/components/logo-section.tsx

@@ -1,17 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+
 import { useLabel } from '@/contexts/label-context';
 
 import Logo from '../../public/assets/logo.png';
 
 export default function LogoSection() {
   const { label } = useLabel();
-
+  const navigate = useNavigate();
   return (
     <div className='flex flex-wrap gap-4'>
       <div className='flex items-center' key={label?.id}>
         <img
-          className='max-m-16 mr- ml-2 max-h-16 min-h-10 min-w-10'
+          className='max-m-16 mr- ml-2 max-h-16 min-h-10 min-w-10 cursor-pointer'
           src={label?.logo_img != null ? `/assets/${label.logo_img}` : Logo}
           alt="Label's logo"
+          onClick={async () => {
+            await navigate('/main-menu');
+          }}
         />
         <div className='mt-4 h-14 border-r-white pr-4 text-sm sm:flex sm:border-r-4 sm:text-xl md:mt-0'>
           <p className='items-center md:mr-8 md:ml-2 md:flex'>{label?.name}</p>

packages/frontend/web/src/pages/artist-hire-profile-page.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { ArrowLeft } from '@/components/arrow-left';
 import ArtistProfileCard from '@/components/artist-profile-card';
 
 import type { ArtistHired } from '../../../../backend/api/src/artists-hired/artists-hired';
@@ -64,17 +65,24 @@ export default function ArtistHirePage() {
   const isDisabledPrice = price?.price == null || budget < price.price;
 
   return (
-    <div className='bg-primary flex flex-col items-center space-y-4 px-4 py-6'>
-      {artistsHired.map((artist) => (
-        <ArtistProfileCard
-          key={artist.id}
-          artist={artist}
-          fetchArtistsHired={fetchArtistsHired}
-          isAddButton
-          price={price}
-          isDisabled={isDisabledPrice}
-        />
-      ))}
+    <div className='bg-primary h-150 flex-col items-center'>
+      <div className='flex items-center justify-center pt-3 md:ml-4 md:justify-start'>
+        <ArrowLeft />
+      </div>
+      <div className='items-center justify-center'>
+        <div className='bg-primary flex flex-col items-center space-y-4 px-4 py-6'>
+          {artistsHired.map((artist) => (
+            <ArtistProfileCard
+              key={artist.id}
+              artist={artist}
+              fetchArtistsHired={fetchArtistsHired}
+              isAddButton
+              price={price}
+              isDisabled={isDisabledPrice}
+            />
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

packages/frontend/web/src/pages/artist-profile-page.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { ArrowLeft } from '@/components/arrow-left';
 import ArtistProfileCard from '@/components/artist-profile-card';
 
 import type { Artist } from '../../../../backend/api/src/artists/artists';
@@ -27,10 +28,15 @@ export default function ArtistPage() {
   }, [id]);
 
   return (
-    <div className='bg-primary flex flex-col items-center space-y-4 px-4 py-6'>
-      {artists.map((artist) => (
-        <ArtistProfileCard key={artist.id} artist={artist} />
-      ))}
+    <div className='bg-primary h-150 flex-col items-center'>
+      <div className='flex items-center justify-center pt-3 md:ml-4 md:justify-start'>
+        <ArrowLeft />
+      </div>
+      <div className='bg-primary flex flex-col items-center space-y-4 px-4 py-6'>
+        {artists.map((artist) => (
+          <ArtistProfileCard key={artist.id} artist={artist} />
+        ))}
+      </div>
     </div>
   );
 }

packages/frontend/web/src/pages/create-album.tsx

@@ -176,77 +176,78 @@ export default function CreateAlbum() {
     price?.price === null || budget < (price?.price ?? Infinity);
 
   return (
-    <form
-      onSubmit={(event) => {
-        void handleSubmit(event);
-      }}
-    >
-      <div className='bg-primary flex min-h-screen flex-col items-center px-4 py-6'>
-        <div className='mb-4 flex items-center'>
-          <div>
-            <ArrowLeft />
-          </div>
-          <h1 className='text-secondary text-center text-lg font-bold md:text-2xl'>
-            {'RECORDING A NEW ALBUM'}
-          </h1>
-          <div className='h-6 w-6' />
-        </div>
-        <img className='h-22 w-22' src='/assets/album.png' alt='' />
-        <div className='mt-6'>
-          {artistsHired.length > 0 ? (
-            artistsHired.map((artist) => (
-              <ArtistCardHire key={artist.artists_id} artist={artist} />
-            ))
-          ) : (
-            <p className='text-secondary text-s mt-4 text-center'>
-              {'No artist selected'}
-            </p>
-          )}
-          <AddArtist
-            onArtistSelected={(id) => {
-              setSelectedArtistId(id);
-            }}
-          />
-        </div>
-        <div className='flex flex-col items-center justify-center'>
-          <ChooseName
-            name="Choose your album's name"
-            placeholder="Album's name"
-            value={singleName}
-            onChange={handleChange}
-          />
+    <>
+      <div className='bg-primary flex items-center justify-center pt-4 text-center md:w-full'>
+        <div className='mr-3 flex md:absolute md:left-0'>
+          <ArrowLeft />
         </div>
+        <h1 className='text-secondary text-center text-lg font-bold md:text-2xl'>
+          {'RECORDING A NEW ALBUM'}
+        </h1>
+        <div className='h-6 w-6' />
+      </div>
+      <form
+        onSubmit={(event) => {
+          void handleSubmit(event);
+        }}
+      >
+        <div className='bg-primary flex min-h-screen flex-col items-center px-4 py-6'>
+          <img className='h-22 w-22' src='/assets/album.png' alt='' />
+          <div className='mt-6'>
+            {artistsHired.length > 0 ? (
+              artistsHired.map((artist) => (
+                <ArtistCardHire key={artist.artists_id} artist={artist} />
+              ))
+            ) : (
+              <p className='text-secondary text-s mt-4 text-center'>
+                {'No artist selected'}
+              </p>
+            )}
+            <AddArtist
+              onArtistSelected={(id) => {
+                setSelectedArtistId(id);
+              }}
+            />
+          </div>
+          <div className='flex flex-col items-center justify-center'>
+            <ChooseName
+              name="Choose your album's name"
+              placeholder="Album's name"
+              value={singleName}
+              onChange={handleChange}
+            />
+          </div>
 
-        <div className='mt-6 flex w-full flex-col items-center gap-2'>
-          {chosenSingles.length > 0 ? (
-            chosenSingles.map((single) => (
-              <SingleCard
-                key={single.id}
-                id={single.id}
-                name={single.name}
-                score={single.score}
-                onToggleSelect={(id) => {
-                  setSelectedSinglesId((prevIds) =>
-                    prevIds.filter((prevId) => prevId !== id),
-                  );
-                }}
-              />
-            ))
-          ) : (
-            <p className='text-secondary text-s mt-4 text-center'>
-              {'No single selected'}
-            </p>
-          )}
-          <ChooseSingle
-            onSingleSelected={(id) => {
-              setSelectedSinglesId((prev) =>
-                prev.includes(id) ? prev : [...prev, id].slice(0, 3),
-              );
-            }}
-            artistId={selectedArtistId}
-          />
-        </div>
-        {/* <div className='mt-6'>
+          <div className='mt-6 flex w-full flex-col items-center gap-2'>
+            {chosenSingles.length > 0 ? (
+              chosenSingles.map((single) => (
+                <SingleCard
+                  key={single.id}
+                  id={single.id}
+                  name={single.name}
+                  score={single.score}
+                  onToggleSelect={(id) => {
+                    setSelectedSinglesId((prevIds) =>
+                      prevIds.filter((prevId) => prevId !== id),
+                    );
+                  }}
+                />
+              ))
+            ) : (
+              <p className='text-secondary text-s mt-4 text-center'>
+                {'No single selected'}
+              </p>
+            )}
+            <ChooseSingle
+              onSingleSelected={(id) => {
+                setSelectedSinglesId((prev) =>
+                  prev.includes(id) ? prev : [...prev, id].slice(0, 3),
+                );
+              }}
+              artistId={selectedArtistId}
+            />
+          </div>
+          {/* <div className='mt-6'>
           {marketing.length > 0 ? (
             marketing.map((campaign) => (
               <MarketingCard key={campaign.id} marketing={campaign} />
@@ -262,41 +263,42 @@ export default function CreateAlbum() {
             }}
           />
         </div> */}
-        {messageError ? (
-          <p className='mt-4 text-center text-sm text-red-500'>
-            {messageError}
-          </p>
-        ) : (
-          ''
-        )}
+          {messageError ? (
+            <p className='mt-4 text-center text-sm text-red-500'>
+              {messageError}
+            </p>
+          ) : (
+            ''
+          )}
 
-        <div className='mt-6 flex items-start justify-between gap-x-16'>
-          <VerifyButton
-            color='bg-secondary active:scale-95 transition-transform'
-            image='/assets/not-check.png'
-            onClick={async () => {
-              await navigate(-1);
-            }}
-          >
-            {'Cancel'}
-          </VerifyButton>
-          <div className='justify-center text-center'>
+          <div className='mt-6 flex items-start justify-between gap-x-16'>
             <VerifyButton
-              color={
-                isDisabled
-                  ? 'bg-gray-400 cursor-not-allowed'
-                  : 'bg-orange-500 active:scale-95 transition-transform'
-              }
-              type={'submit'}
-              image='/assets/check.png'
-              disabled={isDisabled}
+              color='bg-secondary active:scale-95 transition-transform'
+              image='/assets/not-check.png'
+              onClick={async () => {
+                await navigate(-1);
+              }}
             >
-              {'Confirm'}
+              {'Cancel'}
             </VerifyButton>
-            {price ? `${price.price} $` : ''}
+            <div className='justify-center text-center'>
+              <VerifyButton
+                color={
+                  isDisabled
+                    ? 'bg-gray-400 cursor-not-allowed'
+                    : 'bg-orange-500 active:scale-95 transition-transform'
+                }
+                type={'submit'}
+                image='/assets/check.png'
+                disabled={isDisabled}
+              >
+                {'Confirm'}
+              </VerifyButton>
+              {price ? `${price.price} $` : ''}
+            </div>
           </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </>
   );
 }