From b812aa64ca60faf4264b643d316d1a09b37b7643 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Mon, 28 Jun 2021 09:55:05 +0200
Subject: [PATCH] Fix: Small update to categories and icons
---
src/components/common/messaging/MessageBox.tsx | 15 ++++++++++++---
src/components/ui/Category.tsx | 7 ++++++-
src/pages/settings/ServerSettings.tsx | 2 +-
src/pages/settings/Settings.tsx | 14 +++++++-------
src/pages/settings/panes/Experiments.tsx | 5 ++++-
5 files changed, 30 insertions(+), 13 deletions(-)
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index da1fe69..62bfea5 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 2889e2f..7fae78e 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 ecf750c..ca89400 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 76e99e2..0141409 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 2922be8..41e5885 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>
);
--
GitLab