Add i18n to replies.

Add Fluent design category button.
Update Account page with new design.

external/lang

@@ -1 +1 @@
-Subproject commit da8e3f8bb3cc01867e2f3fb731e2a5a26cdab0f5
+Subproject commit ede822613d642a345595f690ab99e35c78aa09c4

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 ?
+                                            <em>
-                                                "Sent multiple attachments" :
+                                                {message.attachments.length >
-                                                "Sent an attachment"}</em>
+                                                0 ? (
+                                                    <Text id="app.main.channel.misc.sent_multiple_files" />
+                                                ) : (
+                                                    <Text id="app.main.channel.misc.sent_file" />
+                                                )}
+                                            </em>
                                         </>
                                     )}
                                 <Markdown

src/components/common/messaging/bars/ReplyBar.tsx

@@ -33,24 +33,11 @@ const Base = styled.div`
     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,12 +112,18 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                 <UserShort user={message.author} size={16} />
                             </div>
                             <div class="message">
-                                {message.attachments && (
+                                {message.attachments &&
+                                    message.attachments.length > 0 && (
                                         <>
                                             <File size={16} />
-                                        <em>{message.attachments.length > 1 ?
+                                            <em>
-                                            "Sent multiple attachments" :
+                                                {message.attachments!.length >
-                                            "Sent an attachment"}</em>
+                                                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 ? (

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;
+
+    ${(props) =>
+        !props.noMargin &&
+        css`
             margin: 0.4em 0;
+        `}
 
     ${(props) =>
         props.spaced &&

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) {
+export default function CategoryButton({
-    return <CategoryBase>{icon}</CategoryBase>;
+    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>
+    );
 }

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" },

src/lib/stopPropagation.ts

@@ -1,5 +1,5 @@
 export const stopPropagation = (
-    ev: JSX.TargetedMouseEvent<HTMLDivElement>,
+    ev: JSX.TargetedMouseEvent<HTMLElement>,
     _consume?: any,
 ) => {
     ev.preventDefault();

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,11 +71,17 @@ 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>
@@ -74,13 +89,11 @@ export const Account = observer(() => {
                     </div>
                 </div>
 
-                <Button
+                <Button onClick={() => switchPage("profile")} contrast>
-                    onClick={() => switchPage("profile")}
+                    <Text id="app.settings.pages.profile.edit_profile" />
-                    contrast>
-                    Edit Profile
                 </Button>
             </div>
-            <div className={styles.details}>
+            <div>
                 {(
                     [
                         ["username", client.user!.username, <At size={24} />],
@@ -88,20 +101,19 @@ export const Account = observer(() => {
                         ["password", "•••••••••", <Key size={24} />],
                     ] as const
                 ).map(([field, value, icon]) => (
-                    <div>
+                    <CategoryButton
-                        {icon}
+                        icon={icon}
-                        <div className={styles.detail}>
+                        description={
-                            <div className={styles.subtext}>
+                            field === "email" ? (
-                                <Text id={`login.${field}`} />
-                            </div>
-                            <div className={styles.entry}>
-                                {field === "email" ? (
                                 revealEmail ? (
                                     <>
                                         {value}{" "}
                                         <a
-                                                onClick={() =>
+                                            onClick={(ev) =>
-                                                    setRevealEmail(false)
+                                                stopPropagation(
+                                                    ev,
+                                                    setRevealEmail(false),
+                                                )
                                             }>
                                             <Text id="app.special.modals.actions.hide" />
                                         </a>
@@ -110,8 +122,11 @@ export const Account = observer(() => {
                                     <>
                                         •••••••••••@{value.split("@").pop()}{" "}
                                         <a
-                                                onClick={() =>
+                                            onClick={(ev) =>
-                                                    setRevealEmail(true)
+                                                stopPropagation(
+                                                    ev,
+                                                    setRevealEmail(true),
+                                                )
                                             }>
                                             <Text id="app.special.modals.actions.reveal" />
                                         </a>
@@ -119,33 +134,31 @@ export const Account = observer(() => {
                                 )
                             ) : (
                                 value
-                                )}
+                            )
-                            </div>
+                        }
-                        </div>
+                        action="chevron"
-                        <div>
-                            <Button
                         onClick={() =>
                             openScreen({
                                 id: "modify_account",
                                 field,
                             })
-                                }
+                        }>
-                                plain>
+                        <Overline type="subtle" noMargin>
-                                <Text id="app.settings.pages.account.change_field" />
+                            <Text id={`login.${field}`} />
-                            </Button>
+                        </Overline>
-                        </div>
+                    </CategoryButton>
-                    </div>
                 ))}
             </div>
             <h3>
                 <Text id="app.settings.pages.account.2fa.title" />
             </h3>
-            <h5><Text id="app.settings.pages.account.2fa.description" /></h5>
+            <h5>
-            <div className={styles.entrytest}>
+                <Text id="app.settings.pages.account.2fa.description" />
-                <Lock size={24}/>
+            </h5>
-                <div className={styles.content}>
+            <CategoryButton
-                    Currently not available
+                icon={<Lock size={24} color="var(--error)" />}
-                    <div className={styles.description}>
+                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>
+                }
+                action={
                     <Button accent compact disabled>
                         <Text id="app.settings.pages.account.2fa.add_auth" />
                     </Button>
-            </div>
+                }>
+                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}>
+            <CategoryButton
-                <Block size={24}/>
+                icon={<Block size={24} color="var(--error)" />}
-                <div className={styles.content}>
+                description={
-                    <Text id="app.settings.pages.account.manage.disable" />
+                    "Disable your account. You won't be able to access it unless you log back in."
-                    <div className={styles.description}>
+                }
-                        Disable your account. You won't be able to access it unless you log back in.
+                action={
-                    </div>
-                </div>
                     <Button accent compact disabled>
-                    Unavailable
+                        <Text id="general.unavailable" />
                     </Button>
-            </div>
+                }>
-            <div className={styles.entrytest}>
+                <Text id="app.settings.pages.account.manage.disable" />
-                <Trash size={24}/>
+            </CategoryButton>
-                <div className={styles.content}>
+            <CategoryButton
-                    <Text id="app.settings.pages.account.manage.delete" />
+                icon={<Trash size={24} color="var(--error)" />}
-                    <div className={styles.description}>
+                description={"Delete your account, including all of your data."}
-                        Delete your account, including all of your data.
+                action={
-                    </div>
-                </div>
                     <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
                         <Button error compact>
                             <Text id="app.settings.pages.account.manage.delete" />
                         </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>
+            </CategoryButton>
-                </a>*/}
-            </div>
             <Tip>
                 <span>
                     <Text id="app.settings.tips.account.a" />

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;
@@ -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,9 +166,8 @@
     }
 
     details {
-
         summary {
-            font-size: .8125rem;
+            font-size: 0.8125rem;
             font-weight: 700;
             text-transform: uppercase;
             color: var(--secondary-foreground);
@@ -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;
 
@@ -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;