Added session button types and session button colors

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',

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-1: #00f480;
-$session-color-green-alt-2: #007e42;
+$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);
+@mixin session-color-subtle($color) {
-
+  color: rgba($color, 0.6);
-$session-color-dark-highlight: #212126;
+}
 
-$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;
+    padding: 0px 18px;
-  }
+    line-height: 33px;
-  &.secondary {
+    font-size: 13px;
-    @include square-button($session-color-secondary);
   }
-  &.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'] {

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 {
+  .module-message__author,
-    color: $session-color-dark-5;
+  .module-message__metadata__badge,
-  }
+  .module-message__metadata__date--incoming,
-
-  .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;
+    @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;
+      background-image: $session-gradient-green;
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37);
+      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;
-    }
   }
 }
 

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<Props> {
   }
 
   public renderSelectionOverlay() {
+    const { onDeleteMessages } = this.props;
+
     return (
       <div className="message-selection-overlay">
         <div className="close-button">
           <SessionIconButton
             iconType={SessionIconType.Exit}
-            iconSize={SessionIconSize.Large}
+            iconSize={SessionIconSize.Medium}
           />
         </div>
 
         <div className="button-group">
           <SessionButton
-            buttonType={SessionButtonTypes.secondary}
+            buttonType={SessionButtonType.Default}
+            buttonColor={SessionButtonColor.Primary}
             text={'Forward'}
+            onClick={onDeleteMessages}
           />
 
           <SessionButton
-            buttonType={SessionButtonTypes.danger}
+            buttonType={SessionButtonType.Default}
+            buttonColor={SessionButtonColor.Danger}
             text={'Delete'}
+            onClick={onDeleteMessages}
           />
         </div>
       </div>

ts/components/session/SessionButton.tsx

@@ -3,28 +3,65 @@ import classNames from 'classnames';
 
 //import { LocalizerType } from '../../types/Util';
 
-export enum SessionButtonTypes {
+export enum SessionButtonType {
-  fullGreen = 'fullGreen',
+  Brand = 'brand',
-  white = 'white',
+  BrandOutline = 'brand-outline',
-  green = 'green',
+  Default = 'default',
-  secondary = 'secondary',
+  DefaultOutline = 'default-outline',
-  danger = 'danger',
+  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<Props> {
+  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 (
-      <div className={classNames('session-button', buttonType)} role="button">
+      <div
+        onClick={e => {
+          this.clickHandler(e);
+        }}
+        className={classNames('session-button', buttonType, buttonColor)}
+        role="button"
+      >
         {text}
       </div>
     );
   }
+
+  private clickHandler(e: any) {
+    if (this.props.onClick) {
+      e.stopPropagation();
+      this.props.onClick();
+    }
+  }
 }