Improve layout and fix unknown locale of DisabledMessageInput

CHANGELOG.md

@@ -12,6 +12,7 @@
 ### Fixed
 - fix: files search not case-insensitive
 - fix: bug in emoji detection for jumbomoji #3508
+- Improve layout and fix unknown locale of DisabledMessageInput #3537
 - Fix: Do not show reply option in read-only groups #3536
 
 <a id="1_41_2"></a>

scss/composer/_composer.scss

@@ -1,17 +1,18 @@
 .composer {
   background-color: var(--composerBg);
   border-left: 1px solid rgba(16, 22, 26, 0.1);
+
   &.composer--disabled-message-input {
     --composerHeight: 40px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
     text-align: center;
-    padding: calc((var(--composerHeight) - 16px) / 2);
     height: var(--composerHeight);
+    padding: 3px;
     color: #999;
     overflow: hidden;
-
-    @media only screen and (max-width: 830px) {
-      padding: 0px 3px;
-    }
   }
 
   &.contact-request {

src/renderer/components/composer/Composer.tsx

@@ -305,7 +305,7 @@ const Composer = forwardRef<
       </div>
     )
   } else if (isDisabled) {
-    return <DisabledMessageInput ref={ref} reason={disabledReason} />
+    return <DisabledMessageInput reason={disabledReason} />
   } else {
     return (
       <div className='composer' ref={ref}>

src/renderer/components/composer/DisabledMessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo } from 'react'
+import React, { useMemo } from 'react'
 
 import { useTranslationFunction } from '../../contexts'
 import { DisabledChatReasons } from './useIsChatDisabled'
@@ -7,40 +7,43 @@ type Props = {
   reason?: DisabledChatReasons
 }
 
-const DisabledMessageInput = forwardRef<any, Props>(
-  ({ reason }: Props, ref) => {
-    const tx = useTranslationFunction()
-
-    const reasonMessage = useMemo(() => {
-      switch (reason) {
-        case DisabledChatReasons.MAILING_LIST:
-          return tx('messaging_disabled_mailing_list')
-        case DisabledChatReasons.NOT_IN_GROUP:
-          return tx('messaging_disabled_not_in_group')
-        case DisabledChatReasons.DEADDROP:
-          return tx('messaging_disabled_deaddrop')
-        case DisabledChatReasons.UNKNOWN:
-        default:
-          return tx('messaging_disabled_unknown')
-      }
-    }, [reason, tx])
-
-    // If no reason was given we return no component
-    if (!reason) {
-      return null
+const DisabledMessageInput = ({ reason }: Props) => {
+  const tx = useTranslationFunction()
+
+  const reasonMessage = useMemo(() => {
+    switch (reason) {
+      case DisabledChatReasons.MAILING_LIST:
+        return tx('messaging_disabled_mailing_list')
+      case DisabledChatReasons.NOT_IN_GROUP:
+        return tx('messaging_disabled_not_in_group')
+      case DisabledChatReasons.DEADDROP:
+        return tx('messaging_disabled_deaddrop')
+      case DisabledChatReasons.DEVICE_CHAT:
+        return tx('messaging_disabled_device_chat')
+      case DisabledChatReasons.UNKNOWN:
+        // Unknown cases are likely to be caused by a new case introduced by a new core update that is not yet handled here,
+        // but we don't want to crash the UI
+        return 'messaging_disabled_unknown'
+      default:
+        throw new Error('Invalid read-only chat status')
     }
+  }, [reason, tx])
 
-    // If we're in the device message chat we also do not want to show anything
-    if (reason === DisabledChatReasons.DEVICE_CHAT) {
-      return null
-    }
+  // If no reason was given we return no component
+  if (!reason) {
+    return null
+  }
 
-    return (
-      <div ref={ref} className='composer composer--disabled-message-input'>
-        {reasonMessage}
-      </div>
-    )
+  // If we're in the "device message" chat we also do not want to show anything
+  if (reason === DisabledChatReasons.DEVICE_CHAT) {
+    return null
   }
-)
+
+  return (
+    <div className='composer composer--disabled-message-input'>
+      {reasonMessage}
+    </div>
+  )
+}
 
 export default DisabledMessageInput