fix light theme in react refactor

background.html

@@ -311,7 +311,6 @@
   <script type='text/javascript' src='js/views/bulk_edit_view.js'></script>
   <script type='text/javascript' src='js/views/group_member_list_view.js'></script>
   <script type='text/javascript' src='js/views/recorder_view.js'></script>
-  <script type='text/javascript' src='js/views/conversation_view.js'></script>
   <script type='text/javascript' src='js/views/inbox_view.js'></script>
   <script type='text/javascript' src='js/views/network_status_view.js'></script>
   <script type='text/javascript' src='js/views/nickname_dialog_view.js'></script>

background_test.html

@@ -314,7 +314,6 @@
   <script type='text/javascript' src='js/views/bulk_edit_view.js'></script>
   <script type='text/javascript' src='js/views/group_member_list_view.js'></script>
   <script type='text/javascript' src='js/views/recorder_view.js'></script>
-  <script type='text/javascript' src='js/views/conversation_view.js'></script>
   <script type='text/javascript' src='js/views/inbox_view.js'></script>
   <script type='text/javascript' src='js/views/network_status_view.js'></script>
   <script type='text/javascript' src='js/views/nickname_dialog_view.js'></script>

js/models/conversations.js

@@ -1861,6 +1861,7 @@
         message => message.get('received_at') <= newestUnreadDate
       );
 
