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
Signed by: hippoz
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: logRtc } = logger([ "Gateway", "RTC" ]);
const opcodes = {
0: { name: "HELLO", data: "JSON" },
1: { name: "YOO", data: "JSON" },

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

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

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

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

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

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

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

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

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

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