From bf1eb2c6d192e334aea8f1c14a3334a002355450 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Fri, 2 Jul 2021 13:56:38 +0200
Subject: [PATCH] Update: Continued work on Friends tab + fixes
---
src/components/navigation/BottomNavigation.tsx | 2 +-
src/pages/channels/ChannelHeader.tsx | 11 ++++++-----
src/pages/friends/Friend.module.scss | 17 ++++++++++++-----
src/pages/friends/Friend.tsx | 2 +-
src/pages/home/Home.tsx | 7 +++++--
src/pages/invite/Invite.tsx | 4 ++--
src/pages/settings/GenericSettings.tsx | 4 ++--
7 files changed, 29 insertions(+), 18 deletions(-)
diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index 7faa1a0..675659c 100644
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -7,7 +7,7 @@ import ConditionalLink from "../../lib/ConditionalLink";
import { Message, Group } from "@styled-icons/boxicons-regular";
const NavigationBase = styled.div`
- z-index: 10;
+ z-index: 100;
height: 50px;
display: flex;
background: var(--secondary-background);
diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index 6508cb6..d4a9121 100644
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -7,7 +7,8 @@ import Markdown from "../../components/markdown/Markdown";
import { getChannelName } from "../../context/revoltjs/util";
import UserStatus from "../../components/common/user/UserStatus";
import { AppContext } from "../../context/revoltjs/RevoltClient";
-import { Save, At, Group, Hash } from "@styled-icons/boxicons-regular";
+import { At, Hash } from "@styled-icons/boxicons-regular";
+import { Save, Group } from "@styled-icons/boxicons-solid";
import { useStatusColour } from "../../components/common/user/UserIcon";
import { useIntermediate } from "../../context/intermediate/Intermediate";
@@ -61,18 +62,18 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
let icon, recipient;
switch (channel.channel_type) {
case "SavedMessages":
- icon = <Save size={20} />;
+ icon = <Save size={24} />;
break;
case "DirectMessage":
- icon = <At size={20} />;
+ icon = <At size={24} />;
const uid = client.channels.getRecipient(channel._id);
recipient = client.users.get(uid);
break;
case "Group":
- icon = <Group size={20} />;
+ icon = <Group size={24} />;
break;
case "TextChannel":
- icon = <Hash size={20} />;
+ icon = <Hash size={24} />;
break;
}
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index a8183e5..3021e9a 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -10,6 +10,8 @@
background: var(--primary-background);
padding: 8px 0;
z-index: 10;
+
+
}
&[data-empty="true"] {
@@ -28,11 +30,11 @@
}
.friend {
- padding: 10px;
+ padding: 0 10px;
+ height: 60px;
display: flex;
border-radius: 5px;
align-items: center;
- flex-direction: row;
cursor: pointer;
&:hover {
@@ -47,7 +49,7 @@
flex-grow: 1;
margin: 0 12px;
font-size: 16px;
-
+ font-weight: 600;
display: flex;
flex-direction: column;
text-overflow: ellipsis;
@@ -61,6 +63,7 @@
.subtext {
font-size: 12px;
+ font-weight: 400;
color: var(--tertiary-foreground);
white-space: nowrap;
overflow: hidden;
@@ -73,8 +76,8 @@
gap: 12px;
.button {
- width: 40px;
- height: 40px;
+ width: 36px;
+ height: 36px;
&:hover.error {
background: var(--error);
@@ -91,6 +94,10 @@
.list {
padding: 0 12px 12px 12px;
}
+
+ .call {
+ display: none;
+ }
}
diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx
index 2befba1..74b33a2 100644
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -33,7 +33,7 @@ export function Friend({ user }: Props) {
actions.push(
<>
<IconButton type="circle"
- className={classNames(styles.button, styles.success)}
+ className={classNames(styles.button, styles.call, styles.success)}
onClick={ev => stopPropagation(ev, openDM(user._id).then(connect))}>
<PhoneCall size={20} />
</IconButton>
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index eaa763d..d45e15b 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -3,13 +3,16 @@ import { Link } from "react-router-dom";
import { Text } from "preact-i18n";
import Header from "../../components/ui/Header";
-
+import { Home as HomeIcon } from "@styled-icons/boxicons-solid";
import wideSVG from '../../assets/wide.svg';
export default function Home() {
return (
<div className={styles.home}>
- <Header placement="primary"><Text id="app.navigation.tabs.home" /></Header>
+ <Header placement="primary">
+ <HomeIcon size={24} />
+ <Text id="app.navigation.tabs.home" />
+ </Header>
<h3>
<Text id="app.special.modals.onboarding.welcome" /> <img src={wideSVG} />
</h3>
diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx
index 8fc2a1f..e05bcdf 100644
--- a/src/pages/invite/Invite.tsx
+++ b/src/pages/invite/Invite.tsx
@@ -1,6 +1,6 @@
import styles from './Invite.module.scss';
import Button from '../../components/ui/Button';
-import { LeftArrowAlt } from "@styled-icons/boxicons-regular";
+import { ArrowBack } from "@styled-icons/boxicons-regular";
import Overline from '../../components/ui/Overline';
import { Invites } from "revolt.js/dist/api/objects";
import Preloader from '../../components/ui/Preloader';
@@ -44,7 +44,7 @@ export default function Invite() {
return (
<div className={styles.invite} style={{ backgroundImage: invite.server_banner ? `url('${client.generateFileURL(invite.server_banner)}')` : undefined }}>
<div className={styles.leave}>
- <LeftArrowAlt size={32} onClick={() => history.push('/')} />
+ <ArrowBack size={32} onClick={() => history.push('/')} />
</div>
{ !processing &&
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index 151a6ad..a370060 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -6,7 +6,7 @@ import Header from '../../components/ui/Header';
import Category from '../../components/ui/Category';
import IconButton from "../../components/ui/IconButton";
import LineDivider from "../../components/ui/LineDivider";
-import { LeftArrowAlt, X, XCircle } from "@styled-icons/boxicons-regular";
+import { ArrowBack, X, XCircle } from "@styled-icons/boxicons-regular";
import { Switch, useHistory, useParams } from "react-router-dom";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import ButtonItem from "../../components/navigation/items/ButtonItem";
@@ -65,7 +65,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
) : (
<>
<IconButton onClick={() => switchPage()}>
- <LeftArrowAlt size={30} />
+ <ArrowBack size={24} />
</IconButton>
<Text
id={`app.settings.${category}.${page}.title`}
--
GitLab