Verified Commit 2c8e236b authored by insert's avatar insert

Fix themes, separators and DM list.

Co-authored-by: default avatarnizune <[email protected]>
parent 7e2ea987
Pipeline #278 passed with stage
in 5 minutes and 1 second
......@@ -9,7 +9,6 @@
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
color: whitesmoke;
.root {
margin: 0 10px;
......@@ -19,12 +18,14 @@
min-height: 200px;
.container {
color: var(--body-text);
padding: 1em;
border-radius: 5px 5px 0 0;
background: var(--primary);
}
.title {
color: var(--main-text);
text-transform: uppercase;
font-weight: 600;
}
......
.button {
border: 0;
display: flex;
color: white;
color: var(--main-text);
padding: 12px 16px;
height: 44px;
align-items: center;
......@@ -13,9 +13,9 @@
justify-content: center;
outline: 0;
&.confirm { background: var(--accent-color);}
&.cancel { background: #4f545c; }
&.warning { background: var(--red); }
&.confirm { color: white; background: var(--accent-color);}
&.cancel { color: white; background: #4f545c; }
&.warning { color: white; background: var(--red); }
&.fullwidth { width: 100%; }
......
......@@ -6,7 +6,7 @@ input {
.input[type=email],
.input[type=password] {
display: block;
font-family: 'Open Sans', sans-serif;
font-family: inherit;
height: 40px;
color: white;
font-size: 1rem;
......@@ -48,7 +48,7 @@ input {
cursor: pointer;
//transition: background-color .3s ease;
outline: 0;
font-family: 'Open Sans', sans-serif;
font-family: inherit;
border: 1px solid transparent;
&:focus {
......
.wrapper {
margin: 15px 30px;
@media only screen and (max-width: 900px) { margin: 15px 10px; }
.messageBox {
box-sizing: border-box;
width: 100%;
background: #707070;
border-radius: 6px;
display: flex;
align-items: center;
//background: var(--action-button);
.textArea {
position: relative;
resize: none;
box-sizing: border-box;
width: 100%;
border-radius: 6px;
outline: 0;
flex-grow: 1;
display: flex;
background: var(--messagebox);
> form {
$form-side-padding: 20px;
flex-grow: 1;
width: 100%;
textarea {
display: block;
padding: 12px $form-side-padding;
font-family: "Open Sans", sans-serif;
width: calc(100% - #{$form-side-padding * 2});
font-size: 14px;
background: transparent;
resize: none;
border: none;
outline: 0;
color: var(--body-text);
}
}
.button {
width: 45px;
height: 45px;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
cursor: pointer;
opacity: .5;
transition: opacity .3s;
&:hover { opacity: 1; }
&:last-child {
margin-right: 20px;
@media only screen and (max-width: 900px) { margin-right: 12px; }
}
}
}
}
}
\ No newline at end of file
import React from 'react';
import styles from './MessageBox.module.scss';
export default function MessageBox(props: { value: string, onChange: (value: string) => void }) {
return (
<div className={styles.wrapper}>
<div className={styles.typeIndicator}></div>
<div className={styles.messageBox}>
<form>
<textarea placeholder="Message channel"
value={props.value} onChange={e => props.onChange(e.target.value)} />
</form>
</div>
</div>
);
}
\ No newline at end of file
import { useState } from "react";
export function useVar(key: string, ref?: HTMLElement) {
let [ value, setValue ] = useState<any>();
return [ value, (ref?: HTMLElement) => ref &&
setValue(getComputedStyle(ref)
.getPropertyValue('--' + key)) ];
}
\ No newline at end of file
......@@ -10,6 +10,7 @@ import { GuildSidebar } from './chat/sidebar/conversation/Guild';
import Browser from './chat/sidebar/Browser';
import { Profile } from './chat/sidebar/conversation/Profile';
import Channel from './chat/Channel';
import { useVar } from '../components/util/CSS';
export enum Page {
GUILD = 0x1, // switches to guild specific sidebar
......@@ -58,12 +59,13 @@ const Chat = memo(() => {
}
let is900 = useCheckWidth(900);
let [ color, processRef ] = useVar('primary');
return (
<ChatContext.Provider value={states}>
<Helmet>
<meta name="theme-color" content="#333234"/>
</Helmet>
<div className={styles.chat}>
<Helmet>
<meta name="theme-color" content={color || '#000000'}/>
</Helmet>
<div className={styles.chat} ref={ref => processRef(ref)}>
<SwipeableDrawer open={drawer} onChange={setDrawer}
closeOnOpacityClick={true} variant={is900 ? 'permanent' : 'temporary'}>
<div className={styles.sidebar}>
......
......@@ -10,6 +10,7 @@ import { AppContext, Page as AppPage } from '../App';
import { RenderPage } from './settings/pages';
import Modal from '../components/ui/components/Modal';
import { LogoutClient } from '../internal/Client';
import { useVar } from '../components/util/CSS';
export enum Page {
ACCOUNT,
......@@ -102,12 +103,13 @@ export function Settings() {
'none' : undefined
};
let [ color, processRef ] = useVar('secondary');
return (
<SettingsContext.Provider value={states}>
<Helmet>
<meta name="theme-color" content="#212121"/> {/*Change content to the same color as theme*/}
<meta name="theme-color" content={color || '#000000'}/>
</Helmet>
<div className={styles.settings}>
<div className={styles.settings} ref={ref => processRef(ref)}>
<div className={styles.header}>
{ showContent ? <Icon className={styles.x} icon="leftArrowAltRegular" onClick={doClose} />
: <Icon className={styles.x} icon="xRegular" onClick={doClose} /> }
......
......@@ -28,7 +28,7 @@
.username {
font-size: 1rem;
font-weight: 600;
padding-right: 6px;
padding-right: 4px;
cursor: pointer;
min-width: 0;
white-space: nowrap;
......@@ -46,4 +46,32 @@
}
}
}
}
.separator {
display: flex;
align-items: center;
user-select: none;
&:first-child { display: none; }
.bar {
flex: 1 1 auto;
height: 1px;
background: gray;
margin: 0px 10px;
border-radius: 60px;
@media only screen and (max-width: 900px) { margin: 0 8px; }
}
.text {
font-size: .75rem;
flex: 0 0 auto;
color: gray;
}
&.new {
.bar { background: #DF3535; }
.text { color: #DF3535; }
}
}
\ No newline at end of file
......@@ -19,33 +19,38 @@ const MessageList = memo((props: { messages: RMessage[] }) => {
if (props.messages.length === 0)
return <Fragment />;
let index: RMessage[][][] = [[[]]];
let days: RMessage[][][] = [[[]]];
props.messages.forEach(msg => {
let day = index[index.length - 1];
let separator = day[day.length - 1];
let last = separator[separator.length - 1];
let day = days[days.length - 1];
let group = day[day.length - 1];
if (!last) {
separator.push(msg);
let lastMessage = group[group.length - 1];
if (!lastMessage) {
group.push(msg);
} else {
if (isDifferentDay(msg.createdAt, last.createdAt)) {
index.push([[ msg ]]);
} if (diffMinutes(msg.createdAt, last.createdAt) > 10
|| msg.author !== last.author) {
let a = msg.createdAt || new Date();
let b = lastMessage.createdAt || new Date();
if (isDifferentDay(a, b)) {
days.push([[ msg ]]);
} else if (diffMinutes(a, b) > 10
|| msg.author !== lastMessage.author) {
day.push([ msg ]);
} else {
separator.push(msg);
group.push(msg);
}
}
});
return <Fragment>
{
index.map(day => <Fragment>
days.map(day => <Fragment>
<div className={styles.separator}>
<div className={styles.bar}/>
<div className={styles.text}>{day[0][0].createdAt.getDate()}</div>
<div className={styles.text}>
<time>{moment(day[0][0].createdAt).format('ll')}</time>
</div>
<div className={styles.bar}/>
</div>
{ day.map(group =>
......@@ -54,7 +59,7 @@ const MessageList = memo((props: { messages: RMessage[] }) => {
<div className={styles.content}>
<div className={styles.header}>
<span className={styles.username}>{group[0].author.username}</span>
<time>{ moment(group[0].createdAt).calendar() }</time>
<time> { moment(group[0].createdAt).calendar() }</time>
</div>
{ group.map(x => <div>{x.content}</div>) }
</div>
......
......@@ -14,9 +14,10 @@ export const ChannelEntry = memo((props: ChannelProps) => {
let iconURL, name, status, click;
if (props.channel instanceof DMChannel) {
iconURL = props.channel.users[1].avatarURL; // ! FIX
name = props.channel.users[1].username;
status = props.channel.users[1].status;
let user = props.channel.recipient;
iconURL = user.avatarURL;
name = user.username;
status = user.status;
click = () => {
chat.setPage(Page.DM);
......
.category {
margin-bottom: 10px;
font-size: .875rem;
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
}
......@@ -11,7 +11,7 @@
padding-top: 8px;
border-top: 1px solid rgba(112, 112, 112, 0.5);
max-width: 500px;
font-size: .875rem;
font-size: .75rem;
font-weight: 600;
}
......
......@@ -2,7 +2,7 @@
--icon: #5A5A5A;
--unread: #9B9B9B;
--primary: #FBFBFB;
--primary: rgba(251, 251, 251, 1); //#FBFBFB
--secondary: #F0F0F0;
--tertiary: #E8E8E8;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment