diff --git a/fonts/Wasa-Bold.otf b/fonts/Wasa-Bold.otf new file mode 100755 index 000000000..53058507d Binary files /dev/null and b/fonts/Wasa-Bold.otf differ diff --git a/js/models/conversations.js b/js/models/conversations.js index dae07006c..785867833 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -240,7 +240,10 @@ opacity: '0.3', }); - $('.message-selection-overlay').show(); + $('.message-selection-overlay').css({ + display: 'block', + 'z-index': '1', + }); $('.module-conversation-header').css({ opacity: '0.15', 'pointer-events': 'none', @@ -259,7 +262,10 @@ opacity: '1', }); - $('.message-selection-overlay').hide(); + $('.message-selection-overlay').css({ + display: 'none', + 'z-index': '0', + }); $('.module-conversation-header').css({ opacity: '1', 'pointer-events': 'auto', diff --git a/js/session_ui_manager.js b/js/session_ui_manager.js new file mode 100644 index 000000000..e69de29bb diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index fbd7b9792..d596e10ca 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -22,28 +22,51 @@ font-style: italic; } +@font-face { + font-family: 'Wasa'; + src: url('../fonts/Wasa-Bold.otf') format('truetype'); +} + // Session Colors $session-color-green: #00f782; -$session-color-green-alt-1: #00f17e; -$session-color-green-alt-2: #007e42; +$session-color-green-alt-1: #00f480; +$session-color-green-alt-2: #00fd73; +$session-color-green-alt-3: #00f782; + +$session-shade-1: #0c0c0c; +$session-shade-2: #161616; +$session-shade-3: #191818; +$session-shade-4: #1b1b1b; +$session-shade-5: #222325; +$session-shade-6: #232323; +$session-shade-7: #2e2e2e; +$session-shade-8: #2f2f2f; +$session-shade-9: #313131; +$session-shade-10: #3e3e3e; +$session-shade-11: #3f3f3f; +$session-shade-12: #3f4146; +$session-shade-13: #474646; +$session-shade-14: #535865; +$session-shade-15: #5b6c72; +$session-shade-16: #979797; +$session-shade-17: #d8d8d8; + +$session-opaque-dark-1: rgba(0, 0, 0, 0.25); +$session-opaque-dark-2: rgba(0, 0, 0, 0.37); +$session-opaque-dark-3: rgba(0, 0, 0, 0.5); $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-color-secondary: #474646; $session-color-danger: #ff4538; +$session-color-primary: $session-shade-13; +$session-color-secondary: $session-shade-16; +$session-color-warning: $session-shade-17; -$session-color-white-subtle: rgba($session-color-white, 0.6); - -$session-color-dark-highlight: #212126; +@mixin session-color-subtle($color) { + color: rgba($color, 0.6); +} -$session-font-family: 'SpaceMono'; +$session-font-family: 'Wasa'; $session-transition-duration: 0.25s; $session-icon-size-sm: 15px; @@ -52,27 +75,27 @@ $session-icon-size-lg: 30px; $session-conversation-header-height: 60px; -$session-green-gradient: linear-gradient( +$session-gradient-green: linear-gradient( 270deg, rgba($session-color-green-alt-1, 1), rgba($session-color-green-alt-1, 0.6) ); +$session-gradient-black: linear-gradient( + 90deg, + rgba($session-shade-3, 1), + rgba($session-shade-4, 0.6) +); + +$session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37); $session_message-container-border-radius: 5px; +.button-group > div { + margin-left: 5px; + margin-right: 5px; +} + .session-button { - min-width: 165px; - width: auto; - height: 45px; - line-height: 45px; - padding: 0 35px 0 35px; - font-size: 15px; - font-family: $session-font-family; - font-weight: 700; - cursor: pointer; - display: flex; - justify-content: center; - border-radius: 500px; @mixin transparent-background($textAndBorderColor) { background-color: Transparent; background-repeat: no-repeat; @@ -81,27 +104,86 @@ $session_message-container-border-radius: 5px; color: $textAndBorderColor; border: 2px solid $textAndBorderColor; } - &.full-green { - background-color: $session-color-green; + + width: auto; + display: flex; + justify-content: center; + font-weight: 700; + user-select: none; + cursor: pointer; + + &.default, + &.square, + &.brand { color: $session-color-white; + + &.green { + background-color: $session-color-green; + } + &.white { + background-color: $session-color-white; + } + &.primary { + background-color: $session-color-primary; + } + &.secondary { + background-color: $session-color-secondary; + } + &.danger { + background-color: $session-color-danger; + } + &.warning { + background-color: $session-color-warning; + } } - &.green { - @include transparent-background($session-color-green); + + &.brand-outline, + &.default-outline, + &.square-outline { + &.green { + @include transparent-background($session-color-green); + } + &.white { + @include transparent-background($session-color-white); + } + &.primary { + @include transparent-background($session-color-primary); + } + &.secondary { + @include transparent-background($session-color-secondary); + } + &.danger { + @include transparent-background($session-color-danger); + } + &.warning { + @include transparent-background($session-color-warning); + } } - &.white { - @include transparent-background($session-color-white); + + &.brand { + min-width: 165px; + height: 45px; + line-height: 45px; + padding: 0 35px 0 35px; + font-size: 15px; + font-family: $session-font-family; + border-radius: 500px; } - @mixin square-button($background-color) { + &.default, + &.square, + &.default-outline, + &.square-outline { border-radius: 2px; height: 33px; - background-color: $background-color; - } - &.secondary { - @include square-button($session-color-secondary); + padding: 0px 18px; + line-height: 33px; + font-size: 13px; } - &.danger { - @include square-button($session-color-danger); + + &.square, + &.square-outline { + border-radius: 0px; } } @@ -178,6 +260,15 @@ $session_message-container-border-radius: 5px; border-radius: $session_message-container-border-radius; } +.module-message__attachment-container, +.module-image--curved-bottom-right, +.module-image--curved-bottom-left { + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-left-radius: $session_message-container-border-radius; + border-bottom-right-radius: $session_message-container-border-radius; +} + .conversation-header .session-icon-button { @include standard-icon-button(); } @@ -195,7 +286,8 @@ $session_message-container-border-radius: 5px; .close-button { float: left; - margin-top: 10px; + margin-top: 17px; + margin-left: 7px; } } .message-selection-overlay div[role='button'] { diff --git a/stylesheets/_session_theme_dark.scss b/stylesheets/_session_theme_dark.scss index 07cce2cbb..250dd7537 100644 --- a/stylesheets/_session_theme_dark.scss +++ b/stylesheets/_session_theme_dark.scss @@ -1,36 +1,29 @@ // Messages .dark-theme { .module-conversation-header { - background-color: $session-color-dark-1; + background-color: $session-shade-4; } .discussion-container { - background-color: $session-color-dark-2; + background-image: $session-gradient-black; } .module-conversation-header { border-bottom: none; } - .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__author, + .module-message__metadata__badge, + .module-message__metadata__date--incoming, .module-message__metadata__date--outgoing { - color: $session-color-dark-5; + @include session-color-subtle($session-color-white); } .module-message__container--incoming { - background-color: $session-color-dark-1; + background-color: $session-shade-11; } .module-message__container--outgoing { - background-color: $session-color-dark-3; + background-color: $session-shade-5; } .module-message__container { @@ -38,29 +31,19 @@ box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.69); } .message-highlighted { - background-color: $session-color-dark-highlight; + background-color: $session-shade-5; border-radius: 0; } .message-selected { .module-message__container { - background-image: $session-green-gradient; - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37); + background-image: $session-gradient-green; + box-shadow: $session-dark-shadow; } .module-message__author { color: $session-color-white; } - - .module-message__metadata__badge { - color: $session-color-white; - } - .module-message__metadata__date--incoming { - color: $session-color-white-subtle; - } - .module-message__metadata__date--outgoing { - color: $session-color-white-subtle; - } } } diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 9dd08c246..d7d11bed3 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -16,7 +16,11 @@ import { SessionIconType, } from '../session/icon'; -import { SessionButton, SessionButtonTypes } from '../session/SessionButton'; +import { + SessionButton, + SessionButtonColor, + SessionButtonType, +} from '../session/SessionButton'; interface TimerOption { name: string; @@ -298,24 +302,30 @@ export class ConversationHeader extends React.Component { } public renderSelectionOverlay() { + const { onDeleteMessages } = this.props; + return (
diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx index f0ad1d8ed..587a7d522 100644 --- a/ts/components/session/SessionButton.tsx +++ b/ts/components/session/SessionButton.tsx @@ -3,28 +3,65 @@ import classNames from 'classnames'; //import { LocalizerType } from '../../types/Util'; -export enum SessionButtonTypes { - fullGreen = 'fullGreen', - white = 'white', - green = 'green', - secondary = 'secondary', - danger = 'danger', +export enum SessionButtonType { + Brand = 'brand', + BrandOutline = 'brand-outline', + Default = 'default', + DefaultOutline = 'default-outline', + Square = 'square', + SquareOutline = 'square-outline', + Simple = 'simple', +} + +export enum SessionButtonColor { + Green = 'green', + White = 'white', + Primary = 'primary', + Secondary = 'secondary', + Danger = 'danger', + Warning = 'warning', } interface Props { //i18n: LocalizerType; text: string; - buttonType: SessionButtonTypes; + buttonType: SessionButtonType; + buttonColor: SessionButtonColor; + onClick: any; } export class SessionButton extends React.PureComponent { + public static defaultProps = { + buttonType: SessionButtonType.Default, + buttonColor: SessionButtonColor.Primary, + onClick: () => null, + }; + + constructor(props: any) { + super(props); + this.clickHandler = this.clickHandler.bind(this); + } + public render() { - const { buttonType, text } = this.props; + const { buttonType, buttonColor, text } = this.props; return ( -
+
{ + this.clickHandler(e); + }} + className={classNames('session-button', buttonType, buttonColor)} + role="button" + > {text}
); } + + private clickHandler(e: any) { + if (this.props.onClick) { + e.stopPropagation(); + this.props.onClick(); + } + } }