diff --git a/external/lang b/external/lang
index da8e3f8bb3cc01867e2f3fb731e2a5a26cdab0f5..ede822613d642a345595f690ab99e35c78aa09c4 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit da8e3f8bb3cc01867e2f3fb731e2a5a26cdab0f5
+Subproject commit ede822613d642a345595f690ab99e35c78aa09c4
diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx
index 1966785f384ae956afbca219b4ba6cc206d9681a..146814950e01d00f165b134ad766e269ace10379 100644
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -187,12 +187,18 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
);
}
}}>
- {message.attachments && (
+ {message.attachments &&
+ message.attachments.length > 0 && (
<>
<File size={16} />
- <em>{message.attachments.length > 1 ?
- "Sent multiple attachments" :
- "Sent an attachment"}</em>
+ <em>
+ {message.attachments.length >
+ 0 ? (
+ <Text id="app.main.channel.misc.sent_multiple_files" />
+ ) : (
+ <Text id="app.main.channel.misc.sent_file" />
+ )}
+ </em>
</>
)}
<Markdown
diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx
index 195a2283cbe7c39c08b86e0b4015462183585155..b3fd802920644007cee5b28d7ef60a7d98fd3223 100644
--- a/src/components/common/messaging/bars/ReplyBar.tsx
+++ b/src/components/common/messaging/bars/ReplyBar.tsx
@@ -32,25 +32,12 @@ const Base = styled.div`
user-select: none;
align-items: center;
background: var(--message-box);
-
- .username {
- display: flex;
- align-items: center;
- gap: 6px;
- font-weight: 600;
- }
- }
> div {
flex-grow: 1;
margin-bottom: 0;
}
- .actions {
- gap: 12px;
- display: flex;
- }
-
.toggle {
gap: 4px;
display: flex;
@@ -59,6 +46,22 @@ const Base = styled.div`
font-weight: 600;
}
+ .username {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-weight: 600;
+ }
+
+ .message {
+ display: flex;
+ }
+
+ .actions {
+ gap: 12px;
+ display: flex;
+ }
+
/*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
.actions > svg {
height: 25px;
@@ -109,14 +112,20 @@ export default observer(({ channel, replies, setReplies }: Props) => {
<UserShort user={message.author} size={16} />
</div>
<div class="message">
- {message.attachments && (
- <>
- <File size={16} />
- <em>{message.attachments.length > 1 ?
- "Sent multiple attachments" :
- "Sent an attachment"}</em>
- </>
- )}
+ {message.attachments &&
+ message.attachments.length > 0 && (
+ <>
+ <File size={16} />
+ <em>
+ {message.attachments!.length >
+ 1 ? (
+ <Text id="app.main.channel.misc.sent_multiple_files" />
+ ) : (
+ <Text id="app.main.channel.misc.sent_file" />
+ )}
+ </em>
+ </>
+ )}
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
diff --git a/src/components/ui/Overline.tsx b/src/components/ui/Overline.tsx
index cf30bbdbe3334a04038c1acf20bfd571d6b645a6..2b8b4896e71a17709efb4bdfcf7bd14a69048d25 100644
--- a/src/components/ui/Overline.tsx
+++ b/src/components/ui/Overline.tsx
@@ -8,13 +8,19 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
error?: string;
block?: boolean;
spaced?: boolean;
+ noMargin?: boolean;
children?: Children;
type?: "default" | "subtle" | "error";
};
const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline;
- margin: 0.4em 0;
+
+ ${(props) =>
+ !props.noMargin &&
+ css`
+ margin: 0.4em 0;
+ `}
${(props) =>
props.spaced &&
diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx
index 39298ce8495336121df1c3906b3071981c140db4..de6c613bf8eae9d274ffc2947da8281b0b250f87 100644
--- a/src/components/ui/fluent/CategoryButton.tsx
+++ b/src/components/ui/fluent/CategoryButton.tsx
@@ -1,4 +1,5 @@
-import styled from "styled-components";
+import { ChevronRight } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
import { Children } from "../../../types/Preact";
@@ -14,13 +15,69 @@ const CategoryBase = styled.div`
display: flex;
align-items: center;
flex-direction: row;
+
+ .content {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ font-weight: 600;
+ font-size: 14px;
+
+ .description {
+ font-size: 11px;
+ font-weight: 400;
+
+ a:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ ${(props) =>
+ typeof props.onClick !== "undefined" &&
+ css`
+ transition: 0.1s ease background-color;
+
+ &:hover {
+ background: var(--tertiary-background);
+ }
+
+ a {
+ cursor: pointer;
+ }
+ `}
`;
interface Props {
icon?: Children;
children?: Children;
+ description?: Children;
+
+ onClick?: () => void;
+ action?: "chevron" | Children;
}
-export default function CategoryButton({ icon, children }: Props) {
- return <CategoryBase>{icon}</CategoryBase>;
+export default function CategoryButton({
+ icon,
+ children,
+ description,
+ onClick,
+ action,
+}: Props) {
+ return (
+ <CategoryBase onClick={onClick}>
+ {icon}
+ <div class="content">
+ {children}
+ <div className="description">{description}</div>
+ </div>
+ <div class="action">
+ {typeof action === "string" ? (
+ <ChevronRight size={24} />
+ ) : (
+ action
+ )}
+ </div>
+ </CategoryBase>
+ );
}
diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx
index 3fc7e2e829a60deb94c5d0479789fd4e9c34b357..6312091d2f65a5b954cf7a97184c3c09bab94051 100644
--- a/src/context/Locale.tsx
+++ b/src/context/Locale.tsx
@@ -80,9 +80,9 @@ export const Languages: { [key in Language]: LanguageEntry } = {
fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
hi: { display: "हिनà¥à¤¦à¥€", emoji: "🇮🇳", i18n: "hi" },
hr: { display: "Hrvatski", emoji: "ðŸ‡ðŸ‡·", i18n: "hr" },
- hu: { display: "magyar", emoji: "ðŸ‡ðŸ‡º", i18n: "hu" },
+ hu: { display: "Magyar", emoji: "ðŸ‡ðŸ‡º", i18n: "hu" },
id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" },
- it: { display: "italiano", emoji: "🇮🇹", i18n: "it" },
+ it: { display: "Italiano", emoji: "🇮🇹", i18n: "it" },
lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" },
mk: { display: "МакедонÑки", emoji: "🇲🇰", i18n: "mk" },
nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" },
diff --git a/src/lib/stopPropagation.ts b/src/lib/stopPropagation.ts
index 05043d25b417036f6b73debe217bdd5102903a12..0a2eec8498bd37349f9954fd74511661a7b70156 100644
--- a/src/lib/stopPropagation.ts
+++ b/src/lib/stopPropagation.ts
@@ -1,5 +1,5 @@
export const stopPropagation = (
- ev: JSX.TargetedMouseEvent<HTMLDivElement>,
+ ev: JSX.TargetedMouseEvent<HTMLElement>,
_consume?: any,
) => {
ev.preventDefault();
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index 9e8a55801b2707571c43e4633651daaa817f396b..a75c25cfe077ae43543f373195329468e5f2cae3 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -1,5 +1,10 @@
import { At, Key, Block } from "@styled-icons/boxicons-regular";
-import { Envelope, HelpCircle, Lock, Trash } from "@styled-icons/boxicons-solid";
+import {
+ Envelope,
+ HelpCircle,
+ Lock,
+ Trash,
+} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, useHistory } from "react-router-dom";
import { Profile } from "revolt-api/types/Users";
@@ -8,6 +13,8 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
+import { stopPropagation } from "../../../lib/stopPropagation";
+
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
ClientStatus,
@@ -18,7 +25,9 @@ import {
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";
import Button from "../../../components/ui/Button";
+import Overline from "../../../components/ui/Overline";
import Tip from "../../../components/ui/Tip";
+import CategoryButton from "../../../components/ui/fluent/CategoryButton";
export const Account = observer(() => {
const { openScreen, writeClipboard } = useIntermediate();
@@ -62,25 +71,29 @@ export const Account = observer(() => {
<div className={styles.userDetail}>
@{client.user!.username}
<div className={styles.userid}>
- <Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
+ <Tooltip
+ content={
+ <Text id="app.settings.pages.account.unique_id" />
+ }>
<HelpCircle size={16} />
</Tooltip>
<Tooltip content={<Text id="app.special.copy" />}>
- <a onClick={() => writeClipboard(client.user!._id)}>
+ <a
+ onClick={() =>
+ writeClipboard(client.user!._id)
+ }>
{client.user!._id}
</a>
</Tooltip>
</div>
</div>
</div>
-
- <Button
- onClick={() => switchPage("profile")}
- contrast>
- Edit Profile
+
+ <Button onClick={() => switchPage("profile")} contrast>
+ <Text id="app.settings.pages.profile.edit_profile" />
</Button>
</div>
- <div className={styles.details}>
+ <div>
{(
[
["username", client.user!.username, <At size={24} />],
@@ -88,64 +101,64 @@ export const Account = observer(() => {
["password", "•••••••••", <Key size={24} />],
] as const
).map(([field, value, icon]) => (
- <div>
- {icon}
- <div className={styles.detail}>
- <div className={styles.subtext}>
- <Text id={`login.${field}`} />
- </div>
- <div className={styles.entry}>
- {field === "email" ? (
- revealEmail ? (
- <>
- {value}{" "}
- <a
- onClick={() =>
- setRevealEmail(false)
- }>
- <Text id="app.special.modals.actions.hide" />
- </a>
- </>
- ) : (
- <>
- •••••••••••@{value.split("@").pop()}{" "}
- <a
- onClick={() =>
- setRevealEmail(true)
- }>
- <Text id="app.special.modals.actions.reveal" />
- </a>
- </>
- )
+ <CategoryButton
+ icon={icon}
+ description={
+ field === "email" ? (
+ revealEmail ? (
+ <>
+ {value}{" "}
+ <a
+ onClick={(ev) =>
+ stopPropagation(
+ ev,
+ setRevealEmail(false),
+ )
+ }>
+ <Text id="app.special.modals.actions.hide" />
+ </a>
+ </>
) : (
- value
- )}
- </div>
- </div>
- <div>
- <Button
- onClick={() =>
- openScreen({
- id: "modify_account",
- field,
- })
- }
- plain>
- <Text id="app.settings.pages.account.change_field" />
- </Button>
- </div>
- </div>
+ <>
+ •••••••••••@{value.split("@").pop()}{" "}
+ <a
+ onClick={(ev) =>
+ stopPropagation(
+ ev,
+ setRevealEmail(true),
+ )
+ }>
+ <Text id="app.special.modals.actions.reveal" />
+ </a>
+ </>
+ )
+ ) : (
+ value
+ )
+ }
+ action="chevron"
+ onClick={() =>
+ openScreen({
+ id: "modify_account",
+ field,
+ })
+ }>
+ <Overline type="subtle" noMargin>
+ <Text id={`login.${field}`} />
+ </Overline>
+ </CategoryButton>
))}
</div>
<h3>
<Text id="app.settings.pages.account.2fa.title" />
</h3>
- <h5><Text id="app.settings.pages.account.2fa.description" /></h5>
- <div className={styles.entrytest}>
- <Lock size={24}/>
- <div className={styles.content}>
- Currently not available
- <div className={styles.description}>
+ <h5>
+ <Text id="app.settings.pages.account.2fa.description" />
+ </h5>
+ <CategoryButton
+ icon={<Lock size={24} color="var(--error)" />}
+ description={
+ <>
Two-factor auth is currently work-in-progress, see{" "}
<a
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
@@ -154,54 +167,45 @@ export const Account = observer(() => {
tracking issue here
</a>
.
- </div>
- </div>
- <Button accent compact disabled>
- <Text id="app.settings.pages.account.2fa.add_auth" />
- </Button>
- </div>
+ </>
+ }
+ action={
+ <Button accent compact disabled>
+ <Text id="app.settings.pages.account.2fa.add_auth" />
+ </Button>
+ }>
+ Currently not available
+ </CategoryButton>
<h3>
<Text id="app.settings.pages.account.manage.title" />
</h3>
<h5>
<Text id="app.settings.pages.account.manage.description" />
</h5>
- <div className={styles.entrytest}>
- <Block size={24}/>
- <div className={styles.content}>
- <Text id="app.settings.pages.account.manage.disable" />
- <div className={styles.description}>
- Disable your account. You won't be able to access it unless you log back in.
- </div>
- </div>
- <Button accent compact disabled>
- Unavailable
- </Button>
- </div>
- <div className={styles.entrytest}>
- <Trash size={24}/>
- <div className={styles.content}>
- <Text id="app.settings.pages.account.manage.delete" />
- <div className={styles.description}>
- Delete your account, including all of your data.
- </div>
- </div>
- <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
- <Button error compact>
- <Text id="app.settings.pages.account.manage.delete" />
+ <CategoryButton
+ icon={<Block size={24} color="var(--error)" />}
+ description={
+ "Disable your account. You won't be able to access it unless you log back in."
+ }
+ action={
+ <Button accent compact disabled>
+ <Text id="general.unavailable" />
</Button>
- </a>
- </div>
- <div className={styles.buttons}>
- {/* <Button contrast>
- <Text id="app.settings.pages.account.manage.disable" />
- </Button>
- <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
- <Button error compact>
- <Text id="app.settings.pages.account.manage.delete" />
- </Button>
- </a>*/}
- </div>
+ }>
+ <Text id="app.settings.pages.account.manage.disable" />
+ </CategoryButton>
+ <CategoryButton
+ icon={<Trash size={24} color="var(--error)" />}
+ description={"Delete your account, including all of your data."}
+ action={
+ <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
+ <Button error compact>
+ <Text id="app.settings.pages.account.manage.delete" />
+ </Button>
+ </a>
+ }>
+ <Text id="app.settings.pages.account.manage.delete" />
+ </CategoryButton>
<Tip>
<span>
<Text id="app.settings.tips.account.a" />
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index de4486a87871326419c679b32cf71751e2776b48..22a254c5e7b5c669507c405f3ae186d8839e891c 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -78,42 +78,6 @@
}
}
- .detail {
- flex-grow: 1;
- min-width: 0;
-
- display: flex;
- flex-direction: column;
-
- .subtext {
- display: inline;
- font-size: 12px;
- font-weight: 600;
- text-transform: uppercase;
- color: var(--secondary-foreground);
-
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
-
- .entry {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- font-size: 15px;
- }
-
- a {
- font-size: .875rem;
- cursor: pointer;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
p {
margin: 0;
font-size: 1rem;
@@ -126,7 +90,7 @@
display: grid;
place-items: center;
grid-template-columns: minmax(auto, 100%);
-
+
> div {
width: 100%;
max-width: 560px;
@@ -152,40 +116,6 @@
display: flex;
gap: 12px;
}
-
- .entrytest {
- gap: 12px;
- /* padding: 4px; */
- height: 54px;
- padding: 8px 12px;
- display: flex;
- align-items: center;
- flex-direction: row;
- background: var(--secondary-header);
- border-radius: 6px;
- margin-bottom: 10px;
-
- > svg {
- color: var(--error);
- }
-
- .content {
- display: flex;
- flex-grow: 1;
- flex-direction: column;
- font-weight: 600;
- font-size: 14px;
-
- .description {
- font-size: 11px;
- font-weight: 400;
-
- a:hover {
- text-decoration: underline;
- }
- }
- }
- }
}
@media only screen and (max-width: 800px) {
@@ -236,14 +166,13 @@
}
details {
-
summary {
- font-size: .8125rem;
+ font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
color: var(--secondary-foreground);
cursor: pointer;
- }
+ }
}
.emojiPack {
@@ -297,15 +226,12 @@
text-transform: unset;
a {
-
opacity: 0.7;
color: var(--accent);
font-weight: 600;
&:hover {
text-decoration: underline;
}
-
-
}
@media only screen and (max-width: 800px) {
@@ -331,7 +257,7 @@
cursor: pointer;
display: flex;
align-items: center;
- font-size: .875rem;
+ font-size: 0.875rem;
min-width: 0;
flex-grow: 1;
padding: 8px;
@@ -352,7 +278,7 @@
row-gap: 8px;
display: grid;
column-gap: 16px;
- grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin-bottom: 20px;
.entry {
@@ -365,7 +291,7 @@
flex: 1;
display: block;
font-weight: 600;
- font-size: .875rem;
+ font-size: 0.875rem;
margin-bottom: 8px;
text-transform: capitalize;
@@ -427,7 +353,7 @@
display: flex;
gap: 12px;
flex-grow: 1;
-
+
svg {
margin-top: 1px;
}
@@ -452,7 +378,6 @@
border-bottom: 2px solid var(--primary-background);
}
}
-
}
&[data-deleting="true"] {
@@ -487,7 +412,7 @@
.label {
margin-bottom: 8px;
color: var(--primary-text);
- font-size: .75rem;
+ font-size: 0.75rem;
font-weight: 600;
}
@@ -507,7 +432,7 @@
}
.time {
- font-size: .75rem;
+ font-size: 0.75rem;
color: var(--teriary-text);
text-overflow: ellipsis;
overflow: hidden;
@@ -524,7 +449,7 @@
align-items: unset;
flex-direction: column;
gap: 20px;
-
+
> button {
width: 100%;
}
@@ -542,7 +467,7 @@
flex-direction: column;
margin-bottom: 1em;
gap: 8px;
-
+
.entry {
display: flex;
height: 45px;
@@ -601,4 +526,4 @@
section {
margin-bottom: 20px;
-}
\ No newline at end of file
+}