small UI fixes for caption editor

stylesheets/_modules.scss

@@ -2158,12 +2158,10 @@
 // Module: Caption Editor
 
 .module-caption-editor {
-  @include themify($themes) {
-    background-color: themed('inboxBackground');
-  }
+  background-color: rgba(0, 0, 0, 0.8);
   z-index: 20;
 
-  position: absolute;
+  position: fixed;
   left: 0;
   right: 0;
   top: 0;
@@ -2172,6 +2170,10 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+
+  .session-button {
+    margin-inline-start: 15px;
+  }
 }
 
 .module-caption-editor__close-button {
@@ -2184,9 +2186,8 @@
   width: 30px;
   height: 30px;
   z-index: 2;
-  @include themify($themes) {
-    @include color-svg('../images/x-16.svg', themed('textColor'));
-  }
+  // the background of the lightbox is dark
+  @include color-svg('../images/x-16.svg', white);
 }
 
 .module-caption-editor__media-container {
@@ -2240,15 +2241,21 @@
 .module-caption-editor__input-container {
   display: flex;
 
+  input::placeholder {
+    color: white;
+  }
+
   .session-input-with-label-container {
-    @include themify($themes) {
-      color: themed('textColor');
-      background-color: themed('inputBackground');
-    }
+    color: black;
+    background-color: $inputBackgroundColor;
+
+    width: 30vw;
+
     border-radius: 100px;
-    @include themify($themes) {
+    #session-input-floating-label {
       padding: $session-margin-sm;
     }
+
     label.session-input-with-label-container.filled {
       visibility: hidden;
     }
@@ -2264,12 +2271,6 @@
   }
 }
 
-.module-caption-editor {
-  .session-button {
-    margin-inline-start: 15px;
-  }
-}
-
 .module-caption-editor__caption-input {
   height: 36px;
   font-size: 14px;

stylesheets/_theme_dark.scss

@@ -746,22 +746,6 @@
     background-color: $color-gray-05;
   }
 
-  // Module: Caption Editor
-
-  .module-caption-editor {
-    background-color: $color-black;
-  }
-
-  .module-caption-editor__close-button {
-    @include color-svg('../images/x-16.svg', $color-white);
-  }
-
-  .module-caption-editor__media-container {
-    background-color: $color-black;
-  }
-
-  // Module: Search Results
-
   .module-search-results__conversations-header {
     color: $color-gray-05;
   }

stylesheets/themes.scss

@@ -8,6 +8,7 @@ $accentDarkTheme: #00f782;
 
 $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts
 $borderDarkTheme: rgba($white, 0.06);
+$inputBackgroundColor: #8e8e93;
 
 $borderAvatarColor: unquote(
   '#00000059'
@@ -22,7 +23,7 @@ $themes: (
     modalBackground: #fcfcfc,
     fakeChatBubbleBackground: #f5f5f5,
     // input
-      inputBackground: rgba(#8e8e93, 0.12),
+      inputBackground: rgba($inputBackgroundColor, 0.12),
     // text
       textColor: $black,
     textColorSubtle: #a0a0a0,
@@ -72,7 +73,7 @@ $themes: (
     modalBackground: #101011,
     fakeChatBubbleBackground: #212121,
     // input
-      inputBackground: rgba(#8e8e93, 0.12),
+      inputBackground: rgba($inputBackgroundColor, 0.12),
     // text
       textColor: $white,
     textColorSubtle: #a0a0a0,

ts/components/CaptionEditor.tsx

@@ -53,7 +53,7 @@ export class CaptionEditor extends React.Component<Props, State> {
   }
 
   public renderObject() {
-    const { url, attachment } = this.props;
+    const { url, onClose, attachment } = this.props;
     const { contentType } = attachment || { contentType: null };
 
     const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType);
@@ -63,6 +63,7 @@ export class CaptionEditor extends React.Component<Props, State> {
           className="module-caption-editor__image"
           alt={window.i18n('imageAttachmentAlt')}
           src={url}
+          onClick={onClose}
         />
       );
     }
@@ -106,14 +107,13 @@ export class CaptionEditor extends React.Component<Props, State> {
               onEnterPressed={this.onSave}
               value={caption}
             />
-            {caption ? (
-              <SessionButton
-                text={window.i18n('save')}
-                onClick={this.onSave}
-                buttonType={SessionButtonType.Brand}
-                buttonColor={SessionButtonColor.Green}
-              />
-            ) : null}
+            <SessionButton
+              text={window.i18n('save')}
+              onClick={this.onSave}
+              buttonType={SessionButtonType.Brand}
+              buttonColor={SessionButtonColor.Green}
+              disabled={!caption}
+            />
           </div>
         </div>
       </div>

ts/components/session/conversation/SessionConversation.tsx

@@ -28,10 +28,9 @@ import * as MIME from '../../../types/MIME';
 import { SessionFileDropzone } from './SessionFileDropzone';
 import { ConversationType } from '../../../state/ducks/conversations';
 import { MessageView } from '../../MainViewController';
-import { getMessageById, removeMessage } from '../../../../js/modules/data';
+import { getMessageById } from '../../../../js/modules/data';
 import { pushUnblockToSend } from '../../../session/utils/Toast';
 import { MessageDetail } from '../../conversation/MessageDetail';
-import { Toast } from 'react-toastify/dist/components';
 
 interface State {
   // Message sending progress
@@ -652,7 +651,10 @@ export class SessionConversation extends React.Component<Props, State> {
     this.updateSendingProgress(100, -1);
   }
 
-  public async deleteMessagesById(messageIds: Array<string>, askUserForConfirmation: boolean) {
+  public async deleteMessagesById(
+    messageIds: Array<string>,
+    askUserForConfirmation: boolean
+  ) {
     // Get message objects
     const { conversationKey, messages } = this.props;
 
@@ -660,9 +662,7 @@ export class SessionConversation extends React.Component<Props, State> {
       conversationKey
     );
     const selectedMessages = messages.filter(message =>
-      messageIds.find(
-        selectedMessage => selectedMessage === message.id
-      )
+      messageIds.find(selectedMessage => selectedMessage === message.id)
     );
 
     const multiple = selectedMessages.length > 1;

ts/session/utils/Toast.tsx

@@ -244,5 +244,10 @@ export function pushYouLeftTheGroup() {
 }
 
 export function pushDeleted() {
-  pushToastSuccess('deleted', window.i18n('deleted'), undefined, SessionIconType.Check);
+  pushToastSuccess(
+    'deleted',
+    window.i18n('deleted'),
+    undefined,
+    SessionIconType.Check
+  );
 }