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

add light theme for leftpane conversation list view

This commit is contained in:
Audric Ackermann 2020-08-24 12:06:03 +10:00
parent 39463d2f93
commit 422c2610b6
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
9 changed files with 207 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
stylesheets/_index.scss
View File

@ -79,8 +79,6 @@
}
.gutter {
background-color: $color-dark-85;
::-webkit-scrollbar-track {
background: $color-dark-85;
}

7
stylesheets/_mentions.scss
View File

@ -1,3 +1,5 @@
@import 'themes.scss';
.leave-group-dialog {
.content {
max-width: 100% !important;
@ -188,8 +190,9 @@
}
.at-symbol {
background-color: $session-color-green;
@include themify($themes) {
background-color: themed('accent');
}
color: $color-black;
text-align: center;

30
stylesheets/_session.scss
View File

@ -109,7 +109,9 @@ textarea {
color: $session-color-white;
&:not(.disabled):hover {
filter: brightness(90%);
@include themify($themes) {
background: themed('clickableHovered');
}
}
&.green,
@ -125,14 +127,26 @@ textarea {
}
&.green {
background-color: $session-color-green;
@include themify($themes) {
background-color: themed('accent');
}
}
&.white {
background-color: $session-color-white;
@include themify($themes) {
color: themed('textColor');
}
}
&.primary {
background-color: $session-color-primary;
@include themify($themes) {
background-color: themed('backgroundPrimary');
}
.session-icon {
@include themify($themes) {
fill: themed('foregroundPrimary');
}
}
}
&.secondary {
background-color: $session-color-secondary;
@ -154,7 +168,9 @@ textarea {
border: none;
&.green {
@include transparent-background($session-color-green);
@include themify($themes) {
@include transparent-background(themed('accent'));
}
}
&.white {
@include transparent-background($session-color-white);
@ -325,7 +341,9 @@ textarea {
}
.session-icon {
fill: $session-color-white;
@include themify($themes) {
fill: themed('textColor');
}
}
$session-separator-element-border: 1px solid $session-shade-6;

16
stylesheets/_session_constants.scss
View File

@ -73,7 +73,6 @@ $session-font-mono: 'SpaceMono';
// Brand
$session-color-green: #00f782;
$session-color-green-alt-1: #00f480;
// Shades
$session-shade-1: #0c0c0c;
@ -210,18 +209,3 @@ $session-fadein-duration: 0.1s;
@mixin session-dark-background-hover {
background-color: $session-shade-7;
}
@mixin session-filter-color-green {
filter: brightness(0) saturate(100%) invert(67%) sepia(69%) saturate(2367%)
hue-rotate(101deg) brightness(107%) contrast(101%);
}
$session-gradient-green: linear-gradient(
270deg,
rgba($session-color-green-alt-1, 1),
rgba($session-color-green-alt-1, 0.6)
);
$session-gradient-black: linear-gradient(
90deg,
rgba($session-shade-3, 1),
rgba($session-shade-4, 0.6)
);

183
stylesheets/_session_left_pane.scss
View File

@ -1,65 +1,50 @@
$session-compose-margin: 20px;
.module-conversation-list-item {
transition: $session-transition-duration;
@at-root .light-theme #{&} {
@include session-dark-background-lighter;
&:hover {
@include session-dark-background-hover;
}
}
@at-root .dark-theme #{&} {
@include session-dark-background-lighter;
&:hover {
@include session-dark-background-hover;
}
}
&--is-selected {
@at-root .light-theme #{&} {
@include session-dark-background-hover;
&:hover {
@include session-dark-background-hover;
}
}
@at-root .dark-theme #{&} {
@include session-dark-background-hover;
&:hover {
@include session-dark-background-hover;
}
}
.module-conversation__user__profile-number,
.module-conversation__user__profile-name,
.module-conversation-list-item__message__text {
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
}
}
}
}
.gutter {
width: 380px !important;
background: none !important;
padding-right: 5px !important;
transition: $session-transition-duration;
@include themify($themes) {
background: themed('cellBackground');
}
}
.module-conversation {
&-list-item {
transition: $session-transition-duration;
&:hover {
@include themify($themes) {
background: themed('clickableHovered');
}
}
&--is-selected {
@include themify($themes) {
background: themed('conversationItemSelected');
}
.module-conversation__user__profile-number,
.module-conversation__user__profile-name,
.module-conversation-list-item__message__text {
@include themify($themes) {
color: themed('textColor');
}
}
}
&--has-unread {
border-left: $session-element-border-green !important;
@include themify($themes) {
background: themed('conversationItemHasUnread');
}
}
&__unread-count {
@at-root .light-theme #{&} {
color: $session-color-black !important;
background-color: $session-color-white !important;
}
@at-root .dark-theme #{&} {
color: $session-color-white !important;
background-color: $session-shade-10 !important;
@include themify($themes) {
color: themed('textColor');
background-color: themed('clickableHovered');
}
position: static !important;
@ -77,11 +62,8 @@ $session-compose-margin: 20px;
&__message__text {
color: $session-shade-17;
&--has-unread {
@at-root .light-theme #{&} {
color: $session-shade-4 !important;
}
@at-root .dark-theme #{&} {
color: $session-color-white !important;
@include themify($themes) {
color: themed('textColor');
}
}
}
@ -100,11 +82,8 @@ $session-compose-margin: 20px;
&__header__name--with-unread .module-conversation__user__profile-number,
&__header__name--with-unread .module-conversation__user__profile-name {
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
@include themify($themes) {
color: themed('textColor');
}
}
}
@ -115,38 +94,19 @@ $session-compose-margin: 20px;
@include fontAccentBold();
font-size: 15px;
@at-root .light-theme #{&} {
color: $session-color-white;
}
@at-root .dark-theme #{&} {
color: $session-shade-17;
@include themify($themes) {
color: themed('textColorSubtle');
}
}
}
}
.inbox {
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
@include session-dark-background;
}
}
.module-left-pane {
border-right: 1px solid rgba($session-color-white, 0.1) !important;
width: $session-left-pane-width;
position: relative;
height: -webkit-fill-available;
@at-root .light-theme #{&} {
background: $session-color-white !important;
}
@at-root .dark-theme #{&} {
background: $session-shade-4 !important;
}
&-session {
display: flex;
height: 100vh;
@ -157,6 +117,9 @@ $session-compose-margin: 20px;
width: $session-left-pane-sections-container-width;
display: inline-flex;
flex-direction: column;
@include themify($themes) {
border-right: themed('borderActionPanel');
}
.module-avatar,
.session-icon-button {
@ -183,13 +146,6 @@ $session-compose-margin: 20px;
height: $main-view-header-height;
padding-right: 7px;
@at-root .light-theme #{&} {
background-color: $session-color-white;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-3;
}
.session-button {
margin-left: auto;
@include fontAccentBold();
@ -334,6 +290,11 @@ $session-compose-margin: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
transition: $session-transition-duration;
@include themify($themes) {
background: themed('conversationList');
}
.left-pane-contact-bottom-buttons .session-button {
vertical-align: middle;
@ -363,15 +324,6 @@ $session-compose-margin: 20px;
display: inline-flex;
flex-shrink: 0;
@at-root .light-theme #{&} {
color: $session-color-black;
background: $session-color-white;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
background: $session-shade-4;
}
.session-icon-button {
margin: auto 10px;
}
@ -384,19 +336,11 @@ $session-compose-margin: 20px;
font-size: $session-font-sm;
font-family: $session-font-default;
text-overflow: ellipsis;
background: none;
&:focus {
outline: none !important;
}
@at-root .light-theme #{&} {
color: $session-color-black;
background: $session-color-white;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
background: $session-shade-4;
}
}
}
@ -413,13 +357,7 @@ $session-compose-margin: 20px;
display: flex;
flex-direction: row;
width: 100%;
@at-root .light-theme #{&} {
background-color: $session-color-white;
}
@at-root .dark-theme #{&} {
background-color: $session-background;
}
background: none;
.session-button.square-outline.square.green,
.session-button.square-outline.square.white,
@ -487,19 +425,6 @@ $session-compose-margin: 20px;
background-color: $session-shade-5;
}
&--has-friend-request {
&:first-child {
border-top: none !important;
}
border: 1px solid $session-shade-8 !important;
.module-conversation__user__profile-number,
.module-conversation__user__profile-name {
font-size: 13px !important;
}
}
&__header__date,
&__message {
display: none;
@ -616,16 +541,6 @@ $session-compose-margin: 20px;
}
}
.friend-request-title {
font-weight: bold;
font-size: 13px;
padding: 11px;
border-right: 1px solid $session-shade-8 !important;
border-top: 1px solid $session-shade-8 !important;
border-left: 1px solid $session-shade-8 !important;
@include session-dark-background-lighter;
}
.panel-text-divider {
width: 100%;
text-align: center;

17
stylesheets/_session_theme.scss
View File

@ -1,4 +1,5 @@
// Messages
@import 'themes.scss';
.discussion-container {
@at-root .light-theme #{&} {
@ -15,12 +16,11 @@
.module-conversation-header {
@at-root .light-theme #{&} {
background-color: $session-color-white;
border-bottom: none;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-4;
border-bottom: none;
}
border-bottom: none;
}
.module-message {
@ -39,6 +39,7 @@
&__container--incoming {
@at-root .light-theme #{&} {
@include session-color-subtle($session-color-white);
background-color: $session-shade-8;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-8;
@ -75,7 +76,9 @@
&-selected {
.module-message {
&__container {
background-image: $session-gradient-green;
@include themify($themes) {
background-image: themed('messageSelected');
}
box-shadow: $session-dark-shadow;
}
@ -91,7 +94,9 @@
}
.inbox {
background: linear-gradient(180deg, #171717 0%, $session-background 100%);
@include themify($themes) {
background: themed('inboxBackground');
}
}
.conversation {
@ -113,7 +118,9 @@ h1 {
margin: 0;
&.active {
color: $session-color-white;
@include themify($themes) {
color: themed('textColor');
}
}
}

1
stylesheets/manifest.scss
View File

@ -1,4 +1,5 @@
// Global Settings, Variables, and Mixins
@import 'themes.scss';
@import 'session_constants';
@import 'variables';
@import 'mixins';

108
stylesheets/themes.scss Normal file
View File

@ -0,0 +1,108 @@
// copy pasted from the android Session app. Some might not be used and some might be missing
// also, some are sometimes applied with a opacity setting (most likely 0.6)
$themes: (
light: (
accent: #00e97b,
destructive: #ff453a,
unimportant: #d8d8d8,
unimportantButtonBackground: #0000,
border: #979797,
cellBackground: #fcfcfc,
searchBarPlaceholder: #8e8e93,
searchBarBackground: #8e8e931f,
separator: #36383c,
buttonBackground: #fcfcfc,
modalBackground: #fcfcfc,
modalBorder: #212121,
fakeChatBubbleBackground: #f5f5f5,
fakeChatBubbleText: #000,
navigationBarBackground: #fcfcfc,
newConversationButtonShadow: hsl(151, 89%, 26%),
// text
textColor: #000,
textColorSubtle: #a0a0a0,
textColorOpposite: #fff,
// inbox
inboxBackground: #fff,
// buttons
backgroundPrimary: #272726,
foregroundPrimary: #fff,
// conversation view
messageSelected:
linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
composeViewBackground: #fcfcfc,
composeViewTextFieldBackground: #ededed,
receivedMessageBackground: #f5f5f5,
sentMessageBackground: #00e97b,
// left pane
conversationList: #fff,
conversationItemHasUnread: #fcfcfc,
conversationItemSelected: #f0f0f0,
clickableHovered: #dfdfdf,
borderActionPanel: 1px solid #f1f1f1,
),
dark: (
accent: #00f782,
destructive: #ff453a,
unimportant: #d8d8d8,
unimportantButtonBackground: #323232,
border: #979797,
cellBackground: #1b1b1b,
searchBarPlaceholder: #8e8e93,
searchBarBackground: #8e8e931f,
separator: #36383c,
buttonBackground: #1b1b1b,
modalBackground: #101011,
modalBorder: #212121,
fakeChatBubbleBackground: #3f4146,
fakeChatBubbleText: #000,
navigationBarBackground: #161616,
newConversationButtonShadow: #077c44,
// text
textColor: #fff,
textColorSubtle: #a0a0a0,
textColorOpposite: #000,
// inbox
inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
// buttons
backgroundPrimary: #474646,
foregroundPrimary: #fff,
// conversation view
messageSelected:
linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
composeViewBackground: #1b1b1b,
composeViewTextFieldBackground: #141414,
receivedMessageBackground: #222325,
sentMessageBackground: #3f4146,
// left pane
conversationList: #1b1b1b,
conversationItemHasUnread: #2c2c2c,
conversationItemSelected: #404040,
clickableHovered: #414347,
borderActionPanel: none,
),
);
@mixin themify($themes: $themes) {
@each $theme, $map in $themes {
.#{$theme}-theme & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge(
$theme-map,
(
$key: $value,
)
) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function themed($key) {
@return map-get($theme-map, $key);
}

16
ts/components/session/ActionsPanel.tsx
View File

@ -94,14 +94,14 @@ export class ActionsPanel extends React.Component<Props, State> {
const handleClick = onSelect
? () => {
/* tslint:disable:no-void-expression */
if (type === SectionType.Profile) {
this.editProfileHandle()
} else if (type === SectionType.Moon) {
window.toggleTheme();
} else {
onSelect(type);
}
/* tslint:enable:no-void-expression */
if (type === SectionType.Profile) {
this.editProfileHandle();
} else if (type === SectionType.Moon) {
window.toggleTheme();
} else {
onSelect(type);
}
/* tslint:enable:no-void-expression */
}
: undefined;