Compare commits
3 commits
92fd25265e
...
52200b08ab
Author | SHA1 | Date | |
---|---|---|---|
|
52200b08ab | ||
|
8b5323047d | ||
|
e43030a57c |
21 changed files with 148 additions and 117 deletions
|
@ -66,7 +66,7 @@ export default function Create() {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (specialCodePrompt) return (
|
if (specialCodePrompt) return (
|
||||||
<div id="login-container" className="card">
|
<div id="login-container">
|
||||||
<h1>One more thing!</h1>
|
<h1>One more thing!</h1>
|
||||||
<p>You need a special code to sign up here!</p>
|
<p>You need a special code to sign up here!</p>
|
||||||
<label htmlFor="specialcode">Special Code</label>
|
<label htmlFor="specialcode">Special Code</label>
|
||||||
|
@ -78,7 +78,7 @@ export default function Create() {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="login-container" className="card">
|
<div id="login-container">
|
||||||
<h1>Create an account</h1>
|
<h1>Create an account</h1>
|
||||||
<label htmlFor="username">Username</label>
|
<label htmlFor="username">Username</label>
|
||||||
<br />
|
<br />
|
||||||
|
|
|
@ -49,7 +49,7 @@ export default function Login() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="login-container" className="card">
|
<div id="login-container">
|
||||||
<h1>Log in</h1>
|
<h1>Log in</h1>
|
||||||
<label htmlFor="username">Username</label>
|
<label htmlFor="username">Username</label>
|
||||||
<br />
|
<br />
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import Message from "../Messages/Message";
|
import Message from "../Messages/Message";
|
||||||
import { useRef, useEffect } from 'react';
|
import { useRef, useEffect } from 'react';
|
||||||
|
import { CommentDiscussionIcon } from "@primer/octicons-react";
|
||||||
|
|
||||||
export default function ChannelMessageView({messages}) {
|
export default function ChannelMessageView({messages}) {
|
||||||
const invisibleBottomMessageRef = useRef();
|
const invisibleBottomMessageRef = useRef();
|
||||||
|
@ -11,10 +12,11 @@ export default function ChannelMessageView({messages}) {
|
||||||
let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
|
let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
|
||||||
if (messagesView === undefined || messagesView.length <= 0)
|
if (messagesView === undefined || messagesView.length <= 0)
|
||||||
messagesView = (<div className='no-messages-warning'>
|
messagesView = (<div className='no-messages-warning'>
|
||||||
<span>No messages yet...</span>
|
<CommentDiscussionIcon size={64} />
|
||||||
|
<span style={{ margin: "12px" }}>No messages yet...</span>
|
||||||
</div>);
|
</div>);
|
||||||
|
|
||||||
return <div className="message-list-card">
|
return <div className="message-list">
|
||||||
{ messagesView }
|
{ messagesView }
|
||||||
<div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
|
<div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
|
||||||
</div>;
|
</div>;
|
||||||
|
|
|
@ -1,8 +1,17 @@
|
||||||
import ProfileLink from '../UI/ProfileLink'
|
export default function ChannelProfileLink({ channel, size }) {
|
||||||
|
let picture = null;
|
||||||
|
|
||||||
// TODO: Stop using this component and just use the ProfileLink component
|
if (size !== "0") {
|
||||||
export default function ChannelProfile({ channel, size, offset=false }) {
|
if (channel.picture) picture = <img className={ `profile-picture profile-picture-${size}` } src={ channel.picture } alt="Profile"></img>
|
||||||
return (
|
else picture = <div className="profile-picture default-channel" alt="Profile">
|
||||||
<ProfileLink object={ channel } size={ size } type="channel" offset={ offset } />
|
<span className="default-channel-styled-text">#</span>
|
||||||
);
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="profile-link">
|
||||||
|
{ picture }
|
||||||
|
<span className="profile-username">{ channel.title }</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -3,14 +3,14 @@ import ProfileLinkLoader from "../UI/ProfileLinkLoader";
|
||||||
|
|
||||||
function ChannelUserList({ presence }) {
|
function ChannelUserList({ presence }) {
|
||||||
if (!presence || presence.length === 0) return (
|
if (!presence || presence.length === 0) return (
|
||||||
<div className="card sidebar">
|
<div className="sidebar">
|
||||||
<div className="channel-list">
|
<div className="channel-list">
|
||||||
<button className="button channel-button"><ProfileLinkLoader /></button>
|
<button className="button channel-button"><ProfileLinkLoader /></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className="card sidebar">
|
<div className="sidebar">
|
||||||
<div className="channel-list">
|
<div className="channel-list">
|
||||||
{ Object.keys(presence).map((userId) => <UserProfileButton key={ userId } user={ presence[userId] } />) }
|
{ Object.keys(presence).map((userId) => <UserProfileButton key={ userId } user={ presence[userId] } />) }
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -28,8 +28,8 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
|
||||||
|
|
||||||
if (channel) {
|
if (channel) {
|
||||||
return (
|
return (
|
||||||
<div className="col-flex-card hidden-overflow">
|
<div className="col-flex hidden-overflow">
|
||||||
<div className="bar-card-accent no-select">
|
<div className="bar-accent no-select">
|
||||||
<ChannelProfile channel={ channel } size="24" />
|
<ChannelProfile channel={ channel } size="24" />
|
||||||
{/*
|
{/*
|
||||||
{ (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }>
|
{ (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }>
|
||||||
|
@ -38,10 +38,10 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
|
||||||
*/}
|
*/}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row-flex-card hidden-overflow">
|
<div className="row-flex hidden-overflow">
|
||||||
<div className="channel-message-panel">
|
<div className="channel-message-panel">
|
||||||
<ChannelMessageView messages={messages}></ChannelMessageView>
|
<ChannelMessageView messages={messages}></ChannelMessageView>
|
||||||
<div className="col-flex-card">
|
<div className="col-flex">
|
||||||
<input className="text-input message-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
|
<input className="text-input message-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,15 +51,15 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<div className="col-flex-card hidden-overflow">
|
<div className="col-flex hidden-overflow">
|
||||||
<div className="bar-card-accent no-select">
|
<div className="bar-accent no-select">
|
||||||
<ProfileLinkLoader />
|
<ProfileLinkLoader />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row-flex-card hidden-overflow">
|
<div className="row-flex hidden-overflow">
|
||||||
<div className="channel-message-panel">
|
<div className="channel-message-panel">
|
||||||
<ChannelMessageView messages={[]}></ChannelMessageView>
|
<ChannelMessageView messages={[]}></ChannelMessageView>
|
||||||
<div className="col-flex-card">
|
<div className="col-flex">
|
||||||
<input className="text-input message-input" type="text" disabled="disabled" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
|
<input className="text-input message-input" type="text" disabled="disabled" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -35,7 +35,10 @@ function App({ user }) {
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/login" component={ Login } />
|
<Route path="/login" component={ Login } />
|
||||||
<Route path="/create" component={ Create } />
|
<Route path="/create" component={ Create } />
|
||||||
<Route path="/channels/:id"
|
<Route path="/channels/:channelId"
|
||||||
|
render={() => <LoggedInMount />}
|
||||||
|
/>
|
||||||
|
<Route path="/user/:userId"
|
||||||
render={() => <LoggedInMount />}
|
render={() => <LoggedInMount />}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -2,15 +2,17 @@ import { useParams } from "react-router-dom";
|
||||||
import Sidebar from "../UI/Sidebar";
|
import Sidebar from "../UI/Sidebar";
|
||||||
import ChannelView from "../Channels/ChannelView";
|
import ChannelView from "../Channels/ChannelView";
|
||||||
import GradientBanner from "../UI/GradientBanner";
|
import GradientBanner from "../UI/GradientBanner";
|
||||||
|
import UserView from "../Users/UserView";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
|
|
||||||
function LoggedInMount({ gradientBannerNotificationText }) {
|
function LoggedInMount({ gradientBannerNotificationText }) {
|
||||||
const { id: channelId } = useParams();
|
const { channelId, userId } = useParams();
|
||||||
return <>
|
return <>
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<div className="col-flex-card">
|
<div className="col-flex">
|
||||||
<GradientBanner text={ gradientBannerNotificationText }/>
|
<GradientBanner text={ gradientBannerNotificationText }/>
|
||||||
{ (channelId) && <ChannelView channelId={ channelId } /> }
|
{ (channelId) && <ChannelView channelId={ channelId } /> }
|
||||||
|
{ (userId) && <UserView userId={ userId } /> }
|
||||||
</div>
|
</div>
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
|
||||||
export default function GradientBanner({ text }) {
|
export default function GradientBanner({ text }) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
return (text !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
|
return (text !== undefined) && <div className="gradient-banner" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
|
||||||
{ text }
|
{ text }
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,33 +0,0 @@
|
||||||
// TODO: This is an actual, horrible mess
|
|
||||||
export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) {
|
|
||||||
let picture;
|
|
||||||
|
|
||||||
if (size !== "0") {
|
|
||||||
// TODO: Make a debug error message for then the size does not exist
|
|
||||||
const pictureClass = `profile-picture profile-picture-${size}`;
|
|
||||||
|
|
||||||
if (object.picture) {
|
|
||||||
// Not actually implemented on the server and can be unsafe, this is just futureproofing
|
|
||||||
picture = <img className={ pictureClass } src={ object.picture } alt="Profile"></img>
|
|
||||||
} else {
|
|
||||||
picture = <div className={`profile-picture default-${type}`} alt="Profile">
|
|
||||||
<span className={`default-${type}-styled-text`}>{ (type === "user") ? "@" : "#" }</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
picture = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
let classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
|
|
||||||
if (type === "user") classes += " darker-text";
|
|
||||||
const title = type === 'channel' ? object.title : object.username;
|
|
||||||
const bottomInfo = offset ? children : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={ classes }>
|
|
||||||
{ picture }
|
|
||||||
<span className={ hideName ? "profile-username hidden" : "profile-username" }>{ title }</span>
|
|
||||||
{ bottomInfo }
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
|
@ -7,7 +7,7 @@ import { connect } from 'react-redux';
|
||||||
function Sidebar({ user }) {
|
function Sidebar({ user }) {
|
||||||
return (
|
return (
|
||||||
<div className="sidebar">
|
<div className="sidebar">
|
||||||
<div className="bar-card" style={{
|
<div className="bar" style={{
|
||||||
color: "var(--darker-text-color)"
|
color: "var(--darker-text-color)"
|
||||||
}}>
|
}}>
|
||||||
{ user && <UserProfileLink user={ user } /> }
|
{ user && <UserProfileLink user={ user } /> }
|
||||||
|
|
|
@ -1,8 +1,17 @@
|
||||||
import ProfileLink from '../UI/ProfileLink'
|
export default function UserProfileLink({ user, size }) {
|
||||||
|
let picture = null;
|
||||||
|
|
||||||
// TODO: Stop using this component and just use the ProfileLink component
|
if (size !== "0") {
|
||||||
export default function UserProfile({ user, size, subtext, hideName }) {
|
if (user.picture) picture = <img className={ `profile-picture profile-picture-${size}` } src={ user.picture } alt="Profile"></img>
|
||||||
return (
|
else picture = <div className="profile-picture default-user" alt="Profile">
|
||||||
<ProfileLink hideName={ hideName } object={ user } size={ size } type="user" offset={ subtext !== undefined } children={ (subtext) && (<span>{ subtext }</span>) } />
|
<span className="default-user-styled-text">@</span>
|
||||||
);
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="profile-link">
|
||||||
|
{ picture }
|
||||||
|
<span className="profile-username">{ user.username }</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
43
bfrontend/src/Components/Users/UserView.js
Normal file
43
bfrontend/src/Components/Users/UserView.js
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { PersonIcon, ShieldCheckIcon } from "@primer/octicons-react";
|
||||||
|
import APIRequest from "../../API/APIRequest";
|
||||||
|
import UserProfile from "./UserProfileLink";
|
||||||
|
import ProfileLinkLoader from "../UI/ProfileLinkLoader";
|
||||||
|
|
||||||
|
export default function UserView({ userId }) {
|
||||||
|
const [userObject, setUserObject] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
APIRequest.authenticated(`/api/v1/users/user/${userId}/info`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
}).then(({ isOK, json }) => {
|
||||||
|
if (isOK) {
|
||||||
|
setUserObject(json.user);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [userId]);
|
||||||
|
|
||||||
|
let view = null;
|
||||||
|
if (userObject) {
|
||||||
|
view = <>
|
||||||
|
<UserProfile user={ userObject } size="32" />
|
||||||
|
{(userObject.role === "ADMIN") && <ShieldCheckIcon size={24} className="profile-badge" />}
|
||||||
|
{(userObject.role === "USER") && <PersonIcon size={24} className="profile-badge" />}
|
||||||
|
</>
|
||||||
|
} else {
|
||||||
|
view = <>
|
||||||
|
<ProfileLinkLoader />
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="center grow">
|
||||||
|
<div className="user-view center">
|
||||||
|
{view}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,5 +1,4 @@
|
||||||
.button {
|
.button {
|
||||||
@include card;
|
|
||||||
|
|
||||||
background-color: var(--button-color);
|
background-color: var(--button-color);
|
||||||
color: var(--default-text-color);
|
color: var(--default-text-color);
|
||||||
|
|
|
@ -1,16 +1,4 @@
|
||||||
@mixin card {
|
.bar {
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
border-radius: var(--default-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
@include card;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-card {
|
|
||||||
@include card;
|
|
||||||
@extend .elevated;
|
@extend .elevated;
|
||||||
|
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
@ -22,39 +10,33 @@
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
||||||
&-accent {
|
&-accent {
|
||||||
@extend .bar-card;
|
@extend .bar;
|
||||||
|
|
||||||
background-color: var(--channel-top-bar-color-accent);
|
background-color: var(--channel-top-bar-color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-list-card {
|
.message-list {
|
||||||
@include card;
|
|
||||||
@include fancy-scrollbar-firefox;
|
@include fancy-scrollbar-firefox;
|
||||||
|
|
||||||
background-color: var(--channel-message-list-background-color);
|
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-flex-card {
|
.col-flex {
|
||||||
@include card;
|
|
||||||
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-flex-card {
|
.row-flex {
|
||||||
@include card;
|
|
||||||
|
|
||||||
flex-grow: 10;
|
flex-grow: 10;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-banner-card {
|
.gradient-banner {
|
||||||
background: var(--default-user-background);
|
background: var(--default-user-background);
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
@ -65,3 +47,16 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.elevated-modal {
|
||||||
|
@extend .elevated-2;
|
||||||
|
|
||||||
|
background-color: var(--accent-color-dark);
|
||||||
|
padding: 16px;
|
||||||
|
margin: 6px;
|
||||||
|
border-radius: var(--elevated-modal-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-view {
|
||||||
|
@extend .elevated-modal;
|
||||||
|
}
|
|
@ -2,7 +2,6 @@
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: var(--background-color);
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -10,7 +9,6 @@
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@include fancy-scrollbar-firefox;
|
@include fancy-scrollbar-firefox;
|
||||||
@include card;
|
|
||||||
@extend .no-select;
|
@extend .no-select;
|
||||||
|
|
||||||
background-color: var(--sidebar-background-color);
|
background-color: var(--sidebar-background-color);
|
||||||
|
@ -32,10 +30,9 @@
|
||||||
|
|
||||||
.channel-message-panel {
|
.channel-message-panel {
|
||||||
@extend .hidden-overflow;
|
@extend .hidden-overflow;
|
||||||
@extend .col-flex-card;
|
@extend .col-flex;
|
||||||
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
background-color: var(--channel-view-container-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden-overflow {
|
.hidden-overflow {
|
||||||
|
@ -54,3 +51,17 @@
|
||||||
height: 18px;
|
height: 18px;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-badge {
|
||||||
|
margin: 16px;
|
||||||
|
}
|
|
@ -1,12 +1,8 @@
|
||||||
.message {
|
.message {
|
||||||
@include card;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
border-radius: var(--channel-message-border-radius);
|
|
||||||
background-color: var(--channel-message-color);
|
|
||||||
max-width: 150px;
|
max-width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
.profile-picture {
|
.profile-picture {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin: 5px;
|
margin: 6px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin-right: 6px;
|
|
||||||
|
|
||||||
&.default-channel {
|
&.default-channel {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
.text-input {
|
.text-input {
|
||||||
@include card;
|
|
||||||
|
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
.elevated {
|
.elevated {
|
||||||
box-shadow: var(--elevation-box-shadow);
|
box-shadow: var(--elevation-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.elevated-2 {
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.50) 0px 25px 50px -4px;
|
||||||
|
}
|
|
@ -1,9 +1,9 @@
|
||||||
:root {
|
:root {
|
||||||
--background-color: hsl(230, 12%, 15%);
|
--background-color: hsl(230, 12%, 15%);
|
||||||
--card-accent-color: hsl(230, 12%, 18%);
|
--accent-color: hsl(230, 12%, 18%);
|
||||||
--card-accent-color-dark: hsl(230, 12%, 12%);
|
--accent-color-dark: hsl(230, 12%, 12%);
|
||||||
--default-text-color: hsl(0, 0%, 79%);
|
--default-text-color: hsl(0, 0%, 80%);
|
||||||
--darker-text-color: hsl(0, 0%, 53%);
|
--darker-text-color: hsl(0, 0%, 65%);
|
||||||
|
|
||||||
--default-user-background: linear-gradient(
|
--default-user-background: linear-gradient(
|
||||||
to bottom right,
|
to bottom right,
|
||||||
|
@ -18,29 +18,23 @@
|
||||||
hsl(225, 35%, 40%)
|
hsl(225, 35%, 40%)
|
||||||
);
|
);
|
||||||
|
|
||||||
--default-scrollbar-color: var(--card-accent-color);
|
--default-scrollbar-color: var(--accent-color);
|
||||||
--default-scrollbar-color-track: var(--background-color);
|
--default-scrollbar-color-track: var(--background-color);
|
||||||
--default-scrollbar-width: 1px;
|
--default-scrollbar-width: 1px;
|
||||||
|
|
||||||
--channel-top-bar-color-accent: var(--background-color);
|
--channel-top-bar-color-accent: var(--background-color);
|
||||||
--channel-top-bar-color: var(--background-color);
|
--channel-top-bar-color: var(--background-color);
|
||||||
--elevation-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
|
|
||||||
--message-box-color: var(--card-accent-color);
|
|
||||||
|
|
||||||
--sidebar-background-color: hsl(230, 12%, 12%);
|
--sidebar-background-color: hsl(230, 12%, 12%);
|
||||||
|
--elevation-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
|
||||||
|
--message-box-color: var(--accent-color);
|
||||||
|
|
||||||
--channel-message-list-background-color: var(--accent-color-dark);
|
--button-color: var(--accent-color-dark);
|
||||||
--channel-message-color: var(--accent-color-dark);
|
--button-hover-background-color: var(--accent-color);
|
||||||
--channel-view-container-color: var(--accent-color-dark);
|
--button-selected-background-color: var(--accent-color);
|
||||||
|
|
||||||
--button-color: var(--card-accent-color-dark);
|
|
||||||
--button-hover-background-color: var(--card-accent-color);
|
|
||||||
--button-selected-background-color: var(--card-accent-color);
|
|
||||||
--channel-button-background: none;
|
--channel-button-background: none;
|
||||||
|
|
||||||
--default-border-radius: 0px;
|
|
||||||
--default-button-border-radius: 0px;
|
--default-button-border-radius: 0px;
|
||||||
--channel-message-border-radius: 0px;
|
|
||||||
--channel-button-border-radius: 10px;
|
--channel-button-border-radius: 10px;
|
||||||
--message-box-border-radius: 10px;
|
--message-box-border-radius: 10px;
|
||||||
|
--elevated-modal-border-radius: 10px;
|
||||||
}
|
}
|
Loading…
Reference in a new issue