diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 05f0a4c5e..7f38dd7da 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -967,6 +967,15 @@ "continue": { "message": "Continue" }, + "noThankyou": { + "message": "No, thank you" + }, + "noMessagesTitle": { + "message": "You don't have any messages, yet." + }, + "noMessagesSubtitle": { + "message": "Would you like to join Session's public chat?" + }, "pairNewDevice": { "message": "Pair New Device" }, @@ -2580,6 +2589,9 @@ "beginYourSession": { "message": "Begin
your
Session." }, + "welcomeToSession": { + "message": "Welcome to Session" + }, "welcomeToYourSession": { "message": "Welcome to your Session" }, @@ -2707,6 +2719,9 @@ "joinChannel": { "message": "Join Open Group" }, + "joinPublicChat": { + "message": "Join Public Chat" + }, "next": { "message": "Next" }, diff --git a/background.html b/background.html index 7a137b73c..18e485aef 100644 --- a/background.html +++ b/background.html @@ -108,17 +108,17 @@
- +
+ + +
+
+ +
-
- -
-
- - -
+
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 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + + + + + + \ 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')} +
+
+ +
+ + +
+
+ +
+ ) + } + + public handleCloseOnboarding() { + this.setState({ + shouldRenderMessageOnboarding: false, + }); + } + public updateSearch(searchTerm: string) { const { updateSearchTerm, clearSearch } = this.props;