diff --git a/src/components/common/user/UserShort.tsx b/src/components/common/user/UserShort.tsx index 1045550d..7a7155f0 100644 --- a/src/components/common/user/UserShort.tsx +++ b/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; diff --git a/src/components/markdown/Markdown.module.scss b/src/components/markdown/Markdown.module.scss index fc625508..c6be4a68 100644 --- a/src/components/markdown/Markdown.module.scss +++ b/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"] { diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx index bc682c8a..dece8af5 100644 --- a/src/components/navigation/SidebarBase.tsx +++ b/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 && diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx index 19e74a73..5cceba82 100644 --- a/src/components/navigation/left/ServerSidebar.tsx +++ b/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 && diff --git a/src/pages/settings/ChannelSettings.tsx b/src/pages/settings/ChannelSettings.tsx index c4d39fd9..abc5baf1 100644 --- a/src/pages/settings/ChannelSettings.tsx +++ b/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: , + icon: , title: ( ), }, { id: "permissions", - icon: , + icon: , title: ( ), diff --git a/src/pages/settings/ServerSettings.tsx b/src/pages/settings/ServerSettings.tsx index 6b9128e1..715a2fa0 100644 --- a/src/pages/settings/ServerSettings.tsx +++ b/src/pages/settings/ServerSettings.tsx @@ -1,10 +1,12 @@ +import { ListUl } from "@styled-icons/boxicons-regular"; import { - ListUl, - ListCheck, - ListMinus, + InfoCircle, + Group, + FlagAlt, + Envelope, + UserX, Trash, -} from "@styled-icons/boxicons-regular"; -import { XSquare, Share, Group } from "@styled-icons/boxicons-solid"; +} 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: , id: "overview", - icon: , + icon: , title: ( ), }, { id: "categories", - icon: , + icon: , title: ( ), @@ -72,19 +74,19 @@ export default observer(() => { }, { id: "invites", - icon: , + icon: , title: ( ), }, { id: "bans", - icon: , + icon: , title: , }, { id: "roles", - icon: , + icon: , title: , hideTitle: true, }, diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index 97e0f3d0..dc7fde89 100644 --- a/src/pages/settings/Settings.module.scss +++ b/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; diff --git a/src/pages/settings/assets/opus_logo.svg b/src/pages/settings/assets/opus_logo.svg new file mode 100644 index 00000000..a78336b2 --- /dev/null +++ b/src/pages/settings/assets/opus_logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/pages/settings/assets/revolt_r.svg b/src/pages/settings/assets/revolt_r.svg new file mode 100644 index 00000000..2d2098cf --- /dev/null +++ b/src/pages/settings/assets/revolt_r.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index 32e4b6af..0c7ebf0b 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/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={} onClick={() => openScreen({ id: "modify_account", @@ -181,7 +182,7 @@ export const Account = observer(() => { } - description={"Set up 2FA Authentication on your account."} + description={"Set up 2FA on your account."} disabled action="chevron"> Set up Two-factor authentication diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index 7df77043..b6439528 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -1,5 +1,16 @@ -import { Reset, Import } from "@styled-icons/boxicons-regular"; -import { Pencil, Store } from "@styled-icons/boxicons-solid"; +import { + 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) { */} +
+ {/*} + description={"Customize the look of your app using themes."} + action="chevron"> + Themes + + } + description={"Change the font and size used in the app."} + action="chevron"> + {`Font & text size`} + + } + description={"Change the look of your messages."} + action="chevron"> + Message Display + + } + description={"Personalize your client with an emoji pack."} + action="chevron"> + Emoji Packs + +

Advanced

+ } + description={"Customize the client CSS to your heart's content"} + action="chevron"> + Custom CSS + */}

@@ -191,20 +234,19 @@ export function Component(props: Props) { ))} {/* TOFIX: Only show when a font with ligature support is selected, i.e.: Inter.*/} -

- - setTheme({ - ligatures: !props.settings.theme?.ligatures, - }) - } - description={ - - }> - - -

+ + setTheme({ + ligatures: !props.settings.theme?.ligatures, + }) + } + description={ + + }> + + +

@@ -279,7 +321,7 @@ export function Component(props: Props) { - +
+ {/*TOFIX: add logic to sound notches*/} + {/*
+
+
+
+
+
+
+
+
+
+
+
*/} {!permission && (

- {bots?.map((bot) => { - return ( - - setBots(bots.filter((x) => x._id !== bot._id)) - } - onUpdate={(changes: Changes) => - setBots( - bots.map((x) => { - if (x._id === bot._id) { - if ( - "public" in changes && - typeof changes.public === "boolean" - ) - x.public = changes.public; - if ("interactions_url" in changes) - x.interactions_url = - changes.interactions_url; - if ( - changes.remove === "InteractionsURL" - ) - x.interactions_url = undefined; - } - return x; - }), - ) - } - /> - ); - })} +
+

+ +

+
+ {bots?.map((bot) => { + return ( + + setBots(bots.filter((x) => x._id !== bot._id)) + } + onUpdate={(changes: Changes) => + setBots( + bots.map((x) => { + if (x._id === bot._id) { + if ( + "public" in changes && + typeof changes.public === + "boolean" + ) + x.public = changes.public; + if ("interactions_url" in changes) + x.interactions_url = + changes.interactions_url; + if ( + changes.remove === + "InteractionsURL" + ) + x.interactions_url = undefined; + } + return x; + }), + ) + } + /> + ); + })} +
); }); diff --git a/src/pages/settings/panes/Native.tsx b/src/pages/settings/panes/Native.tsx index 0a0e766e..d07f4074 100644 --- a/src/pages/settings/panes/Native.tsx +++ b/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 ( -
+
+ Some options might require a restart.

App Behavior

-
Some options might require a restart.
)} +
+ } + description={version {window.nativeVersion}} + action={}> + Revolt for Desktop +
); } diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 096f8522..29ecba1b 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/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); }