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

@@ -1,5 +1,5 @@
 .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);