oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues 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
This commit is contained in:
William Grant 2022-08-23 15:47:45 +10:00
parent 7692da8e58
commit 07c00463f1
7 changed files with 18 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
stylesheets/_modal.scss
View file

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

6
stylesheets/_session.scss
View file

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

1
stylesheets/_session_constants.scss
View file

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

6
stylesheets/_session_password.scss
View file

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

8
stylesheets/_session_slider.scss
View file

@ -58,11 +58,11 @@
}
.rc-slider-handle:focus {
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;
}
.rc-slider-handle-click-focused:focus {
border-color: rgba($session-color-white, 0.2);
border-color: rgba(white, 0.2);
box-shadow: unset;
}
.rc-slider-handle:hover {
@ -70,7 +70,7 @@
}
.rc-slider-handle:active {
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: grabbing;
}
@ -125,7 +125,7 @@
margin-right: -4px;
}
.rc-slider-disabled {
background-color: #e9e9e9;
background-color: var(--color-lighter-gray-color);
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {

1
stylesheets/_variables.scss
View file

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

14
ts/themes/SessionTheme.tsx
View file

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