Remove redundant button styles and use proper button classes (#30929)

* remove redundant button styles and use proper button classes

* remove import for contact_us css

* fix view plans button to be xs

* tweak to disabled state on save button in floating bar

* change contact us to tertiary button like before

* updated btn-full on free edition right panel

* update contact button to be primary when shown in the trial card

* fix issue with hover state on save changes panel error state

* fix style lint issues

* update snapshots

* fixed a few license page buttons

* fix lint issue

* Update index.test.tsx.snap

* add empty end lines

* fixed scope of css so it doesn't affect product switcher

* upate button font size for xs, update bg color for button in announce bar

* fix lint error

* update missed cancel buttons to use proper classes

* fixed text spec to find the right button

* updated snapshots

* fix issue with test on cancel button

* update snapshots

e2e-tests/cypress/tests/integration/channels/enterprise/system_console/team_guest_channel_spec.js

@@ -89,7 +89,7 @@ describe('Team Scheme Guest Permissions Test', () => {
         // * Ensure all checkboxes have the correct unchecked state
         verifyAllGuestPermissions(false);
 
-        cy.get('.cancel-button').click();
+        cy.findByTestId('permission-scheme-cancel-button').should('be.visible').click();
 
         //Clean up - Delete scheme
         cy.findByText(`TestScheme-${randomId}`).siblings('.actions').children('.delete-button').click().wait(TIMEOUTS.HALF_SEC);

e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/incoming_webhook_is_image_only_spec.js

@@ -62,7 +62,7 @@ describe('Incoming webhook', () => {
                 // * Verify that the hook ID in the URL matches with the one shown in a page
                 // * Verify that the copy link is shown.
                 cy.findByText(hookUrl).should('be.visible').
-                    parent().siblings('.fa-copy').should('be.visible');
+                    parent().siblings('[data-testid="copyText"]').should('be.visible');
 
                 // # Click "Done" and verify that it redirects to incoming webhooks URL
                 cy.findByText('Done').click();

e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/setup_incoming_webhook_spec.js

@@ -64,7 +64,7 @@ describe('Incoming webhook', () => {
                 // * Verify that the hook ID in the URL matches with the one shown in a page
                 // * Verify that the copy link is shown.
                 cy.findByText(hookUrl).should('be.visible').
-                    parent().siblings('.fa-copy').should('be.visible');
+                    parent().siblings('[data-testid="copyText"]').should('be.visible');
 
                 // # Click "Done" and verify that it redirects to incoming webhooks URL
                 cy.findByText('Done').click();

webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap

@@ -182,12 +182,12 @@ exports[`components/actions_menu/ActionsMenu no actions - sysadmin - menu should
         className="visit-marketplace"
       >
         <button
-          className="btn btn-primary visit-marketplace-button"
+          className="btn btn-primary btn-sm visit-marketplace-button"
           id="marketPlaceButton"
           onClick={[Function]}
         >
           <ActionsMenuIcon
-            name="icon-view-grid-plus-outline visit-marketplace-button-icon"
+            name="icon-view-grid-plus-outline"
           />
           <span
             className="visit-marketplace-button-text"

webapp/channels/src/components/actions_menu/actions_menu.scss

@@ -1,34 +1,19 @@
 .visit-marketplace-text {
-    margin: 12px;
+    padding: 8px 16px 12px 16px;
-    font-family: 'Open Sans';
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
     text-align: center;
 }
 
 .visit-marketplace {
-    top: 1px;
-    padding-top: 4px;
     padding-right: 16px;
-    padding-bottom: 16px;
+    padding-bottom: 8px;
     padding-left: 16px;
-    font-size: 12px;
-    text-align: center;
 }
 
 .visit-marketplace-button {
-    border-radius: 4px;
+    width: 100%;
-}
 
-.visit-marketplace-button-text {
+    .Menu {
-    align-items: center;
+        padding: 8px 0;
-    font-size: 12px;
+        text-align: left;
-    font-weight: 600;
+    }
-    line-height: 9px;
-}
-
-.visit-marketplace-button-icon {
-    margin-right: 5px;
-    font-size: 14.4px;
 }

webapp/channels/src/components/actions_menu/actions_menu.tsx

@@ -212,10 +212,10 @@ export class ActionMenuClass extends React.PureComponent<Props, State> {
                 <div className='visit-marketplace' >
                     <button
                         id='marketPlaceButton'
-                        className='btn btn-primary visit-marketplace-button'
+                        className='btn btn-primary btn-sm visit-marketplace-button'
                         onClick={this.handleOpenMarketplace}
                     >
-                        <ActionsMenuIcon name='icon-view-grid-plus-outline visit-marketplace-button-icon'/>
+                        <ActionsMenuIcon name='icon-view-grid-plus-outline'/>
                         <span className='visit-marketplace-button-text'>
                             <FormattedMessage
                                 id='post_info.actions.visitMarketplace'

webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss

@@ -91,33 +91,7 @@
 
 .UpgradeMattermostCloud__upgradeButton {
     width: 100%;
-    padding: 13px 0;
-    border: none;
-    border-radius: 4px;
     margin-top: 16px;
-    background: var(--button-bg);
-    box-shadow: inset 0 0 0 1px var(--sys-button-bg);
-    color: var(--button-color);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
-
-    &:hover:not(.disabled) {
-        background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.16), rgba(var(--center-channel-color-rgb), 0.16)), var(--button-bg);
-    }
-
-    &:active {
-        background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.32), rgba(var(--center-channel-color-rgb), 0.32)), var(--button-bg);
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
-    }
-
-    &.disabled {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-        color: rgba(var(--center-channel-color-rgb), 0.32);
-    }
 }
 
 .PrivateCloudCard {
@@ -153,34 +127,7 @@
 
 .PrivateCloudCard__actionButton {
     display: block;
-
-    padding: 13px 20px;
-    border: none;
-    border-radius: 4px;
     margin-top: 16px;
-    background: var(--sys-center-channel-bg);
-    box-shadow: inset 0 0 0 1px var(--sys-button-bg);
-    color: var(--sys-button-bg);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
-
-    @include utils-mixins.fit-content;
-
-    &:hover:not(.disabled) {
-        background: rgba(var(--sys-button-bg-rgb), 0.04);
-        text-decoration: none;
-    }
-
-    &:active {
-        background: rgba(var(--sys-button-bg-rgb), 0.08);
-        text-decoration: none;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sys-button-bg);
-        text-decoration: none;
-    }
 }
 
 .cancelSubscriptionSection {
@@ -209,32 +156,5 @@
 
 .cancelSubscriptionSection__contactUs {
     display: block;
-
-    padding: 13px 20px;
-    border-radius: 4px;
     margin-top: 16px;
-    box-shadow: inset 0 0 0 1px var(--sys-dnd-indicator);
-    color: var(--sys-dnd-indicator);
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 9.5px;
-
-    @include utils-mixins.fit-content;
-
-    &:hover:not(.disabled) {
-        background: rgba(var(--sys-dnd-indicator-rgb), 0.04);
-        color: var(--sys-dnd-indicator);
-        text-decoration: none;
-    }
-
-    &:active {
-        background: rgba(var(--sys-dnd-indicator-rgb), 0.08);
-        text-decoration: none;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sys-dnd-indicator);
-        color: var(--sys-dnd-indicator);
-        text-decoration: none;
-    }
 }

webapp/channels/src/components/admin_console/billing/billing_subscriptions/cancel_subscription.tsx

@@ -31,7 +31,7 @@ const CancelSubscription = () => {
                 <ExternalLink
                     location='cancel_subscription'
                     href={contactSupportURL}
-                    className='cancelSubscriptionSection__contactUs'
+                    className='btn btn-secondary btn-sm btn-danger cancelSubscriptionSection__contactUs'
                     onClick={() => trackEvent('cloud_admin', 'click_contact_us')}
                 >
                     <FormattedMessage

webapp/channels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx

@@ -145,7 +145,7 @@ const ContactSalesCard = (props: Props) => {
                     <ExternalLink
                         location='contact_sales_card'
                         href={contactSalesLink}
-                        className='PrivateCloudCard__actionButton'
+                        className='btn btn-tertiary PrivateCloudCard__actionButton'
                         onClick={() => trackEvent('cloud_admin', 'click_contact_sales')}
                     >
                         <FormattedMessage
@@ -165,7 +165,7 @@ const ContactSalesCard = (props: Props) => {
                                 openSalesLink();
                             }
                         }}
-                        className='PrivateCloudCard__actionButton'
+                        className='btn btn-tertiary PrivateCloudCard__actionButton'
                     >
                         {subscriptionPlan === CloudProducts.STARTER ? (
                             <FormattedMessage

webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.scss

@@ -147,53 +147,7 @@
 }
 
 .BillingSummary__lastInvoice-downloadButton {
-    display: flex;
     width: 100%;
-    align-items: center;
-    justify-content: center;
-    padding: 11px 20px;
-    border-radius: 4px;
-    background: var(--sys-button-bg);
-    color: var(--sys-button-color);
-
-    &:hover:not(.disabled) {
-        background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.16), rgba(var(--sys-center-channel-color-rgb), 0.16)), var(--sys-button-bg);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &:active {
-        background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.32), rgba(var(--sys-center-channel-color-rgb), 0.32)), var(--sys-button-bg);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sys-sidebar-text-active-border);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &.disabled {
-        background: rgba(var(--sys-center-channel-color-rgb), 0.08);
-        color: rgba(var(--sys-center-channel-color-rgb), 0.32);
-    }
-
-    > i {
-        font-size: 18px;
-        line-height: 21px;
-
-        &::before {
-            margin: 0;
-        }
-    }
-
-    > span {
-        margin-left: 6px;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 14px;
-    }
 }
 
 .BillingSummary__lastInvoice-billingHistory {

webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx

@@ -55,7 +55,7 @@ export const noBillingHistory = (
         <ExternalLink
             location='billing_summary'
             href={CloudLinks.BILLING_DOCS}
-            className='BillingSummary__noBillingHistory-link'
+            className='btn btn-primary BillingSummary__noBillingHistory-link'
             onClick={() => trackEvent('cloud_admin', 'click_how_billing_works', {screen: 'subscriptions'})}
         >
             <FormattedMessage

webapp/channels/src/components/admin_console/billing/company_info_display.scss

@@ -29,51 +29,7 @@
 }
 
 .CompanyInfoDisplay__addInfoButton {
-    display: flex;
     align-items: center;
-    padding: 8px 16px;
-    border-radius: 4px;
-    background: var(--sys-button-bg);
-    color: var(--sys-button-color);
-
-    &:hover:not(.disabled) {
-        background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.16), rgba(var(--sys-center-channel-color-rgb), 0.16)), var(--sys-button-bg);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &:active {
-        background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.32), rgba(var(--sys-center-channel-color-rgb), 0.32)), var(--sys-button-bg);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sys-sidebar-text-active-border);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &.disabled {
-        background: rgba(var(--sys-center-channel-color-rgb), 0.08);
-        color: rgba(var(--sys-center-channel-color-rgb), 0.32);
-    }
-
-    > i {
-        font-size: 14.4px;
-        line-height: 17px;
-
-        &::before {
-            margin: 0;
-        }
-    }
-
-    > span {
-        margin-left: 4px;
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 9px;
-    }
 }
 
 .CompanyInfoDisplay__noCompanyInfo {

webapp/channels/src/components/admin_console/billing/company_info_display.tsx

@@ -18,7 +18,7 @@ const addInfoButton = (
     <div className='CompanyInfoDisplay__addInfo'>
         <BlockableLink
             to='/admin_console/billing/company_info_edit'
-            className='CompanyInfoDisplay__addInfoButton'
+            className='btn btn-primary CompanyInfoDisplay__addInfoButton'
             onClick={() => trackEvent('cloud_admin', 'click_add_company_info')}
         >
             <i className='icon icon-plus'/>
@@ -44,7 +44,7 @@ const noCompanyInfoSection = (
         </div>
         <BlockableLink
             to='/admin_console/billing/company_info_edit'
-            className='CompanyInfoDisplay__noCompanyInfo-link'
+            className='btn btn-primary CompanyInfoDisplay__noCompanyInfo-link'
             onClick={() => trackEvent('cloud_admin', 'click_add_company_info')}
         >
             <FormattedMessage

webapp/channels/src/components/admin_console/billing/company_info_edit.tsx

@@ -284,7 +284,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                     )}
                 />
                 <BlockableLink
-                    className='cancel-button'
+                    className='btn btn-tertiary'
                     to='/admin_console/billing/company_info'
                 >
                     <FormattedMessage

webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss

@@ -33,28 +33,6 @@
 .PlanDetails__viewPlansButton {
     display: block;
     margin-left: auto;
-
-    &.btn {
-        padding: 11px 16px;
-        border-radius: 4px;
-        background: variables.$primary-color;
-        color: variables.$white;
-        font-size: 12px;
-        font-weight: bold;
-        line-height: 9.5px;
-
-        &:focus,
-        &:active,
-        &:focus:active {
-            border-color: transparent;
-            outline: none;
-        }
-
-        &.btn-secondary {
-            background: rgba(var(--button-bg-rgb), 0.08);
-            color: var(--button-bg);
-        }
-    }
 }
 
 .PlanDetails__planName {

webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap

@@ -255,7 +255,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
       saving={false}
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/compliance/data_retention_settings"
     >
       <MemoizedFormattedMessage
@@ -519,7 +519,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
       saving={false}
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/compliance/data_retention_settings"
     >
       <MemoizedFormattedMessage

webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx

@@ -537,7 +537,7 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
                         )}
                     />
                     <BlockableLink
-                        className='cancel-button'
+                        className='btn btn-tertiary'
                         to='/admin_console/compliance/data_retention_settings'
                     >
                         <FormattedMessage

webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap

@@ -252,7 +252,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
       saving={false}
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/compliance/data_retention_settings"
     >
       <MemoizedFormattedMessage

webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx

@@ -273,7 +273,7 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
                         )}
                     />
                     <BlockableLink
-                        className='cancel-button'
+                        className='btn btn-tertiary'
                         to='/admin_console/compliance/data_retention_settings'
                     >
                         <FormattedMessage

webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss

@@ -40,44 +40,3 @@
     font-size: 14px;
     line-height: 20px;
 }
-
-.FeatureDiscovery .btn {
-    width: 160px;
-    height: 48px;
-    padding: 14px 0;
-    border-radius: 4px;
-    margin-right: 8px;
-    background: variables.$primary-color;
-    color: variables.$white;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 16px;
-
-    &:focus,
-    &:active,
-    &:focus:active {
-        border-color: transparent;
-        outline: none;
-    }
-
-    &:disabled {
-        border-color: transparent;
-        background: variables.$light-gray;
-        color: variables.$dark-gray;
-    }
-
-    &.btn-inactive {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-        color: rgba(var(--center-channel-color-rgb), 0.75);
-    }
-
-    &.btn-secondary {
-        border: 1px solid variables.$primary-color;
-        background: variables.$white;
-        color: variables.$primary-color;
-    }
-
-    &.btn-primary {
-        width: 190px;
-    }
-}

webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx

@@ -92,7 +92,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
             return (
                 <div className='purchase-card'>
                     <button
-                        className='btn btn-primary'
+                        className='btn btn-primary btn-lg'
                         data-testid='featureDiscovery_primaryCallToAction'
                         onClick={() => {
                             trackEvent(TELEMETRY_CATEGORIES.SELF_HOSTED_ADMIN, 'click_enterprise_contact_sales_feature_discovery');
@@ -106,7 +106,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
                     </button>
                     <ExternalLink
                         location='feature_discovery'
-                        className='btn btn-secondary'
+                        className='btn btn-tertiary btn-lg'
                         href={learnMoreURL}
                         data-testid='featureDiscovery_secondaryCallToAction'
                     >

webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.scss

@@ -140,29 +140,6 @@
         .buttons {
             margin-top: 32px;
             text-align: right;
-
-            .confirm-btn {
-                &:hover,
-                &:active,
-                &:focus,
-                &:active:focus {
-                    background:
-                        linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
-                        var(--button-bg);
-                }
-
-                height: 40px;
-                flex: none;
-                padding: 12px 20px;
-                border: none;
-                border-radius: 4px;
-                margin-left: 8px;
-                background: var(--button-bg);
-                color: var(--sys-button-color);
-                font-size: 14px;
-                font-weight: 600;
-                line-height: 14px;
-            }
         }
     }
 
@@ -175,28 +152,5 @@
         font-style: normal;
         font-weight: 600;
         line-height: 20px;
-
-        .btn-cancel {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
-            color: var(--button-bg, #1c58d9);
-        }
-
-        .btn-save {
-            &:disabled {
-                background: rgba(63, 67, 80, 0.08);
-                color: rgba(63, 67, 80, 0.32);
-                cursor: not-allowed;
-            }
-
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            margin-left: 8px;
-            background: var(--button-bg, #1c58d9);
-            color: var(--button-color, #fff);
-        }
     }
 }

webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.tsx

@@ -126,7 +126,7 @@ export default function IPFilteringAddOrEditModal({onExited, onSave, existingRan
             <Modal.Footer>
                 <button
                     type='button'
-                    className='btn-cancel'
+                    className='btn btn-tertiary'
                     onClick={onExited}
                 >
                     {formatMessage({id: 'admin.ip_filtering.cancel', defaultMessage: 'Cancel'})}
@@ -134,7 +134,7 @@ export default function IPFilteringAddOrEditModal({onExited, onSave, existingRan
                 <button
                     data-testid='save-add-edit-button'
                     type='button'
-                    className='btn-save'
+                    className='btn btn-primary'
                     onClick={handleSave}
                     disabled={Boolean(CIDRError) || !CIDR.length || !name.length}
                 >

webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss

@@ -88,22 +88,5 @@
         font-style: normal;
         font-weight: 600;
         line-height: 20px;
-
-        .btn-cancel {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
-            color: var(--button-bg, #1c58d9);
-        }
-
-        .btn-delete {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            margin-left: 8px;
-            background: var(--do-not-disturb-indicator, #d24b4e);
-            color: var(--button-color, #fff);
-        }
     }
 }

webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.tsx

@@ -41,14 +41,14 @@ export default function DeleteConfirmationModal({onExited, onConfirm, filterToDe
             <Modal.Footer>
                 <button
                     type='button'
-                    className='btn-cancel'
+                    className='btn btn-tertiary'
                     onClick={onExited}
                 >
                     {formatMessage({id: 'admin.ip_filtering.cancel', defaultMessage: 'Cancel'})}
                 </button>
                 <button
                     type='button'
-                    className='btn-delete'
+                    className='btn btn-primary btn-danger'
                     onClick={() => onConfirm?.(filterToDelete!)}
                 >
                     {formatMessage({id: 'admin.ip_filtering.delete_filter', defaultMessage: 'Delete filter'})}

webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_header.tsx

@@ -45,7 +45,7 @@ const EditSectionHeader = ({
                 </div>
                 <div className='AddIPFilterButton'>
                     <button
-                        className='Button'
+                        className='btn btn-primary'
                         onClick={() => {
                             setShowAddModal(true);
                         }}

webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_ip_not_in_range_panel.tsx

@@ -33,7 +33,7 @@ const IPNotInRangeErrorPanel = ({
                     defaultMessage='Include your IP address in at least one of the rules below to continue.'
                 />
                 <div
-                    className='Button'
+                    className='btn btn-primary'
                     onClick={() => setShowAddModal(true)}
                 >
                     <FormattedMessage

webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx

@@ -32,7 +32,7 @@ const NoFiltersPanel = ({setShowAddModal}: NoFiltersPanelProps) => (
                     add: (msg) => (
                         <div
                             onClick={() => setShowAddModal(true)}
-                            className='Button'
+                            className='btn btn-primary'
                         >
                             {msg}
                         </div>

webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss

@@ -144,22 +144,5 @@
         font-style: normal;
         font-weight: 600;
         line-height: 20px;
-
-        .btn-cancel {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
-            color: var(--button-bg, #1c58d9);
-        }
-
-        .btn-delete {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            margin-left: 8px;
-            background: var(--do-not-disturb-indicator, #d24b4e);
-            color: var(--button-color, #fff);
-        }
     }
 }

webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx

@@ -67,7 +67,7 @@ export default function SaveConfirmationModal({onExited, onConfirm, title, subti
             <Modal.Footer>
                 <button
                     type='button'
-                    className='btn-cancel'
+                    className='btn btn-tertiary'
                     onClick={onExited}
                 >
                     {formatMessage({id: 'admin.ip_filtering.cancel', defaultMessage: 'Cancel'})}
@@ -75,7 +75,7 @@ export default function SaveConfirmationModal({onExited, onConfirm, title, subti
                 <button
                     data-testid='save-confirmation-button'
                     type='button'
-                    className='btn-delete'
+                    className='btn btn-primary btn-danger'
                     onClick={() => onConfirm?.()}
                 >
                     {buttonText}

webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition.scss

@@ -1,6 +1,4 @@
 .EnterpriseEditionRightPannel {
-    font-family: Metropolis;
-
     .svg-image {
         text-align: center;
 
@@ -12,6 +10,7 @@
     .upgrade-title {
         margin: 10px 0;
         color: #3f4350;
+        font-family: Metropolis, sans-serif;
         font-size: 16px;
         font-weight: 700;
         line-height: 24px;
@@ -37,18 +36,11 @@
 
     button {
         width: 100%;
-        border-radius: 4px;
         margin: 5px auto;
     }
 
     .purchase_buttons {
         margin-top: 20px;
-
-        button {
-            height: 48px !important;
-            padding: 7px 12px !important;
-            margin: 0 5px !important;
-        }
     }
 
     .upgrade-error {
@@ -57,16 +49,10 @@
 }
 
 .EnterpriseEditionLeftPanel {
-    font-family: Metropolis;
-
     &__Grid {
         display: flex;
     }
 
-    .PlanDetails__viewPlansButton {
-        height: 33px;
-    }
-
     .pre-title {
         margin-bottom: 10px;
         color: rgba(63, 67, 80, 0.75) !important;
@@ -78,6 +64,7 @@
     .title {
         display: flex;
         color: #3f4350;
+        font-family: Metropolis, sans-serif;
         font-size: 18px;
         font-weight: 700;
         gap: 4px;
@@ -91,7 +78,6 @@
 
     .license-notices {
         font-size: 12px;
-        text-align: justify;
     }
 
     .licenseInformation {
@@ -111,13 +97,6 @@
                 display: inline-block;
                 color: #3f4350;
             }
-
-            .add-seats-button {
-                border-radius: 4px;
-                font-family: 'Open Sans', sans-serif;
-                font-size: 12px;
-                font-weight: 600;
-            }
         }
 
         .licenseElements {
@@ -171,22 +150,6 @@
                     }
                 }
             }
-
-            .add-new-licence-btn {
-                display: block;
-                padding: 12px 20px;
-                border: 1px solid var(--sys-button-bg);
-                border-radius: 4px;
-                margin-top: 15px;
-                background-color: var(--sys-center-channel-bg);
-                color: var(--sys-button-bg);
-
-                span {
-                    font-size: 14px;
-                    font-weight: 600;
-                    line-height: 14px;
-                }
-            }
         }
 
         #remove-button {

webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx

@@ -77,7 +77,7 @@ const EnterpriseEditionLeftPanel = ({
         <button
             id='enterprise_edition_view_plans'
             onClick={() => openPricingModal({trackingLocation: 'license_settings_view_plans'})}
-            className='btn btn-secondary PlanDetails__viewPlansButton'
+            className='btn btn-tertiary btn-sm PlanDetails__viewPlansButton'
         >
             {formatMessage({
                 id: 'workspace_limits.menu_limit.view_plans',
@@ -127,7 +127,7 @@ const EnterpriseEditionLeftPanel = ({
                 <div className='license-details-top'>
                     <span className='title'>{'License details'}</span>
                     <button
-                        className='add-seats-button btn btn-primary'
+                        className='btn btn-primary btn-sm add-seats-button '
                         onClick={openContactSales}
                     >
                         <FormattedMessage
@@ -297,7 +297,7 @@ const renderAddNewLicenseButton = (
     return (
         <>
             <button
-                className='add-new-licence-btn'
+                className='btn btn-tertiary add-new-licence-btn'
                 onClick={() => fileInputRef.current?.click()}
             >
                 <FormattedMessage

webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx

@@ -83,7 +83,6 @@ const EnterpriseEditionRightPanel = ({
         <div className='purchase-card'>
             <ContactUsButton
                 eventID='post_trial_contact_sales'
-                customClass='light-blue-btn'
             />
         </div>
     );

webapp/channels/src/components/admin_console/license_settings/license_settings.scss

@@ -45,17 +45,12 @@
     }
 }
 
-.light-blue-btn {
-    height: 40px;
-    padding: 10px 24px !important;
-    border: none !important;
-    background: rgba(28, 88, 217, 0.08) !important;
-    color: #1c58d9 !important;
-    font-weight: 700;
-}
-
 .admin-console__banner_section {
     margin-bottom: 20px;
+
+    &:empty {
+        margin-bottom: 0px;
+    }
 }
 
 .current-plan-legend {

webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx

@@ -79,7 +79,7 @@ const ConfirmLicenseRemovalModal: React.FC<Props> = (props: Props): JSX.Element
                 <div className='content-footer'>
                     <button
                         onClick={handleOnClose}
-                        className='btn light-blue-btn'
+                        className='btn btn-tertiary'
                         id='cancel-removal'
                     >
                         <FormattedMessage

webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.scss

@@ -1,4 +1,44 @@
 .RenewLicenseCard {
+    &__buttons {
+        display: flex;
+    }
+
+    &__text {
+        &-title {
+            margin-bottom: 5px;
+            color: var(--sys-sidebar-text-active-border);
+            font-family: 'Open Sans', sans-serif;
+            font-size: 18px;
+            font-weight: 600;
+            line-height: 24px;
+
+            &.critical {
+                color: var(--sys-error-text);
+            }
+        }
+
+        &-description {
+            margin-bottom: 5px;
+            color: var(--sys-center-channel-color);
+            font-family: 'Open Sans', sans-serif;
+            font-size: 14px;
+            line-height: 30px;
+
+            &.bolder {
+                font-weight: 600;
+            }
+        }
+    }
+
+    &__licensedUsersNum,
+    &__activeUsersNum {
+        display: inline-block;
+    }
+
+    &__activeUsersNum {
+        margin-left: 25px;
+    }
+
     .annnouncementBar__purchaseNow {
         display: block;
         padding: 12px 20px;
@@ -15,43 +55,10 @@
         }
     }
 
-    &__buttons {
+    &__alertBanner {
-        display: flex;
+        padding: 12px 20px;
+        border: 1px solid rgba(var(--error-text-color-rgb), 0.16);
+        margin-top: 4px;
+        background: rgba(var(--error-text-color-rgb), 0.08);
     }
 }
-
-.RenewLicenseCard__text-title {
-    margin-bottom: 5px;
-    color: var(--sys-sidebar-text-active-border);
-    font-family: Open Sans;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 24px;
-
-    &.critical {
-        color: var(--sys-error-text);
-    }
-}
-
-.RenewLicenseCard__text-description {
-    margin-bottom: 5px;
-    color: var(--sys-center-channel-color);
-    font-family: Open Sans;
-    font-size: 14px;
-    font-style: normal;
-    line-height: 30px;
-
-    &.bolder {
-        font-weight: 600;
-    }
-}
-
-.RenewLicenseCard__licensedUsersNum {
-    display: inline-block;
-}
-
-.RenewLicenseCard__activeUsersNum {
-    display: inline-block;
-    margin-left: 25px;
-}

webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.tsx

@@ -29,7 +29,7 @@ const RenewLicenseCard: React.FC<RenewLicenseCardProps> = ({license, totalUsers,
         <div className='purchase-card'>
             <ContactUsButton
                 eventID='post_trial_contact_sales'
-                customClass='light-blue-btn'
+                customClass='btn-primary'
             />
         </div>
     );

webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss

@@ -43,21 +43,6 @@
         justify-content: center;
         margin-top: 20px;
 
-        button {
-            width: 120px;
-            padding: 14px 12px !important;
-            border-radius: 4px;
-
-            span {
-                font-size: 16px !important;
-            }
-
-            &.contact-us {
-                width: 130px;
-                margin-left: 0px !important;
-            }
-        }
-
         @media screen and (max-width: 1130px) {
             flex-direction: column;
 
@@ -85,10 +70,6 @@
         right: 10px;
         display: block;
         margin-left: auto;
-
-        &.btn {
-            @include mixins.tertiary-button;
-        }
     }
 
     .pre-title {
@@ -137,11 +118,6 @@
                 display: hidden;
             }
 
-            button {
-                height: 48px;
-                border-radius: 4px;
-            }
-
             .help-text {
                 font-size: 12px;
             }

webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_left_panel.tsx

@@ -36,7 +36,7 @@ const StarterLeftPanel: React.FC<StarterEditionProps> = ({
         <button
             id='starter_edition_view_plans'
             onClick={() => openPricingModal({trackingLocation: 'license_settings_view_plans'})}
-            className='btn btn-secondary PlanDetails__viewPlansButton'
+            className='btn btn-tertiary btn-sm PlanDetails__viewPlansButton'
         >
             {intl.formatMessage({
                 id: 'workspace_limits.menu_limit.view_plans',
@@ -95,7 +95,7 @@ const StarterLeftPanel: React.FC<StarterEditionProps> = ({
                 </div>
                 <div className='uploadButtons'>
                     <button
-                        className='btn btn-upload light-blue-btn'
+                        className='btn btn-primary'
                         onClick={() => fileInputRef.current?.click()}
                         id='open-modal'
                     >

webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx

@@ -70,6 +70,7 @@ const StarterRightPanel = () => {
             <div className='purchase_buttons'>
                 <ContactUsButton
                     eventID='post_trial_contact_sales'
+                    customClass='btn-tertiary btn-full'
                 />
             </div>
         </div>

webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss

@@ -12,10 +12,7 @@
 
     .RenewLicenseCard__buttons {
         .contact_us_primary_cta {
-            padding: 6px 12px;
             margin-left: 0px;
-            background-color: var(--sys-button-bg);
-            color: var(--sys-center-channel-bg);
         }
     }
 
@@ -29,7 +26,4 @@
         margin-top: 0;
     }
 
-    button.contact-us {
-        padding: 11px 19px;
-    }
 }

webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx

@@ -59,7 +59,7 @@ const TrialLicenseCard: React.FC<Props> = ({license}: Props) => {
                 </div>
                 <div className='RenewLicenseCard__buttons'>
                     <ContactUsButton
-                        customClass='contact_us_primary_cta'
+                        customClass='btn-sm btn-primary'
                     />
                 </div>
             </div>

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap

@@ -439,6 +439,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     />
     <Connect(Component)
       className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -789,6 +790,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     />
     <Connect(Component)
       className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1139,6 +1141,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     />
     <Connect(Component)
       className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1489,6 +1492,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     />
     <Connect(Component)
       className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx

@@ -538,6 +538,7 @@ class PermissionSystemSchemeSettings extends React.PureComponent<Props, State> {
                     <BlockableLink
                         className='btn btn-tertiary'
                         to='/admin_console/user_management/permissions'
+                        data-testid='permission-scheme-cancel-button'
                     >
                         <FormattedMessage
                             id='admin.permissions.permissionSchemes.cancel'

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap

@@ -345,7 +345,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -751,7 +752,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1159,7 +1161,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1569,7 +1572,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -2045,7 +2049,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx

@@ -816,8 +816,9 @@ export default class PermissionTeamSchemeSettings extends React.PureComponent<Pr
                         }
                     />
                     <BlockableLink
-                        className='cancel-button'
+                        className='btn btn-tertiary'
                         to='/admin_console/user_management/permissions'
+                        data-testid='permission-scheme-cancel-button'
                     >
                         <FormattedMessage
                             id='admin.permissions.permissionSchemes.cancel'

webapp/channels/src/components/admin_console/workspace-optimization/__snapshots__/cta_buttons.test.tsx.snap

@@ -5,13 +5,13 @@ exports[`components/admin_console/workspace-optimization/cta_buttons should matc
   className="ctaButtons"
 >
   <button
-    className="actionButton annnouncementBar__purchaseNow"
+    className="btn btn-primary btn-sm actionButton annnouncementBar__purchaseNow"
     onClick={[Function]}
   >
     Action Text
   </button>
   <button
-    className="learnMoreButton light-blue-btn"
+    className="btn btn-tertiary btn-sm learnMoreButton"
     onClick={[Function]}
   >
     Learn More

webapp/channels/src/components/admin_console/workspace-optimization/cta_buttons.tsx

@@ -50,7 +50,7 @@ const CtaButtons = ({
         <div className='ctaButtons'>
             {(actionLink || actionButtonCallback) && actionText && (
                 <button
-                    className='actionButton annnouncementBar__purchaseNow'
+                    className='btn btn-primary btn-sm actionButton annnouncementBar__purchaseNow'
                     onClick={getClickHandler('cta', actionLink)}
                 >
                     {actionText}
@@ -58,7 +58,7 @@ const CtaButtons = ({
             )}
             {learnMoreLink && learnMoreText && (
                 <button
-                    className='learnMoreButton light-blue-btn'
+                    className='btn btn-tertiary btn-sm learnMoreButton'
                     onClick={getClickHandler('learn-more', learnMoreLink)}
                 >
                     {learnMoreText}

webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss

@@ -1,18 +0,0 @@
-@use 'utils/variables';
-
-.contact-us {
-    display: block;
-    padding: 12px 20px;
-    border: 1px solid var(--sys-button-bg);
-    border-radius: 4px;
-    margin-top: 15px;
-    margin-left: 10px;
-    background-color: var(--sys-center-channel-bg);
-    color: var(--sys-button-bg);
-
-    span {
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 14px;
-    }
-}

webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx

@@ -8,8 +8,6 @@ import {trackEvent} from 'actions/telemetry_actions';
 
 import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink';
 
-import './contact_us.scss';
-
 export interface Props {
     buttonTextElement?: JSX.Element;
     eventID?: string;
@@ -27,7 +25,7 @@ const ContactUsButton: React.FC<Props> = (props: Props) => {
 
     return (
         <button
-            className={`contact-us ${props.customClass ? props.customClass : ''}`}
+            className={`btn contact-us ${props.customClass || 'btn-tertiary'}`}
             onClick={(e) => handleContactUsLinkClick(e)}
         >
             {props.buttonTextElement || (

webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx

@@ -174,6 +174,7 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                 <button
                     onClick={this.props.onButtonClick}
                     disabled={this.props.ctaDisabled}
+                    className='btn btn-tertiary btn-xs btn-inverted'
                 >
                     <FormattedMessage
                         {...this.props.modalButtonText}
@@ -185,6 +186,7 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                 <button
                     onClick={this.props.onButtonClick}
                     disabled={this.props.ctaDisabled}
+                    className='btn btn-tertiary btn-xs btn-inverted'
                 >
                     {this.props.ctaText}
                 </button>

webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap

@@ -14,7 +14,9 @@ exports[`NotificationPermissionBar should render the NotificationPermissionNever
       <span>
         We need your permission to show notifications in the browser.
       </span>
-      <button>
+      <button
+        class="btn btn-tertiary btn-xs btn-inverted"
+      >
         Manage notification preferences
       </button>
     </div>
@@ -42,7 +44,9 @@ exports[`NotificationPermissionBar should render the NotificationUnsupportedBar
       <span>
         Your browser does not support browser notifications.
       </span>
-      <button>
+      <button
+        class="btn btn-tertiary btn-xs btn-inverted"
+      >
         Update your browser
       </button>
     </div>

webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss

@@ -2,16 +2,5 @@
 
 .annnouncementBar__purchaseNow {
     display: block;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 4px;
     margin-top: 15px;
-    background: var(--sys-button-bg);
-    color: var(--sys-button-color);
-
-    span {
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 14px;
-    }
 }

webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx

@@ -27,7 +27,7 @@ const PurchaseLink: React.FC<Props> = (props: Props) => {
     return (
         <button
             id={props.eventID}
-            className={'annnouncementBar__purchaseNow'}
+            className={'btn btn-primary btn-lg announcementBar__purchaseNow'}
             onClick={handlePurchaseLinkClick}
         >
             {props.buttonTextElement}

webapp/channels/src/components/copy_text.tsx

@@ -33,7 +33,7 @@ const CopyText = ({
         <WithTooltip title={label}>
             <button
                 data-testid='copyText'
-                className='btn btn-link fa fa-copy ml-2'
+                className='btn btn-link icon-content-copy ml-2'
                 aria-label={intl.formatMessage(label)}
                 onClick={copyText}
             />

webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx

@@ -28,7 +28,7 @@ function EmojiPickerCustomEmojiButton({customEmojisEnabled, currentTeamName, onC
         <AnyTeamPermissionGate permissions={[Permissions.CREATE_EMOJIS]}>
             <div className='emoji-picker__custom'>
                 <Link
-                    className='btn btn-tertiary'
+                    className='btn btn-tertiary btn-sm'
                     to={`/${currentTeamName}/emoji`}
                     onClick={onClick}
                 >

webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap

@@ -352,7 +352,7 @@ Object {
                 class="buttons"
               >
                 <button
-                  class="confirm-btn btn btn-default"
+                  class="btn btn-primary btn btn-default"
                   disabled=""
                   type="button"
                 >

webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.scss

@@ -89,29 +89,6 @@
         .buttons {
             margin-top: 32px;
             text-align: right;
-
-            .confirm-btn {
-                &:hover,
-                &:active,
-                &:focus,
-                &:active:focus {
-                    background:
-                        linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
-                        var(--button-bg);
-                }
-
-                height: 40px;
-                flex: none;
-                padding: 12px 20px;
-                border: none;
-                border-radius: 4px;
-                margin-left: 8px;
-                background: var(--button-bg);
-                color: var(--sys-button-color);
-                font-size: 14px;
-                font-weight: 600;
-                line-height: 14px;
-            }
         }
     }
 }

webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx

@@ -62,7 +62,7 @@ function AirGappedModal({onClose}: Props) {
                 </div>
                 <div className='buttons'>
                     <Button
-                        className='confirm-btn'
+                        className='btn btn-primary'
                         onClick={() => onClose?.()}
                     >
                         {formatMessage({id: 'air_gapped_modal.close', defaultMessage: 'Close'})}

webapp/channels/src/components/start_trial_form_modal/index.tsx

@@ -361,7 +361,7 @@ function StartTrialFormModal(props: Props): JSX.Element | null {
                 <div className='buttons'>
                     <Button
                         disabled={isSubmitDisabled}
-                        className='confirm-btn'
+                        className='btn btn-primary'
                         onClick={requestLicense}
                     >
                         {btnText(status)}

webapp/channels/src/components/start_trial_form_modal/start_trial_form_modal.scss

@@ -141,29 +141,6 @@
         .buttons {
             margin-top: 32px;
             text-align: right;
-
-            .confirm-btn {
-                &:hover,
-                &:active,
-                &:focus,
-                &:active:focus {
-                    background:
-                        linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
-                        var(--button-bg);
-                }
-
-                height: 40px;
-                flex: none;
-                padding: 12px 20px;
-                border: none;
-                border-radius: 4px;
-                margin-left: 8px;
-                background: var(--button-bg);
-                color: var(--sys-button-color);
-                font-size: 14px;
-                font-weight: 600;
-                line-height: 14px;
-            }
         }
     }
 

webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss

@@ -74,7 +74,6 @@
         display: flex;
         flex: 1 1 auto;
         justify-content: flex-end;
-        gap: 8px;
 
         #panelCloseButton {
             color: rgba(var(--button-color-rgb), 0.64);
@@ -83,52 +82,32 @@
     }
 
     &__cancel-btn {
-        display: flex;
+        &.btn {
-        min-width: 64px;
+            &.error {
-        height: 32px;
+                background: rgba(var(--button-color-rgb), 0.12);
-        align-items: center;
+                color: var(--button-color);
-        padding: 10px 16px;
-        border: none;
-        border-radius: 4px;
-        background: rgba(var(--button-bg-rgb), 0.08);
-        color: var(--button-bg);
-        font-family: inherit;
-        font-size: 12px;
-        font-weight: 600;
-        gap: 10px;
-        line-height: 10px;
 
-        &.error {
+                &:hover {
-            background: rgba(var(--button-color-rgb), 0.12);
+                    background-color: rgba(var(--button-color-rgb), 0.16);
-            color: var(--button-color);
+                }
+            }
         }
     }
 
     &__save-btn {
-        display: flex;
+        &.btn {
-        min-width: 59px;
+            &.error {
-        height: 32px;
+                background-color: var(--button-color);
-        flex-direction: column;
+                color: var(--dnd-indicator);
-        align-items: center;
-        padding: 10px 16px;
-        border: none;
-        border-radius: 4px;
-        background: var(--button-bg);
-        color: var(--button-color);
-        font-family: inherit;
-        font-size: 12px;
-        font-weight: 600;
-        gap: 10px;
-        line-height: 10px;
 
-        &.error {
+                &:hover {
-            background-color: var(--button-color);
+                    background-color: rgba(var(--button-color-rgb), 0.9);
-            color: var(--button-bg);
+                }
-        }
 
-        &:disabled {
+                &:disabled {
-            background: var(--center-channel-bg);
+                    background: rgba(var(--button-color-rgb), 0.16); 
-            opacity: 0.32; 
+                }
-        }
+            }
+        }   
     }
 }

webapp/channels/src/components/widgets/modals/components/save_changes_panel.tsx

@@ -35,8 +35,8 @@ function SaveChangesPanel({
 }: Props) {
     const panelClassName = classNames('SaveChangesPanel', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
     const messageClassName = classNames('SaveChangesPanel__message', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
-    const cancelButtonClassName = classNames('SaveChangesPanel__cancel-btn', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
+    const cancelButtonClassName = classNames('btn btn-tertiary btn-sm SaveChangesPanel__cancel-btn', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
-    const saveButtonClassName = classNames('SaveChangesPanel__save-btn', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
+    const saveButtonClassName = classNames('btn btn-primary btn-sm SaveChangesPanel__save-btn', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
 
     useEffect(() => {
         let timeoutId: NodeJS.Timeout;

webapp/channels/src/sass/components/_announcement-bar.scss

@@ -91,23 +91,13 @@
         font-size: 16px;
     }
 
-    button {
+    .btn.btn-tertiary.btn-xs.btn-inverted {
-        &:hover {
+        background-color: rgba(variables.$white, 0.16);
-            background-color: rgba(255, 255, 255, 0.08);
+        color: variables.$white;
-        }
 
-        height: 24px;
+        &:hover {
-        box-sizing: border-box;
+            background-color: rgba(variables.$white, 0.24);
-        padding: 4px 8px;
+        }
-        border: 1px solid #fff;
-        border-radius: 4px;
-        margin-left: 8px;
-        background-color: inherit !important;
-        font-family: Open Sans;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 14px;
     }
 }
 

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

@@ -157,7 +157,7 @@ button {
     &.btn-xs {
         height: 24px;
         padding: 0 10px;
-        font-size: 11px;
+        font-size: 12px;
         gap: 6px;
 
         i {

webapp/platform/components/src/tour_tip/tour_tip.scss

@@ -80,10 +80,6 @@ $z-index-tour-tips-backdrop: 1250;
                     &:focus {
                         box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
                     }
-
-                    .icon-chevron-right::before {
-                        margin-right: -7px;
-                    }
                 }
 
                 &.btn-tertiary {
@@ -101,10 +97,6 @@ $z-index-tour-tips-backdrop: 1250;
                     &:focus {
                         box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
                     }
-
-                    .icon-chevron-left::before {
-                        margin-left: -7px;
-                    }
                 }
 
                 &.btn-icon {