Finish up new sidebar active.

Add rounded corners to sidebar.

src/components/common/ServerHeader.tsx

@@ -21,7 +21,8 @@ export default function ServerHeader({ server, ctx }: Props) {
     const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true);
 
     return (
-        <Header placement="secondary"
+        <Header borders
+            placement="secondary"
             background={typeof bannerURL !== 'undefined'}
             style={{ background: bannerURL ? `linear-gradient(to bottom, transparent 50%, #000e), url('${bannerURL}')` : undefined }}>
             <ServerName>

src/components/common/user/UserHeader.tsx

@@ -52,7 +52,7 @@ export default function UserHeader({ user }: Props) {
     }
 
     return (
-        <Header placement="secondary">
+        <Header borders placement="secondary">
             <UserIcon
                 target={user}
                 size={32}

src/components/navigation/left/ServerListSidebar.tsx

@@ -68,6 +68,7 @@ const ServerList = styled.div`
     overflow-y: scroll;
     padding-bottom: 48px;
     flex-direction: column;
+    // border-right: 2px solid var(--accent);
 
     scrollbar-width: none;
 
@@ -100,7 +101,7 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
         border-end-start-radius: 50%;
 
         ${ props => props.active && css`
-            background: var(--accent);
+            background: var(--sidebar-active);
         ` }
     }
 
@@ -109,13 +110,13 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
         height: 46px;
 
         ${ props => props.active && css`
-            background: var(--accent);
+            background: var(--sidebar-active);
 
             &::before, &::after {
                 // outline: 1px solid blue;
             }
 
-            &::before {
+            &::before, &::after {
                 content: "";
                 display: block;
                 position: relative;
@@ -129,25 +130,12 @@ const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
                 background: var(--background);
                 border-bottom-right-radius: 32px;
 
-                box-shadow: 0 32px 0 0 var(--accent);
+                box-shadow: 0 32px 0 0 var(--sidebar-active);
             }
 
-            /*&::after {
-                content: "";
-                display: block;
-                position: relative;
-
-                width: 31px;
-                height: 72px;
-                margin-top: 100px;
-                margin-left: -25px;
-                z-index: -2;
-
-                background: var(--background);
-                border-bottom-left-radius: 32px;
-
-                box-shadow: 0 -32px 0 0 var(--accent);
-            }*/
+            &::after {
+                transform: scaleY(-1) translateY(-118px);
+            }
         ` }
     }
 
@@ -213,12 +201,12 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
                 <ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}>
                     <ServerEntry invert active={homeActive}>
                         <Icon size={42} unread={homeUnread}>
-                            <img src={logoSVG} />
+                            <img style={{ width: 32, height: 32 }} src={logoSVG} />
                         </Icon>
                         <span />
                     </ServerEntry>
                 </ConditionalLink>
-                {/*<LineDivider />*/}
+                <LineDivider />
                 {
                     servers.map(entry => {
                         const active = entry!._id === server?._id;

src/components/navigation/left/ServerSidebar.tsx

@@ -26,6 +26,8 @@ const ServerBase = styled.div`
     flex-shrink: 0;
     flex-direction: column;
     background: var(--secondary-background);
+
+    border-start-start-radius: 8px;
 `;
 
 const ServerList = styled.div`

src/components/ui/Header.tsx

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 
 interface Props {
+    borders?: boolean;
     background?: boolean;
     placement: 'primary' | 'secondary'
 }
@@ -30,4 +31,9 @@ export default styled.div<Props>`
         background-color: var(--secondary-header);
         padding: 14px;
     ` }
+
+    ${ props => props.borders && css`
+        border-start-start-radius: 8px;
+        border-end-start-radius: 8px;
+    ` }
 `;

src/context/Theme.tsx

@@ -16,7 +16,6 @@ export type Variables =
     | "warning"
     | "error"
     | "hover"
-    | "sidebar-active"
     | "scrollbar-thumb"
     | "scrollbar-track"
     | "primary-background"
@@ -58,7 +57,6 @@ export const PRESETS: { [key: string]: Theme } = {
         warning: "#FAA352",
         error: "#F06464",
         hover: "rgba(0, 0, 0, 0.2)",
-        "sidebar-active": "#FD6671",
         "scrollbar-thumb": "#CA525A",
         "scrollbar-track": "transparent",
         "primary-background": "#FFFFFF",
@@ -86,7 +84,6 @@ export const PRESETS: { [key: string]: Theme } = {
         warning: "#FAA352",
         error: "#F06464",
         hover: "rgba(0, 0, 0, 0.1)",
-        "sidebar-active": "#FD6671",
         "scrollbar-thumb": "#CA525A",
         "scrollbar-track": "transparent",
         "primary-background": "#242424",

src/pages/settings/panes/Appearance.tsx

@@ -49,7 +49,6 @@ export function Component(props: Props & WithDispatcher) {
     function setAccent(accent: string) {
         setOverride({
             accent,
-            "sidebar-active": accent,
             "scrollbar-thumb": pSBC(-0.2, accent)
         });
     }

src/pages/settings/server/Roles.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "preact/hooks";
 import Button from "../../../components/ui/Button";
 import { Servers } from "revolt.js/dist/api/objects";
 import Checkbox from "../../../components/ui/Checkbox";
-import { ServerPermission } from "revolt.js/dist/api/permissions";
+import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions";
 
 interface Props {
     server: Servers.Server;
@@ -37,13 +37,25 @@ export function Roles({ server }: Props) {
                 })
             }
             <Button disabled={selected === 'default'} error onClick={() => {}}>delete role</Button>
-            <h2>permmissions</h2>
+            <h2>server permmissions</h2>
             { Object.keys(ServerPermission)
                 .map(perm => {
                     let value = ServerPermission[perm as keyof typeof ServerPermission];
 
                     return (
-                        <Checkbox checked={(selectedRole.permissions[0] & value) > 0} onChange={() => {}}>
+                        <Checkbox checked={((selectedRole.permissions[0] >>> 0) & value) > 0} onChange={() => {}}>
+                            { perm }
+                        </Checkbox>
+                    )
+                })
+            }
+            <h2>channel permmissions</h2>
+            { Object.keys(ChannelPermission)
+                .map(perm => {
+                    let value = ChannelPermission[perm as keyof typeof ChannelPermission];
+
+                    return (
+                        <Checkbox checked={((selectedRole.permissions[1] >>> 0) & value) > 0} onChange={() => {}}>
                             { perm }
                         </Checkbox>
                     )

src/styles/_variables.scss

@@ -0,0 +1,3 @@
+:root {
+    --sidebar-active: var(--secondary-background);
+}

src/styles/index.scss

@@ -1,3 +1,4 @@
+@import "variables";
 @import "context-menu";
 @import "elements";
 @import "fonts";