fix(ui): fixes for mobile UI, settings and sessions pages (#451)

Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>

src/components/common/user/UserShort.tsx

@@ -16,7 +16,7 @@ import UserIcon from "./UserIcon";
 
 const BotBadge = styled.div`
     display: inline-block;
-
+    flex-shrink: 0;
     height: 1.4em;
     padding: 0 4px;
     font-size: 0.6em;

src/components/markdown/Markdown.module.scss

@@ -98,6 +98,8 @@
         background: var(--block);
         border-radius: var(--border-radius);
         font-family: var(--monospace-font), monospace;
+        border-radius: 3px;
+        -webkit-box-decoration-break: clone;
     }
 
     input[type="checkbox"] {

src/components/navigation/SidebarBase.tsx

@@ -18,9 +18,13 @@ export const GenericSidebarBase = styled.div<{
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
-    border-end-start-radius: 8px;
+    /*border-end-start-radius: 8px;*/
     background: var(--secondary-background);
 
+    > :nth-child(1) {
+        border-end-start-radius: 8px;
+    }
+
     ${(props) =>
         props.mobilePadding &&
         isTouchscreenDevice &&

src/components/navigation/left/ServerSidebar.tsx

@@ -38,6 +38,7 @@ const ServerBase = styled.div`
     flex-direction: column;
     background: var(--secondary-background);
     border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
     overflow: hidden;
 
     ${isTouchscreenDevice &&

src/pages/settings/ChannelSettings.tsx

@@ -1,4 +1,5 @@
-import { ListCheck, ListUl } from "@styled-icons/boxicons-regular";
+import { ListUl } from "@styled-icons/boxicons-regular";
+import { InfoCircle } from "@styled-icons/boxicons-solid";
 import { Route, Switch, useHistory, useParams } from "react-router-dom";
 
 import { Text } from "preact-i18n";
@@ -55,14 +56,14 @@ export default function ChannelSettings() {
                         />
                     ),
                     id: "overview",
-                    icon: <ListUl size={20} />,
+                    icon: <InfoCircle size={20} />,
                     title: (
                         <Text id="app.settings.channel_pages.overview.title" />
                     ),
                 },
                 {
                     id: "permissions",
-                    icon: <ListCheck size={20} />,
+                    icon: <ListUl size={20} />,
                     title: (
                         <Text id="app.settings.channel_pages.permissions.title" />
                     ),

src/pages/settings/ServerSettings.tsx

@@ -1,10 +1,12 @@
+import { ListUl } from "@styled-icons/boxicons-regular";
 import {
-    ListUl,
+    InfoCircle,
-    ListCheck,
+    Group,
-    ListMinus,
+    FlagAlt,
+    Envelope,
+    UserX,
     Trash,
-} from "@styled-icons/boxicons-regular";
+} from "@styled-icons/boxicons-solid";
-import { XSquare, Share, Group } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Route, Switch, useHistory, useParams } from "react-router-dom";
 
