MM-54566 - Adding color override for button (#24616)

* MM-54566 - Adding color override for button

* Updating icon sizes

* Updating icon sizes

* Updating css order

webapp/channels/src/sass/components/_buttons.scss

@@ -121,15 +121,25 @@ button {
 
     i {
         display: inline-flex;
-        width: 18px;
+        width: 16px;
-        height: 18px;
+        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 {