hippoz/brainlet-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

remove confusing "card" notation from css classes and just use normal names

Browse source
This commit is contained in:
hippoz 2021-08-30 18:08:19 +03:00
parent e43030a57c
commit 8b5323047d
Signed by: hippoz
GPG key ID: 7C52899193467641
14 changed files with 32 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
bfrontend/src/Components/Auth/Create.js
View file

@ -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 />

2
bfrontend/src/Components/Auth/Login.js
View file

@ -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 />

2
bfrontend/src/Components/Channels/ChannelMessageView.js
View file

@ -16,7 +16,7 @@ export default function ChannelMessageView({messages}) {
<span style={{ margin: "12px" }}>No messages yet...</span> <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>;

4
bfrontend/src/Components/Channels/ChannelUserList.js
View file

@ -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>

16
bfrontend/src/Components/Channels/ChannelView.js
View file

@ -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>

2
bfrontend/src/Components/Main/LoggedInMount.js
View file

@ -9,7 +9,7 @@ function LoggedInMount({ gradientBannerNotificationText }) {
const { channelId, userId } = 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 } /> } { (userId) && <UserView userId={ userId } /> }

2
bfrontend/src/Components/UI/GradientBanner.js
View file

@ -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>;
} }

2
bfrontend/src/Components/UI/Sidebar.js
View file

@ -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
bfrontend/src/Styles/Components/Button.scss
View file

@ -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);

32
bfrontend/src/Styles/Components/Card.scss
View file

@ -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;
@ -69,7 +51,7 @@
.elevated-modal { .elevated-modal {
@extend .elevated-2; @extend .elevated-2;
background-color: var(--card-accent-color-dark); background-color: var(--accent-color-dark);
padding: 16px; padding: 16px;
margin: 6px; margin: 6px;
border-radius: var(--elevated-modal-border-radius); border-radius: var(--elevated-modal-border-radius);

4
bfrontend/src/Styles/Components/Containers.scss
View file

@ -10,7 +10,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 +31,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 {

1
bfrontend/src/Styles/Components/Message.scss
View file

@ -1,5 +1,4 @@
.message { .message {
@include card;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
bfrontend/src/Styles/Components/Textbox.scss
View file

@ -1,6 +1,4 @@
.text-input { .text-input {
@include card;
margin: 1px; margin: 1px;
padding: 5px; padding: 5px;
border: none; border: none;

14
bfrontend/src/Styles/root.scss
View file

@ -1,7 +1,7 @@
: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%, 80%); --default-text-color: hsl(0, 0%, 80%);
--darker-text-color: hsl(0, 0%, 65%); --darker-text-color: hsl(0, 0%, 65%);
@ -20,14 +20,14 @@
--elevated-modal-border-radius: 10px; --elevated-modal-border-radius: 10px;
--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); --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); --message-box-color: var(--accent-color);
--sidebar-background-color: hsl(230, 12%, 12%); --sidebar-background-color: hsl(230, 12%, 12%);
@ -35,9 +35,9 @@
--channel-message-color: var(--accent-color-dark); --channel-message-color: var(--accent-color-dark);
--channel-view-container-color: var(--accent-color-dark); --channel-view-container-color: var(--accent-color-dark);
--button-color: var(--card-accent-color-dark); --button-color: var(--accent-color-dark);
--button-hover-background-color: var(--card-accent-color); --button-hover-background-color: var(--accent-color);
--button-selected-background-color: var(--card-accent-color); --button-selected-background-color: var(--accent-color);
--channel-button-background: none; --channel-button-background: none;
--default-border-radius: 0px; --default-border-radius: 0px;