From 6b304b9c4a65d1a2f010b5f9e4b774506aaeb907 Mon Sep 17 00:00:00 2001
From: soham <68921363+sohzm@users.noreply.github.com>
Date: Thu, 7 Nov 2024 08:35:29 +0530
Subject: [PATCH] MM-57096 replaced hardcoded value with a color variable
 (#26667)

* 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 <soham@obmondo.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../scroll_to_bottom_toast.scss                     | 13 ++++++-------
 .../scroll_to_bottom_toast.tsx                      |  2 +-
 2 files changed, 7 insertions(+), 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
index 8e84e03625..18f5369d3d 100644
--- 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
index 8388bcd2ee..45a511f41d 100644
--- 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/>