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

overhaul colors and general ui elements

Browse source
This commit is contained in:
hippoz 2021-08-21 03:36:58 +03:00
parent 63fc9d7d50
commit e6f78f8ec9
No known key found for this signature in database
GPG key ID: 7C52899193467641
6 changed files with 19 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
bfrontend/src/API/Gateway/GatewayConnection.js
View file

@ -3,7 +3,6 @@ import logger from "../../Util/Logger";
const { log: logGateway } = logger([ "Gateway" ]); const { log: logGateway } = logger([ "Gateway" ]);
const { log: logRtc } = logger([ "Gateway", "RTC" ]); const { log: logRtc } = logger([ "Gateway", "RTC" ]);
const opcodes = { const opcodes = {
0: { name: "HELLO", data: "JSON" }, 0: { name: "HELLO", data: "JSON" },
1: { name: "YOO", data: "JSON" }, 1: { name: "YOO", data: "JSON" },

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

@ -14,11 +14,10 @@
&-channel { &-channel {
@extend .button; @extend .button;
background: var(--channel-button-background);
border-radius: var(--channel-button-border-radius); border-radius: var(--channel-button-border-radius);
width: 200px; width: 200px;
min-height: 40px; min-height: 40px;
margin: 4px;
padding: 2px;
color: var(--darker-text-color); color: var(--darker-text-color);
} }

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

@ -5,8 +5,6 @@
border-radius: var(--default-border-radius); border-radius: var(--default-border-radius);
} }
// hh
.card { .card {
@include card; @include card;
} }
@ -14,10 +12,9 @@
.bar-card { .bar-card {
@include card; @include card;
background-color: var(--channel-top-bar-color);
height: 32px; height: 32px;
padding: 8px; padding: 12px;
border-bottom: var(--bar-card-border-bottom); box-shadow: var(--bar-card-box-shadow);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: left; justify-content: left;

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

@ -12,13 +12,12 @@
@include fancy-scrollbar-firefox; @include fancy-scrollbar-firefox;
@include card; @include card;
background-color: var(--channel-list-background-color); background-color: var(--sidebar-background-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
min-width: 235px;
} }
.channel-list { .channel-list {
@ -42,6 +41,7 @@
.channel-message-panel { .channel-message-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 15px;
background-color: var(--channel-view-container-color); background-color: var(--channel-view-container-color);
} }

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

@ -3,8 +3,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 3px; margin: 2px;
margin-left: 1rem;
padding: 1px; padding: 1px;
border-radius: var(--channel-message-border-radius); border-radius: var(--channel-message-border-radius);
background-color: var(--channel-message-color); background-color: var(--channel-message-color);

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

@ -1,9 +1,9 @@
:root { :root {
--background-color: hsl(0, 0%, 1%); --background-color: hsl(230, 12%, 15%);
--default-text-color: hsl(0, 0%, 79%); --default-text-color: hsl(0, 0%, 79%);
--darker-text-color: hsl(0, 0%, 53%); --darker-text-color: hsl(0, 0%, 53%);
--card-accent-color: hsl(0, 0%, 10%); --card-accent-color: hsl(230, 12%, 18%);
--card-accent-color-dark: hsl(0, 0%, 5%); --card-accent-color-dark: hsl(230, 12%, 12%);
--default-scrollbar-color: var(--background-color); --default-scrollbar-color: var(--background-color);
@ -12,38 +12,34 @@
--default-user-background: linear-gradient( --default-user-background: linear-gradient(
to bottom right, to bottom right,
hsl(275, 55%, 40%), hsl(275, 35%, 40%),
hsl(325, 55%, 40%), hsl(325, 35%, 40%),
hsl(350, 55%, 40%) hsl(350, 35%, 40%)
); );
--default-channel-background: linear-gradient( --default-channel-background: linear-gradient(
to top right, to top right,
hsl(150, 55%, 40%), hsl(150, 35%, 40%),
hsl(200, 55%, 40%), hsl(200, 35%, 40%),
hsl(225, 55%, 40%) hsl(225, 35%, 40%)
); );
--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);
--bar-card-border-bottom: solid 1px #1d1d1d; --bar-card-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(--card-accent-color);
--channel-top-bar-border-color: var(--accent-color-dark);
--channel-list-background-color: var(--background-color); --sidebar-background-color: hsl(230, 12%, 12%);
--channel-message-list-background-color: var(--accent-color-dark); --channel-message-list-background-color: var(--accent-color-dark);
--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(--background-color); --button-color: var(--background-color);
--button-hover-color: var(--focus-accent-color-deep); --channel-button-background: none;
--button-selected-color: var(--focus-accent-color);
--default-transition-duration: 50ms;
--default-border-radius: 0px; --default-border-radius: 0px;
--default-button-border-radius: 0px; --default-button-border-radius: 0px;
--channel-message-border-radius: 0px; --channel-message-border-radius: 0px;
--bar-cards-border-radius: 0px;
--channel-button-border-radius: 10px; --channel-button-border-radius: 10px;
--message-box-border-radius: 10px; --message-box-border-radius: 10px;
} }