@@ -50,14 +52,14 @@ export default observer(() => {
                 {
                     category: <Category variant="uniform" text={server.name} />,
                     id: "overview",
-                    icon: <ListUl size={20} />,
+                    icon: <InfoCircle size={20} />,
                     title: (
                         <Text id="app.settings.server_pages.overview.title" />
                     ),
                 },
                 {
                     id: "categories",
-                    icon: <ListMinus size={20} />,
+                    icon: <ListUl size={20} />,
                     title: (
                         <Text id="app.settings.server_pages.categories.title" />
                     ),
@@ -72,19 +74,19 @@ export default observer(() => {
                 },
                 {
                     id: "invites",
-                    icon: <Share size={20} />,
+                    icon: <Envelope size={20} />,
                     title: (
                         <Text id="app.settings.server_pages.invites.title" />
                     ),
                 },
                 {
                     id: "bans",
-                    icon: <XSquare size={20} />,
+                    icon: <UserX size={20} />,
                     title: <Text id="app.settings.server_pages.bans.title" />,
                 },
                 {
                     id: "roles",
-                    icon: <ListCheck size={20} />,
+                    icon: <FlagAlt size={20} />,
                     title: <Text id="app.settings.server_pages.roles.title" />,
                     hideTitle: true,
                 },

src/pages/settings/Settings.module.scss

@@ -193,6 +193,7 @@
             padding: 80px 32px;
             width: 100%;
             flex-direction: column;
+            height: fit-content;
         }
 
         details {
@@ -205,6 +206,14 @@
             }
         }*/
 
+        hr {
+            height: 1px;
+            width: calc(100% - 10px);
+            background: var(--secondary-header);
+            margin: 18px auto;
+            flex-grow: 0;
+        }
+
         h1 {
             margin: 0;
             line-height: 1rem;

src/pages/settings/assets/opus_logo.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13_24)">
+<path d="M10.854 3.12557C10.258 2.62938 9.34037 2.29717 8.1035 2.12772L7.1946 5.01762C7.17497 5.12361 7.1412 5.244 7.08884 5.38272C6.99612 5.61457 6.88442 5.80557 6.75317 5.95588C6.62176 6.10658 6.47468 6.22408 6.31175 6.30973C6.14865 6.39489 5.97141 6.45368 5.77985 6.48609C5.58829 6.51826 5.39005 6.52839 5.1853 6.51649C4.98031 6.50458 4.80596 6.47668 4.66249 6.43269C4.51886 6.38878 4.38681 6.31592 4.26642 6.21395C4.1774 6.11382 4.12561 5.9825 4.11145 5.81973C4.09722 5.65696 4.13662 5.45566 4.22975 5.21585C4.31298 5.0074 4.41834 4.82565 4.54604 4.67133C4.67367 4.51684 4.82293 4.39701 4.99358 4.31209C5.15659 4.22693 5.33183 4.16991 5.51945 4.1412C5.70658 4.11273 5.91471 4.10517 6.14318 4.11844C6.33233 4.12962 6.50845 4.15744 6.67187 4.20272C6.74939 4.22403 6.81727 4.25202 6.87629 4.28579L7.5741 2.06692C7.40184 2.05068 7.22564 2.03644 7.0426 2.02591C5.28132 1.92305 3.80103 2.12651 2.60108 2.63517C1.40137 3.14423 0.601437 3.89897 0.20191 4.89932C0.0820034 5.20604 0.0175866 5.49507 0.00809705 5.76665L0.00729267 5.76625C-0.107386 7.73356 1.1569 8.84191 1.93794 9.33473C2.25133 9.54454 2.52999 9.64845 2.52999 9.64845L2.88794 8.50447L2.99377 8.22332C3.46496 8.31243 3.98897 8.37443 4.56784 8.40813C6.34134 8.51155 7.82799 8.30905 9.02777 7.79983C10.2273 7.29117 11.0206 6.54222 11.4075 5.55273C11.794 4.56397 11.6097 3.75478 10.854 3.12557Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_13_24">
+<rect width="11.6" height="11.6" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/pages/settings/assets/revolt_r.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8908 7.94093C16.8908 9.74273 15.9104 10.8243 13.8182 10.8243H10.3541V5.12282H13.8188C15.9104 5.12282 16.8908 6.23674 16.8908 7.94093ZM1.41162 0.470581L4.76544 5.13381V23.4686H10.3547V14.788H11.6949L16.4677 23.4706H22.7761L17.4809 14.362C18.9593 14.0014 20.2705 13.1455 21.1976 11.9361C22.1246 10.7267 22.6119 9.23623 22.5787 7.71142C22.5787 3.71409 19.768 0.470581 14.1458 0.470581H4.76544H1.41162Z" fill="#FF4654" stroke="#FF4654" stroke-width="0.102222"/>
+</svg>

src/pages/settings/panes/Account.tsx

@@ -4,6 +4,7 @@ import {
     HelpCircle,
     Lock,
     Trash,
+    Pencil,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
@@ -153,7 +154,7 @@ export const Account = observer(() => {
                             )
                         }
                         account
-                        action="chevron"
+                        action={<Pencil size={20} />}
                         onClick={() =>
                             openScreen({
                                 id: "modify_account",
@@ -181,7 +182,7 @@ export const Account = observer(() => {
             </h5>
             <CategoryButton
                 icon={<Lock size={24} color="var(--error)" />}
-                description={"Set up 2FA Authentication on your account."}
+                description={"Set up 2FA on your account."}
                 disabled
                 action="chevron">
                 Set up Two-factor authentication

src/pages/settings/panes/Appearance.tsx

@@ -1,5 +1,16 @@
-import { Reset, Import } from "@styled-icons/boxicons-regular";
+import {
-import { Pencil, Store } from "@styled-icons/boxicons-solid";
+    Reset,
+    Import,
+    FontFamily,
+    CodeAlt,
+} from "@styled-icons/boxicons-regular";
+import {
+    Pencil,
+    Store,
+    Palette,
+    HappyBeaming,
+    QuoteLeft,
+} from "@styled-icons/boxicons-solid";
 import { Link } from "react-router-dom";
 // @ts-expect-error shade-blend-color does not have typings.
 import pSBC from "shade-blend-color";
@@ -175,7 +186,39 @@ export function Component(props: Props) {
                     <Text id="app.settings.pages.appearance.display.compact" />
                 </Radio>
             </div>*/}
+            <hr />
 
+            {/*<CategoryButton
+                icon={<Palette size={24} />}
+                description={"Customize the look of your app using themes."}
+                action="chevron">
+                Themes
+            </CategoryButton>
+            <CategoryButton
+                icon={<FontFamily size={24} />}
+                description={"Change the font and size used in the app."}
+                action="chevron">
+                {`Font & text size`}
+            </CategoryButton>
+            <CategoryButton
+                icon={<QuoteLeft size={24} />}
+                description={"Change the look of your messages."}
+                action="chevron">
+                Message Display
+            </CategoryButton>
+            <CategoryButton
+                icon={<HappyBeaming size={24} />}
+                description={"Personalize your client with an emoji pack."}
+                action="chevron">
+                Emoji Packs
+            </CategoryButton>
+            <h3>Advanced</h3>
+            <CategoryButton
+                icon={<CodeAlt size={24} />}
+                description={"Customize the client CSS to your heart's content"}
+                action="chevron">
+                Custom CSS
+            </CategoryButton>*/}
             <h3>
                 <Text id="app.settings.pages.appearance.font" />
             </h3>
@@ -191,20 +234,19 @@ export function Component(props: Props) {
                 ))}
             </ComboBox>
             {/* TOFIX: Only show when a font with ligature support is selected, i.e.: Inter.*/}
-            <p>
+            <Checkbox
-                <Checkbox
+                checked={props.settings.theme?.ligatures === true}
-                    checked={props.settings.theme?.ligatures === true}
+                onChange={() =>
-                    onChange={() =>
+                    setTheme({
-                        setTheme({
+                        ligatures: !props.settings.theme?.ligatures,
-                            ligatures: !props.settings.theme?.ligatures,
+                    })
-                        })
+                }
-                    }
+                description={
-                    description={
+                    <Text id="app.settings.pages.appearance.ligatures_desc" />
-                        <Text id="app.settings.pages.appearance.ligatures_desc" />
+                }>
-                    }>
+                <Text id="app.settings.pages.appearance.ligatures" />
-                    <Text id="app.settings.pages.appearance.ligatures" />
+            </Checkbox>
-                </Checkbox>
+            <hr />
-            </p>
 
             <h3>
                 <Text id="app.settings.pages.appearance.emoji_pack" />
@@ -279,7 +321,7 @@ export function Component(props: Props) {
                     </div>
                 </div>
             </div>
-
+            <hr />
             <CollapsibleSection
                 defaultValue={false}
                 id="settings_overrides"

src/pages/settings/panes/Audio.tsx

@@ -12,6 +12,11 @@ import Button from "../../../components/ui/Button";
 import ComboBox from "../../../components/ui/ComboBox";
 import Overline from "../../../components/ui/Overline";
 import Tip from "../../../components/ui/Tip";
+import opusSVG from "../assets/opus_logo.svg";
+
+{
+    /*import OpusSVG from "../assets/opus_logo.svg";*/
+}
 
 const constraints = { audio: true };
 
@@ -141,6 +146,19 @@ export function Component() {
                                         );
                                     })}
                             </ComboBox>
+                            {/*TOFIX: add logic to sound notches*/}
+                            {/*<div className={styles.notches}>
+                                <div />
+                                <div />
+                                <div />
+                                <div />
+                                <div />
+                                <div />
+                                <div />
+                                <div />
+                                <div />
+                                <div />
+                            </div>*/}
                             {!permission && (
                                 <Button
                                     compact
@@ -191,9 +209,26 @@ export function Component() {
                                     );
                                 })}
                         </ComboBox>
+                        {/*<div className={styles.notches}>
+                            <div />
+                            <div />
+                            <div />
+                            <div />
+                            <div />
+                            <div />
+                            <div />
+                            <div />
+                            <div />
+                            <div />
+                        </div>*/}
                     </div>
                 </div>
             </div>
+            <hr />
+            <div className={styles.opus}>
+                <img height="20" src={opusSVG} draggable={false} />
+                Audio codec powered by Opus
+            </div>
         </>
     );
 }

src/pages/settings/panes/MyBots.tsx

@@ -554,38 +554,46 @@ export const MyBots = observer(() => {
                 </a>
                 .
             </h5>
-            {bots?.map((bot) => {
+            <hr />
-                return (
+            <h3>
-                    <BotCard
+                <Text id="app.settings.pages.bots.title" />
-                        key={bot._id}
+            </h3>
-                        bot={bot}
+            <div className={styles.botList}>
-                        onDelete={() =>
+                {bots?.map((bot) => {
-                            setBots(bots.filter((x) => x._id !== bot._id))
+                    return (
-                        }
+                        <BotCard
-                        onUpdate={(changes: Changes) =>
+                            key={bot._id}
-                            setBots(
+                            bot={bot}
-                                bots.map((x) => {
+                            onDelete={() =>
-                                    if (x._id === bot._id) {
+                                setBots(bots.filter((x) => x._id !== bot._id))
-                                        if (
+                            }
-                                            "public" in changes &&
+                            onUpdate={(changes: Changes) =>
-                                            typeof changes.public === "boolean"
+                                setBots(
-                                        )
+                                    bots.map((x) => {
-                                            x.public = changes.public;
+                                        if (x._id === bot._id) {
-                                        if ("interactions_url" in changes)
+                                            if (
-                                            x.interactions_url =
+                                                "public" in changes &&
-                                                changes.interactions_url;
+                                                typeof changes.public ===
-                                        if (
+                                                    "boolean"
-                                            changes.remove === "InteractionsURL"
+                                            )
-                                        )
+                                                x.public = changes.public;
-                                            x.interactions_url = undefined;
+                                            if ("interactions_url" in changes)
-                                    }
+                                                x.interactions_url =
-                                    return x;
+                                                    changes.interactions_url;
-                                }),
+                                            if (
-                            )
+                                                changes.remove ===
-                        }
+                                                "InteractionsURL"
-                    />
+                                            )
-                );
+                                                x.interactions_url = undefined;
-            })}
+                                        }
+                                        return x;
+                                    }),
+                                )
+                            }
+                        />
+                    );
+                })}
+            </div>
         </div>
     );
 });

