MM-57096 replaced hardcoded value with a color variable (mattermost#2…

…6667) * replaced hardcoded value with a color variable * changed color values for scroll_to_bottom_toast * added btn and btn-primary to toast * Changed dynamically created css variables with static ones --------- Co-authored-by: Soham <[email protected]> Co-authored-by: Mattermost Build <[email protected]>
Gesare5 · Nov 7, 2024 · 6b304b9 · 6b304b9
1 parent 4136343
commit 6b304b9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.scss b/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.scss
@@ -6,21 +6,20 @@
     padding-left: 12px;
     border-radius: 4px;
 
-    // background-color: var(--center-channel-color--88);
-    background: linear-gradient(0deg, rgba(63, 67, 80, 0.9) 0%, rgba(63, 67, 80, 0.9) 100%), #fff;
+    background-color: var(--button-bg);
     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
-    color: var(--sidebar-text);
+    color: var(--button-color-rgb);
     cursor: pointer;
     font-size: 14px;
     font-weight: 600;
     gap: 8px;
 
     &:hover {
-        background-color: var(--center-channel-color);
+        background-color: rgba(var(--button-bg-rgb), 0.88);
     }
 
     svg {
-        fill: var(--sidebar-text);
+        fill: rgb(var(--button-color-rgb));
         vertical-align: middle;
     }
 
@@ -46,12 +45,12 @@
         border-radius: 4px;
 
         &:hover {
-            background-color: var(--center-channel-bg-08);
+            background-color: var(--button-bg);
         }
 
         svg {
             padding-top: 1px; // To align vertically
-            fill: rgba(var(--sidebar-text-rgb), 0.56);
+            fill: rgba(var(--button-bg-rgb), 0.64);
             vertical-align: middle;
         }
 

diff --git a/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.tsx b/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.tsx
@@ -39,7 +39,7 @@ export const ScrollToBottomToast = ({onDismiss, onClick}: ScrollToBottomToastPro
     return (
         <div
             data-testid={SCROLL_TO_BOTTOM_TOAST_TESTID}
-            className='scroll-to-bottom-toast'
+            className='scroll-to-bottom-toast btn btn-primary'
             onClick={handleScrollToBottom}
         >
             <UnreadBelowIcon/>