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

feat(settings): UI improvements (#448)

Browse Source 
* Fixed CSS for Settings.tsx + new Theme Shop design

* reformat

* More changes to UI CSS

* Small CSS fixes for Settings.tsx, Account, Bots

* Updated theme shop, settings pages, cleanup

* chore: force sync language submodule

* fix(sidebar): prevent items from shrinking

* fix(push): fix timestamp and icon for push notifications

* fix(voice): hide grant permission button after grant

* chore: hide new shop / chevron before merge

* chore(ci): bump node to v16 in dockerfile

* fix(sidebar): change width of channel sidebar

Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>
This commit is contained in:
Paul Makles
2021-12-20 13:37:21 +00:00
committed by GitHub
parent 535a40df0c
commit 9298f205fc
23 changed files with 744 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,7 +48,7 @@ interface Changes {
const BotBadge = styled.div`
display: inline-block;
flex-shrink: 0;
height: 1.3em;
padding: 0px 4px;
font-size: 0.7em;
@@ -228,99 +228,103 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
return (
<div key={bot._id} className={styles.botCard}>
<div className={styles.infoheader}>
<div className={styles.container}>
{!editMode ? (
<UserIcon
className={styles.avatar}
target={user}
size={48}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
) : (
<FileUploader
width={64}
height={64}
style="icon"
fileType="avatars"
behaviour="upload"
maxFileSize={4_000_000}
onUpload={(avatar) => editBotAvatar(avatar)}
remove={() => editBotAvatar()}
defaultPreview={user.generateAvatarURL(
{ max_side: 256 },
true,
)}
previewURL={user.generateAvatarURL(
{ max_side: 256 },
true,
)}
/>
)}
<div className={styles.infocontainer}>
<div className={styles.infoheader}>
<div className={styles.container}>
{!editMode ? (
<UserIcon
className={styles.avatar}
target={user}
size={42}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
) : (
<FileUploader
width={42}
height={42}
style="icon"
fileType="avatars"
behaviour="upload"
maxFileSize={4_000_000}
onUpload={(avatar) => editBotAvatar(avatar)}
remove={() => editBotAvatar()}
defaultPreview={user.generateAvatarURL(
{ max_side: 256 },
true,
)}
previewURL={user.generateAvatarURL(
{ max_side: 256 },
true,
)}
/>
)}
{!editMode ? (
<div className={styles.userDetail}>
<div className={styles.userName}>
{user!.username}{" "}
<BotBadge>
<Text id="app.main.channel.bot" />
</BotBadge>
</div>
{!editMode ? (
<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.settings.pages.bots.unique_id" />
}>
<HelpCircle size={16} />
</Tooltip>
<Tooltip
content={<Text id="app.special.copy" />}>
<a
onClick={() =>
writeClipboard(user!._id)
<div className={styles.userid}>
<Tooltip
content={
<Text id="app.settings.pages.bots.unique_id" />
}>
{user!._id}
</a>
</Tooltip>
<HelpCircle size={16} />
</Tooltip>
<Tooltip
content={
<Text id="app.special.copy" />
}>
<a
onClick={() =>
writeClipboard(user!._id)
}>
{user!._id}
</a>
</Tooltip>
</div>
</div>
</div>
) : (
<InputBox
ref={setUsernameRef}
value={data.username}
disabled={saving}
onChange={(e) =>
setData({
...data,
username: e.currentTarget.value,
})
}
/>
) : (
<InputBox
ref={setUsernameRef}
value={data.username}
disabled={saving}
onChange={(e) =>
setData({
...data,
username: e.currentTarget.value,
})
}
/>
)}
</div>
{!editMode && (
<Tooltip
content={
<Text
id={`app.settings.pages.bots.${
bot.public ? "public" : "private"
}_bot_tip`}
/>
}>
{bot.public ? (
<Globe size={24} />
) : (
<LockAlt size={24} />
)}
</Tooltip>
)}
</div>
{!editMode && (
<Tooltip
content={
<Text
id={`app.settings.pages.bots.${
bot.public ? "public" : "private"
}_bot_tip`}
/>
}>
{bot.public ? (
<Globe size={24} />
) : (
<LockAlt size={24} />
)}
</Tooltip>
)}
<Button
disabled={saving}
onClick={() => {
@@ -377,7 +381,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
<CollapsibleSection
defaultValue={false}
id={`bot_profile_${bot._id}`}
summary="Profile">
summary="Bot Profile">
<h3>
<Text id="app.settings.pages.profile.custom_background" />
</h3>
@@ -473,7 +477,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
<Text id="app.special.modals.actions.save" />
</Button>
<Button
accent
error
onClick={async () => {
setSaving(true);
openScreen({
@@ -540,6 +544,16 @@ export const MyBots = observer(() => {
action="chevron">
<Text id="app.settings.pages.bots.create_bot" />
</CategoryButton>
<h5>
By creating a bot, you are agreeing to the {` `}
<a
href="https://revolt.chat/aup"
target="_blank"
rel="noreferrer">
Acceptable Usage Policy
</a>
.
</h5>
{bots?.map((bot) => {
return (
<BotCard