From 8b5323047da4903a9027288519a0df12b01621c2 Mon Sep 17 00:00:00 2001
From: hippoz <paperplanelive@gmail.com>
Date: Mon, 30 Aug 2021 18:08:19 +0300
Subject: [PATCH] remove confusing "card" notation from css classes and just
 use normal names

---
 bfrontend/src/Components/Auth/Create.js       |  4 +--
 bfrontend/src/Components/Auth/Login.js        |  2 +-
 .../Components/Channels/ChannelMessageView.js |  2 +-
 .../Components/Channels/ChannelUserList.js    |  4 +--
 .../src/Components/Channels/ChannelView.js    | 16 +++++-----
 .../src/Components/Main/LoggedInMount.js      |  2 +-
 bfrontend/src/Components/UI/GradientBanner.js |  2 +-
 bfrontend/src/Components/UI/Sidebar.js        |  2 +-
 bfrontend/src/Styles/Components/Button.scss   |  1 -
 bfrontend/src/Styles/Components/Card.scss     | 32 ++++---------------
 .../src/Styles/Components/Containers.scss     |  4 +--
 bfrontend/src/Styles/Components/Message.scss  |  1 -
 bfrontend/src/Styles/Components/Textbox.scss  |  2 --
 bfrontend/src/Styles/root.scss                | 14 ++++----
 14 files changed, 32 insertions(+), 56 deletions(-)

diff --git a/bfrontend/src/Components/Auth/Create.js b/bfrontend/src/Components/Auth/Create.js
index 75a12e2..5953600 100644
--- a/bfrontend/src/Components/Auth/Create.js
+++ b/bfrontend/src/Components/Auth/Create.js
@@ -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 />
diff --git a/bfrontend/src/Components/Auth/Login.js b/bfrontend/src/Components/Auth/Login.js
index 2452df5..ca1fb20 100644
--- a/bfrontend/src/Components/Auth/Login.js
+++ b/bfrontend/src/Components/Auth/Login.js
@@ -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 />
diff --git a/bfrontend/src/Components/Channels/ChannelMessageView.js b/bfrontend/src/Components/Channels/ChannelMessageView.js
index d4c3a87..2d3383a 100644
--- a/bfrontend/src/Components/Channels/ChannelMessageView.js
+++ b/bfrontend/src/Components/Channels/ChannelMessageView.js
@@ -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>;
diff --git a/bfrontend/src/Components/Channels/ChannelUserList.js b/bfrontend/src/Components/Channels/ChannelUserList.js
index f5267f6..9d245e0 100644
--- a/bfrontend/src/Components/Channels/ChannelUserList.js
+++ b/bfrontend/src/Components/Channels/ChannelUserList.js
@@ -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>
diff --git a/bfrontend/src/Components/Channels/ChannelView.js b/bfrontend/src/Components/Channels/ChannelView.js
index fa26b5c..b609352 100644
--- a/bfrontend/src/Components/Channels/ChannelView.js
+++ b/bfrontend/src/Components/Channels/ChannelView.js
@@ -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>
diff --git a/bfrontend/src/Components/Main/LoggedInMount.js b/bfrontend/src/Components/Main/LoggedInMount.js
index 29dac24..4a54f05 100644
--- a/bfrontend/src/Components/Main/LoggedInMount.js
+++ b/bfrontend/src/Components/Main/LoggedInMount.js
@@ -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 } /> }
diff --git a/bfrontend/src/Components/UI/GradientBanner.js b/bfrontend/src/Components/UI/GradientBanner.js
index a7f2cbe..ef9a3ed 100644
--- a/bfrontend/src/Components/UI/GradientBanner.js
+++ b/bfrontend/src/Components/UI/GradientBanner.js
@@ -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>;
 }
diff --git a/bfrontend/src/Components/UI/Sidebar.js b/bfrontend/src/Components/UI/Sidebar.js
index 09351d2..02e7996 100644
--- a/bfrontend/src/Components/UI/Sidebar.js
+++ b/bfrontend/src/Components/UI/Sidebar.js
@@ -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 } /> }
diff --git a/bfrontend/src/Styles/Components/Button.scss b/bfrontend/src/Styles/Components/Button.scss
index b251997..e519748 100644
--- a/bfrontend/src/Styles/Components/Button.scss
+++ b/bfrontend/src/Styles/Components/Button.scss
@@ -1,5 +1,4 @@
 .button {
-    @include card;
 
     background-color: var(--button-color);
     color: var(--default-text-color);
diff --git a/bfrontend/src/Styles/Components/Card.scss b/bfrontend/src/Styles/Components/Card.scss
index d0da9f2..557acec 100644
--- a/bfrontend/src/Styles/Components/Card.scss
+++ b/bfrontend/src/Styles/Components/Card.scss
@@ -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);
diff --git a/bfrontend/src/Styles/Components/Containers.scss b/bfrontend/src/Styles/Components/Containers.scss
index 6bb903b..e16be39 100644
--- a/bfrontend/src/Styles/Components/Containers.scss
+++ b/bfrontend/src/Styles/Components/Containers.scss
@@ -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 {
diff --git a/bfrontend/src/Styles/Components/Message.scss b/bfrontend/src/Styles/Components/Message.scss
index 7e35711..c47695e 100644
--- a/bfrontend/src/Styles/Components/Message.scss
+++ b/bfrontend/src/Styles/Components/Message.scss
@@ -1,5 +1,4 @@
 .message {
-    @include card;
 
     display: flex;
     flex-direction: row;
diff --git a/bfrontend/src/Styles/Components/Textbox.scss b/bfrontend/src/Styles/Components/Textbox.scss
index 2e928dc..ea441d1 100644
--- a/bfrontend/src/Styles/Components/Textbox.scss
+++ b/bfrontend/src/Styles/Components/Textbox.scss
@@ -1,6 +1,4 @@
 .text-input {
-    @include card;
-
     margin: 1px;
     padding: 5px;
     border: none;
diff --git a/bfrontend/src/Styles/root.scss b/bfrontend/src/Styles/root.scss
index ae10af9..34c958d 100644
--- a/bfrontend/src/Styles/root.scss
+++ b/bfrontend/src/Styles/root.scss
@@ -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;