diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index da1fe69461c49d7a49ea484db81ea067ed74cc89..62bfea5fb76cf39c2d2c5c725337909d716622a7 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -24,6 +24,7 @@ import { useCallback, useContext, useEffect, useState } from "preact/hooks"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { FileUploader, grabFiles, uploadFile } from "../../../context/revoltjs/FileUploads"; import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton"; +import { ShieldX } from "@styled-icons/boxicons-regular"; import ReplyBar from "./bars/ReplyBar"; import FilePreview from './bars/FilePreview'; @@ -52,11 +53,16 @@ const Base = styled.div` `; const Blocked = styled.div` - padding: 15px 0; - line-height: 20px; + display: flex; + padding: 14px 0; user-select: none; font-size: .875rem; color: var(--tertiary-foreground); + + svg { + flex-shrink: 0; + margin-right: 8px; + } `; const Action = styled.div` @@ -80,7 +86,10 @@ function MessageBox({ channel, draft, dispatcher }: Props) { if (!(permissions & ChannelPermission.SendMessage)) { return ( <Base> - <Blocked><Text id="app.main.channel.misc.no_sending" /></Blocked> + <Blocked> + <ShieldX size={20}/> + <Text id="app.main.channel.misc.no_sending" /> + </Blocked> </Base> ) } diff --git a/src/components/ui/Category.tsx b/src/components/ui/Category.tsx index 2889e2f4bba2798e89e6974ff474c47e5b8846b3..7fae78e48d01d5c7184d022ecc9366bab1f6e85f 100644 --- a/src/components/ui/Category.tsx +++ b/src/components/ui/Category.tsx @@ -8,7 +8,7 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>` text-transform: uppercase; margin-top: 4px; - padding: 6px 10px; + padding: 6px 0; margin-bottom: 4px; white-space: nowrap; @@ -22,6 +22,11 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>` cursor: pointer; } + &:first-child { + margin-top: 0; + padding-top: 0; + } + ${ props => props.variant === 'uniform' && css` padding-top: 6px; ` } diff --git a/src/pages/settings/ServerSettings.tsx b/src/pages/settings/ServerSettings.tsx index ecf750cee0f0a41305e5a5f3cf7db25bb03ff9b8..ca89400550762a65547ebc4041845a4319fdfba4 100644 --- a/src/pages/settings/ServerSettings.tsx +++ b/src/pages/settings/ServerSettings.tsx @@ -30,7 +30,7 @@ export default function ServerSettings() { <GenericSettings pages={[ { - category: <Category variant="uniform" text={server.name} />, + category: <Category variant="uniform" text={server.name} />, //TOFIX: Just add the server.name as a string, otherwise it makes a duplicate category id: 'overview', icon: <ListUl size={20} />, title: <Text id="app.settings.channel_pages.overview.title" /> diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 76e99e21620450bd8d0cc5f47a360804f8322a9c..0141409dba7720b57c74b3d8f950caa9e87b9e04 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -8,17 +8,17 @@ import { GenericSettings } from "./GenericSettings"; import { Route, useHistory } from "react-router-dom"; import { Bell, - Box, + Palette, Coffee, Globe, - Image, + IdCard, LogOut, Sync as SyncIcon, Shield, - ToggleRight, + Vial, User } from "@styled-icons/boxicons-regular"; -import { Megaphone } from "@styled-icons/boxicons-solid"; +import { Brush, Megaphone } from "@styled-icons/boxicons-solid"; import { Gitlab } from "@styled-icons/boxicons-logos"; import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision"; import LineDivider from "../../components/ui/LineDivider"; @@ -59,7 +59,7 @@ export default function Settings() { }, { id: 'profile', - icon: <Image size={20} />, + icon: <IdCard size={20} />, title: <Text id="app.settings.pages.profile.title" /> }, { @@ -70,7 +70,7 @@ export default function Settings() { { category: <Text id="app.settings.categories.client_settings" />, id: 'appearance', - icon: <Box size={20} />, + icon: <Palette size={20} />, title: <Text id="app.settings.pages.appearance.title" /> }, { @@ -91,7 +91,7 @@ export default function Settings() { { divider: true, id: 'experiments', - icon: <ToggleRight size={20} />, + icon: <Vial size={20} />, title: <Text id="app.settings.pages.experiments.title" /> }, { diff --git a/src/pages/settings/panes/Experiments.tsx b/src/pages/settings/panes/Experiments.tsx index 2922be83c493ee6e451078c720846b52cb1624c4..41e5885db0215e48b865dd02d6fe519376b93975 100644 --- a/src/pages/settings/panes/Experiments.tsx +++ b/src/pages/settings/panes/Experiments.tsx @@ -36,7 +36,10 @@ export function Component(props: Props & WithDispatcher) { } { AVAILABLE_EXPERIMENTS.length === 0 && - <Text id="app.settings.pages.experiments.not_available" /> + <div className={styles.empty}> + <Text id="app.settings.pages.experiments.not_available" /> + </div> + } </div> );