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

cleanup scss and themify message view

Browse Source
pull/1315/head
Audric Ackermann 5 years ago
parent 5cdb25ca00
commit 9cbf21547b
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
10 changed files with 90 additions and 478 deletions
Show Stats Download Patch File Download Diff File

10
stylesheets/_conversation.scss
Unescape Escape View File

@ -32,6 +32,11 @@
}
.main.panel {
@include themify($themes) {
border-top: themed('borderActionPanel');
border-left: themed('borderActionPanel');
}
.discussion-container {
flex-grow: 1;
position: relative;
@ -373,8 +378,8 @@
.bottom-bar {
box-sizing: content-box;
$button-width: 36px;
form.active {
@include themify($themes) {
border-top: themed('borderActionPanel');
}
form.send {
@ -454,7 +459,6 @@
max-height: 100px;
padding: 10px;
border-radius: 4px;
background-color: $color-loki-light-gray;
margin-top: 3px;
margin-bottom: 6px;
color: $color-light-90;

135
stylesheets/_modules.scss
Unescape Escape View File

@ -206,40 +206,6 @@
background-color: $color-conversation-grey;
}
.module-message__container--incoming-red {
background-color: $color-conversation-red;
}
.module-message__container--incoming-deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-message__container--incoming-brown {
background-color: $color-conversation-brown;
}
.module-message__container--incoming-pink {
background-color: $color-conversation-pink;
}
.module-message__container--incoming-purple {
background-color: $color-conversation-purple;
}
.module-message__container--incoming-indigo {
background-color: $color-conversation-indigo;
}
.module-message__container--incoming-blue {
background-color: $color-conversation-blue;
}
.module-message__container--incoming-teal {
background-color: $color-conversation-teal;
}
.module-message__container--incoming-green {
background-color: $color-conversation-green;
}
.module-message__container--incoming-light_green {
background-color: $color-conversation-light_green;
}
.module-message__container--incoming-blue_grey {
background-color: $color-conversation-blue_grey;
}
.module-message__attachment-container {
// Entirely to ensure that images are centered if they aren't full width of bubble
text-align: center;
@ -503,18 +469,6 @@
}
}
.module-message__text--incoming {
color: $color-white;
a {
text-decoration: underline;
color: $color-white;
}
}
.module-message__text--error {
font-style: italic;
}
.module-message__metadata {
display: flex;
flex-direction: row;
@ -759,88 +713,11 @@
border-left-color: $color-conversation-grey;
background-color: $color-conversation-grey-tint;
}
.module-quote--outgoing-red {
border-left-color: $color-conversation-red;
background-color: $color-conversation-red-tint;
}
.module-quote--outgoing-deep_orange {
border-left-color: $color-conversation-deep_orange;
background-color: $color-conversation-deep_orange-tint;
}
.module-quote--outgoing-brown {
border-left-color: $color-conversation-brown;
background-color: $color-conversation-brown-tint;
}
.module-quote--outgoing-pink {
border-left-color: $color-conversation-pink;
background-color: $color-conversation-pink-tint;
}
.module-quote--outgoing-purple {
border-left-color: $color-conversation-purple;
background-color: $color-conversation-purple-tint;
}
.module-quote--outgoing-indigo {
border-left-color: $color-conversation-indigo;
background-color: $color-conversation-indigo-tint;
}
.module-quote--outgoing-blue {
border-left-color: $color-conversation-blue;
background-color: $color-conversation-blue-tint;
}
.module-quote--outgoing-teal {
border-left-color: $color-conversation-teal;
background-color: $color-conversation-teal-tint;
}
.module-quote--outgoing-green {
border-left-color: $color-conversation-green;
background-color: $color-conversation-green-tint;
}
.module-quote--outgoing-light_green {
border-left-color: $color-conversation-light_green;
background-color: $color-conversation-light_green-tint;
}
.module-quote--outgoing-blue_grey {
border-left-color: $color-conversation-blue_grey;
background-color: $color-conversation-blue_grey-tint;
}
.module-quote--incoming {
border-left-color: $color-white;
background-color: $color-conversation-grey-tint;
}
.module-quote--incoming-red {
background-color: $color-conversation-red-tint;
}
.module-quote--incoming-deep_orange {
background-color: $color-conversation-deep_orange-tint;
}
.module-quote--incoming-brown {
background-color: $color-conversation-brown-tint;
}
.module-quote--incoming-pink {
background-color: $color-conversation-pink-tint;
}
.module-quote--incoming-purple {
background-color: $color-conversation-purple-tint;
}
.module-quote--incoming-indigo {
background-color: $color-conversation-indigo-tint;
}
.module-quote--incoming-blue {
background-color: $color-conversation-blue-tint;
}
.module-quote--incoming-teal {
background-color: $color-conversation-teal-tint;
}
.module-quote--incoming-green {
background-color: $color-conversation-green-tint;
}
.module-quote--incoming-light_green {
background-color: $color-conversation-light_green-tint;
}
.module-quote--incoming-blue_grey {
background-color: $color-conversation-blue_grey-tint;
}
.module-quote__primary {
flex-grow: 1;
@ -1239,7 +1116,10 @@
.module-group-notification__change,
.module-timer-notification__message {
background-color: #212121;
@include themify($themes) {
background: themed('fakeChatBubbleBackground');
color: themed('textColor');
}
width: 90%;
max-width: 700px;
margin: 10px auto;
@ -1447,11 +1327,6 @@
display: flex;
flex-direction: row;
align-items: center;
color: $color-gray-90;
background-color: $color-white;
border-bottom: 1px solid $color-black-02;
}
.module-conversation-header__back-icon {
@ -3271,8 +3146,6 @@
// Module: Left Pane
.module-left-pane {
border-right: 1px solid $color-dark-90;
display: inline-flex;
flex-direction: column;
width: 380px;

22
stylesheets/_session.scss
Unescape Escape View File

@ -775,9 +775,10 @@ label {
height: 25px;
padding: $session-margin-md $session-margin-sm;
background-color: $session-shade-4;
color: $session-color-white;
@include themify($themes) {
background: themed('contextMenuBackground');
color: themed('textColor');
}
font-family: $session-font-accent;
font-size: $session-font-sm;
line-height: $session-icon-size-sm;
@ -785,7 +786,9 @@ label {
&--active,
&--selected {
background-color: $session-shade-7 !important;
@include themify($themes) {
background: themed('clickableHovered');
}
}
&:active,
&:visited,
@ -1292,6 +1295,7 @@ label {
textarea.send-message {
@include themify($themes) {
background: themed('composeViewBackground');
color: themed('textColor');
}
border: none;
margin: 0px;
@ -1299,8 +1303,6 @@ label {
font-size: $session-font-md;
line-height: 1.3em;
align-self: center;
@include session-color-subtle($session-color-white);
}
}
@ -1499,10 +1501,14 @@ input {
&-item {
font-family: $session-font-default;
padding: $session-margin-sm $session-margin-md;
background-color: $session-shade-5;
@include themify($themes) {
background-color: themed('cellBackground');
}
&:hover:not(.member-selected) {
background-color: $session-shade-7;
@include themify($themes) {
background-color: themed('clickableHovered');
}
}
}

1
stylesheets/_session_left_pane.scss
Unescape Escape View File

@ -102,7 +102,6 @@ $session-compose-margin: 20px;
}
.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;

85
stylesheets/_session_theme.scss
Unescape Escape View File

@ -2,11 +2,8 @@
@import 'themes.scss';
.discussion-container {
@at-root .light-theme #{&} {
background-color: $session-color-white;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-2;
@include themify($themes) {
background: none;
}
}
@ -14,50 +11,74 @@
background: none !important;
}
.module-conversation-header {
@at-root .light-theme #{&} {
background-color: $session-color-white;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-4;
@include themify($themes) {
background: themed('cellBackground');
}
border-bottom: none;
}
.module-message {
&__author,
&__metadata__badge,
&__metadata__date--incoming,
&__metadata__date--outgoing {
@at-root .light-theme #{&} {
@include session-color-subtle($session-color-black);
}
@at-root .dark-theme #{&} {
@include session-color-subtle($session-color-white);
}
&__text-error {
font-style: italic;
}
&__container--incoming {
@at-root .light-theme #{&} {
@include session-color-subtle($session-color-white);
background-color: $session-shade-8;
@include themify($themes) {
background: themed('receivedMessageBackground');
}
@at-root .dark-theme #{&} {
background-color: $session-shade-8;
.module-message__text {
@include themify($themes) {
color: themed('receivedMessageText');
}
a {
text-decoration: underline;
@include themify($themes) {
color: themed('receivedMessageText');
}
}
}
.module-message__author,
.module-message__metadata,
.module-message__metadata__date,
.module-message__metadata__badge,
.module-message__metadata__badge--separator {
@include themify($themes) {
@include session-color-subtle(themed('receivedMessageText'));
}
}
}
&__container--outgoing {
@at-root .light-theme #{&} {
background-color: $session-color-white;
@include themify($themes) {
background: themed('sentMessageBackground');
}
@at-root .dark-theme #{&} {
background-color: $session-shade-11;
.module-message__text {
@include themify($themes) {
color: themed('sentMessageText');
}
a {
text-decoration: underline;
@include themify($themes) {
color: themed('sentMessageText');
}
}
}
.module-message__author,
.module-message__metadata,
.module-message__metadata__date,
.module-message__metadata__badge,
.module-message__metadata__badge--separator {
@include themify($themes) {
@include session-color-subtle(themed('sentMessageText'));
}
}
}
&__container {
transition: background-color 0.25s;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.69);
transition: background-color $session-transition-duration;
}
}

286
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -555,53 +555,6 @@ body.dark-theme {
@include color-svg('../images/error.svg', $color-core-red);
}
.module-message__container--outgoing {
background-color: $color-dark-70;
}
// In case the color gets messed up
.module-message__container--incoming {
background-color: $color-conversation-grey;
}
.module-message__container--incoming-red {
background-color: $color-conversation-red;
}
.module-message__container--incoming-deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-message__container--incoming-brown {
background-color: $color-conversation-brown;
}
.module-message__container--incoming-pink {
background-color: $color-conversation-pink;
}
.module-message__container--incoming-purple {
background-color: $color-conversation-purple;
}
.module-message__container--incoming-indigo {
background-color: $color-conversation-indigo;
}
.module-message__container--incoming-blue {
background-color: $color-conversation-blue;
}
.module-message__container--incoming-teal {
background-color: $color-conversation-teal;
}
.module-message__container--incoming-green {
background-color: $color-conversation-green;
}
.module-message__container--incoming-light_green {
background-color: $color-conversation-light_green;
}
.module-message__container--incoming-blue_grey {
background-color: $color-conversation-blue_grey;
}
.module-message__attachment-container {
background-color: $color-gray-95;
}
.module-message__img-border-overlay {
box-shadow: inset 0px 0px 0px 1px $color-white-015;
}
@ -651,10 +604,6 @@ body.dark-theme {
color: $color-white;
}
.module-message__generic-attachment__icon {
// background: url('../images/file-gradient.svg') no-repeat center;
}
.module-message__generic-attachment__file-name {
color: $color-dark-05;
}
@ -688,31 +637,7 @@ body.dark-theme {
.module-message__link-preview__location {
color: $color-gray-25;
}
.module-conversation__user,
.module-message__author {
color: $color-white;
}
.module-message__text {
color: $color-dark-05;
a {
color: $color-dark-05;
}
}
.module-message__text--incoming {
color: $color-white;
a {
color: $color-white;
}
}
.module-message__metadata__date {
color: $color-white-08;
}
.module-message__metadata__date--incoming {
color: $color-white-08;
}
.module-message__metadata__date--with-image-no-caption {
color: $color-white-08;
}
@ -801,132 +726,20 @@ body.dark-theme {
}
// Module: Quoted Reply
.module-quote--outgoing {
border-left-color: $color-conversation-grey;
background-color: $color-conversation-grey-shade;
}
.module-quote--outgoing-red {
border-left-color: $color-conversation-red;
background-color: $color-conversation-red-shade;
}
.module-quote--outgoing-deep_orange {
border-left-color: $color-conversation-deep_orange;
background-color: $color-conversation-deep_orange-shade;
}
.module-quote--outgoing-brown {
border-left-color: $color-conversation-brown;
background-color: $color-conversation-brown-shade;
}
.module-quote--outgoing-pink {
border-left-color: $color-conversation-pink;
background-color: $color-conversation-pink-shade;
}
.module-quote--outgoing-purple {
border-left-color: $color-conversation-purple;
background-color: $color-conversation-purple-shade;
}
.module-quote--outgoing-indigo {
border-left-color: $color-conversation-indigo;
background-color: $color-conversation-indigo-shade;
}
.module-quote--outgoing-blue {
border-left-color: $color-conversation-blue;
background-color: $color-conversation-blue-shade;
}
.module-quote--outgoing-teal {
border-left-color: $color-conversation-teal;
background-color: $color-conversation-teal-shade;
}
.module-quote--outgoing-green {
border-left-color: $color-conversation-green;
background-color: $color-conversation-green-shade;
}
.module-quote--outgoing-light_green {
border-left-color: $color-conversation-light_green;
background-color: $color-conversation-light_green-shade;
}
.module-quote--outgoing-blue_grey {
border-left-color: $color-conversation-blue_grey;
background-color: $color-conversation-blue_grey-shade;
}
.module-quote--incoming {
border-left-color: $color-black;
background-color: $color-conversation-grey-shade;
}
.module-quote--incoming-red {
background-color: $color-conversation-red-shade;
}
.module-quote--incoming-deep_orange {
background-color: $color-conversation-deep_orange-shade;
}
.module-quote--incoming-brown {
background-color: $color-conversation-brown-shade;
}
.module-quote--incoming-pink {
background-color: $color-conversation-pink-shade;
}
.module-quote--incoming-purple {
background-color: $color-conversation-purple-shade;
}
.module-quote--incoming-indigo {
background-color: $color-conversation-indigo-shade;
}
.module-quote--incoming-blue {
background-color: $color-conversation-blue-shade;
}
.module-quote--incoming-teal {
background-color: $color-conversation-teal-shade;
}
.module-quote--incoming-green {
background-color: $color-conversation-green-shade;
}
.module-quote--incoming-light_green {
background-color: $color-conversation-light_green-shade;
}
.module-quote--incoming-blue_grey {
background-color: $color-conversation-blue_grey-shade;
}
.module-quote__primary__author {
color: $color-dark-05;
}
.module-quote__primary__author-red {
color: $color-dark-05;
}
.module-quote__primary__author-deep_orange {
color: $color-dark-05;
}
.module-quote__primary__author-brown {
color: $color-dark-05;
}
.module-quote__primary__author-pink {
color: $color-dark-05;
}
.module-quote__primary__author-purple {
color: $color-dark-05;
}
.module-quote__primary__author-indigo {
color: $color-dark-05;
}
.module-quote__primary__author-blue {
color: $color-dark-05;
}
.module-quote__primary__author-teal {
color: $color-dark-05;
}
.module-quote__primary__author-green {
color: $color-dark-05;
}
.module-quote__primary__author-light_green {
color: $color-dark-05;
}
.module-quote__primary__author-blue_grey {
color: $color-dark-05;
}
.module-quote__primary__text {
color: $color-dark-05;
@ -1087,12 +900,6 @@ body.dark-theme {
// Module: Conversation Header
.module-conversation-header {
color: $color-dark-05;
background-color: $color-gray-95;
border-bottom: 1px solid $color-light-60;
}
.module-conversation-header__back-icon {
@include color-svg('../images/back.svg', $color-dark-05);
}
@ -1296,49 +1103,8 @@ body.dark-theme {
background-color: $color-conversation-grey-shade;
}
.module-avatar--signal-blue {
background-color: $color-signal-blue;
}
.module-avatar--red {
background-color: $color-conversation-red-shade;
}
.module-avatar--deep_orange {
background-color: $color-conversation-deep_orange-shade;
}
.module-avatar--brown {
background-color: $color-conversation-brown-shade;
}
.module-avatar--pink {
background-color: $color-conversation-pink-shade;
}
.module-avatar--purple {
background-color: $color-conversation-purple-shade;
}
.module-avatar--indigo {
background-color: $color-conversation-indigo-shade;
}
.module-avatar--blue {
background-color: $color-conversation-blue-shade;
}
.module-avatar--teal {
background-color: $color-conversation-teal-shade;
}
.module-avatar--green {
background-color: $color-conversation-green-shade;
}
.module-avatar--light_green {
background-color: $color-conversation-light_green-shade;
}
.module-avatar--blue_grey {
background-color: $color-conversation-blue_grey-shade;
}
// Module: Main Header
.module-main-header {
border-bottom: 1px solid $color-gray-75;
}
.module-main-header__search__input {
background-color: $color-gray-95;
border-radius: 14px;
@ -1542,58 +1308,6 @@ body.dark-theme {
color: $color-gray-05;
}
// Module: Left Pane
.module-left-pane {
background-color: $color-dark-85;
border-right: 1px solid $color-gray-75;
}
.module-left-pane__archive-header {
border-bottom: 1px solid $color-gray-75;
}
.module-left-pane__to-inbox-button {
background-color: $color-gray-25;
}
.module-left-pane__archive-header-text {
color: $color-gray-05;
}
.module-left-pane__archive-helper-text {
color: $color-gray-25;
background-color: $color-gray-75;
}
.module-left-pane__archived-button {
color: $color-gray-25;
&:hover {
background-color: $color-gray-75;
}
}
.module-left-pane__archived-button__archived-count {
color: $color-gray-25;
background-color: $color-gray-75;
}
// Module: Start New Conversation
.module-start-new-conversation {
&:hover {
background-color: $color-dark-70;
}
}
.module-start-new-conversation__number {
color: $color-gray-05;
}
.module-start-new-conversation__text {
color: $color-gray-45;
}
// Third-party module: react-contextmenu
.react-contextmenu {

18
stylesheets/themes.scss
Unescape Escape View File

@ -1,5 +1,3 @@
// 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,
@ -13,8 +11,6 @@ $themes: (
modalBackground: #fcfcfc,
modalBorder: #212121,
fakeChatBubbleBackground: #f5f5f5,
fakeChatBubbleText: #000,
newConversationButtonShadow: hsl(151, 89%, 26%),
// input
inputBackground: #8e8e931f,
// text
@ -33,7 +29,9 @@ $themes: (
composeViewBackground: #fcfcfc,
composeViewTextFieldBackground: #ededed,
receivedMessageBackground: #f5f5f5,
sentMessageBackground: #00e97b,
sentMessageBackground: #272726,
receivedMessageText: #000,
sentMessageText: #fff,
// left pane
conversationList: #fff,
conversationItemHasUnread: #fcfcfc,
@ -47,6 +45,8 @@ $themes: (
// pill divider:
pillDividerColor: #0000001a,
pillDividerTextColor: #555,
// context menu
contextMenuBackground: #f5f5f5,
),
dark: (
accent: #00f782,
@ -59,9 +59,7 @@ $themes: (
buttonBackground: #1b1b1b,
modalBackground: #101011,
modalBorder: #212121,
fakeChatBubbleBackground: #3f4146,
fakeChatBubbleText: #000,
newConversationButtonShadow: #077c44,
fakeChatBubbleBackground: #212121,
// input
inputBackground: #8e8e931f,
// text
@ -81,6 +79,8 @@ $themes: (
composeViewTextFieldBackground: #141414,
receivedMessageBackground: #222325,
sentMessageBackground: #3f4146,
receivedMessageText: #fff,
sentMessageText: #fff,
// left pane
conversationList: #1b1b1b,
conversationItemHasUnread: #2c2c2c,
@ -94,6 +94,8 @@ $themes: (
// pill divider:
pillDividerColor: #353535,
pillDividerTextColor: #a0a0a0,
// context menu
contextMenuBackground: #212121,
),
);

5
ts/components/conversation/Message.tsx
Unescape Escape View File

@ -1162,10 +1162,7 @@ export class Message extends React.PureComponent<Props, State> {
<div
className={classNames(
'module-message__container',
`module-message__container--${direction}`,
isIncoming
? `module-message__container--incoming-${authorColor}`
: null
`module-message__container--${direction}`
)}
style={{
width: isShowingImage ? width : undefined,

3
ts/components/conversation/Quote.tsx
Unescape Escape View File

@ -389,9 +389,6 @@ export class Quote extends React.Component<Props, State> {
className={classNames(
'module-quote',
isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
isIncoming
? `module-quote--incoming-${authorColor}`
: `module-quote--outgoing-${authorColor}`,
!onClick ? 'module-quote--no-click' : null,
withContentAbove ? 'module-quote--with-content-above' : null,
referencedMessageNotFound

3
ts/components/conversation/TypingBubble.tsx
Unescape Escape View File

@ -59,8 +59,7 @@ export class TypingBubble extends React.Component<Props> {
<div
className={classNames(
'module-message__container',
'module-message__container--incoming',
`module-message__container--incoming-${color}`
'module-message__container--incoming'
)}
>
<div className="module-message__typing-container">

Write Preview
Loading…
Cancel
Save