Button styling update for consistent buttons (#24483)

* Updating button changes

* Updating button

* Updating invite modal button

* Updating button changes

* Updating button

* Updating buttons

* Updating buttons

* Updating buttons

* Updating back btn

* Updating various buttons

* Updating tests

* Updating test

* Reverting channel icon

* Update channel_profile.tsx

* Update setting_picture.tsx

* Updating tests

* Update group_member_list.test.tsx.snap

* Update user_group_popover.test.tsx.snap

* Update user_group_popover.test.tsx.snap

* Updating tests and adding btn class

* Adding btn-xs class

* Updating tests

* Updating test

* Updating test file

* Updating test

* Updating changes requested by daniel

* Updating test

* Updating based on harrisons feedback

* Updating buttons

* Updating test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/user_groups_modal/user_groups_list/user_groups_list.tsx

@@ -164,7 +164,7 @@ const UserGroupsList = (props: Props) => {
                             stopPropagationOnToggle={true}
                             id={`customWrapper-${group.id}`}
                         >
-                            <button className='action-wrapper'>
+                            <button className='btn btn-icon btn-xs'>
                                 <i className='icon icon-dots-vertical'/>
                             </button>
                             <Menu

webapp/channels/src/components/user_groups_modal/user_groups_modal.scss

@@ -136,27 +136,8 @@
                 margin-left: 44px;
             }
 
-            button.user-groups-create {
-                box-sizing: border-box;
-                border: 1px solid var(--button-bg);
-                margin: auto;
-                margin-right: 46px;
-                background-color: var(--center-channel-bg);
-                border-radius: 4px;
-                color: var(--button-bg);
-
-                &:hover {
-                    background-color: rgba(var(--button-bg-rgb), 0.08);
-                }
-
-                &:active {
-                    background-color: rgba(var(--button-bg-rgb), 0.16);
-                }
-
-                &:focus {
-                    box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
-                    outline: none;
-                }
+            .user-groups-create {
+                margin-right: 42px;
             }
         }
     }
@@ -428,27 +409,6 @@
 
                 .multi-select__footer {
                     padding-top: 24px;
-
-                    button {
-                        height: 40px;
-                        padding: 0 20px;
-                        border-radius: 4px;
-                        font-size: 14px;
-                        font-weight: 600;
-                    }
-
-                    button[disabled] {
-                        background-color: rgba(var(--center-channel-color-rgb), 0.08);
-                        color: rgba(var(--center-channel-color-rgb), 0.32);
-                    }
-
-                    button.multiselect-back {
-                        padding: 13px 20px;
-                        margin-right: 8px;
-                        background: rgba(var(--button-bg-rgb), 0.08);
-                        color: rgb(var(--button-bg-rgb));
-                        line-height: 14px;
-                    }
                 }
             }
         }

webapp/channels/src/components/user_groups_modal/user_groups_modal_header/__snapshots__/user_groups_modal_header.test.tsx.snap

@@ -36,7 +36,7 @@ exports[`component/user_groups_modal should match snapshot without groups 1`] =
     />
   </ModalTitle>
   <button
-    className="user-groups-create btn btn-md btn-primary"
+    className="user-groups-create btn btn-secondary btn-sm"
     onClick={[Function]}
   >
     <MemoizedFormattedMessage

webapp/channels/src/components/user_groups_modal/user_groups_modal_header/user_groups_modal_header.tsx

@@ -46,7 +46,7 @@ const UserGroupsModalHeader = (props: Props) => {
             {
                 props.canCreateCustomGroups &&
                 <button
-                    className='user-groups-create btn btn-md btn-primary'
+                    className='user-groups-create btn btn-secondary btn-sm'
                     onClick={goToCreateModal}
                 >
                     <FormattedMessage