+
       let read = await Promise.all(
         _.map(oldUnread, async providedM => {
           const m = MessageController.register(providedM.id, providedM);

js/views/conversation_view.js

@@ -204,13 +204,6 @@
           onShowSafetyNumber: () => {
             this.showSafetyNumber();
           },
-          onShowAllMedia: async () => {
-            this.updateHeader();
-          },
-          onShowGroupMembers: async () => {
-            await this.showMembers();
-            this.updateHeader();
-          },
           onGoBack: () => {
             this.resetPanel();
             this.updateHeader();

stylesheets/_modules.scss

@@ -1279,6 +1279,7 @@
   display: flex;
   flex-grow: 1;
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 20px;
 }
 
@@ -1286,6 +1287,7 @@
   display: flex;
   flex-grow: 1;
   flex-direction: column;
+  width: 100%;
 }
 
 // Module: Attachment Section
@@ -1341,13 +1343,16 @@
   display: inline-flex;
   flex-direction: column;
   flex-grow: 1;
-  flex-shrink: 0;
   margin-inline-start: 8px;
   margin-inline-end: 8px;
+  min-width: 0;
 }
 
 .module-document-list-item__file-name {
   font-weight: bold;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
 }
 
 .module-document-list-item__file-size {

stylesheets/_session.scss

@@ -1447,7 +1447,7 @@ input {
 
   &.selected {
     @include themify($themes) {
-      background-color: themed('conversationItemSelected');
+      background-color: themed('conversationItemSelected') !important;
     }
   }
 

stylesheets/_session_constants.scss

@@ -217,3 +217,5 @@ $session-fadein-duration: 0.1s;
 @mixin session-dark-background-hover {
   background-color: $session-shade-7;
 }
+
+$composition-container-height: 60px;

stylesheets/_session_conversation.scss

@@ -1,4 +1,3 @@
-$composition-container-height: 60px;
 
 @keyframes fadein {
   from {
@@ -74,10 +73,12 @@ $composition-container-height: 60px;
     transition: transform 1.5 * $session-transition-duration ease-in-out;
     transform: translateX(100%);
     will-change: transform;
+    width: 25vw;
 
     &.show {
       transform: none;
       transition: transform $session-transition-duration ease-in-out;
+      z-index: 2;
     }
   }
 }
@@ -106,7 +107,6 @@ $composition-container-height: 60px;
 
     .session-button.default.danger {
       display: flex;
-      width: 80px;
     }
   }
   .message-selection-overlay div[role='button'] {
@@ -130,7 +130,6 @@ $composition-container-height: 60px;
   flex-grow: 1;
   flex-direction: column;
   position: relative;
-  background-color: $session-background;
   outline: none;
 
   .conversation-messages {
@@ -143,6 +142,12 @@ $composition-container-height: 60px;
     outline: none;
     position: relative;
 
+    @include themify($themes) {
+      border-left: themed('sessionBorder');
+      border-top: themed('sessionBorder');
+      border-bottom: themed('sessionBorder');
+    }
+
     &__blocking-overlay {
       background-color: rgba(0, 0, 0, 0.8);
       position: absolute;
@@ -213,9 +218,11 @@ $composition-container-height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: $session-shade-4;
   padding: 0px $session-margin-md;
   min-height: min-content;
+  @include themify($themes) {
+    background: themed('inputBackground');
+  }
 
   & > .session-icon-button {
     margin-right: $session-margin-sm;
@@ -227,7 +234,6 @@ $composition-container-height: 60px;
     opacity: 0.8;
 
     .send {
-      background-color: $session-shade-14;
       padding: $session-margin-xs;
       border-radius: 50%;
       height: 30px;
@@ -248,11 +254,13 @@ $composition-container-height: 60px;
       min-height: $composition-container-height / 3;
       max-height: 3 * $composition-container-height;
       margin-right: $session-margin-md;
-      color: $session-color-white;
+      @include themify($themes) {
+        color: themed('textColor');
+      }
+      background: transparent;
       resize: none;
       display: flex;
       flex-grow: 1;
-      background: transparent;
       outline: none;
       border: none;
       font-size: 14px;
@@ -379,7 +387,6 @@ $composition-container-height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $session-shade-5;
     width: $actions-element-size;
     height: $actions-element-size;
     border-radius: 50%;

stylesheets/_session_group_panel.scss

@@ -80,8 +80,7 @@
     margin-top: auto;
     width: 100%;
     border: none;
-    height: 51px;
+    height: $composition-container-height;
-    background-color: black;
     flex-shrink: 0;
     align-items: center;
     @include themify($themes) {

stylesheets/_session_left_pane.scss

@@ -387,7 +387,7 @@ $session-compose-margin: 20px;
   .session-button.square-outline.square.white,
   .session-button.square-outline.square.danger {
     flex-grow: 1;
-    height: 51px;
+    height: $composition-container-height;
 
     @include themify($themes) {
       border: themed('sessionBorder');

test/index.html

@@ -323,7 +323,6 @@
   <script type="text/javascript" src="../js/views/bulk_edit_view.js"></script>
   <script type="text/javascript" src="../js/views/group_member_list_view.js"></script>
   <script type="text/javascript" src="../js/views/recorder_view.js"></script>
-  <script type="text/javascript" src="../js/views/conversation_view.js"></script>
   <script type="text/javascript" src="../js/views/inbox_view.js"></script>
   <script type="text/javascript" src="../js/views/network_status_view.js"></script>
   <script type="text/javascript" src="../js/views/nickname_dialog_view.js"></script>

ts/components/ConversationListItem.tsx

@@ -302,7 +302,7 @@ class ConversationListItem extends React.PureComponent<Props> {
       style,
       mentionedUs,
     } = this.props;
-    const triggerId = `conversation-item-${phoneNumber}-ctxmenu`;
+    const triggerId = `conversation-item-${phoneNumber}-ctxmenu-${Date.now()}`;
 
     return (
       <div key={triggerId}>

ts/components/conversation/ConversationHeader.tsx

@@ -75,8 +75,6 @@ interface Props {
   onDeleteSelectedMessages: () => void;
 
   onShowSafetyNumber: () => void;
-  onShowAllMedia: () => void;
-  onShowGroupMembers: () => void;
   onGoBack: () => void;
 
   onBlockUser: () => void;
@@ -421,7 +419,6 @@ class ConversationHeader extends React.Component<Props> {
       isRss,
       onResetSession,
       onSetDisappearingMessages,
-      onShowGroupMembers,
       onShowSafetyNumber,
       timerOptions,
       onBlockUser,
@@ -437,13 +434,6 @@ class ConversationHeader extends React.Component<Props> {
       onSetDisappearingMessages,
       i18n
     );
-    const showMembersMenuItem = Menu.getShowMemberMenuItem(
-      isPublic,
-      isRss,
-      isGroup,
-      onShowGroupMembers,
-      i18n
-    );
 
     const showSafetyNumberMenuItem = Menu.getShowSafetyNumberMenuItem(
       isPublic,
@@ -473,7 +463,6 @@ class ConversationHeader extends React.Component<Props> {
     return (
       <React.Fragment>
         {disappearingMessagesMenuItem}
-        {showMembersMenuItem}
         {showSafetyNumberMenuItem}
         {resetSessionMenuItem}
         {blockHandlerMenuItem}

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -208,7 +208,6 @@ export class SessionCompositionBox extends React.Component<Props, State> {
           <SessionIconButton
             iconType={SessionIconType.Send}
             iconSize={SessionIconSize.Large}
-            iconColor={Constants.UI.COLORS.WHITE}
             iconRotation={90}
             onClick={this.onSendMessage}
           />

ts/components/session/conversation/SessionConversation.tsx

@@ -535,16 +535,9 @@ export class SessionConversation extends React.Component<any, State> {
         this.setState({ infoViewState: undefined });
       },
 
-      onShowAllMedia: async () => {
-        conversation.updateHeader();
-      },
       onUpdateGroupName: () => {
         conversation.onUpdateGroupName();
       },
-      onShowGroupMembers: async () => {
-        window.Whisper.events.trigger('updateGroupMembers', conversation);
-        conversation.updateHeader();
-      },
 
       onBlockUser: () => {
         conversation.block();
@@ -590,6 +583,9 @@ export class SessionConversation extends React.Component<any, State> {
 
     const ourPK = window.textsecure.storage.user.getNumber();
     const members = conversation.get('members') || [];
+    const isAdmin = conversation.isMediumGroup()
+    ? true
+    : conversation.get('groupAdmins').includes(ourPK);
 
     return {
       id: conversation.id,
@@ -603,7 +599,7 @@ export class SessionConversation extends React.Component<any, State> {
       isKickedFromGroup: conversation.attributes.isKickedFromGroup,
       isGroup: !conversation.isPrivate(),
       isPublic: conversation.isPublic(),
-      isAdmin: conversation.get('groupAdmins').includes(ourPK),
+      isAdmin,
       isRss: conversation.isRss(),
       isBlocked: conversation.isBlocked(),
 
@@ -612,8 +608,13 @@ export class SessionConversation extends React.Component<any, State> {
         value: item.get('seconds'),
       })),
 
-      onSetDisappearingMessages: (seconds: any) =>
+      onSetDisappearingMessages: (seconds: any) => {
-        conversation.setDisappearingMessages(seconds),
+          if (seconds > 0) {
+            conversation.updateExpirationTimer(seconds);
+          } else {
+            conversation.updateExpirationTimer(null);
+          }
+        },
 
       onGoBack: () => {
         this.toggleGroupSettingsPane();
@@ -626,8 +627,7 @@ export class SessionConversation extends React.Component<any, State> {
         window.Whisper.events.trigger('updateGroupMembers', conversation);
       },
       onInviteContacts: () => {
-        // VINCE TODO: Inviting contacts ⚡️
+        window.Whisper.events.trigger('inviteContacts', conversation);
-        return;
       },
       onLeaveGroup: () => {
         window.Whisper.events.trigger('leaveGroup', conversation);
@@ -872,10 +872,10 @@ export class SessionConversation extends React.Component<any, State> {
     // If removable from server, we "Unsend" - otherwise "Delete"
     const pluralSuffix = multiple ? 's' : '';
     const title = window.i18n(
-      isPublic ? `unsendMessage${pluralSuffix}` : `deleteMessage${pluralSuffix}`
+      isServerDeletable ? `deleteMessage${pluralSuffix}ForEveryone` : `deleteMessage${pluralSuffix}`
     );
 
-    const okText = window.i18n(isServerDeletable ? 'unsend' : 'delete');
+    const okText = window.i18n(isServerDeletable ? 'deleteForEveryone' : 'delete');
 
     window.confirmationDialog({
       title,

ts/components/session/conversation/SessionRecording.tsx

@@ -207,7 +207,6 @@ export class SessionRecording extends React.Component<Props, State> {
             <SessionIconButton
               iconType={SessionIconType.Pause}
               iconSize={SessionIconSize.Medium}
-              iconColor={Constants.UI.COLORS.WHITE}
               onClick={actionPauseFn}
             />
           )}
@@ -250,7 +249,6 @@ export class SessionRecording extends React.Component<Props, State> {
             <SessionIconButton
               iconType={SessionIconType.Send}
               iconSize={SessionIconSize.Large}
-              iconColor={Constants.UI.COLORS.WHITE}
               iconRotation={90}
               onClick={this.onSendVoiceMessage}
             />