diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index 7faa1a00a2decaca8a726fe6afd83a181f617773..675659c36b1a8c9afaa978585163326d5b0a7ef5 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 6508cb6fce697aa44f63b96bd020814820497a64..d4a91217c20532dac3d66f7679b67b9a9679172d 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 a8183e511c3de3768464c8e600fcebdcf28a2c8a..3021e9afc427f662d15c33f53b25d40498edfe2a 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 2befba18a5277019fd07229e95e6406f31ffbb61..74b33a2490dead0707ef05fac0bc746fab0c37d8 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 eaa763de5472e27121f9b753e2f41419e3360151..d45e15b57c584c04f5c36350bbb03027c602ed08 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 8fc2a1f3ba09b04883439e0d3104c90a94d08c2f..e05bcdf3f9f27a369b2e76c67dd02762c0858524 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 151a6adae3e4c6d3b04068d3eead61d63cb97491..a37006031d198fb5537f2e0e8de6bb1537d7f693 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`}