Merge branch 'change-status-emoji-size' into 'master'

change status emoji size when hover on status See merge request kchat/webapp!952
Infomaniak · Oct 22, 2024 · 61cd668 · 61cd668
2 parents 43c9a70 + d104f45
commit 61cd668
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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;