Update styles of the artist profile

Author: mhaidarhanif

public/assets/artist-cover.jpg

@@ -4,24 +4,32 @@ import styled from "styled-components";
 
 import ArtworkList from "./ArtworkList";
 
+const ArtistCover = styled.div`
+  background-image: url("/assets/artist-cover.jpg");
+  height: 300px;
+  width: 100%;
+`;
+
 const ArtistContainer = styled.div`
-  max-width: 920px;
-  margin: 0 auto;
-  h3 {
-    font-size: 1.5rem;
-  }
-  h4 {
-    color: #828282;
-  }
+  max-width: 720px;
+  margin: -150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;
 
-const ArtistImage = styled.img`
+const ArtistPhoto = styled.img`
   width: 300px;
   height: 300px;
   border-radius: 300px;
   object-fit: cover;
 `;
 
+const ArtistName = styled.h3`
+  font-size: 72px;
+  margin: 0;
+`;
+
 const ExhibitionsList = styled.ul`
   list-style: none;
   padding: 0;
@@ -32,30 +40,29 @@ const ExhibitionsList = styled.ul`
 
 const ArtistProfile = ({ artist }) => {
   return (
-    <ArtistContainer>
-      <ArtistImage src={artist.photoUrl} alt={artist.name} />
-
-      <h3>{artist.name}</h3>
-
-      <div>
-        <h4>About</h4>
-        <p>{artist.biography.about}</p>
-      </div>
-
-      <div>
-        <h4>Exhibitions</h4>
-        <ExhibitionsList>
-          {artist.biography.exhibitions.map((exhibition, index) => {
-            return <li key={index}>{exhibition}</li>;
-          })}
-        </ExhibitionsList>
-      </div>
-
-      <div>
-        <h4>Artworks</h4>
-        <ArtworkList artworks={artist.artworks}></ArtworkList>
-      </div>
-    </ArtistContainer>
+    <>
+      <ArtistCover></ArtistCover>
+      <ArtistContainer>
+        <ArtistPhoto src={artist.photoUrl} alt={artist.name} />
+        <ArtistName>{artist.name}</ArtistName>
+        <div>
+          <h4>About</h4>
+          <p>{artist.biography.about}</p>
+        </div>
+        <div>
+          <h4>Exhibitions</h4>
+          <ExhibitionsList>
+            {artist.biography.exhibitions.map((exhibition, index) => {
+              return <li key={index}>{exhibition}</li>;
+            })}
+          </ExhibitionsList>
+        </div>
+        <div>
+          <h4>Artworks</h4>
+          <ArtworkList artworks={artist.artworks}></ArtworkList>
+        </div>
+      </ArtistContainer>
+    </>
   );
 };
 

src/components/ArtistProfile.js

@@ -6,7 +6,7 @@ const ContentStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px 0;
+  padding-bottom: 20px;
 `;
 
 const Content = ({ children }) => {

src/components/Content.js

@@ -35,15 +35,13 @@ const Artist = ({
   return (
     <Page>
       <Content>
+        {!isLoading && artist && <ArtistProfile artist={artist} />}
         {!isLoading && error && (
           <ErrorHeading>Sorry, artist not found.</ErrorHeading>
         )}
-
         {isAuthenticated && !isLoading && artist && (
           <Button onClick={removeArtistAndRedirect}>Remove Artist</Button>
         )}
-
-        {!isLoading && artist && <ArtistProfile artist={artist} />}
       </Content>
     </Page>
   );