Skip to content

Commit

Permalink
User Profile Redesign - refactor to eliminate styled components (#745)
Browse files Browse the repository at this point in the history
* removed UserInfoContainerBox

* phased out styled component UserAvatar

* no longer using styled

---------

Co-authored-by: John Lee <macmini@Johns-Mac-mini-2.local>
  • Loading branch information
drumwolf and John Lee authored Sep 21, 2023
1 parent cd639df commit 710bce4
Showing 2 changed files with 15 additions and 16 deletions.
20 changes: 4 additions & 16 deletions client/src/pages/Userprofile/UserInfoContainer.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
import React from 'react';
import { Avatar, Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Star } from '@mui/icons-material';
import TreeIcon from '@/assets/images/addtree/tree12.svg';
import AdoptionIcon from '@/components/Icons/AdoptionIcon/AdoptionIcon';
import { TooltipBottom } from '@/components/Tooltip';

const UserInfoContainerBox = styled(Box)`
display: inline-flex;
align-items: center;
margin-bottom: 2em;
`;

const UserAvatar = styled(Avatar)`
width: 8em;
height: 8em;
margin: 0 3em 0 2em;
`;
import './UserInfoContainer.scss';

const iconStyle = {
height: '2em',
@@ -67,8 +55,8 @@ const UserIcons = ({ adoptedCount, likedCount, plantedCount }) => (
const UserInfoContainer = ({ adoptedTrees, likedTrees, plantedTrees, user }) => {
const { name, nickname, email, picture } = user;
return (
<UserInfoContainerBox>
<UserAvatar alt="Avatar" src={picture} />
<div className="user-info-container">
<Avatar className="user-avatar" alt="Avatar" src={picture} />
<div>
<UserIcons
adoptedCount={adoptedTrees.length}
@@ -79,7 +67,7 @@ const UserInfoContainer = ({ adoptedTrees, likedTrees, plantedTrees, user }) =>
<Typography variant="body1">{nickname}</Typography>
<Typography variant="body1">{email}</Typography>
</div>
</UserInfoContainerBox>
</div>
)
}
export default UserInfoContainer
11 changes: 11 additions & 0 deletions client/src/pages/Userprofile/UserInfoContainer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.user-info-container {
display: inline-flex;
align-items: center;
margin-bottom: 2em;

.user-avatar {
width: 8em;
height: 8em;
margin: 0 3em 0 2em;
}
}

0 comments on commit 710bce4

Please sign in to comment.