RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve FollowerList style

Browse Source
This commit is contained in:
SrGooglo 2023-01-12 15:45:47 +00:00
parent 0fad28b4ec
commit 0da29e4688
2 changed files with 59 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/app/src/components/FollowersList/index.jsx
View File

@ -5,6 +5,34 @@ import UserModel from "models/user"
import "./index.less"
const FollowerItem = ({
follower,
onClick,
index
}) => {
return <div
className="follower"
onClick={onClick}
key={index}
>
<div className="avatar">
<antd.Avatar shape="square" src={follower.avatar} />
</div>
<div className="names">
<div>
<h2>
{follower.fullName ?? follower.username}
</h2>
</div>
<div>
<span>
@{follower.username}
</span>
</div>
</div>
</div>
}
export default (props) => {
const [loading, setLoading] = React.useState(false)
const [followers, setFollowers] = React.useState(props.followers ?? [])
@ -62,24 +90,14 @@ export default (props) => {
}
return <div className="followersList">
{followers.map((follower) => {
return <div className="follower" onClick={() => goToProfile(follower.username)}>
<div className="avatar">
<antd.Avatar shape="square" src={follower.avatar} />
</div>
<div className="names">
<div>
<h2>
{follower.fullName ?? follower.username}
</h2>
</div>
<div>
<span>
@{follower.username}
</span>
</div>
</div>
</div>
})}
{
followers.map((follower, index) => {
return <FollowerItem
index={index}
follower={follower}
goToProfile={() => goToProfile(follower.username)}
/>
})
}
</div>
}

41
packages/app/src/components/FollowersList/index.less
View File

@ -1,49 +1,51 @@
@borderRadius: 12px;
.ant-result {
display : flex;
display: flex;
flex-direction: column;
align-items : center;
align-items: center;
}
.ant-result-icon {
background-color: var(--background-color-accent);
border-radius : @borderRadius;
width : fit-content;
padding : 20px;
border-radius: @borderRadius;
width: fit-content;
padding: 20px;
svg {
margin: 0;
color : var(--background-color-contrast);
color: var(--background-color-contrast);
}
}
.ant-result-content {
background-color: var(--background-color-accent);
border-radius : @borderRadius;
border-radius: @borderRadius;
h2 {
color: var(--background-color-contrast);
}
h3 {
color : var(--background-color-contrast);
color: var(--background-color-contrast);
font-weight: 100;
}
}
.followersList {
.follower {
width : 100%;
//max-width: 50vw;
display: inline-flex;
align-items: center;
width: 100%;
margin-bottom: 10px;
padding: 10px;
cursor : pointer;
padding : 10px;
display : inline-flex;
align-items : center;
border-radius: 8px;
border : 1px solid var(--border-color);
border: 1px solid var(--border-color);
cursor: pointer;
h2 {
margin: 0;
@ -56,11 +58,12 @@
}
.names {
display: flex;
flex-direction: column;
}
}
>div {
margin-bottom: 20px;
.follower:last-child {
margin-bottom: 0;
}
}