src/pages/settings/panes/Native.tsx

@@ -1,7 +1,12 @@
+import { Refresh } from "@styled-icons/boxicons-regular";
+
 import { useEffect, useState } from "preact/hooks";
 
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
+import Tip from "../../../components/ui/Tip";
+import CategoryButton from "../../../components/ui/fluent/CategoryButton";
+import RLogo from "../assets/revolt_r.svg";
 
 export function Native() {
     if (typeof window.native === "undefined") return null;
@@ -20,9 +25,9 @@ export function Native() {
     }, []);
 
     return (
-        <div>
+        <div style={{ marginTop: "10px" }}>
+            <Tip hideSeparator>Some options might require a restart.</Tip>
             <h3>App Behavior</h3>
-            <h5>Some options might require a restart.</h5>
             <Checkbox
                 checked={autoStart ?? false}
                 disabled={typeof autoStart === "undefined"}
@@ -175,6 +180,13 @@ export function Native() {
                     </p>
                 </>
             )}
+            <hr />
+            <CategoryButton
+                icon={<img src={RLogo} draggable={false} />}
+                description={<span>version {window.nativeVersion}</span>}
+                action={<Refresh size={24} />}>
+                Revolt for Desktop
+            </CategoryButton>
         </div>
     );
 }

src/pages/settings/panes/Panes.module.scss

