abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add new badges

Browse Source
This commit is contained in:
Paul
2021-11-13 22:55:41 +00:00
parent 0449761ed2
commit bc83047fdd
6 changed files with 153 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/common/user/UserBadges.tsx Normal file
View File

@@ -0,0 +1,133 @@
import { Shield } from "@styled-icons/boxicons-regular";
import { Badges } from "revolt-api/types/Users";
import styled from "styled-components";
import { Localizer, Text } from "preact-i18n";
import Tooltip from "../Tooltip";
const BadgesBase = styled.div`
gap: 8px;
display: flex;
margin-top: 4px;
flex-direction: row;
img {
width: 32px;
height: 32px;
}
`;
interface Props {
badges: number;
uid?: string;
}
export default function UserBadges({ badges, uid }: Props) {
return (
<BadgesBase>
<Localizer>
{badges & Badges.Founder ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.founder" />
}>
<img src="/assets/badges/founder.svg" />
</Tooltip>
) : (
<></>
)}
{badges & Badges.Developer ? (
<Tooltip content={<Text id="app.navigation.tabs.dev" />}>
<img src="/assets/badges/developer.svg" />
</Tooltip>
) : (
<></>
)}
{badges & Badges.Translator ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.translator" />
}>
<img
src="/assets/badges/translator.svg"
style={{
cursor: "pointer",
}}
onClick={() => {
window.open(
"https://weblate.insrt.uk/projects/revolt/web-app/",
"_blank",
);
}}
/>
</Tooltip>
) : (
<></>
)}
{badges & Badges.EarlyAdopter ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.early_adopter" />
}>
<img src="/assets/badges/early_adopter.svg" />
</Tooltip>
) : (
<></>
)}
{badges & Badges.ResponsibleDisclosure ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
}>
<Shield size={32} color="gray" />
</Tooltip>
) : (
<></>
)}
{badges & Badges.Supporter ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.supporter" />
}>
<img
src="/assets/badges/supporter.svg"
style={{
cursor: "pointer",
}}
onClick={() => {
window.open(
"https://insrt.uk/donate",
"_blank",
);
}}
/>
</Tooltip>
) : (
<></>
)}
{badges & Badges.ReservedRelevantJokeBadge1 ? (
<Tooltip content="sus">
<img src="/assets/badges/amog.svg" />
</Tooltip>
) : (
<></>
)}
{badges & Badges.Paw ? (
<Tooltip content="🦊">
<img src="/assets/badges/paw.svg" />
</Tooltip>
) : (
<></>
)}
{uid === "01EX2NCWQ0CHS3QJF0FEQS1GR4" ? (
<Tooltip content="🦝">
<img src="/assets/badges/raccoon.svg" />
</Tooltip>
) : (
<></>
)}
</Localizer>
</BadgesBase>
);
}

12
src/context/intermediate/popovers/UserProfile.module.scss
View File

@@ -115,18 +115,6 @@
}
}
.badges {
gap: 8px;
display: flex;
margin-top: 4px;
flex-direction: row;
img {
width: 32px;
height: 32px;
}
}
.entries {
gap: 8px;
display: flex;

86
src/context/intermediate/popovers/UserProfile.tsx
View File

@@ -1,5 +1,4 @@
import { Money } from "@styled-icons/boxicons-regular";
import { Envelope, Edit, UserPlus, Shield } from "@styled-icons/boxicons-solid";
import { Envelope, Edit, UserPlus } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, useHistory } from "react-router-dom";
import { Profile, RelationshipStatus } from "revolt-api/types/Users";
@@ -13,6 +12,7 @@ import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import ChannelIcon from "../../../components/common/ChannelIcon";
import ServerIcon from "../../../components/common/ServerIcon";
import Tooltip from "../../../components/common/Tooltip";
import UserBadges from "../../../components/common/user/UserBadges";
import UserIcon from "../../../components/common/user/UserIcon";
import { Username } from "../../../components/common/user/UserShort";
import UserStatus from "../../../components/common/user/UserStatus";
@@ -300,87 +300,7 @@ export const UserProfile = observer(
</div>
)}
{badges > 0 && (
<div className={styles.badges}>
<Localizer>
{badges & Badges.Developer ? (
<Tooltip
content={
<Text id="app.navigation.tabs.dev" />
}>
<img src="/assets/badges/developer.svg" />
</Tooltip>
) : (
<></>
)}
{badges & Badges.Translator ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.translator" />
}>
<img
src="/assets/badges/translator.svg"
style={{
cursor: "pointer",
}}
onClick={() => {
window.open(
"https://weblate.insrt.uk/projects/revolt/web-app/",
"_blank",
);
}}
/>
</Tooltip>
) : (
<></>
)}
{badges & Badges.EarlyAdopter ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.early_adopter" />
}>
<img src="/assets/badges/early_adopter.svg" />
</Tooltip>
) : (
<></>
)}
{badges & Badges.Supporter ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.supporter" />
}>
<Money
size={32}
color="#efab44"
style={{
cursor: "pointer",
}}
onClick={() => {
window.open(
"https://insrt.uk/donate",
"_blank",
);
}}
/>
</Tooltip>
) : (
<></>
)}
{badges &
Badges.ResponsibleDisclosure ? (
<Tooltip
content={
<Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
}>
<Shield
size={32}
color="gray"
/>
</Tooltip>
) : (
<></>
)}
</Localizer>
</div>
<UserBadges badges={badges} uid={user._id} />
)}
{profile?.content && (
<div className={styles.category}>