diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index c88fa2d31159763c261b0e9d262c85a57ed8721d..7faa1a00a2decaca8a726fe6afd83a181f617773 100644
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/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}>
diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx
index 6f82c5d3576487cb8aa646efc0bfe77ae06fab79..139ec677b37e6dd483b82a40405cb4cd0f4c1138 100644
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/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' &&
diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss
index fb855f0ab23c79f59025ab4228cd763effdcd2e4..0cccb59e8241f8659fd640893195f78044e222c4 100644
--- a/src/components/navigation/items/Item.module.scss
+++ b/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 {
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index cb1c7d122f740dbfaeeda3204a809696631ba179..7607b2077a58004408a1db8c4ad1856a8eafa965 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/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);
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index 2b2c0d3c313c2cb42c54d90709c0ef1359ad60a4..05b941a6cfabb8375f6e80fc5d0e20f3b354dc83 100644
--- a/src/components/ui/Header.tsx
+++ b/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;
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 2faecdec31c32a9c868b2835bd86fb66c06a3900..4fa3d7cd4a24219d12b0d6d0a68561372d4a2eab 100644
--- a/src/components/ui/Modal.tsx
+++ b/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);
diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index 6834c18b12a634df41ccbf525df2efde52acc75d..6508cb6fce697aa44f63b96bd020814820497a64 100644
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/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;
}
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index b9e90c0091b5650e4b221a3a3acc64f4d1e00d61..5ac68fa01a6946c6122de86b53492fd6182b35a6 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/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);
+ }
}
}
}
diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx
index a33c342dc111520528177231dc29ace8e8894f67..6a6bbdc384b29c5043854245175c924b771ed162 100644
--- a/src/pages/friends/Friend.tsx
+++ b/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 && (
diff --git a/src/pages/settings/server/Panes.module.scss b/src/pages/settings/server/Panes.module.scss
index 91e4cb3b9f4993dc65a5982f00d915882ef7d9f7..cbf8e5a9397b2c259bcbd1a6c7ed95abd970ca58 100644
--- a/src/pages/settings/server/Panes.module.scss
+++ b/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
diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx
index 5d530c1dca3b37544842a67397dbee0f7c1631ba..2db9baff45067b3f3193bb27b7f1e0dead671933 100644
--- a/src/pages/settings/server/Roles.tsx
+++ b/src/pages/settings/server/Roles.tsx
@@ -1,4 +1,5 @@
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>
);
}
diff --git a/src/styles/_context-menu.scss b/src/styles/_context-menu.scss
index a90e99e4b41893ba7d4924dc72221e49f5c2ba6f..66df13486a0123c9bbed4436d60cda8c8325f978 100644
--- a/src/styles/_context-menu.scss
+++ b/src/styles/_context-menu.scss
@@ -1,6 +1,6 @@
.preact-context-menu .context-menu {
z-index: 100;
- min-width: 180px;
+ min-width: 190px;
padding: 6px 8px;
user-select: none;
border-radius: 4px;