merged-w-clearnet

js/background.js

@@ -1038,7 +1038,6 @@
     };
 
     window.toggleMediaPermissions = () => {
-      // eslint-disable-next-line more/no-then
       const value = window.getMediaPermissions();
       window.setMediaPermissions(!value);
     };

stylesheets/_session_conversation.scss

@@ -255,6 +255,8 @@ $composition-container-height: 60px;
   }
 
   & > section.emoji-mart {
+    font-family: $session-font-default;
+    font-size: $session-font-sm;
     background-color: $session-shade-4;
     border: 1px solid $session-shade-6-alt;
     border-radius: 8px;
@@ -270,6 +272,14 @@ $composition-container-height: 60px;
       }
     }
 
+    .emoji-mart-scroll {
+      height: 340px;
+    }
+
+    .emoji-mart-category .emoji-mart-emoji span {
+      cursor: pointer;
+    }
+
     .emoji-mart-bar:last-child {
       border: none;
 

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -75,8 +75,10 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     this.onChoseAttachment = this.onChoseAttachment.bind(this);
     this.onChooseAttachment = this.onChooseAttachment.bind(this);
 
+    // Events
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onChange = this.onChange.bind(this);
+    this.onTextareaContainerClick = this.onTextareaContainerClick.bind(this);
   }
 
   public componentWillReceiveProps() {
@@ -171,11 +173,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
           onClick={this.onLoadVoiceNoteView}
         />
 
-        <div className="send-message-input">
+        <div className="send-message-input" role="main" onClick={this.onTextareaContainerClick}>
           <TextareaAutosize
             rows={1}
             maxRows={3}
-            ref={this.textarea}
+            spellCheck={false}
             placeholder={placeholder}
             maxLength={Constants.CONVERSATION.MAX_MESSAGE_BODY_LENGTH}
             onKeyDown={this.onKeyDown}
@@ -402,4 +404,9 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       }, 20);
     });
   }
+
+  private onTextareaContainerClick() {
+    // Focus textarea when user clicks anywhere in the container
+    this.textarea.current?.focus();
+  }
 }

ts/components/session/conversation/SessionEmojiPanel.tsx

@@ -27,17 +27,17 @@ export class SessionEmojiPanel extends React.Component<Props, State> {
     return (
       <div className={classNames('session-emoji-panel', show && 'show')}>
         <Picker
-          backgroundImageFn={(_set, sheetSize) =>
+          backgroundImageFn={() =>
-            `./images/emoji/emoji-sheet-${sheetSize}.png`
+            './images/emoji/emoji-sheet-twitter-32.png'
           }
-          sheetSize={64}
+          set={'twitter'}
+          sheetSize={32}
           darkMode={true}
           color={'#00F782'}
           showPreview={true}
           title={''}
           onSelect={onEmojiClicked}
           autoFocus={true}
-          // set="apple"
         />
       </div>
     );