Merge pull request #79 from WildCodeSchool/feature/responsive-2

responsie hire artists, create single et albums

Author: YDrogen

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

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

packages/frontend/web/src/components/artist-card-hire.tsx

@@ -9,7 +9,7 @@ export default function ArtistCardHire({ artist }: ArtistCardHireProps) {
   return (
     <div
       key={artist.id}
-      className='bg-secondary flex h-12 w-60 items-center justify-evenly rounded-sm text-white shadow-[3px_5px_6px_rgba(0,0,0,0.30)]'
+      className='bg-secondary flex h-14 w-50 items-center justify-evenly rounded-sm text-white shadow-[3px_5px_6px_rgba(0,0,0,0.30)] md:h-12 md:w-60'
     >
       <Link to={`/artists-hired/${artist.id}`}>
         <img

packages/frontend/web/src/components/artist-card.tsx

@@ -16,20 +16,20 @@ export default function ArtistCard({
   return (
     <div
       key={artist.id}
-      className='bg-secondary flex h-20 w-110 items-center justify-evenly rounded-sm text-white shadow-[3px_5px_6px_rgba(0,0,0,0.30)]'
+      className='bg-secondary flex h-14 w-70 items-center justify-evenly rounded-sm text-white shadow-[3px_5px_6px_rgba(0,0,0,0.30)] md:h-20 md:w-110'
     >
       <Link to={`/artists/${artist.id}`}>
         <img
-          className='h-16 w-16 rounded-4xl'
+          className='h-10 w-10 rounded-4xl md:h-16 md:w-16'
           src={`/assets/${artist.image}`}
           alt={`Portrait of ${artist.firstname} ${artist.lastname}`}
         />{' '}
       </Link>
       <div className='flex flex-col items-center'>
-        <h2 className='ml-2'>
+        <h2 className='ml-2 text-sm md:text-xl'>
           {artist.firstname} {artist.lastname} {artist.alias}
         </h2>
-        <h3>{artist.genre}</h3>
+        <h3 className='text-sm md:text-xl'>{artist.genre}</h3>
       </div>
       <div className='flex items-center'>
         <h2 className='flex items-center font-bold'>{artist.notoriety}</h2>
@@ -46,15 +46,21 @@ export default function ArtistCard({
             onHire(artist.id);
           }}
           disabled={isDisabled}
-          className={`flex h-8 w-18 items-center justify-center rounded-sm pl-2 text-xl font-bold shadow-[3px_5px_6px_rgba(0,0,0,0.30)] ${
+          className={`flex h-5 w-12 items-center justify-center rounded-sm pl-2 text-sm font-bold shadow-[3px_5px_6px_rgba(0,0,0,0.30)] md:h-8 md:w-18 md:text-xl ${
             isDisabled ? 'cursor-not-allowed bg-gray-400' : 'bg-orange-500'
           }`}
         >
           {'Hire'}
-          <img className='h-7 w-7' src='/assets/sign.png' alt='contract logo' />
+          <img
+            className='mr-0.5 h-5 md:mr-0 md:h-7 md:w-7'
+            src='/assets/sign.png'
+            alt='contract logo'
+          />
         </button>
         <div className='flex items-center'>
-          <h2 className='flex items-center font-bold'>{artist.price}</h2>
+          <h2 className='flex items-center text-sm font-bold md:text-xl'>
+            {artist.price}
+          </h2>
           <img
             className='mt-0.5 h-3.5 w-3.5'
             src='/assets/dollar-icon.png'

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

@@ -182,11 +182,11 @@ export default function CreateAlbum() {
       }}
     >
       <div className='bg-primary flex min-h-screen flex-col items-center px-4 py-6'>
-        <div className='mb-4 flex w-full items-center justify-between'>
+        <div className='mb-4 flex items-center'>
           <div>
             <ArrowLeft />
           </div>
-          <h1 className='text-secondary text-center text-2xl font-bold'>
+          <h1 className='text-secondary text-center text-lg font-bold md:text-2xl'>
             {'RECORDING A NEW ALBUM'}
           </h1>
           <div className='h-6 w-6' />

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

@@ -147,11 +147,11 @@ export default function CreateSingle() {
     <form onSubmit={handleSubmit}>
       <div className='bg-primary flex min-h-screen flex-col items-center px-4 py-6 sm:px-6 md:px-12'>
         {/* Header */}
-        <div className='mb-4 flex w-full flex-col items-center justify-between gap-2 sm:flex-row'>
-          <button type='button'>
+        <div className='mb-4 flex items-center gap-2'>
+          <div>
             <ArrowLeft />
-          </button>
-          <h1 className='text-secondary text-center text-xl font-bold sm:text-2xl'>
+          </div>
+          <h1 className='text-secondary text-center text-lg font-bold sm:text-2xl md:text-xl'>
             {' RECORDING A NEW SINGLE'}
           </h1>
           <div className='h-6 w-6' />
@@ -165,7 +165,7 @@ export default function CreateSingle() {
         />
 
         {/* Artist */}
-        <div className='mt-6 w-full max-w-md'>
+        <div className='mt-6 max-w-md'>
           {artistsHired.length > 0 ? (
             artistsHired.map((artist) => (
               <ArtistCardHire key={artist.artists_id} artist={artist} />