Issue #635 - Image header for profile page (design)

client/src/pages/Userprofile/UserInfoContainer.js

@@ -1,9 +1,11 @@
-import React from 'react';
-import { Avatar, Box, Typography } from '@mui/material';
 import { Star } from '@mui/icons-material';
+import { Avatar, Box, Typography } from '@mui/material';
+import React from 'react';
+
 import TreeIcon from '@/assets/images/addtree/tree12.svg';
 import AdoptionIcon from '@/components/Icons/AdoptionIcon/AdoptionIcon';
 import { TooltipBottom } from '@/components/Tooltip';
+
 import './UserInfoContainer.scss';
 
 const iconStyle = {
@@ -52,22 +54,46 @@ const UserIcons = ({ adoptedCount, likedCount, plantedCount }) => (
   </Box>
 );
 
-const UserInfoContainer = ({ adoptedTrees, likedTrees, plantedTrees, user }) => {
+const UserInfoContainer = ({
+  adoptedTrees,
+  likedTrees,
+  plantedTrees,
+  user,
+}) => {
   const { name, nickname, email, picture } = user;
   return (
-    <div className="user-info-container">
-      <Avatar className="user-avatar" alt="Avatar" src={picture} />
-      <div>
-        <UserIcons
-          adoptedCount={adoptedTrees.length}
-          likedCount={likedTrees.length}
-          plantedCount={plantedTrees.length}
-        />
-        <Typography variant="body1">{name}</Typography>
-        <Typography variant="body1">{nickname}</Typography>
-        <Typography variant="body1">{email}</Typography>
-      </div>
-    </div>
-  )
-}
-export default UserInfoContainer
+    <>
+      <Box className="user-info-container">
+        <Box className="hero">
+          <Box className="avatar-box">
+            <Avatar className="avatar-image" alt="Avatar" src={picture} />
+            <Box className="avatar-info">
+              <UserIcons
+                adoptedCount={adoptedTrees.length}
+                likedCount={likedTrees.length}
+                plantedCount={plantedTrees.length}
+              />
+              <Typography variant="body1">{name}</Typography>
+              <Typography variant="body1">{nickname}</Typography>
+              <Typography variant="body1">{email}</Typography>
+            </Box>
+          </Box>
+        </Box>
+        <div style={{ bgColor: '#FFF', padding: '40px 20px' }}>
+          <h1>About</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. At in
+            dignissim semper a sed nec in arcu amet. In quis non amet non
+            blandit elit. Aliquet rhoncus hac ornare diam egestas. Dictumst
+            molestie at orci arcu, sed nunc pretium. Ultrices id vitae
+            pellentesque tellus eu adipiscing. Cursus morbi ultricies ipsum
+            sagittis. Tristique interdum et, enim, pharetra duis. Sapien,
+            posuere sapien etiam in vel in nec. Enim, vivamus egestas at non
+            neque.
+          </p>
+        </div>
+      </Box>
+    </>
+  );
+};
+export default UserInfoContainer;

client/src/pages/Userprofile/UserInfoContainer.scss

@@ -1,11 +1,32 @@
 .user-info-container {
-  display: inline-flex;
-  align-items: center;
-  margin-bottom: 2em;
-
-  .user-avatar {
-    width: 8em;
-    height: 8em;
-    margin: 0 3em 0 2em;
+  display: block;
+
+  .hero {
+    background-color: #300;
+    background: linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6) ), url(../../assets/images/headers/treehero.png);
+    height: 200px;
+    display: flex;
+    align-items: end;
+    position: relative;
+
+    .avatar-box {
+      display: flex;
+      align-items: end;
+      position: relative;
+    }
+
+    .avatar-image {
+      width: 8em;
+      height: 8em;
+      margin: 0 1em 0 2em;
+      bottom: -20px;
+      border: solid 2px #FFF;
+    }
+
+    .avatar-info {
+      padding-bottom: 1em;
+      color: #FFF;
+    }
   }
-}
+
+}

client/src/tests/Userprofile.test.js

@@ -0,0 +1,45 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import { render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import {
+  useUserAdoptedQuery,
+  useUserLikedQuery,
+  useUserPlantedQuery,
+  useUserTreeHistoryQuery,
+} from '@/api/queries';
+import Userprofile from '@/pages/Userprofile/UserProfile';
+
+jest.mock('@auth0/auth0-react');
+jest.mock('@/api/queries');
+
+describe('UserProfile', () => {
+  beforeEach(() => {
+    // Reset mocks before each test
+    useAuth0.mockClear();
+    useUserAdoptedQuery.mockClear();
+    useUserLikedQuery.mockClear();
+    useUserPlantedQuery.mockClear();
+    useUserTreeHistoryQuery.mockClear();
+  });
+  it('renders UserProfile correctly', async () => {
+    useAuth0.mockReturnValue({
+      user: { nickname: 'testUser', email: '[email protected]' },
+    });
+    useUserAdoptedQuery.mockReturnValue({ data: [{ id: 1, name: 'Tree 1' }] });
+    useUserLikedQuery.mockReturnValue({ data: [{ id: 2, name: 'Tree 2' }] });
+    useUserPlantedQuery.mockReturnValue({ data: [{ id: 3, name: 'Tree 3' }] });
+    useUserTreeHistoryQuery.mockReturnValue({
+      data: [{ id: 4, name: 'Tree 4' }],
+    });
+    const userProfile = render(
+      <MemoryRouter>
+        <Userprofile />
+      </MemoryRouter>,
+    );
+    await waitFor(() => {
+      expect(userProfile).toMatchSnapshot();
+    })
+  });
+});