diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx
index de7a39f6e806fe07b05285b85316aed59b6ee6cc..4ed11aa0792206e3bbf2e360e067c339fcfa6e3d 100644
--- a/src/components/common/ServerHeader.tsx
+++ b/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>
diff --git a/src/components/common/user/UserHeader.tsx b/src/components/common/user/UserHeader.tsx
index dcd7630cc5020d7027b0203bfd0a2f04dd22580e..e93f3fd2e084408af832760b08af0d3a63b3cd4f 100644
--- a/src/components/common/user/UserHeader.tsx
+++ b/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}
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 4408660225c3499dfc07b96fdc3c9623fc190fee..5d94fbc51a69f4c96c885eccaa50d186277e6eb3 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/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;
diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx
index 2b8bcb77876b9ea90f02b85a13abb4cbc8d6b431..2d10ce2a2f97df8b44dcaa255d1a63aa5866a58c 100644
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/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`
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index cb17b8c563e02cd8399aa475759b41d79337faaf..2b2c0d3c313c2cb42c54d90709c0ef1359ad60a4 100644
--- a/src/components/ui/Header.tsx
+++ b/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;
+ ` }
`;
diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx
index 22c7a357e261ea2e56c9c67c17db7553e54cf50d..bb496da0d7a339835a253839587e28a2cc0b5006 100644
--- a/src/context/Theme.tsx
+++ b/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",
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index 8ee5dd408477bce886e3b74b6c16288d9c0f9c5e..b0ed1dae921387160d26356b030181d0a732f7bd 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/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)
});
}
diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx
index 308c6e66577ff891ee0f5d46246892fda3b552f6..47e82023050739831b2891e98012a8b24d29e33d 100644
--- a/src/pages/settings/server/Roles.tsx
+++ b/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>
)
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3335848c389579b438161092a26bd1d748c76b68
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,3 @@
+:root {
+ --sidebar-active: var(--secondary-background);
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e0b7574e705a35f04c69ffe15b1ffb3bf62cc21b..4fb88f540a4e863ab855213ec8a8ef44d780f9b3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,4 @@
+@import "variables";
@import "context-menu";
@import "elements";
@import "fonts";