From f9c6e94dcfcd8d99732f9522c117e6c87f698685 Mon Sep 17 00:00:00 2001
From: Olaf Sulich <olafsulich@gmail.com>
Date: Tue, 17 Dec 2024 12:44:40 +0100
Subject: [PATCH] fix: restore avatar only on text value + fix styles

---
 src/script/components/InputBar/InputBar.tsx   | 24 +++++---
 .../RichTextEditor/RichTextEditor.tsx         |  6 +-
 .../FormatToolbar/FormatToolbar.styles.ts     |  2 -
 .../SendMessageButton/SendMessageButton.tsx   |  5 +-
 src/style/content/conversation/input-bar.less | 56 ++++++++++++++-----
 5 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/src/script/components/InputBar/InputBar.tsx b/src/script/components/InputBar/InputBar.tsx
index ecd73797558..f56988e9294 100644
--- a/src/script/components/InputBar/InputBar.tsx
+++ b/src/script/components/InputBar/InputBar.tsx
@@ -562,7 +562,7 @@ export const InputBar = ({
 
   const enableSending = textValue.length > 0;
 
-  const showAvatar = messageFormatButtonsEnabled || !!textValue.length;
+  const showAvatar = !!textValue.length;
 
   return (
     <div ref={wrapperRef}>
@@ -627,14 +627,20 @@ export const InputBar = ({
                   onSend={handleSendMessage}
                   onBlur={() => isTypingRef.current && conversationRepository.sendTypingStop(conversation)}
                 >
-                  <ul
-                    className={cx('controls-right buttons-group input-bar-buttons', {
-                      'controls-right-shrinked': textValue.length !== 0,
-                    })}
-                  >
-                    <ControlButtons {...controlButtonsProps} showGiphyButton={showGiphyButton} />
-                    <SendMessageButton disabled={!enableSending} onSend={handleSendMessage} />
-                  </ul>
+                  <div className="input-bar-buttons">
+                    <ul
+                      className={cx('controls-right buttons-group input-bar-buttons__list', {
+                        'controls-right-shrinked': textValue.length !== 0,
+                      })}
+                    >
+                      <ControlButtons {...controlButtonsProps} showGiphyButton={showGiphyButton} />
+                    </ul>
+                    <SendMessageButton
+                      disabled={!enableSending}
+                      onSend={handleSendMessage}
+                      className="input-bar-buttons__send"
+                    />
+                  </div>
                 </RichTextEditor>
               )}
             </>
diff --git a/src/script/components/RichTextEditor/RichTextEditor.tsx b/src/script/components/RichTextEditor/RichTextEditor.tsx
index 42ab85ff087..81e2fd30395 100644
--- a/src/script/components/RichTextEditor/RichTextEditor.tsx
+++ b/src/script/components/RichTextEditor/RichTextEditor.tsx
@@ -251,7 +251,11 @@ export const RichTextEditor = ({
           />
         </div>
       </div>
-      {showFormatToolbar && <FormatToolbar />}
+      {showFormatToolbar && (
+        <div className="input-bar-toolbar">
+          <FormatToolbar />
+        </div>
+      )}
       {children}
     </LexicalComposer>
   );
diff --git a/src/script/components/RichTextEditor/components/FormatToolbar/FormatToolbar.styles.ts b/src/script/components/RichTextEditor/components/FormatToolbar/FormatToolbar.styles.ts
index d090a351563..686272aaec4 100644
--- a/src/script/components/RichTextEditor/components/FormatToolbar/FormatToolbar.styles.ts
+++ b/src/script/components/RichTextEditor/components/FormatToolbar/FormatToolbar.styles.ts
@@ -22,6 +22,4 @@ import {CSSObject} from '@emotion/react';
 export const wrapperStyles: CSSObject = {
   display: 'flex',
   alignItems: 'center',
-  margin: '8px 0 8px auto',
-  gridArea: 'toolbar',
 };
diff --git a/src/script/components/RichTextEditor/components/SendMessageButton/SendMessageButton.tsx b/src/script/components/RichTextEditor/components/SendMessageButton/SendMessageButton.tsx
index c4b3776e5ec..62293db3082 100644
--- a/src/script/components/RichTextEditor/components/SendMessageButton/SendMessageButton.tsx
+++ b/src/script/components/RichTextEditor/components/SendMessageButton/SendMessageButton.tsx
@@ -25,13 +25,14 @@ import {t} from 'Util/LocalizerUtil';
 interface SendMessageButtonProps {
   disabled?: boolean;
   onSend: () => void;
+  className?: string;
 }
 
-export const SendMessageButton = ({disabled, onSend}: SendMessageButtonProps) => {
+export const SendMessageButton = ({disabled, onSend, className}: SendMessageButtonProps) => {
   return (
     <button
       type="button"
-      className={cx('controls-right-button controls-right-button--send')}
+      className={cx('controls-right-button controls-right-button--send', className)}
       disabled={disabled}
       title={t('tooltipConversationSendMessage')}
       aria-label={t('tooltipConversationSendMessage')}
diff --git a/src/style/content/conversation/input-bar.less b/src/style/content/conversation/input-bar.less
index 5c44226187b..3b120eb408a 100644
--- a/src/style/content/conversation/input-bar.less
+++ b/src/style/content/conversation/input-bar.less
@@ -409,9 +409,9 @@
   display: grid;
   padding-left: var(--input-bar-avatar-spacing);
   grid-template-areas:
-    'avatar input'
-    'buttons buttons';
-  grid-template-columns: calc(var(--input-bar-avatar-size) + var(--input-bar-avatar-spacing)) 1fr;
+    'avatar input input'
+    'avatar buttons buttons';
+  grid-template-columns: calc(var(--input-bar-avatar-size) + var(--input-bar-avatar-spacing)) 1fr 1fr;
   row-gap: 8px;
 
   @media (min-width: 900px) {
@@ -419,18 +419,19 @@
   }
 
   &--with-toolbar {
+    padding-bottom: 8px;
     grid-template-areas:
-      'toolbar toolbar'
-      'avatar input'
-      'buttons buttons';
-    grid-template-columns: calc(var(--input-bar-avatar-size) + var(--input-bar-avatar-spacing)) 1fr;
+      'toolbar toolbar toolbar'
+      'avatar input input'
+      'avatar buttons buttons';
+    grid-template-columns: calc(var(--input-bar-avatar-size) + var(--input-bar-avatar-spacing)) 1fr 1fr;
     grid-template-rows: auto auto;
     row-gap: 0;
 
     @media (min-width: 1050px) {
       grid-template-areas:
-        'avatar input'
-        'toolbar buttons';
+        'avatar input input'
+        'avatar toolbar buttons';
     }
   }
 }
@@ -452,15 +453,18 @@
 }
 
 .input-bar-buttons {
-  width: 100%;
-  height: 100%;
-  max-height: var(--conversation-input-min-height);
+  display: flex;
+  height: 40px;
   align-items: center;
   margin-top: auto;
-  margin-bottom: 0;
+  margin-bottom: 0px;
   margin-left: auto !important;
   grid-area: buttons;
 
+  &__send {
+    margin-bottom: 8px;
+  }
+
   @media (min-width: 900px) {
     width: auto;
   }
@@ -469,3 +473,29 @@
     margin-left: 0;
   }
 }
+
+.input-bar-container .input-bar-buttons__list {
+  padding-bottom: 8px;
+}
+
+.input-bar-container--with-toolbar .input-bar-buttons__send {
+  margin-bottom: 0px;
+}
+
+.input-bar-container--with-toolbar .input-bar-buttons__list {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.input-bar-toolbar {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0 0 auto;
+  grid-area: toolbar;
+
+  @media (min-width: 1050px) {
+    margin: 0 auto 0 0;
+  }
+}