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

Merge pull request #1317 from Bilb/add-light-theme

Browse Source
pull/1325/head
Audric Ackermann 5 years ago committed by GitHub
parent 791ae546b2 5909b7c807
commit 4f6100babd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 222 additions and 135 deletions
Show Stats Download Patch File Download Diff File

14
background.d.ts vendored
Unescape Escape View File

@ -0,0 +1,14 @@
export interface ConfirmationDialogParams {
title?: string;
message: string;
messageSub?: string;
resolve?: any;
reject?: any;
okText?: string;
okTheme?: string;
closeTheme?: string;
cancelText?: string;
hideCancel?: boolean;
sessionIcon?: SessionIconType;
iconSize?: SessionIconSize;
}

2
js/background.js
Unescape Escape View File

@ -681,6 +681,8 @@
closeTheme: params.closeTheme || undefined, closeTheme: params.closeTheme || undefined,
cancelText: params.cancelText || undefined, cancelText: params.cancelText || undefined,
hideCancel: params.hideCancel || false, hideCancel: params.hideCancel || false,
sessionIcon: params.sessionIcon || undefined,
iconSize: params.iconSize || undefined,
}); });
confirmDialog.render(); confirmDialog.render();

2
js/views/app_view.js
Unescape Escape View File

@ -22,7 +22,7 @@
openInbox: 'openInbox', openInbox: 'openInbox',
}, },
applyTheme() { applyTheme() {
const theme = storage.get('theme-setting') || 'dark'; const theme = storage.get('theme-setting') || 'light';
this.$el this.$el
.removeClass('light-theme') .removeClass('light-theme')
.removeClass('dark-theme') .removeClass('dark-theme')

2
js/views/session_confirm_view.js
Unescape Escape View File

@ -21,6 +21,8 @@
okTheme: options.okTheme, okTheme: options.okTheme,
closeTheme: options.closeTheme, closeTheme: options.closeTheme,
hideCancel: options.hideCancel, hideCancel: options.hideCancel,
sessionIcon: options.sessionIcon,
iconSize: options.iconSize,
}; };
}, },

6
stylesheets/_conversation.scss
Unescape Escape View File

@ -33,8 +33,8 @@
.main.panel { .main.panel {
@include themify($themes) { @include themify($themes) {
border-top: themed('borderActionPanel'); border-top: themed('sessionBorder');
border-left: themed('borderActionPanel'); border-left: themed('sessionBorder');
} }
.discussion-container { .discussion-container {
@ -365,7 +365,7 @@
box-sizing: content-box; box-sizing: content-box;
$button-width: 36px; $button-width: 36px;
@include themify($themes) { @include themify($themes) {
border-top: themed('borderActionPanel'); border-top: themed('sessionBorder');
} }
form.send { form.send {

5
stylesheets/_mentions.scss
Unescape Escape View File

@ -85,11 +85,6 @@
color: black; color: black;
} }
.message-highlighted {
border-radius: $message-container-border-radius;
background-color: rgba(255, 197, 50, 0.2);
}
.module-conversation-list-item--mentioned-us { .module-conversation-list-item--mentioned-us {
border-left: 4px solid $session-color-green !important; border-left: 4px solid $session-color-green !important;
} }

6
stylesheets/_mixins.scss
Unescape Escape View File

@ -28,3 +28,9 @@
@include color-svg($svg, black); @include color-svg($svg, black);
} }
} }
@keyframes highlightedMessageAnimation {
1% {
background-color: #00f782;
}
}

11
stylesheets/_modal.scss
Unescape Escape View File

@ -175,9 +175,11 @@
} }
input { input {
color: $color-dark-05; @include themify($themes) {
background-color: $color-dark-70; background-color: themed('inputBackground');
border-color: $color-dark-55; color: themed('textColor');
border: themed('sessionBorder');
}
} }
} }
@ -266,7 +268,7 @@
justify-content: center; justify-content: center;
margin-top: $session-margin-lg; margin-top: $session-margin-lg;
&-input { input {
height: 38px; height: 38px;
width: 142px; width: 142px;
border-radius: 5px; border-radius: 5px;
@ -275,6 +277,7 @@
@include themify($themes) { @include themify($themes) {
background: themed('inputBackground'); background: themed('inputBackground');
color: themed('textColor'); color: themed('textColor');
border: themed('sessionBorder');
} }
} }

1
stylesheets/_modules.scss
Unescape Escape View File

