Update: Work on new Friends tab + minor fixes

src/components/navigation/BottomNavigation.tsx

@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import { useSelf } from "../../context/revoltjs/hooks";
 import { useHistory, useLocation } from "react-router";
 import ConditionalLink from "../../lib/ConditionalLink";
-import { MessageRounded, Group } from "@styled-icons/boxicons-regular";
+import { Message, Group } from "@styled-icons/boxicons-regular";
 
 const NavigationBase = styled.div`
     z-index: 10;
@@ -50,7 +50,7 @@ export default function BottomNavigation() {
                             }
                         }
                     }}>
-                    <MessageRounded size={26} />
+                    <Message size={26} />
                 </IconButton>
             </Button>
             <Button active={friendsActive}>

src/components/navigation/items/ButtonItem.tsx

@@ -41,9 +41,7 @@ export function UserButton({ active, alert, alertCount, user, context, channel }
                 unread: alert,
                 contextualChannel: context?._id
             })}>
-            <div className={styles.avatar}>
-                <UserIcon target={user} size={32} status />
-            </div>
+            <UserIcon className={styles.avatar} target={user} size={32} status />
             <div className={styles.name}>
                 <div>{user.username}</div>
                 {
@@ -99,11 +97,10 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac
     return (
         <div data-active={active}
             data-alert={typeof alert === 'string'}
+            aria-label={{}} /*TOFIX: ADD ARIA LABEL*/
             className={classNames(styles.item, { [styles.compact]: compact })}
             onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>
-            <div className={styles.avatar}>
-                <ChannelIcon target={channel} size={compact ? 24 : 32} />
-            </div>
+            <ChannelIcon className={styles.avatar} target={channel} size={compact ? 24 : 32} />
             <div className={styles.name}>
                 <div>{channel.name}</div>
                 { channel.channel_type === 'Group' &&

src/components/navigation/items/Item.module.scss

 .item {
-    height: 48px;
+    height: 42px;
     display: flex;
     padding: 0 8px;
     user-select: none;
@@ -31,7 +31,7 @@
     &.user {
         opacity: 0.4;
         cursor: pointer;
-        transition: .15s ease opacity;
+        transition: .1s ease-in-out opacity;
 
         &[data-online="true"],
         &:hover {

src/components/navigation/left/ServerListSidebar.tsx

@@ -111,7 +111,7 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
         height: 46px;
 
         ${ props => props.active && css`
