diff --git a/images/session/Contacts.svg b/images/session/Contacts.svg new file mode 100644 index 000000000..0001cb87a --- /dev/null +++ b/images/session/Contacts.svg @@ -0,0 +1,17 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/arrow.svg b/images/session/arrow.svg new file mode 100644 index 000000000..402156e46 --- /dev/null +++ b/images/session/arrow.svg @@ -0,0 +1,11 @@ + + + + 1A + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/images/session/chatbubble.svg b/images/session/chatbubble.svg new file mode 100644 index 000000000..56dc52bab --- /dev/null +++ b/images/session/chatbubble.svg @@ -0,0 +1,17 @@ + + + + Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/chevron.svg b/images/session/chevron.svg new file mode 100644 index 000000000..407132c4a --- /dev/null +++ b/images/session/chevron.svg @@ -0,0 +1,17 @@ + + + + Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/circleplus.svg b/images/session/circleplus.svg new file mode 100644 index 000000000..075c7b7f2 --- /dev/null +++ b/images/session/circleplus.svg @@ -0,0 +1,17 @@ + + + + plus + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/ellipses.svg b/images/session/ellipses.svg new file mode 100644 index 000000000..c39d23a2b --- /dev/null +++ b/images/session/ellipses.svg @@ -0,0 +1,15 @@ + + + + vertical + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/images/session/emoji.svg b/images/session/emoji.svg new file mode 100644 index 000000000..ac698d29e --- /dev/null +++ b/images/session/emoji.svg @@ -0,0 +1,17 @@ + + + + Happy + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/eye.svg b/images/session/eye.svg new file mode 100644 index 000000000..dac9adea1 --- /dev/null +++ b/images/session/eye.svg @@ -0,0 +1,17 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/file.svg b/images/session/file.svg new file mode 100644 index 000000000..2800cb4d5 --- /dev/null +++ b/images/session/file.svg @@ -0,0 +1,17 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/gear.svg b/images/session/gear.svg new file mode 100644 index 000000000..b4777e2ad --- /dev/null +++ b/images/session/gear.svg @@ -0,0 +1,17 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/globe.svg b/images/session/globe.svg new file mode 100644 index 000000000..54ef2c20b --- /dev/null +++ b/images/session/globe.svg @@ -0,0 +1,11 @@ + + + + Style + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/images/session/icon-check.svg b/images/session/icon-check.svg new file mode 100644 index 000000000..b33e4335a --- /dev/null +++ b/images/session/icon-check.svg @@ -0,0 +1,19 @@ + + + + check + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/magnifyingglass.svg b/images/session/magnifyingglass.svg new file mode 100644 index 000000000..8fa6a5afe --- /dev/null +++ b/images/session/magnifyingglass.svg @@ -0,0 +1,30 @@ + + + + search + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/microphone.svg b/images/session/microphone.svg new file mode 100644 index 000000000..94a5b2036 --- /dev/null +++ b/images/session/microphone.svg @@ -0,0 +1,17 @@ + + + + microphone + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/moon.svg b/images/session/moon.svg new file mode 100644 index 000000000..8698a251c --- /dev/null +++ b/images/session/moon.svg @@ -0,0 +1,17 @@ + + + + Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/reply.svg b/images/session/reply.svg new file mode 100644 index 000000000..b8663b068 --- /dev/null +++ b/images/session/reply.svg @@ -0,0 +1,17 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/send.svg b/images/session/send.svg new file mode 100644 index 000000000..f92934910 --- /dev/null +++ b/images/session/send.svg @@ -0,0 +1,33 @@ + + + + send + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/session/star.svg b/images/session/star.svg new file mode 100644 index 000000000..486551da0 --- /dev/null +++ b/images/session/star.svg @@ -0,0 +1,17 @@ + + + + Shape + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4f49b7177..0de1e0db0 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -22,16 +22,32 @@ font-style: italic; } -$session-font-family: 'SpaceMono'; + + +// Session Colors $session-color-green: #00f782; $session-color-white: #fff; $session-color-black: #000; + +$session-color-dark-1: #1B1B1B; +$session-color-dark-2: #151515; +$session-color-dark-3: #404146; +$session-color-dark-4: #5C5D5F; +$session-color-dark-5: #A5A6A8; + + +$session-font-family: 'SpaceMono'; $session-transition-duration: 0.25s; $session-icon-size-sm: 15px; $session-icon-size-md: 20px; $session-icon-size-lg: 30px; + + +$session_message-container-border-radius: 5px; + + .session-button { min-width: 165px; width: auto; @@ -65,6 +81,16 @@ $session-icon-size-lg: 30px; } } + + +@mixin set-icon-margin($size) { + margin: $size / 3; +} +.session-icon{ + &.padded-left{ + @include set-icon-margin($session-icon-size-md); + } +} .session-icon-button { opacity: 0.4; cursor: pointer; @@ -73,23 +99,59 @@ $session-icon-size-lg: 30px; &:hover { opacity: 1; } - @mixin set-icon-margin($size) { - margin: $size / 3; - } + - &.small { + &.small.padded { @include set-icon-margin($session-icon-size-sm); } - &.medium { - @include set-icon-margin($session-icon-size-sm); + &.medium.padded { + @include set-icon-margin($session-icon-size-md); } - &.large { - @include set-icon-margin($session-icon-size-sm); + &.large.padded { + @include set-icon-margin($session-icon-size-lg); } } .session-icon { fill: $session-color-white; } + + + +/* CONVERSATION AND MESSAGES */ + +.module-conversation-header__title-flex, .module-conversation-header__title{ + width: 100%; + + .module-contact-name { + width: 100%; + } + + .module-contact-name__profile-number{ + text-align: center; + } +} + +.module-conversation-header { + border-bottom: none; +} + + +.module-message__author__profile-name { + font-style: normal; +} + + +.module-message__author-avatar { + flex-direction: column; + display: inline-flex; + margin-right: 20px; + padding-top: 5px; +} + + +.module-message__container { + border-radius: $session_message-container-border-radius; +} \ No newline at end of file diff --git a/stylesheets/_session_theme_dark.scss b/stylesheets/_session_theme_dark.scss new file mode 100644 index 000000000..f90dd09f2 --- /dev/null +++ b/stylesheets/_session_theme_dark.scss @@ -0,0 +1,41 @@ + + + +// Messages +.dark-theme { + .module-conversation-header { + background-color: $session-color-dark-1; + } + .discussion-container { + background-color: $session-color-dark-2; + } + + .module-message__author { + color: $session-color-dark-5; + } + + .module-message__metadata__badge { + color: $session-color-dark-4; + } + .module-message__metadata__date--incoming { + color: $session-color-dark-4; + } + .module-message__metadata__date--outgoing { + color: $session-color-dark-5; + } + + .module-message__container--incoming { + background-color: $session-color-dark-1; + } + + .module-message__container--outgoing { + background-color: $session-color-dark-3; + } + +} + + +.message-read-receipt-container { + margin-left: 5px; + } + \ No newline at end of file diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 4743fd005..8f126d33a 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -25,6 +25,7 @@ // New CSS @import 'modules'; @import 'session'; +@import 'session_theme_dark'; // Installer @import 'options'; diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index cbad995cc..9321d6b8e 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -10,6 +10,9 @@ import { SubMenu, } from 'react-contextmenu'; +import { SessionIconTypes, SessionIconSizes } from '../session/SessionIcon'; +import { SessionIconButton } from '../session/SessionIconButton'; + interface TimerOption { name: string; value: number; @@ -208,7 +211,19 @@ export class ConversationHeader extends React.Component { ); } - public renderGear(triggerId: string) { + public renderSearch() { + return ( +
+ +
+ ); + } + + public renderOptions(triggerId: string) { const { showBackButton } = this.props; if (showBackButton) { @@ -217,15 +232,16 @@ export class ConversationHeader extends React.Component { return ( -
+ ); } + public renderMenu(triggerId: string) { const { i18n, @@ -283,16 +299,17 @@ export class ConversationHeader extends React.Component { return (
+ {this.renderOptions(triggerId)} {this.renderBackButton()}
- {this.renderAvatar()} {this.renderTitle()} {isPrivateGroup ? this.renderMemberCount() : null}
{this.renderExpirationLength()} - {this.renderGear(triggerId)} + {this.renderSearch()} + {this.renderAvatar()} {this.renderMenu(triggerId)}
); diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 77be54364..b16ea55de 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -31,6 +31,7 @@ import { getIncrement } from '../../util/timer'; import { isFileDangerous } from '../../util/isFileDangerous'; import { ColorType, LocalizerType } from '../../types/Util'; import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu'; +import { SessionIcon, SessionIconTypes, SessionIconSizes } from '../session/SessionIcon'; declare global { interface Window { @@ -311,16 +312,14 @@ export class Message extends React.PureComponent {
) : null} + {!textPending && direction === 'outgoing' && status !== 'error' ? ( -
+
+ +
) : null}
); diff --git a/ts/components/session/SessionIcon.tsx b/ts/components/session/SessionIcon.tsx index e8333038b..31ca81093 100644 --- a/ts/components/session/SessionIcon.tsx +++ b/ts/components/session/SessionIcon.tsx @@ -125,6 +125,7 @@ export interface Props { iconType: SessionIconTypes; iconSize: SessionIconSizes; iconColor: string; + iconPadded: boolean; iconRotation: number; onClick: any; } @@ -134,6 +135,8 @@ export class SessionIcon extends React.PureComponent { iconSize: SessionIconSizes.Medium, iconColor: '', iconRotation: 0, + iconPadded: false, + onClick: () => null, }; constructor(props: any) { @@ -141,7 +144,7 @@ export class SessionIcon extends React.PureComponent { } public render() { - const { iconType, iconSize, iconColor, iconRotation } = this.props; + const { iconType, iconSize, iconColor, iconRotation, iconPadded } = this.props; let iconDimensions; switch (iconSize) { @@ -225,7 +228,7 @@ export class SessionIcon extends React.PureComponent { return ( { this.clickHandler = this.clickHandler.bind(this); } + public static defaultProps = SessionIcon.defaultProps; + public render() { + return (
{ this.clickHandler(e);