@ -428,7 +428,6 @@
} }
.module-conversation__user, .module-conversation__user,
.module-message__author { .module-message__author {
color: $color-white;
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
line-height: 18px; line-height: 18px;

2
stylesheets/_quote.scss
Unescape Escape View File

@ -346,7 +346,7 @@
.bottom-bar .member-item { .bottom-bar .member-item {
@include themify($themes) { @include themify($themes) {
border-bottom: themed('borderActionPanel'); border-bottom: themed('sessionBorder');
} }
&:hover { &:hover {

48
stylesheets/_session.scss
Unescape Escape View File

@ -100,7 +100,9 @@ textarea {
&.default, &.default,
&.square, &.square,
&.brand { &.brand {
color: $session-color-white; @include themify($themes) {
color: themed('foregroundPrimary');
}
&:not(.disabled):hover { &:not(.disabled):hover {
@include themify($themes) { @include themify($themes) {
@ -207,8 +209,10 @@ textarea {
border-radius: 500px; border-radius: 500px;
&:not(.disabled):hover { &:not(.disabled):hover {
color: $session-color-white; @include themify($themes) {
border-color: $session-color-white; color: themed('textColor');
border-color: themed('textColor');
}
} }
} }
@ -459,7 +463,8 @@ label {
.session-button.default.danger { .session-button.default.danger {
display: flex; display: flex;
width: 80px; // width: 80px;
margin-right: 0px;
} }
} }
.message-selection-overlay div[role='button'] { .message-selection-overlay div[role='button'] {
@ -581,7 +586,8 @@ label {
@include themify($themes) { @include themify($themes) {
background-color: themed('modalBackground'); background-color: themed('modalBackground');
color: themed('textColor'); color: themed('textColor');
border: 1px solid themed('borderActionPanel'); border: themed('sessionBorder');
box-shadow: themed('sessionShadow');
} }
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -862,12 +868,12 @@ label {
&:first-child { &:first-child {
@include themify($themes) { @include themify($themes) {
border-top: themed('borderActionPanel'); border-top: themed('sessionBorder');
} }
} }
&:last-child { &:last-child {
@include themify($themes) { @include themify($themes) {
border-top: themed('borderActionPanel'); border-top: themed('sessionBorder');
} }
} }
@ -1052,7 +1058,7 @@ label {
@include themify($themes) { @include themify($themes) {
background: themed('cellBackground'); background: themed('cellBackground');
color: themed('textColor'); color: themed('textColor');
border-bottom: themed('borderActionPanel'); border-bottom: themed('sessionBorder');
} }
&.inline { &.inline {
display: flex; display: flex;
@ -1325,7 +1331,7 @@ input {
height: 64px; height: 64px;
background-color: $session-shade-4; background-color: $session-shade-4;
@include themify($themes) { @include themify($themes) {
border: themed('borderActionPanel'); border: themed('sessionBorder');
} }
display: flex; display: flex;
align-items: center; align-items: center;
@ -1398,8 +1404,9 @@ input {
width: 100%; width: 100%;
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
box-shadow: inset 0px 14px 7px -15px $session-color-dark-grey, @include themify($themes) {
inset 0px -14px 7px -15px $session-color-dark-grey; border: themed('sessionBorder');
}
} }
&__selection { &__selection {
@ -1410,6 +1417,9 @@ input {
&__no-contacts { &__no-contacts {
font-family: $session-font-mono; font-family: $session-font-mono;
@include themify($themes) {
background: themed('cellBackground');
}
text-align: center; text-align: center;
padding: 20px; padding: 20px;
} }
@ -1448,12 +1458,20 @@ input {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
transition: $session-transition-duration; transition: $session-transition-duration;
@include themify($themes) {
background: themed('cellBackground');
}
&:first-child { &:not(:last-child) {
border-top: 1px solid rgba($session-shade-8, 0.6); @include themify($themes) {
border-bottom: themed('sessionBorder');
}
} }
&:last-child {
border-bottom: 1px solid rgba($session-shade-8, 0.6); &:hover {
@include themify($themes) {
background-color: themed('clickableHovered');
}
} }
&.selected { &.selected {

7
stylesheets/_session_constants.scss
Unescape Escape View File

@ -119,7 +119,6 @@ $session-color-secondary: $session-shade-6;
// Opacity and Shadow // Opacity and Shadow
$session-shadow-opacity: 0.15; $session-shadow-opacity: 0.15;
$session-overlay-opacity: 0.3; $session-overlay-opacity: 0.3;
$session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37);
// ////////////////////////////////////////////// // //////////////////////////////////////////////
// /////////////////// Text ///////////////////// // /////////////////// Text /////////////////////
@ -151,7 +150,11 @@ $session-font-h4: 16px;
} }
@mixin session-color-subtle($color) { @mixin session-color-subtle($color) {
color: rgba($color, 0.6); color: subtle($color);
}
@function subtle($color) {
@return rgba($color, 0.6);
} }
// ////////////////////////////////////////////// // //////////////////////////////////////////////

10
stylesheets/_session_group_panel.scss
Unescape Escape View File

@ -12,7 +12,7 @@
flex-shrink: 0; flex-shrink: 0;
@include themify($themes) { @include themify($themes) {
background: themed('leftpaneOverlayBackground'); background: themed('leftpaneOverlayBackground');
border-left: themed('borderActionPanel'); border-left: themed('sessionBorder');
} }
align-items: center; align-items: center;
@ -44,7 +44,7 @@
@include themify($themes) { @include themify($themes) {
color: themed('textColor'); color: themed('textColor');
background: themed('cellBackground'); background: themed('cellBackground');
border: themed('borderActionPanel'); border: themed('sessionBorder');
} }
text-align: center; text-align: center;
display: none; display: none;
@ -58,8 +58,8 @@
@include themify($themes) { @include themify($themes) {
color: themed('textColor'); color: themed('textColor');
background: themed('cellBackground'); background: themed('cellBackground');
border-top: themed('borderActionPanel'); border-top: themed('sessionBorder');
border-bottom: themed('borderActionPanel'); border-bottom: themed('sessionBorder');
} }
width: -webkit-fill-available; width: -webkit-fill-available;
padding: 0 $session-margin-md; padding: 0 $session-margin-md;
@ -87,7 +87,7 @@
align-items: center; align-items: center;
@include themify($themes) { @include themify($themes) {
border: none; border: none;
border-top: themed('borderActionPanel'); border-top: themed('sessionBorder');
} }
} }

82
stylesheets/_session_left_pane.scss
Unescape Escape View File

@ -11,6 +11,19 @@ $session-compose-margin: 20px;
} }
.module-conversation { .module-conversation {
// default conversation list item text color
&__user__profile {
&-number,
&-name {
@include fontAccentBold();
font-size: 15px;
@include themify($themes) {
color: themed('textColorSubtle');
}
}
}
&-list-item { &-list-item {
transition: $session-transition-duration; transition: $session-transition-duration;
@ -44,7 +57,7 @@ $session-compose-margin: 20px;
&__unread-count { &__unread-count {
@include themify($themes) { @include themify($themes) {
color: themed('textColor'); color: themed('textColor');
background-color: themed('clickableHovered'); background: themed('clickableHovered');
} }
position: static !important; position: static !important;
@ -71,13 +84,6 @@ $session-compose-margin: 20px;
&__header__name { &__header__name {
flex-grow: 0 !important; flex-grow: 0 !important;
padding-right: 5px !important; padding-right: 5px !important;
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
color: $session-shade-17;
}
} }
&__header__name--with-unread .module-conversation__user__profile-number, &__header__name--with-unread .module-conversation__user__profile-number,
@ -87,18 +93,6 @@ $session-compose-margin: 20px;
} }
} }
} }
&__user__profile {
&-number,
&-name {
@include fontAccentBold();
font-size: 15px;
@include themify($themes) {
color: themed('textColorSubtle');
}
}
}
} }
.module-left-pane { .module-left-pane {
@ -117,7 +111,7 @@ $session-compose-margin: 20px;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@include themify($themes) { @include themify($themes) {
border-right: themed('borderActionPanel'); border-right: themed('sessionBorder');
} }
.module-avatar, .module-avatar,
@ -179,15 +173,6 @@ $session-compose-margin: 20px;
} }
} }
&-compose {
@at-root .light-theme #{&} {
background: $session-color-white;
}
@at-root .dark-theme #{&} {
@include session-dark-background-lighter;
}
}
&-overlay { &-overlay {
@include themify($themes) { @include themify($themes) {
background: themed('leftpaneOverlayBackground'); background: themed('leftpaneOverlayBackground');
@ -404,7 +389,7 @@ $session-compose-margin: 20px;
height: 51px; height: 51px;
@include themify($themes) { @include themify($themes) {
border: themed('borderActionPanel'); border: themed('sessionBorder');
} }
} }
} }
@ -419,27 +404,30 @@ $session-compose-margin: 20px;
padding: 8px 20px; padding: 8px 20px;
margin: 0px $session-compose-margin; margin: 0px $session-compose-margin;
@at-root .light-theme #{&} { // FIXME themify once this component is enabled back
background: $session-shade-15; // @at-root .light-theme #{&} {
color: $session-color-black; // background: $session-shade-15;
} // color: $session-color-black;
@at-root .dark-theme #{&} { // }
background: $session-shade-4; // @at-root .dark-theme #{&} {
color: $session-color-light-grey; // background: $session-shade-4;
} // color: $session-color-light-grey;
// }
&-selected, &-selected,
&:hover { &:hover {
font-weight: bold; font-weight: bold;
@at-root .light-theme #{&} { // FIXME themify once this component is enabled back
color: $session-color-black;
background: $session-color-white; // @at-root .light-theme #{&} {
} // color: $session-color-black;
@at-root .dark-theme #{&} { // background: $session-color-white;
color: $session-color-white; // }
background: $session-shade-8; // @at-root .dark-theme #{&} {
} // color: $session-color-white;
// background: $session-shade-8;
// }
} }
} }
} }

4
stylesheets/_session_signin.scss
Unescape Escape View File

@ -127,7 +127,7 @@
background-color: transparent; background-color: transparent;
text-align: center; text-align: center;
@include themify($themes) { @include themify($themes) {
border-bottom: themed('borderActionPanel'); border-bottom: themed('sessionBorder');
color: themed('textColor'); color: themed('textColor');
} }
transition: border-color $session-transition-duration linear; transition: border-color $session-transition-duration linear;
@ -225,7 +225,7 @@
hr { hr {
@include themify($themes) { @include themify($themes) {
border: themed('borderActionPanel'); border: themed('sessionBorder');
} }
width: 100%; width: 100%;
position: absolute; position: absolute;

14
stylesheets/_session_theme.scss
Unescape Escape View File

@ -87,23 +87,15 @@
.message { .message {
&-highlighted { &-highlighted {
border-radius: 0; animation: highlightedMessageAnimation 1s ease-in-out;
@at-root .light-theme #{&} {
background-color: $session-shade-5;
}
@at-root .dark-theme #{&} {
background-color: $session-color-white;
}
} }
&-selected { &-selected {
.module-message { .module-message {
&__container { &__container {
@include themify($themes) { @include themify($themes) {
background-image: themed('messageSelected'); box-shadow: themed('sessionShadow');
} }
box-shadow: $session-dark-shadow;
} }
&__author { &__author {
@ -116,7 +108,7 @@
margin-left: 5px; margin-left: 5px;
.session-icon.check { .session-icon.check {
@include themify($themes) { @include themify($themes) {
fill: themed('sentMessageText'); fill: subtle(themed('sentMessageText'));
} }
} }
} }

2
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -906,8 +906,6 @@
color: $color-white; color: $color-white;
} }
// Module: Highlighted Message Body
// Module: Search Results // Module: Search Results
.module-search-results__conversations-header { .module-search-results__conversations-header {

70
stylesheets/themes.scss
Unescape Escape View File

@ -1,47 +1,52 @@
// 13592 lines for manifest.css on date 25 august // 13592 lines for manifest.css on date 25 august
$white: #ffffff;
$black: #000000;
$destructive: #ff453a;
$accentLightTheme: #00e97b;
$accentDarkTheme: #00f782;
$themes: ( $themes: (
light: ( light: (
accent: #00e97b, accent: $accentLightTheme,
accentButton: #000, accentButton: $black,
destructive: #ff453a, destructive: $destructive,
cellBackground: #fcfcfc, cellBackground: #fcfcfc,
modalBackground: #fcfcfc, modalBackground: #fcfcfc,
fakeChatBubbleBackground: #f5f5f5, fakeChatBubbleBackground: #f5f5f5,
// input // input
inputBackground: #8e8e931f, inputBackground: rgba(#8e8e93, 0.12),
// text // text
textColor: #000, textColor: $black,
textColorSubtle: #a0a0a0, textColorSubtle: #a0a0a0,
textColorOpposite: #fff, textColorOpposite: $white,
// inbox // inbox
inboxBackground: #fff, inboxBackground: $white,
// buttons // buttons
backgroundPrimary: #272726, backgroundPrimary: #272726,
foregroundPrimary: #fff, foregroundPrimary: $white,
buttonGreen: #272726, buttonGreen: #272726,
// conversation view // conversation view
messageSelected: composeViewBackground: #fcfcfc,
linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
composeViewBackground: #fcfcfc,
composeViewTextFieldBackground: #ededed, composeViewTextFieldBackground: #ededed,
receivedMessageBackground: #f5f5f5, receivedMessageBackground: #f5f5f5,
sentMessageBackground: #272726, sentMessageBackground: $accentLightTheme,
receivedMessageText: #000, receivedMessageText: $black,
sentMessageText: #fff, sentMessageText: $black,
sessionShadow: 0 0 4px 0 rgba($black, 0.37),
// left pane // left pane
conversationList: #fff, conversationList: $white,
conversationItemHasUnread: #fcfcfc, conversationItemHasUnread: #fcfcfc,
conversationItemSelected: #f0f0f0, conversationItemSelected: #f0f0f0,
clickableHovered: #dfdfdf, clickableHovered: #dfdfdf,
borderActionPanel: 1px solid #f1f1f1, sessionBorder: 1px solid #f1f1f1,
leftpaneOverlayBackground: #fff, leftpaneOverlayBackground: $white,
// scrollbars // scrollbars
scrollBarTrack: #fcfcfc, scrollBarTrack: #fcfcfc,
scrollBarThumb: #474646, scrollBarThumb: #474646,
// pill divider: // pill divider:
pillDividerColor: #0000001a, pillDividerColor: rgba($black, 0.1),
pillDividerTextColor: #555, pillDividerTextColor: #555555,
// context menu // context menu
contextMenuBackground: #f5f5f5, contextMenuBackground: #f5f5f5,
filterSessionText: brightness(0) saturate(100%), filterSessionText: brightness(0) saturate(100%),
@ -52,39 +57,38 @@ $themes: (
quoteBottomBarBackground: #f0f0f0, quoteBottomBarBackground: #f0f0f0,
), ),
dark: ( dark: (
accent: #00f782, accent: $accentDarkTheme,
accentButton: #00f782, accentButton: $accentDarkTheme,
destructive: #ff453a, destructive: $destructive,
cellBackground: #1b1b1b, cellBackground: #1b1b1b,
modalBackground: #101011, modalBackground: #101011,
fakeChatBubbleBackground: #212121, fakeChatBubbleBackground: #212121,
// input // input
inputBackground: #8e8e931f, inputBackground: rgba(#8e8e93, 0.12),
// text // text
textColor: #fff, textColor: $white,
textColorSubtle: #a0a0a0, textColorSubtle: #a0a0a0,
textColorOpposite: #000, textColorOpposite: $black,
// inbox // inbox
inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%), inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
// buttons // buttons
backgroundPrimary: #474646, backgroundPrimary: #474646,
foregroundPrimary: #fff, foregroundPrimary: $white,
buttonGreen: #00f782, buttonGreen: $accentDarkTheme,
// conversation view // conversation view
messageSelected: composeViewBackground: #1b1b1b,
linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
composeViewBackground: #1b1b1b,
composeViewTextFieldBackground: #141414, composeViewTextFieldBackground: #141414,
receivedMessageBackground: #222325, receivedMessageBackground: #222325,
sentMessageBackground: #3f4146, sentMessageBackground: #3f4146,
receivedMessageText: #fff, receivedMessageText: $white,
sentMessageText: #fff, sentMessageText: $white,
sessionShadow: 0 0 4px 0 rgba($white, 0.2),
// left pane // left pane
conversationList: #1b1b1b, conversationList: #1b1b1b,
conversationItemHasUnread: #2c2c2c, conversationItemHasUnread: #2c2c2c,
conversationItemSelected: #404040, conversationItemSelected: #404040,
clickableHovered: #414347, clickableHovered: #414347,
borderActionPanel: none, sessionBorder: 1px solid rgba($white, 0.06),
leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%), leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
// scrollbars // scrollbars
scrollBarTrack: #1b1b1b, scrollBarTrack: #1b1b1b,

37
ts/components/session/ActionsPanel.tsx
Unescape Escape View File

@ -2,8 +2,6 @@ import React from 'react';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
import { Avatar } from '../Avatar'; import { Avatar } from '../Avatar';
import { PropsData as ConversationListItemPropsType } from '../ConversationListItem'; import { PropsData as ConversationListItemPropsType } from '../ConversationListItem';
import { MultiDeviceProtocol } from '../../session/protocols';
import { UserUtil } from '../../util';
import { createOrUpdateItem, getItemById } from '../../../js/modules/data'; import { createOrUpdateItem, getItemById } from '../../../js/modules/data';
export enum SectionType { export enum SectionType {
@ -59,10 +57,45 @@ export class ActionsPanel extends React.Component<Props, State> {
}, },
'refreshAvatarCallback' 'refreshAvatarCallback'
); );
void this.showLightThemeDialogIfNeeded();
} }
); );
} }
public async showLightThemeDialogIfNeeded() {
const currentTheme = window.Events.getThemeSetting(); // defaults to light on new registration
if (currentTheme !== 'light') {
const message = 'Light Mode';
const messageSub =
'Feeling the dark side more? Just toggle the theme from the bottom-left moon icon.';
const hasSeenLightMode = await getItemById('hasSeenLightModeDialog');
if (hasSeenLightMode?.value === true) {
// if hasSeen is set and true, we have nothing to do
return;
}
// force light them right now, then ask for permission
await window.Events.setThemeSetting('light');
// FIXME add the SUN icon
window.confirmationDialog({
message,
messageSub,
resolve: async () => {
const data = {
id: 'hasSeenLightModeDialog',
value: true,
};
void createOrUpdateItem(data);
},
okTheme: 'default primary',
hideCancel: true,
sessionIcon: SessionIconType.Sun,
iconSize: SessionIconSize.Max,
});
}
}
public refreshAvatarCallback(conversation: any) { public refreshAvatarCallback(conversation: any) {
if (conversation.changed?.profileAvatar) { if (conversation.changed?.profileAvatar) {
this.setState({ this.setState({

7
ts/components/session/RegistrationTabs.tsx
Unescape Escape View File

@ -12,6 +12,7 @@ import { SessionHtmlRenderer } from './SessionHTMLRenderer';
import { SessionIdEditable } from './SessionIdEditable'; import { SessionIdEditable } from './SessionIdEditable';
import { SessionSpinner } from './SessionSpinner'; import { SessionSpinner } from './SessionSpinner';
import { StringUtils, ToastUtils } from '../../session/utils'; import { StringUtils, ToastUtils } from '../../session/utils';
import { createOrUpdateItem } from '../../../js/modules/data';
enum SignInMode { enum SignInMode {
Default, Default,
@ -862,6 +863,12 @@ export class RegistrationTabs extends React.Component<{}, State> {
language, language,
trimName trimName
); );
// FIXME remove everything related to hasSeenLightModeDialog at some point in the future (27/08/2020)
const data = {
id: 'hasSeenLightModeDialog',
value: true,
};
await createOrUpdateItem(data);
trigger('openInbox'); trigger('openInbox');
} catch (e) { } catch (e) {
ToastUtils.push({ ToastUtils.push({

12
ts/components/session/SessionConfirm.tsx
Unescape Escape View File

@ -2,6 +2,7 @@ import React from 'react';
import { SessionModal } from './SessionModal'; import { SessionModal } from './SessionModal';
import { SessionButton, SessionButtonColor } from './SessionButton'; import { SessionButton, SessionButtonColor } from './SessionButton';
import { SessionHtmlRenderer } from './SessionHTMLRenderer'; import { SessionHtmlRenderer } from './SessionHTMLRenderer';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
interface Props { interface Props {
message: string; message: string;
@ -16,6 +17,8 @@ interface Props {
hideCancel: boolean; hideCancel: boolean;
okTheme: SessionButtonColor; okTheme: SessionButtonColor;
closeTheme: SessionButtonColor; closeTheme: SessionButtonColor;
sessionIcon?: SessionIconType;
iconSize?: SessionIconSize;
} }
export class SessionConfirm extends React.Component<Props> { export class SessionConfirm extends React.Component<Props> {
@ -41,6 +44,8 @@ export class SessionConfirm extends React.Component<Props> {
onClickOk, onClickOk,
onClickClose, onClickClose,
hideCancel, hideCancel,
sessionIcon,
iconSize,
} = this.props; } = this.props;
const okText = this.props.okText || window.i18n('ok'); const okText = this.props.okText || window.i18n('ok');
@ -62,6 +67,13 @@ export class SessionConfirm extends React.Component<Props> {
{!showHeader && <div className="spacer-lg" />} {!showHeader && <div className="spacer-lg" />}
<div className="session-modal__centered"> <div className="session-modal__centered">
{sessionIcon && (
<div>
<SessionIcon iconType={sessionIcon} iconSize={iconSize} />
<div className="spacer-lg" />
</div>
)}
<SessionHtmlRenderer <SessionHtmlRenderer
tag="span" tag="span"
className={messageSubText} className={messageSubText}

7
ts/components/session/icon/Icons.tsx
Unescape Escape View File

@ -28,6 +28,7 @@ export enum SessionIconType {
Search = 'search', Search = 'search',
Send = 'send', Send = 'send',
Star = 'star', Star = 'star',
Sun = 'sun',
QR = 'qr', QR = 'qr',
Users = 'users', Users = 'users',
Upload = 'upload', Upload = 'upload',
@ -39,6 +40,7 @@ export enum SessionIconSize {
Medium = 'medium', Medium = 'medium',
Large = 'large', Large = 'large',
Huge = 'huge', Huge = 'huge',
Max = 'max',
} }
export const icons = { export const icons = {
@ -196,6 +198,11 @@ export const icons = {
'M9.38,2.17c-1.73,0-3.12,1.4-3.12,3.12s1.4,3.12,3.12,3.12s3.12-1.4,3.12-3.12S11.1,2.17,9.38,2.17z M16.93,0.25c2.3,0.59,3.92,2.67,3.92,5.05s-1.61,4.46-3.92,5.05c-0.56,0.14-1.12-0.19-1.27-0.75c-0.14-0.56,0.19-1.12,0.75-1.27 c1.38-0.35,2.35-1.6,2.35-3.03s-0.97-2.67-2.35-3.03c-0.56-0.14-0.9-0.71-0.75-1.27C15.8,0.44,16.37,0.11,16.93,0.25z M9.38,0.08 c2.88,0,5.21,2.33,5.21,5.21s-2.33,5.21-5.21,5.21S4.17,8.17,4.17,5.29C4.17,2.42,6.5,0.08,9.38,0.08z M21.09,12.75 c2.22,0.57,3.8,2.53,3.9,4.81L25,17.79v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08 c0-1.42-0.96-2.67-2.34-3.02c-0.56-0.14-0.89-0.71-0.75-1.27C19.97,12.94,20.54,12.61,21.09,12.75z M13.54,12.58 c2.8,0,5.09,2.21,5.2,4.99v0.22v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08 c0-1.67-1.3-3.03-2.95-3.12h-0.18H5.21c-1.67,0-3.03,1.3-3.12,2.95v0.18v2.08c0,0.58-0.47,1.04-1.04,1.04 c-0.54,0-0.98-0.41-1.04-0.93L0,19.88V17.8c0-2.8,2.21-5.09,4.99-5.2h0.22h8.33V12.58z', 'M9.38,2.17c-1.73,0-3.12,1.4-3.12,3.12s1.4,3.12,3.12,3.12s3.12-1.4,3.12-3.12S11.1,2.17,9.38,2.17z M16.93,0.25c2.3,0.59,3.92,2.67,3.92,5.05s-1.61,4.46-3.92,5.05c-0.56,0.14-1.12-0.19-1.27-0.75c-0.14-0.56,0.19-1.12,0.75-1.27 c1.38-0.35,2.35-1.6,2.35-3.03s-0.97-2.67-2.35-3.03c-0.56-0.14-0.9-0.71-0.75-1.27C15.8,0.44,16.37,0.11,16.93,0.25z M9.38,0.08 c2.88,0,5.21,2.33,5.21,5.21s-2.33,5.21-5.21,5.21S4.17,8.17,4.17,5.29C4.17,2.42,6.5,0.08,9.38,0.08z M21.09,12.75 c2.22,0.57,3.8,2.53,3.9,4.81L25,17.79v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08 c0-1.42-0.96-2.67-2.34-3.02c-0.56-0.14-0.89-0.71-0.75-1.27C19.97,12.94,20.54,12.61,21.09,12.75z M13.54,12.58 c2.8,0,5.09,2.21,5.2,4.99v0.22v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08 c0-1.67-1.3-3.03-2.95-3.12h-0.18H5.21c-1.67,0-3.03,1.3-3.12,2.95v0.18v2.08c0,0.58-0.47,1.04-1.04,1.04 c-0.54,0-0.98-0.41-1.04-0.93L0,19.88V17.8c0-2.8,2.21-5.09,4.99-5.2h0.22h8.33V12.58z',
viewBox: '0 0 25 21', viewBox: '0 0 25 21',
}, },
[SessionIconType.Sun]: {
path:
'M5.99997005,30 L2.00002995,30 C0.895437462,30 0,30.8955438 0,32 C0,33.1044562 0.895437462,34 2.00002995,34 L5.99997005,34 C7.10444275,34 8,33.1045759 8,32 C8,30.8954241 7.10444275,30 5.99997005,30 Z M61.9999701,30 L58.0000299,30 C56.8955573,30 56,30.8954241 56,32 C56,33.1045759 56.8954375,34 58.0000299,34 L61.9999701,34 C63.1044427,34 64,33.1045759 64,32 C64,30.8954241 63.1045625,30 61.9999701,30 Z M32,56 C30.8955438,56 30,56.8954375 30,58.0000299 L30,61.9999701 C30,63.1044427 30.8954241,64 32,64 C33.1045759,64 34,63.1045625 34,61.9999701 L34,58.0000299 C34,56.8955573 33.1044562,56 32,56 Z M32,0 C30.8955438,0 30,0.895437462 30,2.00002995 L30,5.99997005 C30,7.10444275 30.8954241,8 32,8 C33.1045759,8 34,7.10456254 34,5.99997005 L34,2.00002995 C34,0.895437462 33.1044562,0 32,0 Z M47.7317718,56.7845838 L45.7319182,53.0721056 C45.1797305,52.0469599 43.9566528,51.6955731 43.0002063,52.2875514 C42.0437597,52.8794013 41.7160405,54.1903297 42.2682282,55.2154754 L44.2680818,58.9279535 C44.8205091,59.9536127 46.0439461,60.3041008 46.9997937,59.7125077 C47.9562403,59.1206578 48.2839595,57.8097294 47.7317718,56.7845838 Z M21.7317718,8.78454964 L19.7319182,5.07209798 C19.1797305,4.0469596 17.9566528,3.69557529 17.0002063,4.28754937 C16.0437597,4.87939507 15.7160405,6.19031404 16.2682282,7.21545242 L18.2680818,10.9279041 C18.8205091,11.953556 20.0439461,12.30417 20.9997937,11.7124527 C21.9562403,11.120607 22.2839595,9.80968802 21.7317718,8.78454964 Z M58.9279441,44.2681449 L55.2154404,42.2683526 C54.1901593,41.7159423 52.8793503,42.0437712 52.2874963,43.0003082 C51.6956424,43.9567254 52.0469032,45.1797656 53.0720559,45.7319364 L56.7845596,47.7317287 C57.8091988,48.2837797 59.1203929,47.9566694 59.7125037,46.9997731 C60.3043576,46.0433559 59.9530968,44.8203157 58.9279441,44.2681449 Z M10.9279935,18.2681287 L7.21546334,16.2683276 C6.1901749,15.7159149 4.87922822,16.043865 4.28749839,17.0002864 C3.69564018,17.9567078 4.04690354,19.1797533 5.07206359,19.7319265 L8.78459372,21.7317275 C9.80924022,22.2837809 11.1204437,21.9566692 11.7125587,20.9997687 C12.3042885,20.0433474 11.9531535,18.8203018 10.9279935,18.2681287 Z M59.7125037,17.0002509 C59.1206497,16.0438126 57.8098407,15.7159764 56.7845596,16.2682791 L53.0720559,18.2681157 C52.0469032,18.8202986 51.6956424,20.0433659 52.2874963,20.9998042 C52.8796071,21.9567217 54.1909296,22.2837194 55.2154404,21.731776 L58.9279441,19.7319395 C59.9530968,19.1797565 60.3043576,17.9566893 59.7125037,17.0002509 Z M11.7124767,43.0002066 C11.1207531,42.0437597 9.80969199,41.7160405 8.78454285,42.2682283 L5.07205219,44.2680826 C4.04690304,44.8202704 3.69564342,46.0433485 4.28749534,46.9997953 C4.87960402,47.9567213 6.19092192,48.2837219 7.21542915,47.7317736 L10.9279198,45.7319194 C11.9531973,45.1797315 12.3043286,43.9566534 11.7124767,43.0002066 Z M46.9997937,4.28760336 C46.0432274,3.69550719 44.8202695,4.04701615 44.2680818,5.07214363 L42.2682282,8.78455581 C41.7160405,9.80968329 42.0437597,11.1205883 43.0002063,11.7124277 C43.9561737,12.3041388 45.1794909,11.9536568 45.7319182,10.9278875 L47.7317718,7.21547528 C48.2839595,6.19047618 47.9562403,4.87957115 46.9997937,4.28760336 Z M20.9997937,52.2876314 C20.0433472,51.6955352 18.8201497,52.0469158 18.2680818,53.0721716 L16.2682282,56.7845838 C15.7160405,57.8097113 16.0437597,59.1206163 17.0002063,59.7124557 C17.9561737,60.3041668 19.1794909,59.9535565 19.7319182,58.9279155 L21.7317718,55.2155033 C22.2839595,54.1903758 21.9562403,52.8794708 20.9997937,52.2876314 Z M31.5,12 C20.7477571,12 12,20.7477571 12,31.5 C12,42.2522429 20.7477571,51 31.5,51 C42.2522429,51 51,42.2522429 51,31.5 C51,20.7477571 42.252368,12 31.5,12 Z M31.5,47.6430057 C22.5988336,47.6430057 15.3569943,40.4012983 15.3569943,31.5 C15.3569943,22.5987017 22.5988336,15.3569943 31.5,15.3569943 C40.4011664,15.3569943 47.6430057,22.5988336 47.6430057,31.5 C47.6430057,40.4011664 40.4012983,47.6430057 31.5,47.6430057 Z',
viewBox: '0 0 64 64',
},
[SessionIconType.Upload]: { [SessionIconType.Upload]: {
path: path:
'M380.032,133.472l-112-128C264.992,2.016,260.608,0,256,0c-4.608,0-8.992,2.016-12.032,5.472l-112,128 c-4.128,4.736-5.152,11.424-2.528,17.152C132.032,156.32,137.728,160,144,160h64v208c0,8.832,7.168,16,16,16h64 c8.832,0,16-7.168,16-16V160h64c6.272,0,11.968-3.648,14.56-9.376C385.152,144.896,384.192,138.176,380.032,133.472z M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z', 'M380.032,133.472l-112-128C264.992,2.016,260.608,0,256,0c-4.608,0-8.992,2.016-12.032,5.472l-112,128 c-4.128,4.736-5.152,11.424-2.528,17.152C132.032,156.32,137.728,160,144,160h64v208c0,8.832,7.168,16,16,16h64 c8.832,0,16-7.168,16-16V160h64c6.272,0,11.968-3.648,14.56-9.376C385.152,144.896,384.192,138.176,380.032,133.472z M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z',

3
ts/components/session/icon/SessionIcon.tsx
Unescape Escape View File

@ -49,6 +49,9 @@ export class SessionIcon extends React.PureComponent<Props> {
case SessionIconSize.Huge: case SessionIconSize.Huge:
iconDimensions = '30'; iconDimensions = '30';
break; break;
case SessionIconSize.Max:
iconDimensions = '80';
break;
default: default:
iconDimensions = '20'; iconDimensions = '20';
} }

3
ts/window.d.ts vendored
Unescape Escape View File

@ -11,6 +11,7 @@ import { SwarmPolling } from './session/snode_api/swarmPolling';
import { LibTextsecure } from '../libtextsecure'; import { LibTextsecure } from '../libtextsecure';
import { ConversationType } from '../js/modules/data'; import { ConversationType } from '../js/modules/data';
import { RecoveryPhraseUtil } from '../libloki/modules/mnemonic'; import { RecoveryPhraseUtil } from '../libloki/modules/mnemonic';
import { ConfirmationDialogParams } from '../background';
/* /*
We declare window stuff here instead of global.d.ts because we are importing other declarations. We declare window stuff here instead of global.d.ts because we are importing other declarations.
@ -38,7 +39,7 @@ declare global {
attemptConnection: ConversationType; attemptConnection: ConversationType;
clearLocalData: any; clearLocalData: any;
clipboard: any; clipboard: any;
confirmationDialog: any; confirmationDialog: (params: ConfirmationDialogParams) => any;
dcodeIO: any; dcodeIO: any;
deleteAccount: any; deleteAccount: any;
displayNameRegex: any; displayNameRegex: any;

Write Preview
Loading…
Cancel
Save