@@ -196,6 +196,14 @@
         margin-top: 8px;
         gap: 4px;
 
+        svg {
+            flex-shrink: 0;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
         h5 {
             margin: 0;
         }
@@ -229,8 +237,11 @@
 }
 
 .audio {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
     .audioRow {
-        margin-top: 20px;
         display: flex;
         gap: 20px;
 
@@ -242,10 +253,11 @@
     .audioBox {
         display: flex;
         flex-direction: column;
-        gap: 15px;
+        /*gap: 15px;*/
         align-items: center;
 
         > button {
+            margin-top: 20px;
             width: 100%;
         }
     }
@@ -261,6 +273,36 @@
     }
 }
 
+.opus {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 12px;
+    opacity: 0.5;
+    margin-top: -12px;
+
+    > img {
+        height: 24px;
+    }
+}
+
+.notches {
+    margin: 10px 2px 0;
+    display: flex;
+    width: 100%;
+    border-radius: 60px;
+    overflow: hidden;
+    justify-content: space-between;
+    gap: 5px;
+
+    > div {
+        height: 8px;
+        width: 24px;
+        background: var(--secondary-background);
+        border-radius: 2px;
+    }
+}
+
 .appearance {
     .theme {
         min-width: 0;
@@ -499,7 +541,7 @@
         &[data-active="true"] {
             color: var(--primary-background);
             background: var(--accent);
-            margin-bottom: 20px;
+            margin-bottom: 25px;
 
             .session .detail .info > input {
                 &:focus {
@@ -653,12 +695,19 @@
 }
 
 .myBots {
+    margin-top: 10px;
+    .botList {
+        display: flex;
+        flex-direction: column;
+        margin-top: 8px;
+        gap: 16px;
+    }
+
     .botCard {
         display: flex;
         flex-direction: column;
         gap: 10px;
         background: var(--secondary-background);
-        margin: 8px 0;
         padding: 12px;
         border-radius: var(--border-radius);
     }