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/platform/components/src/generic_modal/generic_modal.scss

@@ -203,62 +203,6 @@
                     }
                 }
             }
-
-            .GenericModal__button {
-                padding: 13px 20px;
-                border: none;
-                border-radius: 4px;
-                box-shadow: none;
-
-                @include button-medium;
-
-                &.cancel {
-                    margin-right: 8px;
-                    background: var(--center-channel-bg);
-                    background: rgba(var(--button-bg-rgb), 0.08);
-                    color: var(--button-bg);
-
-                    &:hover {
-                        background: rgba(var(--button-bg-rgb), 0.12);
-                    }
-
-                    &:active {
-                        background: rgba(var(--button-bg-rgb), 0.16);
-                    }
-
-                    &:focus {
-                        box-sizing: border-box;
-                        padding: 11px 18px;
-                        border: 2px solid var(--sidebar-text-active-border);
-                    }
-                }
-
-                &.delete {
-                    @include primary-button;
-
-                    border-color: transparent;
-                    background: var(--dnd-indicator);
-
-                    &:focus {
-                        padding: 11px 18px;
-                    }
-
-                    &:hover,
-                    &:focus,
-                    &:active {
-                        background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--dnd-indicator) !important;
-                    }
-                }
-
-                &.confirm {
-                    @include primary-button;
-                    @include button-medium;
-
-                    &:focus {
-                        padding: 11px 18px;
-                    }
-                }
-            }
         }
 
         @media screen and (max-width: 640px) {

webapp/platform/components/src/generic_modal/generic_modal.tsx

@@ -128,7 +128,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
                 <button
                     autoFocus={this.props.autoFocusConfirmButton}
                     type='submit'
-                    className={classNames('GenericModal__button', isConfirmOrDeleteClassName, this.props.confirmButtonClassName, {
+                    className={classNames('GenericModal__button btn btn-primary', isConfirmOrDeleteClassName, this.props.confirmButtonClassName, {
                         disabled: this.props.isConfirmDisabled,
                     })}
                     onClick={this.handleConfirm}
@@ -154,7 +154,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
             cancelButton = (
                 <button
                     type='button'
-                    className={classNames('GenericModal__button cancel', this.props.cancelButtonClassName)}
+                    className={classNames('GenericModal__button btn btn-tertiary', this.props.cancelButtonClassName)}
                     onClick={this.handleCancel}
                 >
                     {cancelButtonText}