Update: Continued work on Friends tab + fixes

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);

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;
     }
 

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;
+    }
 }
 
 

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>

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>

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 && 

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`}