From d104f450bbd6e245da8e931eba8125d05849b838 Mon Sep 17 00:00:00 2001
From: Boris Trombert <boris.trombert@infomaniak.com>
Date: Mon, 21 Oct 2024 14:32:54 +0200
Subject: [PATCH] change status emoji size when hover on status

Changelog: fixed
---
 .../custom_status/custom_status.scss          |  9 +++++-
 .../custom_status/custom_status_emoji.tsx     | 28 +++++++++----------
 .../src/sass/components/_tooltip.scss         | 10 ++++---
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/webapp/channels/src/components/custom_status/custom_status.scss b/webapp/channels/src/components/custom_status/custom_status.scss
index 73a3d69cdc..e29f491f35 100644
--- a/webapp/channels/src/components/custom_status/custom_status.scss
+++ b/webapp/channels/src/components/custom_status/custom_status.scss
@@ -268,12 +268,19 @@
 
     .custom-status {
         display: flex;
-        justify-content: center;
+        flex-direction: column;
+        align-items: center;
 
         &-expiry {
             font-weight: 400;
             opacity: 0.7;
         }
+
+        .custom-status-text-container {
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+        }
     }
 }
 
diff --git a/webapp/channels/src/components/custom_status/custom_status_emoji.tsx b/webapp/channels/src/components/custom_status/custom_status_emoji.tsx
index 9f45468003..2d4906c99a 100644
--- a/webapp/channels/src/components/custom_status/custom_status_emoji.tsx
+++ b/webapp/channels/src/components/custom_status/custom_status_emoji.tsx
@@ -79,29 +79,29 @@ function CustomStatusEmoji({
                     <div className='custom-status'>
                         <RenderEmoji
                             emojiName={customStatus.emoji}
-                            size={expires ? 14 : 28}
+                            size={28}
                             emojiStyle={{
                                 marginTop: 2,
                             }}
                         />
-                        {customStatus.text &&
+                        <div
+                            className='custom-status-text-container'
+                        >
                             <span
                                 className='custom-status-text'
-                                style={{marginLeft: 5}}
                             >
-                                {customStatus.text}
+                                {customStatus.text === '' ? customStatus.emoji : customStatus.text}
                             </span>
-                        }
-                    </div>
-                    {expires &&
-                        <div>
-                            <ExpiryTime
-                                time={customStatus.expires_at}
-                                timezone={timezone}
-                                className='custom-status-expiry'
-                            />
+
+                            {expires && (
+                                <ExpiryTime
+                                    time={customStatus.expires_at}
+                                    timezone={timezone}
+                                    className='custom-status-expiry'
+                                />
+                            )}
                         </div>
-                    }
+                    </div>
                 </Tooltip>
             }
         >
diff --git a/webapp/channels/src/sass/components/_tooltip.scss b/webapp/channels/src/sass/components/_tooltip.scss
index 0a5c7e2bef..92482c49e8 100644
--- a/webapp/channels/src/sass/components/_tooltip.scss
+++ b/webapp/channels/src/sass/components/_tooltip.scss
@@ -15,15 +15,17 @@
     }
 
     .tooltip-inner {
-        max-width: 100%;
-        padding: 4px 8px;
-        background: rgba(0, 0, 0, 0.9);
+        max-width: 256px;
+        padding: 6px 8px 6px 8px;
+        background: #333333;
         box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
         font-size: 12px;
         font-weight: 600;
         line-height: 18px;
         text-align: center;
         word-break: break-word;
+        border-radius: 8px;
+        font-family: 'SuisseIntl';
     }
 
     &.top {
@@ -76,7 +78,7 @@
     max-width: 220px;
     padding: 4px 8px;
     background: #000;
-    border-radius: 4px;
+    border-radius: 8px;
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
     color: #fff;
     font-size: 12px;