keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

reafctors: converted sass colors in _modal.scss

Browse Source 
updated session white to use css white everywhere and removed unused classes
pull/2521/head
William Grant 3 years ago
parent 7692da8e58
commit 07c00463f1
7 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File

6
stylesheets/_modal.scss
Unescape Escape View File

@ -14,7 +14,7 @@
max-width: 350px; max-width: 350px;
margin: 100px auto; margin: 100px auto;
padding: 1em; padding: 1em;
background-color: $color-white; background-color: white;
border-radius: $border-radius; border-radius: $border-radius;
overflow: auto; overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
@ -134,7 +134,7 @@
border: 0; border: 0;
outline: none; outline: none;
border-radius: 4px; border-radius: 4px;
background-color: $color-loki-light-gray; background-color: var(--color-lighter-gray-color);
&:focus { &:focus {
outline: none; outline: none;
@ -191,7 +191,7 @@
height: 30px; height: 30px;
width: 30px; width: 30px;
border-radius: 50%; border-radius: 50%;
background-color: $session-color-white; background-color: white;
transition: var(--default-duration); transition: var(--default-duration);
&:hover { &:hover {

6
stylesheets/_session.scss
Unescape Escape View File

@ -226,7 +226,7 @@ textarea {
} }
.session-label { .session-label {
color: $session-color-white; color: white;
padding: var(--margins-sm); padding: var(--margins-sm);
width: 100%; width: 100%;
border-radius: 2px; border-radius: 2px;
@ -714,7 +714,7 @@ label {
height: 135px; height: 135px;
border-radius: 3px; border-radius: 3px;
padding: var(--margins-xs); padding: var(--margins-xs);
background-color: $session-color-white; background-color: white;
} }
} }
@ -835,7 +835,7 @@ label {
width: $session-modal-size-sm; width: $session-modal-size-sm;
height: $session-modal-size-sm; height: $session-modal-size-sm;
padding: var(--margins-xs); padding: var(--margins-xs);
background-color: $session-color-white; background-color: white;
border-radius: 3px; border-radius: 3px;
} }

1
stylesheets/_session_constants.scss
Unescape Escape View File

@ -115,7 +115,6 @@ $session-shade-16: #979797;
$session-shade-17: #a0a0a0; $session-shade-17: #a0a0a0;
$session-shade-18: #141414; $session-shade-18: #141414;
$session-color-white: #fff;
$session-color-light-grey: #a0a0a0; $session-color-light-grey: #a0a0a0;
$session-color-dark-grey: #353535; $session-color-dark-grey: #353535;
$session-color-black: #000; $session-color-black: #000;

6
stylesheets/_session_password.scss
Unescape Escape View File

@ -32,7 +32,7 @@
&-error-section { &-error-section {
width: 100%; width: 100%;
color: $session-color-white; color: white;
margin: -var(--margins-sm) 0px 2 * $session-margin-lg 0px; margin: -var(--margins-sm) 0px 2 * $session-margin-lg 0px;
.session-label { .session-label {
@ -46,7 +46,7 @@
&-container { &-container {
font-family: $session-font-default; font-family: $session-font-default;
color: $session-color-white; color: white;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -67,7 +67,7 @@
align-items: center; align-items: center;
h1 { h1 {
color: $session-color-white; color: white;
} }
svg { svg {
margin-inline-end: var(--margins-lg); margin-inline-end: var(--margins-lg);

8
stylesheets/_session_slider.scss
Unescape Escape View File

@ -58,11 +58,11 @@
} }
.rc-slider-handle:focus { .rc-slider-handle:focus {
border-color: var(--color-session-green-color); border-color: var(--color-session-green-color);
box-shadow: 0 0 0 5px rgba($session-color-white, 0.2); box-shadow: 0 0 0 5px rgba(white, 0.2);
outline: none; outline: none;
} }
.rc-slider-handle-click-focused:focus { .rc-slider-handle-click-focused:focus {
border-color: rgba($session-color-white, 0.2); border-color: rgba(white, 0.2);
box-shadow: unset; box-shadow: unset;
} }
.rc-slider-handle:hover { .rc-slider-handle:hover {
@ -70,7 +70,7 @@
} }
.rc-slider-handle:active { .rc-slider-handle:active {
border-color: var(--color-session-green-color); border-color: var(--color-session-green-color);
box-shadow: 0 0 5px rgba($session-color-white, 0.2); box-shadow: 0 0 5px rgba(white, 0.2);
cursor: -webkit-grabbing; cursor: -webkit-grabbing;
cursor: grabbing; cursor: grabbing;
} }
@ -125,7 +125,7 @@
margin-right: -4px; margin-right: -4px;
} }
.rc-slider-disabled { .rc-slider-disabled {
background-color: #e9e9e9; background-color: var(--color-lighter-gray-color);
} }
.rc-slider-disabled .rc-slider-handle, .rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot { .rc-slider-disabled .rc-slider-dot {

1
stylesheets/_variables.scss
Unescape Escape View File

@ -1,5 +1,4 @@
// Loki colors // Loki colors
$color-loki-light-gray: #e9e9e9;
$color-loki-dark-gray: #323232; $color-loki-dark-gray: #323232;
$color-loki-extra-dark-gray: #101010; $color-loki-extra-dark-gray: #101010;
$color-loki-green: #3bd110; $color-loki-green: #3bd110;

14
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -16,7 +16,6 @@ const sessionBlack = '#282829';
const avatarBorderColor = '#00000059'; const avatarBorderColor = '#00000059';
// Blacks // Blacks
const blackColor = '#000000';
// Blues // Blues
const lightBlueColor = '#a2d2f4'; const lightBlueColor = '#a2d2f4';
@ -27,6 +26,7 @@ const sessionGreenColor = accentDarkTheme;
// Grays // Grays
const grayColor = '#616161'; const grayColor = '#616161';
const lightGrayColor = '#8b8e91'; const lightGrayColor = '#8b8e91';
const lighterGrayColor = '#e9e9e9';
const lightestGrayColor = '#f3f3f3'; const lightestGrayColor = '#f3f3f3';
// DARK COLORS // DARK COLORS
@ -97,14 +97,12 @@ export const switchHtmlToDarkTheme = () => {
); );
document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack); document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack);
document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor); document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
document.documentElement.style.setProperty( document.documentElement.style.setProperty('--color-light-black-color', `rgba(${black}, 0.2)`);
'--color-light-black-color',
`rgba(${blackColor}, 0.2)`
);
document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor); document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor);
document.documentElement.style.setProperty('--color-gray-color', grayColor); document.documentElement.style.setProperty('--color-gray-color', grayColor);
document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor); document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
document.documentElement.style.setProperty('--color-lighter-gray-color', lighterGrayColor);
document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor); document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);
document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor); document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
@ -256,13 +254,11 @@ export const switchHtmlToLightTheme = () => {
// TODO: This might be wrong. Didn't merge correctly. // TODO: This might be wrong. Didn't merge correctly.
document.documentElement.style.setProperty('--color-sent-message-text', black); document.documentElement.style.setProperty('--color-sent-message-text', black);
document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor); document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
document.documentElement.style.setProperty( document.documentElement.style.setProperty('--color-light-black-color', `rgba(${black}, 0.2)`);
'--color-light-black-color',
`rgba(${blackColor}, 0.2)`
);
document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor); document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor);
document.documentElement.style.setProperty('--color-gray-color', grayColor); document.documentElement.style.setProperty('--color-gray-color', grayColor);
document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor); document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
document.documentElement.style.setProperty('--color-lighter-gray-color', lighterGrayColor);
document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor); document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);
document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor); document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(

Write Preview
Loading…
Cancel
Save