-
-
diff --git a/images/loki/loki_icon.png b/images/loki/loki_icon.png
new file mode 100644
index 000000000..71e3de339
Binary files /dev/null and b/images/loki/loki_icon.png differ
diff --git a/images/session/chat-bubbles.svg b/images/session/chat-bubbles.svg
new file mode 100644
index 000000000..0f06f1f53
--- /dev/null
+++ b/images/session/chat-bubbles.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/js/background.js b/js/background.js
index 737355de4..db5284657 100644
--- a/js/background.js
+++ b/js/background.js
@@ -918,7 +918,7 @@
},
});
}
- };
+ };
window.generateID = () =>
Math.random()
diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss
index 1e43e7de1..f1e2a1032 100644
--- a/stylesheets/_emoji.scss
+++ b/stylesheets/_emoji.scss
@@ -86,7 +86,8 @@ button.emoji {
opacity: 0.5;
border: none;
background: transparent;
- margin-left: 15px;
+ margin: 0px 10px 0px 15px;
+
&:before {
content: '';
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 957e416cb..bd8c2b830 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -76,7 +76,7 @@ $session-color-dark-grey: #353535;
$session-color-black: #000;
$session-color-danger: #ff453a;
$session-color-primary: $session-shade-13;
-$session-color-secondary: $session-shade-16;
+$session-color-secondary: $session-shade-6;
$session-background-overlay: #212121;
$session-background: #121212;
@@ -102,6 +102,11 @@ $session-font-md: 15px;
$session-font-lg: 18px;
$session-font-xl: 24px;
+$session-font-h1: 30px;
+$session-font-h2: 24px;
+$session-font-h3: 20px;
+$session-font-h4: 16px;
+
$session-search-input-height: 34px;
$main-view-header-height: 85px;
@@ -480,6 +485,7 @@ $session-element-border-green: 4px solid $session-color-green;
@include session-color-subtle($session-color-white);
font-family: 'SF Pro Text';
font-weight: 300;
+ font-size: $session-font-xs;
}
.module-contact-name {
@@ -524,8 +530,18 @@ label {
border-bottom-right-radius: $session_message-container-border-radius;
}
-.conversation-header .session-icon-button {
- @include standard-icon-button();
+.conversation-header {
+ .module-avatar img {
+ box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.20);
+ }
+
+ .search-icon {
+ margin-right: 10px;
+ }
+
+ .session-icon-button {
+ @include standard-icon-button();
+ }
}
.module-conversation-header {
@@ -712,6 +728,11 @@ label {
.message {
text-align: center;
}
+
+ .session-id-editable {
+ width: 30vw;
+ max-width: 700px;
+ }
}
&__centered {
@@ -807,7 +828,7 @@ label {
align-items: center;
height: 25px;
- padding: 0px 10px;
+ padding: $session-margin-md $session-margin-sm;
background-color: $session-shade-4;
@@ -1258,6 +1279,7 @@ label {
display: flex;
flex-grow: 1;
min-height: 60px;
+ margin-bottom: -5px;
}
textarea.send-message {
@@ -1566,3 +1588,71 @@ input {
}
}
}
+
+.onboarding-message-section {
+ display: flex;
+ flex-grow: 1;
+ align-items: flex-start;
+ position: relative;
+ padding: $session-margin-lg 2 * $session-margin-lg;
+ background: linear-gradient(180deg, rgba(29,28,28,1) 0%, rgba(18,18,18,1) 100%);
+
+ &__exit {
+ position: absolute;
+ top: $session-margin-lg;
+ left: $session-margin-lg;
+ }
+
+ &__container {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: 3 * $session-margin-lg;
+
+ height: 400px;
+
+ text-align: center;
+ font-family: "SF Pro Text";
+
+ }
+
+ &__title h1{
+ color: $session-color-white;
+ font-size: $session-font-h1;
+ font-weight: bold;
+ margin-bottom: 2 * $session-margin-lg;
+ }
+
+ &__icons img {
+ width: 180px;
+ margin-bottom: 2 * $session-margin-lg;
+ }
+
+ &__info {
+ font-family: "Wasa";
+ margin-bottom: 2 * $session-margin-lg;
+
+ &--title {
+ font-size: $session-font-h3;
+ line-height: $session-font-h2;
+ margin-bottom: $session-margin-md;
+ }
+
+ &--subtitle {
+ font-family: "SF Pro Text";
+ font-weight: 300;
+ line-height: $session-font-md;
+ opacity: 0.8;
+ }
+ }
+
+ &__buttons {
+ width: 100%;
+
+ .session-button:first-child {
+ margin-bottom: $session-margin-md;
+ }
+ }
+}
\ No newline at end of file
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index 8379fa2d7..fa593b10b 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@@ -413,7 +413,7 @@ $session-compose-margin: 20px;
border: 1px solid $session-shade-15;
}
@at-root .dark-theme #{&} {
- border: 1px solid $session-shade-7;
+ border: 1px solid $session-shade-6;
}
}
}
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 7703ac099..52de9723a 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -189,7 +189,7 @@ body.dark-theme {
button.emoji {
&:before {
- margin-top: 4px;
+ margin-top: 7px;
@include color-svg('../images/smile.svg', $color-dark-30);
}
}
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 28cf868ba..fe89cbc85 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -191,7 +191,7 @@ export class ConversationHeader extends React.Component
{
if (name) {
title = `${name}`;
} else {
- title = phoneNumber;
+ title = `User ${window.shortenPubkey(phoneNumber)}`;
}
}
@@ -232,7 +232,7 @@ export class ConversationHeader extends React.Component {
profileName={profileName}
size={28}
borderColor={borderColor}
- borderWidth={2}
+ borderWidth={0}
onAvatarClick={() => {
this.onAvatarClickBound(phoneNumber);
}}
diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx
index 16bc9871c..3978f5b39 100644
--- a/ts/components/session/LeftPaneMessageSection.tsx
+++ b/ts/components/session/LeftPaneMessageSection.tsx
@@ -18,6 +18,8 @@ import { SearchOptions } from '../../types/Search';
import { validateNumber } from '../../types/PhoneNumber';
import { LeftPane, RowRendererParamsType } from '../LeftPane';
import { SessionClosableOverlay } from './SessionClosableOverlay';
+import { SessionIconButton, SessionIconType, SessionIconSize } from './icon';
+import { SessionButton, SessionButtonType, SessionButtonColor } from './SessionButton';
export interface Props {
searchTerm: string;
@@ -39,13 +41,19 @@ export class LeftPaneMessageSection extends React.Component {
public constructor(props: Props) {
super(props);
+
+ const conversations = this.getCurrentConversations();
+ const length = conversations ? conversations.length : 0;
+
this.state = {
showComposeView: false,
pubKeyPasted: '',
+ shouldRenderMessageOnboarding: length === 0,
};
this.updateSearchBound = this.updateSearch.bind(this);
this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
+ this.handleCloseOnboarding = this.handleCloseOnboarding.bind(this);
this.handleOnPasteSessionID = this.handleOnPasteSessionID.bind(this);
this.handleMessageButtonClick = this.handleMessageButtonClick.bind(this);
this.debouncedSearch = debounce(this.search.bind(this), 20);
@@ -164,7 +172,7 @@ export class LeftPaneMessageSection extends React.Component {
);
}
- public render(): JSX.Element {
+ public render(): JSX.Element {5
return (
{this.renderHeader()}
@@ -176,18 +184,80 @@ export class LeftPaneMessageSection extends React.Component
{
}
public renderConversations() {
+
return (
-
- {this.renderList()}
+ {this.state.shouldRenderMessageOnboarding
+ ? (<>{this.renderMessageOnboarding()})
+ : (
+ <>
+
+ {this.renderList()}
+
+ )}
);
}
+ public renderMessageOnboarding() {
+
+ return (
+
+
+
+
+
+
+
+
{window.i18n('welcomeToSession')}
+
+
+
+
+
+
+
+
+ {window.i18n('noMessagesTitle')}
+
+
+ {window.i18n('noMessagesSubtitle')}
+
+
+
+
+
+
+
+
+
+