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 (
<div id="login-container" className="card">
<div id="login-container">
<h1>One more thing!</h1>
<p>You need a special code to sign up here!</p>
<label htmlFor="specialcode">Special Code</label>
@ -78,7 +78,7 @@ export default function Create() {
);
return (
<div id="login-container" className="card">
<div id="login-container">
<h1>Create an account</h1>
<label htmlFor="username">Username</label>
<br />

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

@ -49,7 +49,7 @@ export default function Login() {
}
return (
<div id="login-container" className="card">
<div id="login-container">
<h1>Log in</h1>
<label htmlFor="username">Username</label>
<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>
</div>);
return <div className="message-list-card">
return <div className="message-list">
{ messagesView }
<div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
</div>;

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

@ -3,14 +3,14 @@ import ProfileLinkLoader from "../UI/ProfileLinkLoader";
function ChannelUserList({ presence }) {
if (!presence || presence.length === 0) return (
<div className="card sidebar">
<div className="sidebar">
<div className="channel-list">
<button className="button channel-button"><ProfileLinkLoader /></button>
</div>
</div>
);
return (
<div className="card sidebar">
<div className="sidebar">
<div className="channel-list">
{ Object.keys(presence).map((userId) => <UserProfileButton key={ userId } user={ presence[userId] } />) }
</div>

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

@ -28,8 +28,8 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
if (channel) {
return (
<div className="col-flex-card hidden-overflow">
<div className="bar-card-accent no-select">
<div className="col-flex hidden-overflow">
<div className="bar-accent no-select">
<ChannelProfile channel={ channel } size="24" />
{/*
{ (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }>
@ -38,10 +38,10 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
*/}
</div>
<div className="row-flex-card hidden-overflow">
<div className="row-flex hidden-overflow">
<div className="channel-message-panel">
<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>
</div>
</div>
@ -51,15 +51,15 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
);
} else {
return (
<div className="col-flex-card hidden-overflow">
<div className="bar-card-accent no-select">
<div className="col-flex hidden-overflow">
<div className="bar-accent no-select">
<ProfileLinkLoader />
</div>
<div className="row-flex-card hidden-overflow">
<div className="row-flex hidden-overflow">
<div className="channel-message-panel">
<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>
</div>
</div>

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

@ -9,7 +9,7 @@ function LoggedInMount({ gradientBannerNotificationText }) {
const { channelId, userId } = useParams();
return <>
<Sidebar />
<div className="col-flex-card">
<div className="col-flex">
<GradientBanner text={ gradientBannerNotificationText }/>
{ (channelId) && <ChannelView channelId={ channelId } /> }
{ (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 }) {
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 }
</div>;
}

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

@ -7,7 +7,7 @@ import { connect } from 'react-redux';
function Sidebar({ user }) {
return (
<div className="sidebar">
<div className="bar-card" style={{
<div className="bar" style={{
color: "var(--darker-text-color)"
}}>
{ user && <UserProfileLink user={ user } /> }

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

@ -1,5 +1,4 @@
.button {
@include card;
background-color: var(--button-color);
color: var(--default-text-color);

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

@ -1,16 +1,4 @@
@mixin card {
padding: 0px;
margin: 0px;
background-color: rgba(0, 0, 0, 0);
border-radius: var(--default-border-radius);
}
.card {
@include card;
}
.bar-card {
@include card;
.bar {
@extend .elevated;
height: 32px;
@ -22,39 +10,33 @@
z-index: 10;
&-accent {
@extend .bar-card;
@extend .bar;
background-color: var(--channel-top-bar-color-accent);
}
}
.message-list-card {
@include card;
.message-list {
@include fancy-scrollbar-firefox;
background-color: var(--channel-message-list-background-color);
flex-basis: 100%;
border-radius: 0px;
overflow: auto;
}
.col-flex-card {
@include card;
.col-flex {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.row-flex-card {
@include card;
.row-flex {
flex-grow: 10;
display: flex;
flex-direction: row;
}
.gradient-banner-card {
.gradient-banner {
background: var(--default-user-background);
height: 1.5rem;
padding: 10px;
@ -69,7 +51,7 @@
.elevated-modal {
@extend .elevated-2;
background-color: var(--card-accent-color-dark);
background-color: var(--accent-color-dark);
padding: 16px;
margin: 6px;
border-radius: var(--elevated-modal-border-radius);

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

@ -10,7 +10,6 @@
.sidebar {
@include fancy-scrollbar-firefox;
@include card;
@extend .no-select;
background-color: var(--sidebar-background-color);
@ -32,10 +31,9 @@
.channel-message-panel {
@extend .hidden-overflow;
@extend .col-flex-card;
@extend .col-flex;
padding: 15px;
background-color: var(--channel-view-container-color);
}
.hidden-overflow {

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

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

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

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

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

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