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

refactor: finished converting sass colors in _modules.scss 

consolidated some of the gray shades
This commit is contained in:
William Grant 2022-08-24 11:55:45 +10:00
parent 4e1eb1861b
commit 49df281454
6 changed files with 94 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
stylesheets/_modal.scss
View File

@ -108,18 +108,18 @@
// button {
// float: right;
// margin-inline-start: 10px;
// background-color: $color-loki-green;
// background-color: var(--color-session-green-color);
// border-radius: 100px;
// padding: 5px 15px;
// border: 1px solid $color-loki-green;
// border: 1px solid var(--color-session-green-color);
// color: white;
// outline: none;
// user-select: none;
// &:hover,
// &:disabled {
// background-color: $color-loki-green-dark;
// border-color: $color-loki-green-dark;
// background-color: var(--color-session-green-color)-dark;
// border-color: var(--color-session-green-color)-dark;
// }
// &:disabled {

64
stylesheets/_modules.scss
View File

@ -200,7 +200,7 @@
height: 32px;
width: 32px;
border-radius: 50%;
background-color: $color-gray-05;
background-color: var(--color-lighter-gray-color);
}
.module-message__link-preview__text--with-icon {
@ -222,7 +222,7 @@
.module-message__link-preview__location {
margin-top: 4px;
color: $color-gray-60;
color: var(--color-gray-color);
font-size: 12px;
height: 16px;
letter-spacing: 0.4px;
@ -255,7 +255,7 @@
flex-direction: row;
align-items: center;
color: $color-gray-60;
color: var(--color-gray-color);
}
.module-contact-list-item--with-click-handler {
@ -347,7 +347,7 @@
}
.module-conversation-header__expiration__clock-icon {
@include color-svg('../images/timer.svg', $color-gray-60);
@include color-svg('../images/timer.svg', var(--color-gray-color));
height: 20px;
width: 20px;
display: inline-block;
@ -397,7 +397,7 @@
color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border-radius: 5px;
border: solid 1px $color-light-35;
border: solid 1px var(--color-light-gray-color);
cursor: pointer;
margin: 1em auto;
padding: 1em;
@ -493,7 +493,7 @@
}
.module-document-list-item--with-separator {
border-bottom: 1px solid $color-light-02;
border-bottom: 1px solid var(--color-lightest-gray-color);
}
.module-document-list-item__content {
@ -510,7 +510,7 @@
width: 48px;
height: 48px;
@include color-svg('../images/file.svg', $color-light-35);
@include color-svg('../images/file.svg', var(--color-light-gray-color));
}
.module-document-list-item__metadata {
@ -546,7 +546,7 @@
height: 94px;
width: 94px;
cursor: pointer;
background-color: $color-light-10;
background-color: var(--color-lighter-gray-color);
margin-inline-end: 4px;
margin-bottom: 4px;
position: relative;
@ -567,7 +567,7 @@
}
.module-media-grid-item__icon-image {
@include color-svg('../images/image.svg', $color-light-35);
@include color-svg('../images/image.svg', var(--color-light-gray-color));
}
.module-media-grid-item__image-container {
@ -596,15 +596,15 @@
height: 36px;
width: 36px;
@include color-svg('../images/play.svg', $color-loki-green);
@include color-svg('../images/play.svg', var(--color-session-green-color));
}
.module-media-grid-item__icon-video {
@include color-svg('../images/movie.svg', $color-light-35);
@include color-svg('../images/movie.svg', var(--color-light-gray-color));
}
.module-media-grid-item__icon-generic {
@include color-svg('../images/file.svg', $color-light-35);
@include color-svg('../images/file.svg', var(--color-light-gray-color));
}
/* Module: Empty State*/
@ -633,7 +633,7 @@
cursor: pointer;
&:hover {
background-color: $color-dark-70;
background-color: var(--color-dark-gray-color);
}
&--is-blocked {
@ -643,7 +643,7 @@
.module-conversation-list-item__unread-count {
color: var(--color-white-color);
background-color: $color-loki-green;
background-color: var(--color-session-green-color);
text-align: center;
padding-top: 1px;
@ -663,7 +663,7 @@
line-height: 16px;
border-radius: 8px;
box-shadow: 0px 0px 0px 1px $color-dark-85;
box-shadow: 0px 0px 0px 1px var(--color-darker-gray-color);
}
.module-conversation-list-item__content {
@ -704,7 +704,7 @@
.module-conversation-list-item__header__date--has-unread {
font-weight: 300;
color: $color-gray-05;
color: var(--color-lighter-gray-color);
}
.module-conversation-list-item__message {
@ -720,7 +720,7 @@
font-size: var(--font-size-sm);
line-height: 18px;
color: $color-gray-25;
color: var(--color-light-gray-color);
height: 1.3em;
overflow: hidden;
@ -733,13 +733,13 @@
.module-conversation-list-item__message__text--has-unread {
font-weight: 400;
color: $color-gray-05;
color: var(--color-lighter-gray-color);
}
// Module: Main Header
.module-main-header__search__input {
color: $color-dark-05;
color: var(--color-lighter-gray-color);
background-color: $color-gray-95;
border: 1px solid $color-light-60;
padding: 0 26px 0 30px;
@ -756,12 +756,8 @@
position: relative;
border-radius: 4px;
&:focus {
outline: solid 1px $blue;
}
&::placeholder {
color: $color-gray-45;
color: var(--color-light-gray-color);
}
}
@ -854,7 +850,7 @@
height: 36px;
width: 36px;
@include color-svg('../images/play.svg', $color-loki-green);
@include color-svg('../images/play.svg', var(--color-session-green-color));
}
.module-image__text-container {
@ -923,7 +919,7 @@
.module-typing-animation__dot {
border-radius: 50%;
background-color: $color-gray-60;
background-color: var(--color-gray-color);
height: 6px;
width: 6px;
@ -1015,7 +1011,7 @@
height: 20px;
z-index: 2;
@include color-svg('../images/x-16.svg', $color-black);
@include color-svg('../images/x-16.svg', var(--color-black-color));
}
.module-attachments__rail {
@ -1039,7 +1035,7 @@
position: relative;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px var(--color-lighter-black-color);
background-color: $color-gray-05;
background-color: var(--color-lighter-gray-color);
vertical-align: middle;
}
@ -1051,7 +1047,7 @@
width: 16px;
height: 16px;
z-index: 2;
@include color-svg('../images/x-16.svg', $color-black);
@include color-svg('../images/x-16.svg', var(--color-black-color));
}
.module-staged-generic-attachment__icon {
@ -1179,7 +1175,7 @@
.module-staged-placeholder-attachment {
margin: 1px;
border-radius: 4px;
border: 1px solid $color-gray-25;
border: 1px solid var(--color-light-gray-color);
height: 120px;
width: 120px;
display: inline-block;
@ -1188,7 +1184,7 @@
position: relative;
&:hover {
background: $color-gray-05;
background: var(--color-lighter-gray-color);
}
}
@ -1202,7 +1198,7 @@
height: 36px;
width: 36px;
@include color-svg('../images/plus-36.svg', $color-gray-45);
@include color-svg('../images/plus-36.svg', var(--color-light-gray-color));
}
// Module: Staged Link Preview
@ -1251,7 +1247,7 @@
}
.module-staged-link-preview__location {
margin-top: 4px;
color: $color-gray-60;
color: var(--color-gray-color);
font-size: var(--font-size-xs);
height: 16px;
letter-spacing: 0.25px;
@ -1266,7 +1262,7 @@
height: 16px;
width: 16px;
@include color-svg('../images/x-16.svg', $color-gray-60);
@include color-svg('../images/x-16.svg', var(--color-gray-color));
}
// Module: Left Pane

28
stylesheets/_quote.scss
View File

@ -54,27 +54,27 @@
}
.module-quote__icon-container__icon--file {
@include color-svg('../images/file.svg', $color-loki-green);
@include color-svg('../images/file.svg', var(--color-session-green-color));
}
.module-quote__icon-container__icon--image {
@include color-svg('../images/image.svg', $color-loki-green);
@include color-svg('../images/image.svg', var(--color-session-green-color));
}
.module-quote__icon-container__icon--microphone {
@include color-svg('../images/microphone.svg', $color-loki-green);
@include color-svg('../images/microphone.svg', var(--color-session-green-color));
}
.module-quote__icon-container__icon--play {
@include color-svg('../images/play.svg', $color-loki-green);
@include color-svg('../images/play.svg', var(--color-session-green-color));
}
.module-quote__icon-container__icon--movie {
@include color-svg('../images/movie.svg', $color-loki-green);
@include color-svg('../images/movie.svg', var(--color-session-green-color));
}
.module-quote__generic-file__text {
color: $color-dark-05;
color: var(--color-lighter-gray-color);
}
.module-quote__reference-warning {
background-color: $color-black-06;
background-color: var(--color-black-color)-06;
}
.module-quote__reference-warning__icon {
@ -82,7 +82,7 @@
}
.module-quote__reference-warning__text {
color: $color-dark-05;
color: var(--color-lighter-gray-color);
}
.module-quote-container {
@ -207,19 +207,19 @@
height: 24px;
&--file {
@include color-svg('../images/file.svg', $color-loki-green);
@include color-svg('../images/file.svg', var(--color-session-green-color));
}
&--image {
@include color-svg('../images/image.svg', $color-loki-green);
@include color-svg('../images/image.svg', var(--color-session-green-color));
}
&--microphone {
@include color-svg('../images/microphone.svg', $color-loki-green);
@include color-svg('../images/microphone.svg', var(--color-session-green-color));
}
&--play {
@include color-svg('../images/play.svg', $color-loki-green);
@include color-svg('../images/play.svg', var(--color-session-green-color));
}
&--movie {
@include color-svg('../images/movie.svg', $color-loki-green);
@include color-svg('../images/movie.svg', var(--color-session-green-color));
}
}
@ -267,7 +267,7 @@
&-warning__icon {
height: 16px;
width: 16px;
@include color-svg('../images/broken-link.svg', $color-gray-60);
@include color-svg('../images/broken-link.svg', var(--color-gray-color));
}
&-warning__text {

76
stylesheets/_theme_dark.scss
View File

@ -5,9 +5,9 @@
&.modal {
.content {
textarea {
background-color: $color-dark-85;
background-color: var(--color-darker-gray-color);
border: 1px solid $color-dark-60;
color: $color-dark-05;
color: var(--color-lighter-gray-color);
}
}
}
@ -15,8 +15,8 @@
.result {
.open {
border: solid 1px $color-dark-60;
background-color: $color-dark-85;
color: $color-dark-05;
background-color: var(--color-darker-gray-color);
color: var(--color-lighter-gray-color);
&:before {
@include header-icon-white('../images/open_link.svg');
@ -24,17 +24,17 @@
}
.link {
color: $color-dark-05;
color: var(--color-lighter-gray-color);
border: solid 1px $color-dark-60;
border-right: none;
background-color: $color-dark-85;
background-color: var(--color-darker-gray-color);
}
}
}
// _global
.title-bar {
color: $color-dark-05;
color: var(--color-lighter-gray-color);
}
button.grey {
@ -64,7 +64,7 @@
input.search {
border: 1px solid $color-light-60;
color: $color-dark-05;
color: var(--color-lighter-gray-color);
background-color: $color-gray-95;
&:focus {
@ -148,7 +148,7 @@
}
.module-message__broken-image {
color: $color-dark-05;
color: var(--color-lighter-gray-color);
}
.module-message__broken-image--incoming {
@ -160,24 +160,24 @@
}
.module-message__video-overlay__play-icon {
@include color-svg('../images/play.svg', $color-loki-green);
@include color-svg('../images/play.svg', var(--color-session-green-color));
}
.module-message__broken-video-screenshot {
color: $color-dark-05;
color: var(--color-lighter-gray-color);
}
.module-message__link-preview__content {
background-color: $color-gray-95;
border: 1px solid $color-gray-60;
border: 1px solid var(--color-gray-color);
}
.module-message__link-preview__title {
color: $color-gray-05;
color: var(--color-lighter-gray-color);
}
.module-message__link-preview__location {
color: $color-gray-25;
color: var(--color-light-gray-color);
}
// Module: Contact Detail
@ -188,7 +188,7 @@
}
.module-contact-detail__additional-contact {
border-top: 1px solid $color-dark-70;
border-top: 1px solid var(--color-dark-gray-color);
}
.module-contact-detail__additional-contact__type {
@ -207,7 +207,7 @@
background-color: var(--color-destructive);
color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border: solid 1px $color-light-35;
border: solid 1px var(--color-light-gray-color);
}
.module-message-detail__contact__error {
@ -217,17 +217,17 @@
// Module: Media Gallery
.module-media-gallery__tab {
background-color: $color-dark-85;
background-color: var(--color-darker-gray-color);
}
.module-media-gallery__tab--active {
border-bottom: 2px solid $color-loki-green;
border-bottom: 2px solid var(--color-session-green-color);
}
// Module: Document List Item
.module-document-list-item--with-separator {
border-bottom: 1px solid $color-dark-70;
border-bottom: 1px solid var(--color-dark-gray-color);
}
.module-document-list-item__icon {
@ -237,7 +237,7 @@
// Module: Media Grid Item
.module-media-grid-item {
background-color: $color-dark-85;
background-color: var(--color-darker-gray-color);
}
.module-media-grid-item__icon-image {
@ -260,29 +260,29 @@
// Module: Conversation List Item
.module-conversation-list-item--is-selected {
background-color: $color-dark-70;
background-color: var(--color-dark-gray-color);
}
.module-conversation-list-item__unread-count {
color: var(--color-white-color);
background-color: $color-loki-green;
box-shadow: 0px 0px 0px 1px $color-dark-85;
background-color: var(--color-session-green-color);
box-shadow: 0px 0px 0px 1px var(--color-darker-gray-color);
}
.module-conversation-list-item__header__name {
color: $color-gray-05;
color: var(--color-lighter-gray-color);
}
.module-conversation-list-item__header__date--has-unread {
color: $color-gray-05;
color: var(--color-lighter-gray-color);
}
.module-conversation-list-item__message__text {
color: $color-gray-25;
color: var(--color-light-gray-color);
}
.module-conversation-list-item__message__text--has-unread {
color: $color-gray-05;
color: var(--color-lighter-gray-color);
}
// Module: Main Header
@ -291,10 +291,10 @@
background-color: $color-gray-95;
border-radius: 14px;
border: solid 1px $color-gray-75;
color: $color-gray-05;
color: var(--color-lighter-gray-color);
&::placeholder {
color: $color-gray-45;
color: var(--color-light-gray-color);
}
&:focus {
@ -330,19 +330,19 @@
}
.module-attachments__close-button {
@include color-svg('../images/x-16.svg', $color-gray-45);
@include color-svg('../images/x-16.svg', var(--color-light-gray-color));
}
// Module: Staged Generic Attachment
.module-staged-generic-attachment {
box-shadow: inset 0px 0px 0px 1px $color-gray-45;
box-shadow: inset 0px 0px 0px 1px var(--color-light-gray-color);
background-color: $color-gray-75;
color: $color-dark-05;
color: var(--color-lighter-gray-color);
}
.module-staged-generic-attachment__close-button {
@include color-svg('../images/x.svg', $color-gray-45);
@include color-svg('../images/x.svg', var(--color-light-gray-color));
}
.module-staged-generic-attachment__icon {
@ -356,7 +356,7 @@
// Module: Staged Placeholder Attachment
.module-staged-placeholder-attachment {
border: 1px solid $color-gray-60;
border: 1px solid var(--color-gray-color);
&:hover {
background: $color-gray-75;
@ -364,24 +364,24 @@
}
.module-staged-placeholder-attachment__plus-icon {
@include color-svg('../images/plus-36.svg', $color-gray-60);
@include color-svg('../images/plus-36.svg', var(--color-gray-color));
}
// Module: Staged Link Preview
.module-staged-link-preview__close-button {
@include color-svg('../images/x-16.svg', $color-gray-25);
@include color-svg('../images/x-16.svg', var(--color-light-gray-color));
}
// Module: Message Search Result
.module-message-search-result {
&:hover {
background-color: $color-dark-70;
background-color: var(--color-dark-gray-color);
}
}
.module-message__link-preview__icon-container__circle-background {
background-color: $color-gray-25;
background-color: var(--color-light-gray-color);
}
}

22
stylesheets/_variables.scss
View File

@ -1,17 +1,11 @@
// Loki colors
$color-loki-dark-gray: #323232;
$color-loki-extra-dark-gray: #101010;
$color-loki-green: #3bd110;
$color-loki-green-dark: #32b10e;
$color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%);
$color-gray-05: #eeefef;
$color-gray-25: #bbbdbe;
$color-gray-45: #898a8c;
$color-gray-60: #6b6d70;
$color-gray-75: #3d3e44;
$color-gray-95: #0f1012;
$color-black: #000000;
$color-white-015: rgba(var(--color-white-color), 0.15);
$color-white-02: rgba(var(--color-white-color), 0.2);
@ -22,28 +16,22 @@ $color-white-07: rgba(var(--color-white-color), 0.7);
$color-white-075: rgba(var(--color-white-color), 0.75);
$color-white-08: rgba(var(--color-white-color), 0.8);
$color-white-085: rgba(var(--color-white-color), 0.85);
$color-light-02: #f9fafa;
$color-light-10: #eeefef;
$color-light-20: #c1c5cd;
$color-light-35: #a4a6a9;
$color-light-60: #62656a;
$color-light-90: #070c14;
$color-dark-05: #efefef;
$color-dark-30: #a8a9aa;
$color-dark-55: #88898c;
$color-dark-60: #797a7c;
$color-dark-70: #414347;
$color-dark-72: #31343c;
$color-dark-85: #1a1c20;
$color-dark-90: #121417;
$color-black-008: rgba($color-black, 0.08);
$color-black-005: rgba($color-black, 0.05);
$color-black-008: rgba(var(--color-black-color), 0.08);
$color-black-005: rgba(var(--color-black-color), 0.05);
$color-black-008-no-tranparency: #ededed;
$color-black-016-no-tranparency: #d9d9d9;
$color-black-012: rgba($color-black, 0.12);
$color-black-04: rgba($color-black, 0.4);
$color-black-06: rgba($color-black, 0.6);
$color-black-012: rgba(var(--color-black-color), 0.12);
$color-black-04: rgba(var(--color-black-color), 0.4);
$color-black-06: rgba(var(--color-black-color), 0.6);
// Old colors

3
ts/themes/SessionTheme.tsx
View File

@ -29,6 +29,7 @@ const grayColor = '#616161';
const lightGrayColor = '#8b8e91';
const lighterGrayColor = '#e9e9e9';
const lightestGrayColor = '#f3f3f3';
const darkGrayColor = '#414347';
const darkerGrayColor = '#17191d';
// DARK COLORS
@ -368,6 +369,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--search-input-height: 34px;
/* COLORS NOT CHANGING BETWEEN THEMES */
--color-black-color: ${black};
--color-light-black-color: ${`rgba(${black}, 0.2)`};
--color-lighter-black-color: ${`rgba(${black}, 0.15)`};
--color-session-green-color: ${sessionGreenColor};
@ -377,6 +379,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--color-light-gray-color: ${lightGrayColor};
--color-lighter-gray-color: ${lighterGrayColor};
--color-lightest-gray-color: ${lightestGrayColor};
--color-dark-gray-color: ${darkGrayColor};
--color-darker-gray-color: ${darkerGrayColor};
--color-light-blue-color: ${lightBlueColor};