From 703ad006ad65557a880f1d19a42d80d5a9d4b911 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 28 Sep 2023 20:21:32 +0500
Subject: [PATCH] MM-54566 - Adding color override for button (#24616)

* MM-54566 - Adding color override for button

* Updating icon sizes

* Updating icon sizes

* Updating css order
---
 .../src/sass/components/_buttons.scss         | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss
index 99bdaa1b45..0b360b9e72 100644
--- a/webapp/channels/src/sass/components/_buttons.scss
+++ b/webapp/channels/src/sass/components/_buttons.scss
@@ -121,15 +121,25 @@ button {
 
     i {
         display: inline-flex;
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
         align-items: center;
         justify-content: center;
         margin-right: 0;
+        font-size: 18px;
     }
 
     &.btn-xs {
-        height: 28px;
+        height: 24px;
+        padding: 0 10px;
+        font-size: 11px;
+        gap: 6px;
+
+        i {
+            width: 12px;
+            height: 12px;
+            font-size: 14.4px;
+        }
     }
 
     &.btn-sm {
@@ -137,6 +147,12 @@ button {
         padding: 0 16px;
         font-size: 12px;
         gap: 6px;
+
+        i {
+            width: 12px;
+            height: 12px;
+            font-size: 14.4px;
+        }
     }
 
     &.btn-lg {
@@ -145,7 +161,7 @@ button {
         font-size: 16px;
         gap: 10px;
 
-        .i {
+        i {
             width: 20px;
             height: 20px;
             font-size: 24px;
@@ -156,6 +172,7 @@ button {
         position: relative;
         border-color: transparent;
         background-color: rgb(var(--button-bg-rgb));
+        color: rgb(var(--button-color-rgb));
 
         // These hover and active values are for things outside the app__body, the correct theme styles for the primary button are applied in utils.jsx
         &:hover {