Emoji quick styling

_locales/en/messages.json

@@ -903,14 +903,12 @@
     }
   },
   "audioPermissionNeededTitle": {
-    "message":
+    "message": "Sending audio messages requires microphone access",
-      "Sending audio messages requires microphone access",
     "description":
       "Shown if the user attempts to send an audio message without audio permssions turned on"
   },
   "audioPermissionNeededDescription": {
-    "message":
+    "message": "Give Session microphone permissions in your settings",
-      "Give Session microphone permissions in your settings",
     "description":
       "Shown if the user attempts to send an audio message without audio permssions turned on"
   },

js/background.js

@@ -942,7 +942,6 @@
         .toString(36)
         .substring(3);
 
-
     window.toasts = new Map();
     window.pushToast = options => {
       // Setting toasts with the same ID can be used to prevent identical
@@ -1061,7 +1060,6 @@
       window.getMediaPermissions().then(value => {
         window.setMediaPermissions(!value);
       });
-
     };
 
     // attempts a connection to an open group server

js/models/conversations.js

@@ -1523,7 +1523,6 @@
       groupInvitation = null,
       otherOptions = {}
     ) {
-
       this.clearTypingTimers();
 
       const destination = this.id;

preload.js

@@ -244,7 +244,6 @@ installSetter('spell-check', 'setSpellCheck');
 installGetter('media-permissions', 'getMediaPermissions');
 installGetter('media-permissions', 'setMediaPermissions');
 
-
 window.getMediaPermissions = () =>
   new Promise((resolve, reject) => {
     ipc.once('get-success-media-permissions', (_event, error, value) => {
@@ -276,7 +275,6 @@ window.getSettingValue = (settingID, comparisonValue = null) => {
   return comparisonValue ? !!settingVal === comparisonValue : settingVal;
 };
 
-
 window.setSettingValue = (settingID, value) => {
   window.storage.put(settingID, value);
 };

stylesheets/_session_conversation.scss

@@ -220,10 +220,11 @@ $composition-container-height: 60px;
     visibility: visible;
   }
 
-  & > section {
+  & > section.emoji-mart {
     background-color: $session-shade-4;
     border: 1px solid $session-shade-6-alt;
-    border-radius: $session-margin-lg;
+    border-radius: 8px;
+
 
     .emoji-mart-category-label {
       top: -2px;
@@ -234,6 +235,31 @@ $composition-container-height: 60px;
         background-color: $session-shade-4;
       }
     }
+
+    .emoji-mart-bar:last-child {
+      border: none;
+
+      .emoji-mart-preview { 
+        display: none;
+      }
+
+    }
+
+    &:after{
+      content: '';
+      position: absolute;
+      top: calc(100% - 40px);
+      left: calc(100% - 79px);
+      width: 22px;
+      height: 22px;
+      background-color: $session-shade-4;
+      transform: rotate(45deg);
+      border-radius: 3px;
+      transform: scaleY(1.4) rotate(45deg);
+      border: 0.7px solid $session-shade-6-alt;
+      clip-path: polygon(100% 100%, 7.2px 100%, 100% 7.2px);
+    }
+
   }
 }
 

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -23,7 +23,7 @@ interface Props {
 
 interface State {
   message: string;
-  isRecordingView: boolean;
+  showRecordingView: boolean;
 
   mediaSetting: boolean | null;
   showEmojiPanel: boolean;
@@ -43,7 +43,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       message: '',
       attachments: [],
       voiceRecording: undefined,
-      isRecordingView: false,
+      showRecordingView: false,
       mediaSetting: null,
       showEmojiPanel: false,
     };
@@ -85,11 +85,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   public render() {
-    const { isRecordingView } = this.state;
+    const { showRecordingView } = this.state;
 
     return (
       <div className="composition-container">
-        { isRecordingView ? (
+        { showRecordingView ? (
           <>{this.renderRecordingView()}</>
         ) : (
           <>{this.renderCompositionView()}</>
@@ -288,7 +288,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   private async sendVoiceMessage(audioBlob: Blob) {
-    if (!this.state.isRecordingView) return;
+    if (!this.state.showRecordingView) return;
 
     const fileBuffer = await new Response(audioBlob).arrayBuffer();
 
@@ -322,7 +322,10 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     const {mediaSetting} = this.state;
 
     if (mediaSetting){
-      this.setState({ isRecordingView: true });
+      this.setState({ 
+        showRecordingView: true,
+        showEmojiPanel: false,
+      });
       this.props.onLoadVoiceNoteView();
       return;
     }
@@ -338,7 +341,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
   private onExitVoiceNoteView() {
     // Do stuff for component, then run callback to SessionConversation
-    this.setState({ isRecordingView: false });
+    this.setState({ showRecordingView: false });
     this.props.onExitVoiceNoteView();
   }
 

ts/components/session/conversation/SessionConversation.tsx

@@ -23,7 +23,7 @@ interface State {
   doneInitialScroll: boolean;
   displayScrollToBottomButton: boolean;
   messageFetchTimestamp: number;
-  isRecordingView: boolean;
+  showRecordingView: boolean;
 }
 
 export class SessionConversation extends React.Component<any, State> {
@@ -47,7 +47,7 @@ export class SessionConversation extends React.Component<any, State> {
       doneInitialScroll: false,
       displayScrollToBottomButton: false,
       messageFetchTimestamp: 0,
-      isRecordingView: false,
+      showRecordingView: false,
     };
 
     this.handleScroll = this.handleScroll.bind(this);
@@ -103,7 +103,7 @@ export class SessionConversation extends React.Component<any, State> {
   public render() {
     console.log(`[vince][info] Props`, this.props);
 
-    const { messages, conversationKey, doneInitialScroll, isRecordingView } = this.state;
+    const { messages, conversationKey, doneInitialScroll, showRecordingView } = this.state;
     const loading = !doneInitialScroll || messages.length === 0;
     const selectionMode = !!this.state.selectedMessages.length;
 
@@ -140,7 +140,7 @@ export class SessionConversation extends React.Component<any, State> {
           </div>
 
           <SessionScrollButton display={true} onClick={this.scrollToBottom}/>
-          { isRecordingView && (
+          { showRecordingView && (
             <div className="messages-wrapper--blocking-overlay"></div>
           )}
         </div>
@@ -619,14 +619,14 @@ export class SessionConversation extends React.Component<any, State> {
 
   private onLoadVoiceNoteView() {
     this.setState({
-      isRecordingView: true,
+      showRecordingView: true,
       selectedMessages: [],
     })
   }
 
   private onExitVoiceNoteView() {
     this.setState({
-      isRecordingView: false,
+      showRecordingView: false,
     });
     
     console.log(`[vince] Stopped recording entirely`);
@@ -634,7 +634,7 @@ export class SessionConversation extends React.Component<any, State> {
 
   private onKeyDown(event: any) {
     const selectionMode = !!this.state.selectedMessages.length;
-    const recordingMode = this.state.isRecordingView;
+    const recordingMode = this.state.showRecordingView;
     
     const messageContainer = document.getElementsByClassName('messages-container')[0];
     const pageHeight = messageContainer.clientHeight;