-            background: var(--sidebar-active);
+            background-color: var(--sidebar-active);
 
             &::before, &::after {
                 // outline: 1px solid blue;
@@ -128,7 +128,7 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
                 margin-left: -25px;
                 z-index: -1;
 
-                background: var(--background);
+                background-color: var(--background);
                 border-bottom-right-radius: 32px;
 
                 box-shadow: 0 32px 0 0 var(--sidebar-active);

src/components/ui/Header.tsx

@@ -11,10 +11,13 @@ export default styled.div<Props>`
     font-weight: 600;
     user-select: none;
 
+    display: flex;
+    align-items: center;
+
     gap: 10px;
     flex: 0 auto;
     display: flex;
-    padding: 20px;
+    padding: 0 20px;
     flex-shrink: 0;
     align-items: center;
 
@@ -22,6 +25,10 @@ export default styled.div<Props>`
     background-size: cover !important;
     background-position: center !important;
 
+    svg {
+        flex-shrink: 0;
+    }
+
     ${ props => props.background && css`
         height: 120px;
         align-items: flex-end;

src/components/ui/Modal.tsx

@@ -42,6 +42,8 @@ const ModalContainer = styled.div`
     border-radius: 8px;
     max-width: calc(100vw - 20px);
 
+    inline-size: min(100%, 500px);
+
     animation-name: ${zoomIn};
     animation-duration: 0.25s;
     animation-timing-function: cubic-bezier(.3,.3,.18,1.1);

src/pages/channels/ChannelHeader.tsx

@@ -22,6 +22,10 @@ const Info = styled.div`
     overflow: hidden;
     white-space: nowrap;
 
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+
     * {
         display: inline-block;
     }

src/pages/friends/Friend.module.scss

@@ -3,6 +3,10 @@
     user-select: none;
     overflow-y: scroll;
 
+    .overline {
+        display: flex;
+    }
+
     &[data-empty="true"] {
         img {
             height: 120px;
@@ -41,14 +45,21 @@
 
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
+        overflow: hidden;
+
+        span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
         .subtext {
             font-size: 12px;
             color: var(--tertiary-foreground);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 
@@ -57,8 +68,16 @@
         gap: 12px;
 
         > div {
-            height: 32px;
-            width: 32px;
+            height: 40px;
+            width: 40px;
+
+            &:nth-child(1):hover {
+                background: var(--status-online); //TOFIX: change to normal green color
+            }
+
+            &:nth-child(3):hover {
+                background: var(--error);
+            }
         }
     }
 }

src/pages/friends/Friend.tsx

@@ -3,7 +3,8 @@ import { Link } from "react-router-dom";
 import styles from "./Friend.module.scss";
 import { useContext } from "preact/hooks";
 import { Children } from "../../types/Preact";
-import { X, Plus, Envelope } from "@styled-icons/boxicons-regular";
+import { X, Plus } from "@styled-icons/boxicons-regular";
+import { PhoneCall, Envelope } from "@styled-icons/boxicons-solid";
 import IconButton from "../../components/ui/IconButton";
 import { attachContextMenu } from "preact-context-menu";
 import { User, Users } from "revolt.js/dist/api/objects";
@@ -27,12 +28,20 @@ export function Friend({ user }: Props) {
     if (user.relationship === Users.Relationship.Friend) {
         subtext = <UserStatus user={user} />
         actions.push(
+            <>
+            <IconButton type="circle"
+                onClick={stopPropagation}>
+                <Link to={'/open/' + user._id}>
+                    <PhoneCall size={20} />
+                </Link>
+            </IconButton>
             <IconButton type="circle"
                 onClick={stopPropagation}>
                 <Link to={'/open/' + user._id}>
                     <Envelope size={20} />
                 </Link>
             </IconButton>
+            </>
         );
     }
 
@@ -77,7 +86,7 @@ export function Friend({ user }: Props) {
         <div className={styles.friend}
             onClick={() => openScreen({ id: 'profile', user_id: user._id })}
             onContextMenu={attachContextMenu('Menu', { user: user._id })}>
-            <UserIcon target={user} size={32} status />
+            <UserIcon target={user} size={38} status />
             <div className={styles.name}>
                 <span>@{user.username}</span>
                 {subtext && (

src/pages/settings/server/Panes.module.scss

@@ -75,4 +75,18 @@
         flex-direction: row;
         background: var(--secondary-background);
     }
+}
+
+.roles {
+    .overview {
+        height: 85vh; //TOFIX change later
+        display: flex;
+        .list {
+            overflow-y: scroll;
+        }
+
+        .permissions {
+            overflow-y: scroll;
+        }
+    }
 }
\ No newline at end of file

src/pages/settings/server/Roles.tsx

 import Tip from "../../../components/ui/Tip";
+import styles from './Panes.module.scss';
 import Button from "../../../components/ui/Button";
 import { Servers } from "revolt.js/dist/api/objects";
 import InputBox from "../../../components/ui/InputBox";
@@ -6,6 +7,7 @@ import Checkbox from "../../../components/ui/Checkbox";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions";
+import { Styleshare } from "@styled-icons/simple-icons";
 
 interface Props {
     server: Servers.Server;
@@ -42,56 +44,63 @@ export function Roles({ server }: Props) {
     const [ name, setName ] = useState('');
     
     return (
-        <div>
+        <div className={styles.roles}>
             <Tip warning>This section is under construction.</Tip>
-            <h2>select role</h2>
-            { selected }
-            { keys
-                .map(id => {
-                    let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
+            <div className={styles.overview}>
+                <div className={styles.list}>
+                    <h2>select role</h2>
+                    { selected }
+                    { keys
+                        .map(id => {
+                            let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
 
-                    return (
-                        <Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
-                            { role.name }
-                        </Checkbox>
-                    )
-                })
-            }
-            <Button disabled={selected === 'default'} error onClick={() => {
-                setSelected('default');
-                client.servers.deleteRole(server._id, selected);
-            }}>delete role</Button><br/>
-            <InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} />
-            <Button contrast onClick={() => {
-                client.servers.createRole(server._id, name);
-            }}>create</Button>
-            <h2>serverm permmissions</h2>
-            { Object.keys(ServerPermission)
-                .map(perm => {
-                    let value = ServerPermission[perm as keyof typeof ServerPermission];
+                            return (
+                                <Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
+                                    { role.name }
+                                </Checkbox>
+                            )
+                        })
+                    }
+                    <Button disabled={selected === 'default'} error onClick={() => {
+                        setSelected('default');
+                        client.servers.deleteRole(server._id, selected);
+                    }}>delete role</Button><br/>
+                    <InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} />
+                    <Button contrast onClick={() => {
+                        client.servers.createRole(server._id, name);
+                    }}>create</Button>
+                </div>
+                <div className={styles.permissions}>
+                    <h2>serverm permmissions</h2>
+                    { Object.keys(ServerPermission)
+                        .map(perm => {
+                            let value = ServerPermission[perm as keyof typeof ServerPermission];
 
-                    return (
-                        <Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}>
-                            { perm }
-                        </Checkbox>
-                    )
-                })
-            }
-            <h2>channel permmissions</h2>
-            { Object.keys(ChannelPermission)
-                .map(perm => {
-                    let value = ChannelPermission[perm as keyof typeof ChannelPermission];
+                            return (
+                                <Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}>
+                                    { perm }
+                                </Checkbox>
+                            )
+                        })
+                    }
+                    <h2>channel permmissions</h2>
+                    { Object.keys(ChannelPermission)
+                        .map(perm => {
+                            let value = ChannelPermission[perm as keyof typeof ChannelPermission];
 
-                    return (
-                        <Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}>
-                            { perm }
-                        </Checkbox>
-                    )
-                })
-            }
-            <Button contrast onClick={() => {
-                client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
-            }}>click here to save permissions for role</Button>
+                            return (
+                                <Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}>
+                                    { perm }
+                                </Checkbox>
+                            )
+                        })
+                    }
+                    <Button contrast onClick={() => {
+                        client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
+                    }}>click here to save permissions for role</Button>
+                </div>
+            </div>
+            
         </div>
     );
 }

src/styles/_context-menu.scss

 .preact-context-menu .context-menu {
     z-index: 100;
-    min-width: 180px;
+    min-width: 190px;
     padding: 6px 8px;
     user-select: none;
     border-radius: 4px;