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

refactor: converted sass colors for global.scss and other related sasss files

Browse Source 
removed unused grey colors
pull/2521/head
William Grant 3 years ago
parent 407e9fa7da
commit b4df5148ee
8 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File

18
stylesheets/_global.scss
Unescape Escape View File

@ -28,7 +28,7 @@ body {
border: solid 2px var(--color-text-opposite); border: solid 2px var(--color-text-opposite);
&:hover { &:hover {
background: $color-light-45; background: var(--color-light-gray-color);
} }
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -73,12 +73,12 @@ button.grey {
margin: 1em auto; margin: 1em auto;
padding: 1em; padding: 1em;
font-family: inherit; font-family: inherit;
color: $grey; color: var(--color-gray-color);
background: $grey_l; background: var(--color-lightest-gray-color);
box-shadow: 0 0 10px -5px rgba($grey, 0.5); box-shadow: 0 0 10px -5px rgba(var(--color-gray-color), 0.5);
&:hover { &:hover {
box-shadow: 0 0 10px -3px rgba($grey, 0.7); box-shadow: 0 0 10px -3px rgba(var(--color-gray-color), 0.7);
} }
&[disabled='disabled'] { &[disabled='disabled'] {
@ -119,7 +119,7 @@ a {
z-index: 100; z-index: 100;
// what's the right color? // what's the right color?
background-color: $blue_l; background-color: var(--color-light-blue-color);
color: black; color: black;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
@ -166,7 +166,7 @@ $loading-height: 16px;
width: $loading-height; width: $loading-height;
border-radius: 2 * $loading-height; border-radius: 2 * $loading-height;
border: solid 3px; border: solid 3px;
border-color: $blue_l $blue_l $grey_l $grey_l !important; border-color: var(--color-light-blue-color) var(--color-light-blue-color) var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
animation: rotate 1s linear infinite; animation: rotate 1s linear infinite;
} }
@ -185,7 +185,7 @@ $loading-height: 16px;
width: 22px; width: 22px;
height: 22px; height: 22px;
padding: 3px; padding: 3px;
background: $grey; background: var(--color-gray-color);
&:before { &:before {
content: ''; content: '';
@ -238,7 +238,7 @@ $loading-height: 16px;
.dot { .dot {
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 3px solid $color-white; border: 3px solid white;
border-radius: 50%; border-radius: 50%;
float: left; float: left;
margin: 0 6px; margin: 0 6px;

2
stylesheets/_index.scss
Unescape Escape View File

@ -34,7 +34,7 @@
.message { .message {
font-style: italic; font-style: italic;
color: $grey; color: var(--color-gray-color);
font-size: 12px; font-size: 12px;
margin-bottom: 16px; margin-bottom: 16px;
} }

2
stylesheets/_lightbox.scss
Unescape Escape View File

@ -33,7 +33,7 @@
} }
&:hover { &:hover {
background: $grey; background: var(--color-gray-color);
} }
&.save { &.save {

2
stylesheets/_modules.scss
Unescape Escape View File

@ -615,7 +615,7 @@
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
font-size: 28px; font-size: 28px;
color: $color-light-45; color: var(--color-light-gray-color);
} }
// Module: Conversation List Item // Module: Conversation List Item

2
stylesheets/_quote.scss
Unescape Escape View File

@ -161,7 +161,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
@include color-svg('../images/x.svg', $grey); @include color-svg('../images/x.svg', var(--color-gray-color));
} }
.module-quote__icon-container { .module-quote__icon-container {

12
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -39,12 +39,12 @@
button.grey { button.grey {
border: solid 1px #ccc; border: solid 1px #ccc;
color: $grey; color: var(--color-gray-color);
background: $grey_l; background: var(--color-lightest-gray-color);
box-shadow: 0 0 10px -5px rgba($grey, 0.5); box-shadow: 0 0 10px -5px rgba(var(--color-gray-color), 0.5);
&:hover { &:hover {
box-shadow: 0 0 10px -3px rgba($grey, 0.7); box-shadow: 0 0 10px -3px rgba(var(--color-gray-color), 0.7);
} }
} }
@ -52,7 +52,7 @@
position: relative; position: relative;
&::before { &::before {
border: solid 3px; border: solid 3px;
border-color: $blue_l $blue_l $grey_l $grey_l !important; border-color: var(--color-light-blue-color) var(--color-light-blue-color) var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
} }
} }
@ -192,7 +192,7 @@
} }
.module-contact-detail__additional-contact__type { .module-contact-detail__additional-contact__type {
color: $color-light-45; color: var(--color-light-gray-color);
} }
// Module: Contact List Item // Module: Contact List Item

13
stylesheets/_variables.scss
Unescape Escape View File

@ -7,14 +7,11 @@ $color-loki-green-dark: #32b10e;
$color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%); $color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%);
$color-white: #ffffff; $color-white: #ffffff;
$color-gray-02: #f8f9f9;
$color-gray-05: #eeefef; $color-gray-05: #eeefef;
$color-gray-15: #d5d6d6;
$color-gray-25: #bbbdbe; $color-gray-25: #bbbdbe;
$color-gray-45: #898a8c; $color-gray-45: #898a8c;
$color-gray-60: #6b6d70; $color-gray-60: #6b6d70;
$color-gray-75: #3d3e44; $color-gray-75: #3d3e44;
$color-gray-85: #23252a;
$color-gray-90: #17191d; $color-gray-90: #17191d;
$color-gray-95: #0f1012; $color-gray-95: #0f1012;
$color-black: #000000; $color-black: #000000;
@ -32,7 +29,6 @@ $color-light-02: #f9fafa;
$color-light-10: #eeefef; $color-light-10: #eeefef;
$color-light-20: #c1c5cd; $color-light-20: #c1c5cd;
$color-light-35: #a4a6a9; $color-light-35: #a4a6a9;
$color-light-45: #8b8e91;
$color-light-60: #62656a; $color-light-60: #62656a;
$color-light-90: #070c14; $color-light-90: #070c14;
@ -57,16 +53,7 @@ $color-black-06: rgba($color-black, 0.6);
// Old colors // Old colors
$blue_l: #a2d2f4;
$blue: #2090ea; $blue: #2090ea;
$grey_l: #f3f3f3;
$grey_l1: #bdbdbd;
$grey_l1_5: #e6e6e6;
$grey_l2: #d9d9d9; // ~ Equivalent to darken($grey_l, 10%), unreliably compiles
$grey_l3: darken($grey_l, 20%);
$grey_l4: darken($grey_l, 40%);
$grey: #616161;
$grey_d: #454545;
// A few layout variables used cross-file // A few layout variables used cross-file

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

@ -14,6 +14,10 @@ const borderDarkThemeColor = '#ffffff0F';
// THEME INDEPEDENT COLORS // THEME INDEPEDENT COLORS
const sessionBlack = '#282829'; const sessionBlack = '#282829';
const avatarBorderColor = '#00000059'; const avatarBorderColor = '#00000059';
const grayColor = '#616161';
const lightGrayColor = '#8b8e91';
const lightestGrayColor = '#f3f3f3';
const lightBlueColor = '#a2d2f4';
// DARK COLORS // DARK COLORS
const darkColorAccent = accentDarkTheme; const darkColorAccent = accentDarkTheme;
@ -83,6 +87,10 @@ 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('--color-gray-color', grayColor);
document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);
document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--color-clickable-hovered', '--color-clickable-hovered',
darkColorClickableHovered darkColorClickableHovered
@ -232,6 +240,10 @@ 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('--color-gray-color', grayColor);
document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);
document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--color-clickable-hovered', '--color-clickable-hovered',
lightColorClickableHovered lightColorClickableHovered

Write Preview
Loading…
Cancel
Save