feat(profile): added statistics to bot profile

This commit is contained in:
trashtemp 2021-12-21 17:03:51 +01:00
parent 8eabc47915
commit 4889830c06
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
2 changed files with 101 additions and 23 deletions

View file

@ -123,6 +123,29 @@
}
}
.botStats {
background: var(--secondary-background);
border-radius: var(--border-radius);
padding: 10px;
font-size: 12px;
.stat {
display: flex;
align-items: center;
gap: 5px;
opacity: 0.5;
&:nth-child(1) {
opacity: 1;
> svg {
color: var(--accent);
}
}
}
}
> div {
> span {
font-size: 15px;
@ -152,6 +175,10 @@
border-radius: var(--border-radius);
background-color: var(--secondary-background);
.info {
flex-grow: 1;
}
&:hover {
background-color: var(--primary-background);
}
@ -167,5 +194,19 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
}
}
.botContainer {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
.owner {
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
}
}

View file

@ -1,10 +1,17 @@
import { ListUl } from "@styled-icons/boxicons-regular";
import {
ListUl,
DotsVerticalRounded,
ChevronRight,
} from "@styled-icons/boxicons-regular";
import {
Envelope,
Edit,
UserPlus,
Group,
InfoCircle,
BadgeCheck,
Cog,
TimeFive,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, useHistory } from "react-router-dom";
@ -157,7 +164,6 @@ export const UserProfile = observer(
backgroundImage:
backgroundURL &&
`linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
paddingBottom: "1px",
}}>
<div className={styles.profile}>
<UserIcon
@ -234,6 +240,9 @@ export const UserProfile = observer(
<UserPlus size={28} />
</IconButton>
)}
{/*<IconButton onClick={() => user.addFriend()}>
<DotsVerticalRounded size={26} />
</IconButton>*/}
</div>
<div className={styles.tabs}>
<div
@ -288,31 +297,59 @@ export const UserProfile = observer(
{user.bot ? (
<>
<div className={styles.category}>
bot owner
Bot information
</div>
<div
onClick={() =>
user.bot &&
openScreen({
id: "profile",
user_id: user.bot.owner,
})
}
className={styles.entry}
key={user.bot.owner}>
<UserIcon
size={32}
target={client.users.get(
user.bot.owner,
)}
/>
<span>
<Username
user={client.users.get(
<div className={styles.botContainer}>
<div className={styles.botStats}>
<div className={styles.stat}>
<BadgeCheck size="15" />
<b>
This bot has been
officially verified by
Revolt
</b>
</div>
<div className={styles.stat}>
<Cog size="15" />
Used in <b>456 servers</b>
</div>
<div className={styles.stat}>
<TimeFive size="14" />
Bot active since{" "}
<b>Apr 15, 2019</b>
</div>
</div>
<div
onClick={() =>
user.bot &&
openScreen({
id: "profile",
user_id: user.bot.owner,
})
}
className={styles.entry}
key={user.bot.owner}>
<UserIcon
size={32}
target={client.users.get(
user.bot.owner,
)}
/>
</span>
<div className={styles.info}>
<Username
user={client.users.get(
user.bot.owner,
)}
/>
<div
className={
styles.owner
}>
Bot owner
</div>
</div>
<ChevronRight size="24" />
</div>
</div>
</>
) : undefined}