HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

Initial bot page stylings

Browse Source
This commit is contained in:
Snazzah
2021-08-30 16:18:42 +00:00
committed by GitHub
parent 3628aeffdd
commit 86027f7b3d
5 changed files with 194 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/pages/settings/panes/MyBots.tsx
View File

@@ -1,17 +1,26 @@
import { Key, Clipboard, Globe } from "@styled-icons/boxicons-regular";
import { LockAlt } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Bot } from "revolt-api/types/Bots";
import styled from "styled-components";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { stopPropagation } from "../../../lib/stopPropagation";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserShort from "../../../components/common/user/UserShort";
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import InputBox from "../../../components/ui/InputBox";
import Overline from "../../../components/ui/Overline";
import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
interface Data {
_id: string;
@@ -20,6 +29,21 @@ interface Data {
interactions_url?: string;
}
const BotBadge = styled.div`
display: inline-block;
height: 1.3em;
padding: 0px 4px;
font-size: 0.7em;
user-select: none;
margin-inline-start: 2px;
text-transform: uppercase;
color: var(--foreground);
background: var(--accent);
border-radius: calc(var(--border-radius) / 2);
`;
function BotEditor({ bot }: { bot: Data }) {
const client = useClient();
const [data, setData] = useState<Data>(bot);
@@ -78,10 +102,11 @@ export const MyBots = observer(() => {
}, []);
const [name, setName] = useState("");
const { writeClipboard } = useIntermediate();
const [editMode, setEditMode] = useState(false);
const { writeClipboard, openScreen } = useIntermediate();
return (
<div>
<div className={styles.myBots}>
<Tip warning hideSeparator>
This section is under construction.
</Tip>
@@ -113,16 +138,80 @@ export const MyBots = observer(() => {
key={bot._id}
style={{
background: "var(--secondary-background)",
margin: "8px",
margin: "8px 0",
padding: "12px",
}}>
<UserShort user={user} />
<p>
token:{" "}
<code style={{ userSelect: "all" }}>
{bot.token}
</code>
</p>
<div className={styles.infoheader}>
<div className={styles.container}>
<UserIcon
className={styles.avatar}
target={user!}
size={48}
onClick={() =>
openScreen({
id: "profile",
user_id: user!._id,
})
}
/>
<div className={styles.userDetail}>
<div className={styles.userName}>
{user!.username}{" "}
<BotBadge>
<Text id="app.main.channel.bot" />
</BotBadge>
</div>
<div className={styles.userid}>
<Tooltip
content={
<Text id="app.special.copy" />
}>
<a
onClick={() =>
writeClipboard(
client.user!._id,
)
}>
{client.user!._id}
</a>
</Tooltip>
</div>
</div>
</div>
<Tooltip content={bot.public ? "Bot is public. Anyone can invite it." : "Bot is private. Only you can invite it."}>
{bot.public ? <Globe size={24} /> : <LockAlt size={24} />}
</Tooltip>
{/* <Button onClick={() => switchPage("profile")} contrast>
<Text id="app.settings.pages.profile.edit_profile" />
</Button> */}
</div>
<CategoryButton
account
icon={<Key size={24} />}
onClick={() => writeClipboard(bot.token)}
description={
<>
{"••••••••••••••••••••••••••••••••••••"}{" "}
<a
onClick={(ev) =>
stopPropagation(
ev,
openScreen({
id: "token_reveal",
token: bot.token,
username: user!.username,
}),
)
}>
<Text id="app.special.modals.actions.reveal" />
</a>
</>
}
action={<Clipboard size={18} />}>
Token
</CategoryButton>
<BotEditor
bot={{
...bot,