diff --git a/src/Components/Badge.js b/src/Components/Badge.js
index c000708e901f136fe6825a176749755999ada4a6..10cf69290e97ee946afcd12ecbfa703a31fdbefd 100644
--- a/src/Components/Badge.js
+++ b/src/Components/Badge.js
@@ -30,10 +30,6 @@ export default function Badge(props) {
const [src, setSrc] = useState(apiDomain + props.src);
const [alt, setAlt] = useState(props.alt);
- if (props.item_id) {
- // get real src and alt using axios
- }
-
if (props.lower)
return <LowerBadge src={src} alt={alt} />
else
@@ -41,15 +37,15 @@ export default function Badge(props) {
}
const BadgeImg = styled.img`
- height: 25px;
- width: 25px;
- border-radius: 50px;
+ height: 10px;
+ width: 10px;
+ border-radius: 50%;
`
const LowerBadge = styled.img`
- height: 25px;
- width: 25px;
- border-radius: 50px;
+ height: 10px;
+ width: 10px;
+ border-radius: 50%;
position: absolute;
bottom: -10px;
`
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index d0ce186fc59af466c7905b49d339f8e632652fa1..7adfdf474043f36e6a5dcfc69e52c73e9d4497a0 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -45,163 +45,163 @@ export default function ImgMediaCard(props) {
return (window.location.href.includes("loja"))
}
- return (
- <StyledCard>
- <StyledAvatar>
- <Avatar
- src={props.avatar ? props.avatar : noAvatar}
- alt="user avatar"
- style={{ height: "56%", width: "55%", objectFit: 'cover' }}
- />
- </StyledAvatar>
- </StyledCard>
- )
-
// return (
// <StyledCard>
- // <CardDiv>
- // <CardAreaDiv>
- // {/* Top part of contat card (background image, number of followers and avatar) */}
- // <Header>
- // <StyledCardMedia image={props.cover}>
- // <div
- // style={{
- // display: "flex",
- // backgroundColor: "inherit",
- // float: "right",
- // }}
- // >
- // <Link to={props.href}>
- // <FollowersCountButton followCount={props.follow_count} />
- // </Link>
- // <AvatarDiv>
- // <BadgesDiv>
- // {
- // props.userBadges.length === 1 &&
- // <Badge
- // lower
- // src={props.userBadges[0].image}
- // alt={props.userBadges[0].name}
- // />
- // }
- // {
- // props.userBadges.length === 2 &&
- // <>
- // <Badge
- // src={props.userBadges[0].image}
- // alt={props.userBadges[0].name}
-
- // />
- // <Badge
- // src={props.userBadges[1].image}
- // alt={props.userBadges[1].name}
-
- // />
- // </>
- // }
- // {
- // props.userBadges.length === 3 &&
- // <>
- // <Badge
- // src={props.userBadges[0].image}
- // alt={props.userBadges[0].name}
-
- // />
- // <Badge
- // lower
- // src={props.userBadges[1].image}
- // alt={props.userBadges[1].name}
-
- // />
- // <Badge
- // src={props.userBadges[2].image}
- // alt={props.userBadges[2].name}
- // />
- // </>
- // }
- // </BadgesDiv>
- // <img
- // src={props.avatar ? props.avatar : noAvatar}
- // alt="user avatar"
- // style={{ height: "90%", width: "90%", borderRadius: "50%", backgroundColor: 'white' }}
- // />
- // </AvatarDiv>
- // </div>
- // </StyledCardMedia>
- // </Header>
-
- // {/* Rest of the card content. Button to be rendered depends on whether the contact is followed by the user */}
- // <CardContent>
- // <UserInfo>
- // <Link to={props.href}>
- // <p className="p1">{props.name}</p>
- // </Link>
-
- // <Link to={props.href}>
- // <span style={{ fontSize: "14px", fontWeight: "normal" }}>
- // <b>{props.numCollections}</b>{" "}
- // {props.numCollections !== 1 ? "Coleções" : "Coleção"} |{" "}
- // <b>{props.numLearningObjects}</b>{" "}
- // {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
- // </span>
- // </Link>
-
- // {
- // !isOnStore() ?
- // <div style={{ display: "flex", justifyContent: "center" }}>
- // {
- // followedBoolean ?
- // (
- // <React.Fragment>
- // <FollowingButton
- // followedID={props.followerID ? props.followerID : props.followedID}
- // toggleFollowed={toggleFollowed} />
-
- // <Options
- // followableID={props.followerID ? props.followerID : props.followedID}
- // followed={followedBoolean}
- // toggleFollowed={toggleFollowed} />
- // </React.Fragment>
- // )
- // :
- // (
- // <React.Fragment>
- // <FollowButton
- // followerID={props.followedID ? props.followedID : props.followerID}
- // toggleFollowed={toggleFollowed} />
-
- // <Options
- // followableID={props.followedID ? props.followedID : props.followerID}
- // followed={followedBoolean}
- // toggleFollowed={toggleFollowed} />
- // </React.Fragment>
- // )
- // }
- // </div>
- // :
- // <StatusInfoDiv>
- // <CoinsInfoDiv>
- // <GemImg src={Rubi} />
- // <CoinsSpan>{props.points} </CoinsSpan>
- // </CoinsInfoDiv>
- // </StatusInfoDiv>
- // }
- // </UserInfo>
- // </CardContent>
- // </CardAreaDiv>
- // </CardDiv>
- // </StyledCard >
- // );
+ // <StyledAvatar>
+ // <Avatar
+ // src={props.avatar ? props.avatar : noAvatar}
+ // alt="user avatar"
+ // style={{ height: "56%", width: "55%", objectFit: 'cover' }}
+ // />
+ // </StyledAvatar>
+ // </StyledCard>
+ // )
+
+ return (
+ <StyledCard>
+ <CardDiv>
+ <CardAreaDiv>
+ {/* Top part of contat card (background image, number of followers and avatar) */}
+ <Header>
+ <StyledCardMedia image={props.cover}>
+ <div
+ style={{
+ display: "flex",
+ backgroundColor: "inherit",
+ float: "right",
+ }}
+ >
+ <Link to={props.href}>
+ <FollowersCountButton followCount={props.follow_count} />
+ </Link>
+ <AvatarDiv>
+ <BadgesDiv>
+ {
+ props.userBadges.length === 1 &&
+ <Badge
+ lower
+ src={props.userBadges[0].image}
+ alt={props.userBadges[0].name}
+ />
+ }
+ {
+ props.userBadges.length === 2 &&
+ <>
+ <Badge
+ src={props.userBadges[0].image}
+ alt={props.userBadges[0].name}
+
+ />
+ <Badge
+ src={props.userBadges[1].image}
+ alt={props.userBadges[1].name}
+
+ />
+ </>
+ }
+ {
+ props.userBadges.length === 3 &&
+ <>
+ <Badge
+ src={props.userBadges[0].image}
+ alt={props.userBadges[0].name}
+
+ />
+ <Badge
+ lower
+ src={props.userBadges[1].image}
+ alt={props.userBadges[1].name}
+
+ />
+ <Badge
+ src={props.userBadges[2].image}
+ alt={props.userBadges[2].name}
+ />
+ </>
+ }
+ </BadgesDiv>
+ <img
+ src={props.avatar ? props.avatar : noAvatar}
+ alt="user avatar"
+ style={{ height: "56%", width: "55%", borderRadius: "50%" }}
+ />
+ </AvatarDiv>
+ </div>
+ </StyledCardMedia>
+ </Header>
+
+ {/* Rest of the card content. Button to be rendered depends on whether the contact is followed by the user */}
+ <CardContent>
+ <UserInfo>
+ <Link to={props.href}>
+ <p className="p1">{props.name}</p>
+ </Link>
+
+ <Link to={props.href}>
+ <span style={{ fontSize: "14px", fontWeight: "normal" }}>
+ <b>{props.numCollections}</b>{" "}
+ {props.numCollections !== 1 ? "Coleções" : "Coleção"} |{" "}
+ <b>{props.numLearningObjects}</b>{" "}
+ {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
+ </span>
+ </Link>
+
+ {
+ !isOnStore() ?
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ {
+ followedBoolean ?
+ (
+ <React.Fragment>
+ <FollowingButton
+ followedID={props.followerID ? props.followerID : props.followedID}
+ toggleFollowed={toggleFollowed} />
+
+ <Options
+ followableID={props.followerID ? props.followerID : props.followedID}
+ followed={followedBoolean}
+ toggleFollowed={toggleFollowed} />
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <FollowButton
+ followerID={props.followedID ? props.followedID : props.followerID}
+ toggleFollowed={toggleFollowed} />
+
+ <Options
+ followableID={props.followedID ? props.followedID : props.followerID}
+ followed={followedBoolean}
+ toggleFollowed={toggleFollowed} />
+ </React.Fragment>
+ )
+ }
+ </div>
+ :
+ <StatusInfoDiv>
+ <CoinsInfoDiv>
+ <GemImg src={Rubi} />
+ <CoinsSpan>{props.points} </CoinsSpan>
+ </CoinsInfoDiv>
+ </StatusInfoDiv>
+ }
+ </UserInfo>
+ </CardContent>
+ </CardAreaDiv>
+ </CardDiv>
+ </StyledCard >
+ );
}
const StyledAvatar = styled(Avatar)`
border-radius: 105px 105px 0px 0px;
- height: 300px;
- width: 300px;
+ max-height: 300px;
+ max-width: 300px;
float: right;
overflow: hidden;
- background-image: url("https://rocket-league.com/content/media/items/avatar/220px/4f474ee3bb1535899237.png");
+ background-image: url("https://png.pngtree.com/png-clipart/20210404/original/pngtree-fluorescent-purple-blue-twibbon-avatar-border-png-image_6193873.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@@ -301,13 +301,14 @@ const AvatarDiv = styled.div`
flex-direction: row;
justify-content: space-around;
align-items: center;
- background-repeat: no-repeat;
- border-image:
- url("https://mdn.mozillademos.org/files/4127/border.png") /* source */
- 27 / /* slice */
- 36px 28px 18px 8px / /* width */
- 18px 14px 9px 4px /* outset */
- round;
+ /* max-height: 300px;
+ max-width: 300px; */
+ float: right;
+ overflow: hidden;
+ background-image: url("https://png.pngtree.com/png-clipart/20210404/original/pngtree-fluorescent-purple-blue-twibbon-avatar-border-png-image_6193873.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
`;
/* gamification aspects */
@@ -315,7 +316,7 @@ const BadgesDiv = styled.div`
z-index: 9;
position: absolute;
display: block;
- bottom: 0;
+ bottom: 12px;
width: 100%;
display: flex;
flex-direction: row;
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index da0362ea3128702e940fafcac8fa94dda42153b9..dd96f13bb9cc2ebfa8351d50b4ce7d423a246cfa 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
import { Store } from '../Store';
import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components'
@@ -32,197 +32,281 @@ import { Button } from '@material-ui/core';
import DefaultAvatar from '../img/default_profile0.png'
import SettingsIcon from '@material-ui/icons/Settings';
import { apiDomain } from '../env.js'
-import { deleteRequest } from './HelperFunctions/getAxiosConfig'
+import { deleteRequest, getRequest } from './HelperFunctions/getAxiosConfig'
export default function MobileDrawerMenu(props) {
- const { state, dispatch } = useContext(Store)
-
- const buildMyAreaTabs = () => {
- const minhaArea = [
- { name: "Perfil e Atividades", href: "/perfil", value: '0' },
- { name: "Status e conquista", href: "/perfil", value: '1' },
- { name: "Recursos Publicados", href: "/perfil", value: '2' },
- { name: "Favoritos", href: "/perfil", value: '3' },
- { name: "Coleções", href: "/perfil", value: '4' },
- { name: "Rede", href: "/perfil", value: '5' },
- { name: "Configurações", href: "/editarperfil", value: '6' },
- ]
-
- if (state.currentUser.roles) {
- let canUserAdmin = false;
- let index = 0;
- const userRoles = [...state.currentUser.roles]
-
- while (!canUserAdmin && index < userRoles.length) {
- if (userRoles[index].id === 3 || userRoles[index].id === 7)
- canUserAdmin = true
- index++
- }
-
- if (canUserAdmin)
- minhaArea.push({
- name: "Administrador",
- href: "/admin/home",
- value: '6',
- })
- }
-
- return minhaArea;
- }
-
- const menuSobre = [
- { name: "Página Inicial", href: "/", icon: <HomeIcon /> },
- { name: "Sobre a Plataforma", href: "/sobre", icon: <InfoIcon /> },
- { name: "Contato", href: "/contato", icon: <MailOutlineIcon /> },
- { name: "Central de Ajuda", href: "/ajuda", icon: <HelpOutlineIcon /> },
- { name: "Termos de Uso", href: "/termos", icon: <AssignmentIcon /> },
- //{ name: "Busca", href: `/busca?query=${state.search.query}&search_class=${state.search.class}`, icon: <SearchIcon /> }
+ const { state, dispatch } = useContext(Store)
+ const [userBadges, setUserBadges] = useState([])
+
+ const buildMyAreaTabs = () => {
+ const minhaArea = [
+ { name: "Perfil e Atividades", href: "/perfil", value: '0' },
+ { name: "Status e conquista", href: "/perfil", value: '1' },
+ { name: "Recursos Publicados", href: "/perfil", value: '2' },
+ { name: "Favoritos", href: "/perfil", value: '3' },
+ { name: "Coleções", href: "/perfil", value: '4' },
+ { name: "Rede", href: "/perfil", value: '5' },
+ { name: "Configurações", href: "/editarperfil", value: '6' },
]
- // {/*used in dynamic css selection*/}
- const [selectedIndex, setSelectedIndex] = React.useState(-1);
- const handleMenuItemClick = (event, index) => {
- setSelectedIndex(index);
- };
-
- const getUserAvatar = () => {
- if (state.currentUser.avatar === '' || state.currentUser.avatar == null) {
- return DefaultAvatar
- }
- else {
- return apiDomain + state.currentUser.avatar
- }
+ if (state.currentUser.roles) {
+ let canUserAdmin = false;
+ let index = 0;
+ const userRoles = [...state.currentUser.roles]
+
+ while (!canUserAdmin && index < userRoles.length) {
+ if (userRoles[index].id === 3 || userRoles[index].id === 7)
+ canUserAdmin = true
+ index++
+ }
+
+ if (canUserAdmin)
+ minhaArea.push({
+ name: "Administrador",
+ href: "/admin/home",
+ value: '6',
+ })
}
- // {/*main user actions array */}
- const minhaArea = buildMyAreaTabs()
-
- function handleSuccessSignOut(data) {
- dispatch({
- type: 'USER_LOGGED_OUT',
- userLoggedOut: !state.userIsLoggedIn,
- })
+ return minhaArea;
+ }
+
+ const menuSobre = [
+ { name: "Página Inicial", href: "/", icon: <HomeIcon /> },
+ { name: "Sobre a Plataforma", href: "/sobre", icon: <InfoIcon /> },
+ { name: "Contato", href: "/contato", icon: <MailOutlineIcon /> },
+ { name: "Central de Ajuda", href: "/ajuda", icon: <HelpOutlineIcon /> },
+ { name: "Termos de Uso", href: "/termos", icon: <AssignmentIcon /> },
+ //{ name: "Busca", href: `/busca?query=${state.search.query}&search_class=${state.search.class}`, icon: <SearchIcon /> }
+ ]
+
+ // {/*used in dynamic css selection*/}
+ const [selectedIndex, setSelectedIndex] = React.useState(-1);
+ const handleMenuItemClick = (event, index) => {
+ setSelectedIndex(index);
+ };
+
+ const getUserAvatar = () => {
+ if (!state.currentUser.avatar) {
+ return DefaultAvatar
}
- const handleLogout = () => {
- const url = `/auth/sign_out`
- deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
+ else {
+ return apiDomain + state.currentUser.avatar
}
+ }
+
+ // {/*main user actions array */}
+ const minhaArea = buildMyAreaTabs()
+
+ function handleSuccessSignOut(data) {
+ dispatch({
+ type: 'USER_LOGGED_OUT',
+ userLoggedOut: !state.userIsLoggedIn,
+ })
+ }
+ const handleLogout = () => {
+ const url = `/auth/sign_out`
+ deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
+ }
+
+ useEffect(() => {
+ if (state.currentUser.id)
+ getRequest(
+ `/users/${state.currentUser.id}/items?being_used=true`,
+ (data, header) => {
+ const newUserBadges = []
+ for (let index = 0; index < data.length; index++) {
+ const item = data[index];
+ if (item.item.item_type === 'badge')
+ newUserBadges.push(item.item)
+ }
+ setUserBadges(newUserBadges)
+ },
+ (error) => {
- return (
- <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
- <MenuBody>
- {/*Renders menuSobre array options*/}
+ }
+ )
+ }, [state.currentUser.id])
+
+ return (
+ <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
+ <MenuBody>
+ {/*Renders menuSobre array options*/}
+ {
+ menuSobre.map((item, index) =>
+ <Link to={item.href} className={`menu-buttons ${selectedIndex === index ? 'selected' : ''}`} onClick={(event) => handleMenuItemClick(event, index)}>
+ {item.icon}
+ {item.name}
+ </Link>
+ )
+ }
+ </MenuBody>
+
+
+ <div style={{ borderTop: "1px solid #e5e5e5", borderBottom: "1px solid #e5e5e5", marginTop: "10px", paddingTop: "10px", marginBottom: "10px" }}>
+ {
+ /*If user is logged in, render user actions menu; else render log in/sign in buttons*/
+ state.userIsLoggedIn ?
+ (
+ <div style={{ display: "flex", flexDirection: "column", color: "#666", paddingBottom: "10px" }}>
+ <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+ <MyArea>
+ <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-betww', alignItems: 'center' }}>
+ <BadgesDiv>
+ {
+ userBadges.length === 1 &&
+ <Badge
+ lower
+ src={apiDomain + userBadges[0].image}
+ alt={userBadges[0].name}
+ />
+ }
+ {
+ userBadges.length === 2 &&
+ <>
+ <Badge
+ src={apiDomain + userBadges[0].image}
+ alt={userBadges[0].name}
+
+ />
+ <Badge
+ src={apiDomain + userBadges[1].image}
+ alt={userBadges[1].name}
+
+ />
+ </>
+ }
+ {
+ userBadges.length === 3 &&
+ <>
+ <Badge
+ src={apiDomain + userBadges[0].image}
+ alt={userBadges[0].name}
+
+ />
+ <Badge
+ lower
+ src={apiDomain + userBadges[1].image}
+ alt={userBadges[1].name}
+
+ />
+ <Badge
+ src={apiDomain + userBadges[2].image}
+ alt={userBadges[2].name}
+ />
+ </>
+ }
+ </BadgesDiv>
+ </div>
+ <img
+ className="user-avatar"
+ src={getUserAvatar()}
+ alt="user avatar"
+ />
+ </MyArea>
+ <div>
+ <span>
+ Minha área
+ </span>
+ </div>
+ </div>
{
- menuSobre.map((item, index) =>
- <Link to={item.href} className={`menu-buttons ${selectedIndex === index ? 'selected' : ''}`} onClick={(event) => handleMenuItemClick(event, index)}>
- {item.icon}
- {item.name}
- </Link>
- )
+ minhaArea.map((item, index) =>
+ <Link to={{
+ pathname: item.href,
+ state: item.value
+ }}
+ className={`menu-buttons ${selectedIndex === (index + menuSobre.length) ? 'selected' : ''}`}
+ onClick={(event) => handleMenuItemClick(event, index + menuSobre.length)}
+ >
+ {item.icon}
+ {item.name}
+ </Link>
+ )
}
- </MenuBody>
-
- <div style={{ borderTop: "1px solid #e5e5e5", borderBottom: "1px solid #e5e5e5", marginTop: "10px", paddingTop: "10px", marginBottom: "10px" }}>
- {
- /*If user is logged in, render user actions menu; else render log in/sign in buttons*/
- state.userIsLoggedIn ?
- (
- <div style={{ display: "flex", flexDirection: "column", color: "#666", paddingBottom: "10px" }}>
- <MyArea>
- <div className="user-avatar">
- <img alt="user-avatar"
- src={getUserAvatar()}
- />
- </div>
- <span className="text">Minha área</span>
- </MyArea>
-
- {
- minhaArea.map((item, index) =>
- <Link to={{
- pathname: item.href,
- state: item.value
- }}
- className={`menu-buttons ${selectedIndex === (index + menuSobre.length) ? 'selected' : ''}`}
- onClick={(event) => handleMenuItemClick(event, index + menuSobre.length)}
- >
- {item.icon}
- {item.name}
- </Link>
- )
- }
-
- </div>
- )
- :
- (
- <React.Fragment>
- <div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
- <ButtonPublicarRecurso onClick={props.openLogin}>
- PUBLICAR RECURSO?
+ </div>
+ )
+ :
+ (
+ <React.Fragment>
+ <div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
+ <ButtonPublicarRecurso onClick={props.openLogin}>
+ PUBLICAR RECURSO?
</ButtonPublicarRecurso>
- </div>
+ </div>
- <div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
- <div style={{ borderRight: "1px solid #e5e5e5" }}>
- <ButtonStyled onClick={props.openLogin}>
- <ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar
+ <div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
+ <div style={{ borderRight: "1px solid #e5e5e5" }}>
+ <ButtonStyled onClick={props.openLogin}>
+ <ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar
</ButtonStyled>
- </div>
+ </div>
- <div>
- <ButtonStyled onClick={props.openSignUp}>
- Cadastre-se
+ <div>
+ <ButtonStyled onClick={props.openSignUp}>
+ Cadastre-se
</ButtonStyled>
- </div>
- </div>
- </React.Fragment>
- )
- }
- </div>
- {
- /*Renders settings and log off buttons */
- state.userIsLoggedIn &&
- <React.Fragment>
- <Link to={"/editarperfil"} className={`menu-buttons`}>
- <SettingsIcon /> Configurações
+ </div>
+ </div>
+ </React.Fragment>
+ )
+ }
+ </div>
+ {
+ /*Renders settings and log off buttons */
+ state.userIsLoggedIn &&
+ <React.Fragment>
+ <Link to={"/editarperfil"} className={`menu-buttons`}>
+ <SettingsIcon /> Configurações
</Link>
- <Link to={"/"} className={`menu-buttons`} onClick={handleLogout}>
- <ExitToAppIcon /> Sair
+ <Link to={"/"} className={`menu-buttons`} onClick={handleLogout}>
+ <ExitToAppIcon /> Sair
</Link>
- </React.Fragment>
- }
- </StyledDrawer>
- )
+ </React.Fragment>
+ }
+ </StyledDrawer>
+ )
}
-const MyArea = styled.div`
- margin : 0 16px;
- display : flex;
- flex-direction : row;
+const Badge = styled.img`
+ height: 10px;
+ width: 10px;
+ border-radius: 50%;
+`
- .text {
- font-size : 16px;
- color : #666;
- align-self : center;
- }
+const BadgesDiv = styled.div`
+ z-index: 9;
+ /* position: absolute; */
+ /* display: block; */
+ /* bottom: 12px; */
+ /* width: 100%; */
+ height: 50%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+`;
- .user-avatar {
- margin-right : 10px;
- align-self : center;
- border-radius : 50%;
- border : 1px solid #fff;
- max-width : 50px;
- max-height : 50px;
- overflow : hidden;
-
- img {
- width : 100%;
- height : 100%;
- vertical-align : middle;
- }
+
+const MyArea = styled.div`
+ border-radius: 50%;
+ height: 70px;
+ width: 70px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ float: right;
+ overflow: hidden;
+ background-image: url("https://png.pngtree.com/png-clipart/20210404/original/pngtree-fluorescent-purple-blue-twibbon-avatar-border-png-image_6193873.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+
+ img{
+ height: 56%;
+ width: 55%;
}
`