From 6f4382189fecf3ec8f11bf698668eba0164fef61 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:17:14 +0500
Subject: [PATCH] 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>
---
 .../get_link_modal.test.tsx.snap              |   8 +-
 .../__snapshots__/save_button.test.tsx.snap   |  10 +-
 .../setting_item_max.test.jsx.snap            |  18 +-
 .../setting_picture.test.tsx.snap             |  48 +--
 .../access_history_modal.test.tsx.snap        |   4 +-
 .../access_history_modal.tsx                  |   2 +-
 .../activity_log_modal.test.tsx.snap          |   4 +-
 .../activity_log_modal/activity_log_modal.tsx |   2 +-
 .../add_user_to_channel_modal.test.tsx.snap   |   2 +-
 .../add_user_to_channel_modal.tsx             |   2 +-
 .../add_users_to_group_modal.test.tsx.snap    |   2 +-
 .../add_users_to_group_modal.tsx              |   2 +-
 .../bleve_settings.test.tsx.snap              |   4 +-
 .../cluster_settings.test.jsx.snap            |   8 +-
 .../database_settings.test.jsx.snap           |   2 +-
 .../elasticsearch_settings.test.jsx.snap      |   4 +-
 .../message_export_settings.test.jsx.snap     |   8 +-
 .../__snapshots__/push_settings.test.tsx.snap |   4 +-
 .../schema_admin_settings.test.jsx.snap       |   2 +-
 .../admin_console/audits/audits.tsx           |   2 +-
 .../brand_image_setting.tsx                   |   7 +-
 .../admin_console/cluster_table.tsx           |   2 +-
 .../compliance_reports/compliance_reports.tsx |   2 +-
 .../custom_plugin_settings.test.tsx.snap      |   6 +-
 ...om_terms_of_service_settings.test.tsx.snap |   8 +-
 .../admin_console/data_grid/data_grid.scss    |   2 +-
 .../admin_console/data_grid/data_grid.tsx     |   5 +-
 .../custom_policy_form.test.tsx.snap          |   4 +-
 .../global_policy_form.test.tsx.snap          |   2 +-
 .../feature_discovery/feature_discovery.scss  |   2 +-
 .../admin_console/file_upload_setting.jsx     |   9 +-
 .../admin_console/filter/filter.scss          |   8 -
 .../admin_console/filter/filter.tsx           |   2 +-
 .../full_log_event_modal.tsx                  |   2 +-
 .../admin_console/generated_setting.tsx       |   2 +-
 ...group_teams_and_channels_row.test.tsx.snap |  12 +-
 .../__snapshots__/group_users.test.tsx.snap   |  24 +-
 .../group_teams_and_channels_row.test.tsx     |   2 +-
 .../group_teams_and_channels_row.tsx          |   2 +-
 .../group_details/group_users.tsx             |   4 +-
 .../__snapshots__/groups_list.test.tsx.snap   |  64 ++--
 .../groups_list/groups_list.tsx               |   8 +-
 .../admin_console/jobs/table.test.tsx         |   2 +-
 .../components/admin_console/jobs/table.tsx   |   2 +-
 .../manage_roles_modal/manage_roles_modal.tsx |   2 +-
 .../edit_post_time_limit_modal.tsx            |   4 +-
 ...ssion_system_scheme_settings.test.tsx.snap |  24 +-
 ...permission_system_scheme_settings.test.tsx |   2 +-
 .../permission_system_scheme_settings.tsx     |   4 +-
 ...mission_team_scheme_settings.test.tsx.snap |   8 +-
 .../plugin_management.test.tsx.snap           |  84 ++---
 .../plugin_management/plugin_management.tsx   |   4 +-
 .../request_button.test.tsx.snap              |  10 +-
 .../request_button/request_button.tsx         |   2 +-
 .../reset_email_modal.test.tsx.snap           |   4 +-
 .../reset_email_modal/reset_email_modal.tsx   |   2 +-
 .../reset_password_modal.test.tsx.snap        |   2 +-
 .../reset_password_modal.tsx                  |   2 +-
 .../admin_console/server_logs/log_list.tsx    |   4 +-
 .../server_logs/plain_log_list.tsx            |   4 +-
 .../system_user_detail.test.tsx.snap          |  12 +-
 .../__snapshots__/abstract_list.test.tsx.snap |  12 +-
 .../team_list/abstract_list.scss              |   2 +-
 .../team_list/abstract_list.tsx               |   4 +-
 .../__snapshots__/system_users.test.tsx.snap  |   2 +-
 .../system_users/system_users.tsx             |   2 +-
 .../__snapshots__/abstract_list.test.tsx.snap |   4 +-
 .../team_channel_settings/abstract_list.tsx   |   4 +-
 .../channel_profile.test.tsx.snap             |  12 +-
 .../channel/details/channel_profile.tsx       |  10 +-
 .../team_channel_settings/errors.tsx          |   2 +-
 .../save_changes_panel.tsx                    |   2 +-
 .../__snapshots__/team_profile.test.tsx.snap  |  72 +----
 .../team/details/team_profile.tsx             |  17 +-
 .../apps_form_component.test.tsx.snap         |   2 +-
 .../apps_form/apps_form_component.tsx         |   2 +-
 .../src/components/authorize/authorize.tsx    |   2 +-
 .../browse_channels.test.tsx.snap             |   4 +-
 .../browse_channels/browse_channels.scss      |  22 --
 .../browse_channels/browse_channels.tsx       |   4 +-
 .../components/channel_info_rhs/header.tsx    |   2 +-
 .../channel_invite_modal.test.tsx.snap        |   6 +-
 .../channel_invite_modal.tsx                  |   4 +-
 .../components/channel_members_rhs/header.tsx |   2 +-
 .../channels/src/components/confirm_modal.tsx |   2 +-
 .../convert_channel_modal.tsx                 |   2 +-
 .../__snapshots__/display_name.test.tsx.snap  |   4 +-
 .../create_team/components/display_name.tsx   |   4 +-
 .../create_user_groups_modal.test.tsx.snap    |   2 +-
 .../create_user_groups_modal.tsx              |   2 +-
 .../delete_channel_modal.test.tsx.snap        |   2 +-
 .../delete_channel_modal.tsx                  |   2 +-
 .../delete_post_modal.test.tsx.snap           |   6 +-
 .../delete_post_modal/delete_post_modal.tsx   |   2 +-
 .../edit_channel_header_modal.test.tsx.snap   |  10 +-
 .../edit_channel_header_modal.tsx             |   2 +-
 .../edit_channel_purpose_modal.test.tsx.snap  |  28 +-
 .../edit_channel_purpose_modal.test.tsx       |   2 +-
 .../edit_channel_purpose_modal.tsx            |   4 +-
 .../__snapshots__/add_emoji.test.tsx.snap     |   6 +-
 .../components/emoji/add_emoji/add_emoji.tsx  |   2 +-
 .../emoji/emoji_list/emoji_list.tsx           |   4 +-
 .../emoji_picker_custom_emoji_button.tsx      |   2 +-
 .../src/components/get_link_modal.tsx         |   2 +-
 .../abstract_command.test.tsx.snap            |   6 +-
 .../abstract_incoming_hook.test.tsx.snap      |  12 +-
 .../abstract_oauth_app.test.jsx.snap          |   4 +-
 .../abstract_outgoing_webhook.test.tsx.snap   |   2 +-
 .../integrations/abstract_command.tsx         |   2 +-
 .../abstract_incoming_webhook.tsx             |   2 +-
 .../integrations/abstract_oauth_app.jsx       |   2 +-
 .../abstract_outgoing_webhook.tsx             |   2 +-
 .../__snapshots__/add_bot.test.tsx.snap       |   4 +-
 .../integrations/bots/add_bot/add_bot.tsx     |   4 +-
 .../src/components/integrations/bots/bot.tsx  |   2 +-
 .../interactive_dialog/interactive_dialog.jsx |   2 +-
 .../invitation_modal/invite_view.scss         |  30 --
 .../invitation_modal/invite_view.tsx          |   2 +-
 .../invitation_modal/result_view.tsx          |   2 +-
 .../leave_team_modal.test.tsx.snap            |   2 +-
 .../leave_team_modal.test.tsx                 |   2 +-
 .../leave_team_modal/leave_team_modal.tsx     |   2 +-
 .../linking_landing_page.tsx                  |  38 ++-
 webapp/channels/src/components/list_modal.tsx |   4 +-
 .../login/__snapshots__/login.test.tsx.snap   |   2 +-
 .../__snapshots__/login_mfa.test.tsx.snap     |   2 +-
 .../more_direct_channels.test.tsx.snap        |   4 +-
 .../more_direct_channels.tsx                  |   2 +-
 .../__snapshots__/multiselect.test.tsx.snap   |  12 +-
 .../components/multiselect/multiselect.tsx    |   6 +-
 .../new_channel_modal.test.tsx                |   4 +-
 .../onboarding_tasklist.tsx                   |   2 +-
 .../post_edit_history.test.tsx.snap           |   8 +-
 .../rename_channel_modal.test.tsx.snap        |   2 +-
 .../rename_channel_modal.tsx                  |   2 +-
 .../rhs_card_header/rhs_card_header.tsx       |   4 +-
 .../rhs_header_post/rhs_header_post.tsx       |   4 +-
 .../channels/src/components/save_button.tsx   |   8 +-
 .../search_results_header.tsx                 |   4 +-
 .../components/searchable_channel_list.tsx    |   6 +-
 .../searchable_user_list.tsx                  |   4 +-
 .../src/components/setting_item_max.tsx       |   6 +-
 .../src/components/setting_picture.tsx        |   6 +-
 .../signup/__snapshots__/signup.test.tsx.snap |   4 +-
 .../team_members_modal.test.tsx.snap          |   2 +-
 .../team_members_modal/team_members_modal.tsx |   2 +-
 .../unarchive_channel_modal.test.tsx.snap     |   2 +-
 .../unarchive_channel_modal.tsx               |   2 +-
 .../update_user_group_modal.test.tsx.snap     |   6 +-
 .../update_user_group_modal.scss              |   8 -
 .../update_user_group_modal.tsx               |   4 +-
 .../user_group_popover.test.tsx.snap          |   6 +-
 .../user_group_popover/user_group_popover.tsx |   4 +-
 .../user_groups_list/user_groups_list.tsx     |   2 +-
 .../user_groups_modal/user_groups_modal.scss  |  44 +--
 .../user_groups_modal_header.test.tsx.snap    |   2 +-
 .../user_groups_modal_header.tsx              |   2 +-
 .../import_theme_modal.test.tsx.snap          |   2 +-
 .../custom_theme_chooser.test.tsx.snap        |   2 +-
 .../custom_theme_chooser.tsx                  |   2 +-
 .../user_settings/import_theme_modal.tsx      |   2 +-
 .../email_notification_setting.test.tsx.snap  |  12 +-
 .../manage_auto_responder.test.tsx.snap       |  12 +-
 .../user_access_token_section.tsx             |   3 +-
 .../view_user_group_header_sub_menu.tsx       |   2 +-
 .../view_user_group_list_item.tsx             |   2 +-
 .../view_user_group_modal.scss                |  53 ----
 .../view_user_group_modal_header.tsx          |   4 +-
 .../components/widgets/icons/fa_next_icon.tsx |   2 +-
 .../widgets/icons/fa_previous_icon.tsx        |   2 +-
 .../widgets/icons/unarchive_icon.tsx          |  22 --
 .../src/sass/components/_buttons.scss         | 288 ++++++++++++++----
 .../components/_channel-invite-modal.scss     |  21 --
 .../channels/src/sass/components/_groups.scss |   4 +-
 .../channels/src/sass/components/_modal.scss  |  24 +-
 .../src/sass/layout/_sidebar-right.scss       |   4 +-
 .../src/sass/routes/_admin-console.scss       |   2 +-
 webapp/channels/src/sass/routes/_get-app.scss |  34 ---
 .../channels/src/sass/routes/_settings.scss   |  10 -
 webapp/channels/src/sass/routes/_signup.scss  | 160 ----------
 webapp/channels/src/utils/utils.tsx           |  11 +-
 .../src/generic_modal/generic_modal.scss      |  56 ----
 .../src/generic_modal/generic_modal.tsx       |   4 +-
 183 files changed, 722 insertions(+), 1102 deletions(-)
 delete mode 100644 webapp/channels/src/components/widgets/icons/unarchive_icon.tsx

diff --git a/webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap b/webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap
index c3c03451a49..6372fda945c 100644
--- a/webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`components/GetLinkModal should have called onHide 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="linkModalCloseButton"
       onClick={[Function]}
       type="button"
@@ -155,7 +155,7 @@ exports[`components/GetLinkModal should have called onHide 2`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="linkModalCloseButton"
       onClick={[Function]}
       type="button"
@@ -246,7 +246,7 @@ exports[`components/GetLinkModal should match snapshot when all props is set 1`]
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="linkModalCloseButton"
       onClick={[Function]}
       type="button"
@@ -332,7 +332,7 @@ exports[`components/GetLinkModal should match snapshot when helpText is not set
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="linkModalCloseButton"
       onClick={[Function]}
       type="button"
diff --git a/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap b/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
index 277ce573962..05828e668c5 100644
--- a/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/SaveButton should match snapshot, extraClasses 1`] = `
 <button
-  className="save-button btn btn-primary some-class"
+  className="btn btn-primary  some-class"
   data-testid="saveSetting"
   disabled={false}
   id="saveSetting"
@@ -29,7 +29,7 @@ exports[`components/SaveButton should match snapshot, extraClasses 1`] = `
 
 exports[`components/SaveButton should match snapshot, on defaultMessage 1`] = `
 <button
-  className="save-button btn btn-primary"
+  className="btn btn-primary "
   data-testid="saveSetting"
   disabled={false}
   id="saveSetting"
@@ -56,7 +56,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 1`] = `
 
 exports[`components/SaveButton should match snapshot, on defaultMessage 2`] = `
 <button
-  className="save-button btn btn-primary"
+  className="btn btn-primary "
   data-testid="saveSetting"
   disabled={false}
   id="saveSetting"
@@ -80,7 +80,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 2`] = `
 
 exports[`components/SaveButton should match snapshot, on savingMessage 1`] = `
 <button
-  className="save-button btn btn-primary"
+  className="btn btn-primary "
   data-testid="saveSetting"
   disabled={true}
   id="saveSetting"
@@ -107,7 +107,7 @@ exports[`components/SaveButton should match snapshot, on savingMessage 1`] = `
 
 exports[`components/SaveButton should match snapshot, on savingMessage 2`] = `
 <button
-  className="save-button btn btn-primary"
+  className="btn btn-primary "
   data-testid="saveSetting"
   disabled={true}
   id="saveSetting"
diff --git a/webapp/channels/src/components/__snapshots__/setting_item_max.test.jsx.snap b/webapp/channels/src/components/__snapshots__/setting_item_max.test.jsx.snap
index c74ea2d48fd..13701dc3a98 100644
--- a/webapp/channels/src/components/__snapshots__/setting_item_max.test.jsx.snap
+++ b/webapp/channels/src/components/__snapshots__/setting_item_max.test.jsx.snap
@@ -27,7 +27,7 @@ exports[`components/SettingItemMax should match snapshot 1`] = `
       >
         <hr />
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Save"
@@ -46,7 +46,7 @@ exports[`components/SettingItemMax should match snapshot 1`] = `
           }
         />
         <button
-          className="btn btn-sm btn-cancel cursor--pointer style--none"
+          className="btn btn-tertiary"
           id="cancelSetting"
           onClick={[Function]}
         >
@@ -98,7 +98,7 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
           </label>
         </div>
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Save"
@@ -117,7 +117,7 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
           }
         />
         <button
-          className="btn btn-sm btn-cancel cursor--pointer style--none"
+          className="btn btn-tertiary"
           id="cancelSetting"
           onClick={[Function]}
         >
@@ -169,7 +169,7 @@ exports[`components/SettingItemMax should match snapshot, on serverError 1`] = `
           </label>
         </div>
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Save"
@@ -188,7 +188,7 @@ exports[`components/SettingItemMax should match snapshot, on serverError 1`] = `
           }
         />
         <button
-          className="btn btn-sm btn-cancel cursor--pointer style--none"
+          className="btn btn-tertiary"
           id="cancelSetting"
           onClick={[Function]}
         >
@@ -230,7 +230,7 @@ exports[`components/SettingItemMax should match snapshot, with new saveTextButto
       >
         <hr />
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage="CustomText"
           disabled={false}
           extraClasses=""
@@ -244,7 +244,7 @@ exports[`components/SettingItemMax should match snapshot, with new saveTextButto
           }
         />
         <button
-          className="btn btn-sm btn-cancel cursor--pointer style--none"
+          className="btn btn-tertiary"
           id="cancelSetting"
           onClick={[Function]}
         >
@@ -286,7 +286,7 @@ exports[`components/SettingItemMax should match snapshot, without submit 1`] = `
       >
         <hr />
         <button
-          className="btn btn-sm btn-cancel cursor--pointer style--none"
+          className="btn btn-tertiary"
           id="cancelSetting"
           onClick={[Function]}
         >
diff --git a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
index df524dcda4e..2272027821f 100644
--- a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
@@ -69,7 +69,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
           />
           <button
             aria-label="Select"
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-primary btn-file"
             data-testid="inputSettingPictureButton"
             disabled={false}
             onClick={[Function]}
@@ -81,7 +81,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
           </button>
           <button
             aria-label="Save"
-            className="btn btn-sm btn-primary"
+            className="btn btn-primary"
             data-testid="saveSettingPicture"
             disabled={false}
             onClick={[Function]}
@@ -100,7 +100,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
         </span>
         <button
           aria-label="Cancel"
-          className="btn btn-link btn-sm theme"
+          className="btn btn-tertiary theme ml-2"
           data-testid="cancelSettingPicture"
           onClick={[Function]}
         >
@@ -174,7 +174,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
           />
           <button
             aria-label="Select"
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-primary btn-file"
             data-testid="inputSettingPictureButton"
             disabled={false}
             onClick={[Function]}
@@ -186,7 +186,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
           </button>
           <button
             aria-label="Save"
-            className="btn btn-sm btn-primary"
+            className="btn btn-primary"
             data-testid="saveSettingPicture"
             disabled={false}
             onClick={[Function]}
@@ -205,7 +205,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
         </span>
         <button
           aria-label="Cancel"
-          className="btn btn-link btn-sm theme"
+          className="btn btn-tertiary theme ml-2"
           data-testid="cancelSettingPicture"
           onClick={[Function]}
         >
@@ -289,7 +289,7 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
           />
           <button
             aria-label="Select"
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-primary btn-file"
             data-testid="inputSettingPictureButton"
             disabled={true}
             onClick={[Function]}
@@ -301,7 +301,7 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
           </button>
           <button
             aria-label="Uploading..."
-            className="btn btn-sm btn-inactive disabled"
+            className="btn btn-inactive disabled"
             data-testid="saveSettingPicture"
             disabled={true}
             onClick={[Function]}
@@ -320,7 +320,7 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
         </span>
         <button
           aria-label="Cancel"
-          className="btn btn-link btn-sm theme"
+          className="btn btn-tertiary theme ml-2"
           data-testid="cancelSettingPicture"
           onClick={[Function]}
         >
@@ -416,7 +416,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
           />
           <button
             aria-label="Select"
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-primary btn-file"
             data-testid="inputSettingPictureButton"
             disabled={false}
             onClick={[Function]}
@@ -428,7 +428,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
           </button>
           <button
             aria-label="Save"
-            className="btn btn-sm btn-inactive disabled"
+            className="btn btn-inactive disabled"
             data-testid="saveSettingPicture"
             disabled={true}
             onClick={[Function]}
@@ -447,7 +447,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
         </span>
         <button
           aria-label="Cancel"
-          className="btn btn-link btn-sm theme"
+          className="btn btn-tertiary theme ml-2"
           data-testid="cancelSettingPicture"
           onClick={[Function]}
         >
@@ -531,7 +531,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
           />
           <button
             aria-label="Select"
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-primary btn-file"
             data-testid="inputSettingPictureButton"
             disabled={false}
             onClick={[Function]}
@@ -543,7 +543,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
           </button>
           <button
             aria-label="Save"
-            className="btn btn-sm btn-inactive disabled"
+            className="btn btn-inactive disabled"
             data-testid="saveSettingPicture"
             disabled={true}
             onClick={[Function]}
@@ -562,7 +562,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
         </span>
         <button
           aria-label="Cancel"
-          className="btn btn-link btn-sm theme"
+          className="btn btn-tertiary theme ml-2"
           data-testid="cancelSettingPicture"
           onClick={[Function]}
         >
@@ -658,7 +658,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
           />
           <button
             aria-label="Select"
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-primary btn-file"
             data-testid="inputSettingPictureButton"
             disabled={false}
             onClick={[Function]}
@@ -670,7 +670,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
           </button>
           <button
             aria-label="Save"
-            className="btn btn-sm btn-inactive disabled"
+            className="btn btn-inactive disabled"
             data-testid="saveSettingPicture"
             disabled={true}
             onClick={[Function]}
@@ -689,7 +689,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
         </span>
         <button
           aria-label="Cancel"
-          className="btn btn-link btn-sm theme"
+          className="btn btn-tertiary theme ml-2"
           data-testid="cancelSettingPicture"
           onClick={[Function]}
         >
@@ -827,7 +827,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
           />
           <button
             aria-label="Select"
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-primary btn-file"
             data-testid="inputSettingPictureButton"
             disabled={false}
             onClick={[Function]}
@@ -839,7 +839,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
           </button>
           <button
             aria-label="Save"
-            className="btn btn-sm btn-inactive disabled"
+            className="btn btn-inactive disabled"
             data-testid="saveSettingPicture"
             disabled={true}
             onClick={[Function]}
@@ -858,7 +858,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
         </span>
         <button
           aria-label="Cancel"
-          className="btn btn-link btn-sm theme"
+          className="btn btn-tertiary theme ml-2"
           data-testid="cancelSettingPicture"
           onClick={[Function]}
         >
@@ -996,7 +996,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
           />
           <button
             aria-label="Select"
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-primary btn-file"
             data-testid="inputSettingPictureButton"
             disabled={false}
             onClick={[Function]}
@@ -1008,7 +1008,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
           </button>
           <button
             aria-label="Save"
-            className="btn btn-sm btn-inactive disabled"
+            className="btn btn-inactive disabled"
             data-testid="saveSettingPicture"
             disabled={true}
             onClick={[Function]}
@@ -1027,7 +1027,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
         </span>
         <button
           aria-label="Cancel"
-          className="btn btn-link btn-sm theme"
+          className="btn btn-tertiary theme ml-2"
           data-testid="cancelSettingPicture"
           onClick={[Function]}
         >
diff --git a/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap b/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap
index dac1bc0feb3..d245fe15e11 100644
--- a/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap
+++ b/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`components/AccessHistoryModal should match snapshot when audits exist 1
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="closeModalButton"
       type="button"
     >
@@ -140,7 +140,7 @@ exports[`components/AccessHistoryModal should match snapshot when no audits exis
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="closeModalButton"
       type="button"
     >
diff --git a/webapp/channels/src/components/access_history_modal/access_history_modal.tsx b/webapp/channels/src/components/access_history_modal/access_history_modal.tsx
index cce49a8b6e6..3a991e0bb56 100644
--- a/webapp/channels/src/components/access_history_modal/access_history_modal.tsx
+++ b/webapp/channels/src/components/access_history_modal/access_history_modal.tsx
@@ -78,7 +78,7 @@ const AccessHistoryModal = ({
                 <button
                     id='closeModalButton'
                     type='button'
-                    className='btn btn-link'
+                    className='btn btn-tertiary'
                 >
                     <FormattedMessage
                         id='general_button.close'
diff --git a/webapp/channels/src/components/activity_log_modal/__snapshots__/activity_log_modal.test.tsx.snap b/webapp/channels/src/components/activity_log_modal/__snapshots__/activity_log_modal.test.tsx.snap
index da01e5d71ec..ffaa24aab9b 100644
--- a/webapp/channels/src/components/activity_log_modal/__snapshots__/activity_log_modal.test.tsx.snap
+++ b/webapp/channels/src/components/activity_log_modal/__snapshots__/activity_log_modal.test.tsx.snap
@@ -69,7 +69,7 @@ exports[`components/ActivityLogModal should match snapshot 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="closeModalButton"
       type="button"
     >
@@ -151,7 +151,7 @@ exports[`components/ActivityLogModal should match snapshot when submitRevoke is
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="closeModalButton"
       type="button"
     >
diff --git a/webapp/channels/src/components/activity_log_modal/activity_log_modal.tsx b/webapp/channels/src/components/activity_log_modal/activity_log_modal.tsx
index 40e5d4b92b7..09cc2b6f3dd 100644
--- a/webapp/channels/src/components/activity_log_modal/activity_log_modal.tsx
+++ b/webapp/channels/src/components/activity_log_modal/activity_log_modal.tsx
@@ -142,7 +142,7 @@ export default class ActivityLogModal extends React.PureComponent<Props, State>
                     <button
                         id='closeModalButton'
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                     >
                         <FormattedMessage
                             id='general_button.close'
diff --git a/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
index 18e2c0e96fa..255c76bb9cd 100644
--- a/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
@@ -104,7 +104,7 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = `
       componentClass="div"
     >
       <button
-        className="btn btn-link"
+        className="btn btn-tertiary"
         onClick={[Function]}
         type="button"
       >
diff --git a/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx b/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
index 18f651bc2f8..51a59eccaf9 100644
--- a/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
+++ b/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
@@ -321,7 +321,7 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
                     <Modal.Footer>
                         <button
                             type='button'
-                            className='btn btn-link'
+                            className='btn btn-tertiary'
                             onClick={this.onHide}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
index a578ab5acdf..07dab9c5218 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
   >
     <button
       aria-label="Close"
-      className="modal-header-back-button btn-icon"
+      className="modal-header-back-button btn btn-icon"
       onClick={[Function]}
       type="button"
     >
diff --git a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
index 31857df0b36..0553ce2cb6c 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
+++ b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
@@ -103,7 +103,7 @@ const AddUsersToGroupModal = (props: Props) => {
             <Modal.Header closeButton={true}>
                 <button
                     type='button'
-                    className='modal-header-back-button btn-icon'
+                    className='modal-header-back-button btn btn-icon'
                     aria-label='Close'
                     onClick={goBack}
                 >
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
index 9e7b8a87f9d..de40f353973 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -479,7 +479,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.jsx.snap
index b9df09eb733..e3eb92716fa 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.jsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.jsx.snap
@@ -234,7 +234,7 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -507,7 +507,7 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -780,7 +780,7 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -1053,7 +1053,7 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.jsx.snap
index 1296c8d6477..631db159f35 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.jsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.jsx.snap
@@ -385,7 +385,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.jsx.snap
index 02b7ea97980..6a9c616cdf5 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.jsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.jsx.snap
@@ -448,7 +448,7 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -934,7 +934,7 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.jsx.snap
index 0457497db58..3e5cbacbb93 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.jsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.jsx.snap
@@ -135,7 +135,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -404,7 +404,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -578,7 +578,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -847,7 +847,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
index ff11f77e653..22a21550970 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
@@ -153,7 +153,7 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -288,7 +288,7 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
index 2d5f2f8bfea..baea1702604 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
@@ -691,7 +691,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/audits/audits.tsx b/webapp/channels/src/components/admin_console/audits/audits.tsx
index e3c54d19c14..b6085b38ba6 100644
--- a/webapp/channels/src/components/admin_console/audits/audits.tsx
+++ b/webapp/channels/src/components/admin_console/audits/audits.tsx
@@ -65,7 +65,7 @@ export default class Audits extends React.PureComponent<Props, State> {
                 </h4>
                 <button
                     type='submit'
-                    className='btn btn-link pull-right'
+                    className='btn btn-tertiary pull-right'
                     onClick={this.reload}
                 >
                     <ReloadIcon/>
diff --git a/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx b/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx
index 8f795156a20..fe44a88f920 100644
--- a/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx
+++ b/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx
@@ -178,11 +178,6 @@ export default class BrandImageSetting extends React.PureComponent<Props, State>
     };
 
     render() {
-        let letbtnDefaultClass = 'btn';
-        if (!this.props.disabled) {
-            letbtnDefaultClass += ' btn-default';
-        }
-
         let img = null;
         if (this.state.brandImage) {
             img = (
@@ -263,7 +258,7 @@ export default class BrandImageSetting extends React.PureComponent<Props, State>
                     <div className='file__upload mt-5'>
                         <button
                             type='button'
-                            className={letbtnDefaultClass}
+                            className='btn btn-tertiary'
                             disabled={this.props.disabled}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/cluster_table.tsx b/webapp/channels/src/components/admin_console/cluster_table.tsx
index d119689cfac..1c624c1de0b 100644
--- a/webapp/channels/src/components/admin_console/cluster_table.tsx
+++ b/webapp/channels/src/components/admin_console/cluster_table.tsx
@@ -147,7 +147,7 @@ export default class ClusterTable extends PureComponent<Props> {
                 <div className='text-right'>
                     <button
                         type='submit'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.props.reload}
                     >
                         <ReloadIcon/>
diff --git a/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx b/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
index 4afb09027fd..bb889f1bd72 100644
--- a/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
+++ b/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
@@ -439,7 +439,7 @@ export default class ComplianceReports extends React.PureComponent<Props, State>
                 <div className='text-right'>
                     <button
                         type='submit'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         disabled={this.state.runningReport}
                         onClick={this.reload}
                     >
diff --git a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
index c53667cdca3..efb9159ddcc 100644
--- a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
@@ -195,7 +195,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -265,7 +265,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -506,7 +506,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
index 0ec2212de77..274a357390f 100644
--- a/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -79,7 +79,7 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -138,7 +138,7 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -197,7 +197,7 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/data_grid/data_grid.scss b/webapp/channels/src/components/admin_console/data_grid/data_grid.scss
index 866aa692bc5..f86fab2d9ae 100644
--- a/webapp/channels/src/components/admin_console/data_grid/data_grid.scss
+++ b/webapp/channels/src/components/admin_console/data_grid/data_grid.scss
@@ -138,7 +138,7 @@
         display: flex;
         height: auto;
         flex-direction: row;
-        padding: 5px 0;
+        padding: 8px;
         border-top: solid 1px rgba(0, 0, 0, 0.1);
         border-bottom: solid 1px rgba(0, 0, 0, 0.1);
         background: $white;
diff --git a/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx b/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
index 530a6f303b5..862d46c0126 100644
--- a/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
+++ b/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
@@ -264,10 +264,9 @@ class DataGrid extends React.PureComponent<Props, State> {
                                 total,
                             }}
                         />
-
                         <button
                             type='button'
-                            className={'btn btn-link prev ' + (firstPage ? 'disabled' : '')}
+                            className={'btn btn-quaternary btn-icon btn-sm ml-2 prev ' + (firstPage ? 'disabled' : '')}
                             onClick={prevPageFn}
                             disabled={firstPage}
                         >
@@ -275,7 +274,7 @@ class DataGrid extends React.PureComponent<Props, State> {
                         </button>
                         <button
                             type='button'
-                            className={'btn btn-link next ' + (lastPage ? 'disabled' : '')}
+                            className={'btn btn-quaternary btn-icon btn-sm next ' + (lastPage ? 'disabled' : '')}
                             onClick={nextPageFn}
                             disabled={lastPage}
                         >
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
index 445f3e80d78..a398b7fc5ec 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
@@ -229,7 +229,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -486,7 +486,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
index 26944578ca3..b3823d2ae3f 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
@@ -202,7 +202,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss
index 47653b9745c..0051da7c8a5 100644
--- a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss
+++ b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss
@@ -45,7 +45,7 @@
     width: 160px;
     height: 48px;
     padding: 14px 0;
-    margin-right: 24px;
+    margin-right: 8px;
     background: $primary-color;
     border-radius: 4px;
     color: $white;
diff --git a/webapp/channels/src/components/admin_console/file_upload_setting.jsx b/webapp/channels/src/components/admin_console/file_upload_setting.jsx
index b0219545b05..e13399b3217 100644
--- a/webapp/channels/src/components/admin_console/file_upload_setting.jsx
+++ b/webapp/channels/src/components/admin_console/file_upload_setting.jsx
@@ -59,11 +59,6 @@ export default class FileUploadSetting extends Setting {
             serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
         }
 
-        let btnClass = 'btn';
-        if (this.state.fileSelected) {
-            btnClass = 'btn btn-primary';
-        }
-
         let fileName;
         if (this.state.fileName) {
             fileName = this.state.fileName;
@@ -86,7 +81,7 @@ export default class FileUploadSetting extends Setting {
                     <div className='file__upload'>
                         <button
                             type='button'
-                            className='btn btn-default'
+                            className='btn btn-tertiary'
                             disabled={this.props.disabled}
                         >
                             <FormattedMessage
@@ -104,7 +99,7 @@ export default class FileUploadSetting extends Setting {
                     </div>
                     <button
                         type='button'
-                        className={btnClass}
+                        className='btn btn-primary'
                         disabled={!this.state.fileSelected}
                         onClick={this.handleSubmit}
                     >
diff --git a/webapp/channels/src/components/admin_console/filter/filter.scss b/webapp/channels/src/components/admin_console/filter/filter.scss
index 30985609959..989e01b1f3a 100644
--- a/webapp/channels/src/components/admin_console/filter/filter.scss
+++ b/webapp/channels/src/components/admin_console/filter/filter.scss
@@ -78,15 +78,7 @@
     }
 
     .Filter_apply {
-        margin: 8px 8px 8px 0;
-        border-radius: 4px;
         float: right;
-        font-size: 12px;
-
-        &:disabled {
-            background: rgba(var(--sys-center-channel-color-rgb), 0.1);
-            color: var(--sys-center-channel-color);
-        }
     }
 
     .FilterList {
diff --git a/webapp/channels/src/components/admin_console/filter/filter.tsx b/webapp/channels/src/components/admin_console/filter/filter.tsx
index 54d43fc5eab..878d08b9ef7 100644
--- a/webapp/channels/src/components/admin_console/filter/filter.tsx
+++ b/webapp/channels/src/components/admin_console/filter/filter.tsx
@@ -232,7 +232,7 @@ class Filter extends React.PureComponent<Props, State> {
 
                     <button
                         type='button'
-                        className='Filter_apply style--none btn btn-primary'
+                        className='btn btn-primary btn-sm Filter_apply'
                         disabled={!this.state.optionsModified}
                         onClick={this.onFilter}
                     >
diff --git a/webapp/channels/src/components/admin_console/full_log_event_modal/full_log_event_modal.tsx b/webapp/channels/src/components/admin_console/full_log_event_modal/full_log_event_modal.tsx
index db2deb11438..eabb6b6c33e 100644
--- a/webapp/channels/src/components/admin_console/full_log_event_modal/full_log_event_modal.tsx
+++ b/webapp/channels/src/components/admin_console/full_log_event_modal/full_log_event_modal.tsx
@@ -120,7 +120,7 @@ export default class FullLogEventModal extends React.PureComponent<Props, State>
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.props.onModalDismissed}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/generated_setting.tsx b/webapp/channels/src/components/admin_console/generated_setting.tsx
index a0af7a8fe7a..dea4471a903 100644
--- a/webapp/channels/src/components/admin_console/generated_setting.tsx
+++ b/webapp/channels/src/components/admin_console/generated_setting.tsx
@@ -92,7 +92,7 @@ export default class GeneratedSetting extends React.PureComponent<Props> {
                     <div className='help-text'>
                         <button
                             type='button'
-                            className='btn btn-default'
+                            className='btn btn-tertiary'
                             onClick={this.regenerate}
                             disabled={this.props.disabled || this.props.setByEnv}
                         >
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_teams_and_channels_row.test.tsx.snap b/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_teams_and_channels_row.test.tsx.snap
index 46bacf07828..cf0c684f6c9 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_teams_and_channels_row.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_teams_and_channels_row.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`components/admin_console/group_settings/group_details/GroupTeamsAndChan
     className="text-right"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       data-testid="Test private-channel_groupsyncable_remove"
       onClick={[Function]}
       type="button"
@@ -149,7 +149,7 @@ exports[`components/admin_console/group_settings/group_details/GroupTeamsAndChan
     className="text-right"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       data-testid="Test private-team_groupsyncable_remove"
       onClick={[Function]}
       type="button"
@@ -234,7 +234,7 @@ exports[`components/admin_console/group_settings/group_details/GroupTeamsAndChan
     className="text-right"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       data-testid="Test public-channel_groupsyncable_remove"
       onClick={[Function]}
       type="button"
@@ -312,7 +312,7 @@ exports[`components/admin_console/group_settings/group_details/GroupTeamsAndChan
     className="text-right"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       data-testid="Test public-team_groupsyncable_remove"
       onClick={[Function]}
       type="button"
@@ -395,7 +395,7 @@ exports[`components/admin_console/group_settings/group_details/GroupTeamsAndChan
     className="text-right"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       data-testid="Test team with children_groupsyncable_remove"
       onClick={[Function]}
       type="button"
@@ -478,7 +478,7 @@ exports[`components/admin_console/group_settings/group_details/GroupTeamsAndChan
     className="text-right"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       data-testid="Test team with children_groupsyncable_remove"
       onClick={[Function]}
       type="button"
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_users.test.tsx.snap b/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_users.test.tsx.snap
index 8411af40acd..852ae491880 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_users.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_users.test.tsx.snap
@@ -207,7 +207,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -217,7 +217,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -437,7 +437,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -447,7 +447,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </button>
     <button
-      className="btn btn-link next "
+      className="btn btn-tertiary next "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -667,7 +667,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </div>
     <button
-      className="btn btn-link prev "
+      className="btn btn-tertiary prev "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -677,7 +677,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </button>
     <button
-      className="btn btn-link next "
+      className="btn btn-tertiary next "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -857,7 +857,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </div>
     <button
-      className="btn btn-link prev "
+      className="btn btn-tertiary prev "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -867,7 +867,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -1087,7 +1087,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -1097,7 +1097,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -1359,7 +1359,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -1369,7 +1369,7 @@ exports[`components/admin_console/group_settings/group_details/GroupUsers should
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/group_teams_and_channels_row.test.tsx b/webapp/channels/src/components/admin_console/group_settings/group_details/group_teams_and_channels_row.test.tsx
index 3eea0d5d4a4..daab3dd6fc8 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/group_teams_and_channels_row.test.tsx
+++ b/webapp/channels/src/components/admin_console/group_settings/group_details/group_teams_and_channels_row.test.tsx
@@ -93,7 +93,7 @@ describe('components/admin_console/group_settings/group_details/GroupTeamsAndCha
                 onChangeRoles={jest.fn()}
             />,
         );
-        wrapper.find('.btn-link').simulate('click');
+        wrapper.find('.btn-tertiary').simulate('click');
         expect(wrapper.instance().state.showConfirmationModal).toEqual(true);
         wrapper.instance().removeItem();
         expect(onRemoveItem).toBeCalledWith(
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/group_teams_and_channels_row.tsx b/webapp/channels/src/components/admin_console/group_settings/group_details/group_teams_and_channels_row.tsx
index 183dc6c65c3..c90f340c01a 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/group_teams_and_channels_row.tsx
+++ b/webapp/channels/src/components/admin_console/group_settings/group_details/group_teams_and_channels_row.tsx
@@ -237,7 +237,7 @@ State
                 <td className='text-right'>
                     <button
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={() =>
                             this.setState({showConfirmationModal: true})
                         }
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/group_users.tsx b/webapp/channels/src/components/admin_console/group_settings/group_details/group_users.tsx
index b2234763b84..fe3f9a2f847 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/group_users.tsx
+++ b/webapp/channels/src/components/admin_console/group_settings/group_details/group_users.tsx
@@ -135,7 +135,7 @@ export default class GroupUsers extends React.PureComponent<Props, State> {
                 <button
                     type='button'
                     className={
-                        'btn btn-link prev ' + (firstPage ? 'disabled' : '')
+                        'btn btn-tertiary prev ' + (firstPage ? 'disabled' : '')
                     }
                     onClick={this.previousPage}
                     disabled={firstPage}
@@ -145,7 +145,7 @@ export default class GroupUsers extends React.PureComponent<Props, State> {
                 <button
                     type='button'
                     className={
-                        'btn btn-link next ' + (lastPage ? 'disabled' : '')
+                        'btn btn-tertiary next ' + (lastPage ? 'disabled' : '')
                     }
                     onClick={this.nextPage}
                     disabled={lastPage}
diff --git a/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap b/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
index b67aef144bb..ae6e2a7cb2f 100644
--- a/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
@@ -34,11 +34,11 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       className="group-list-link-unlink"
     >
       <button
-        className="btn btn-inactive disabled"
+        className="btn btn-primary"
         type="button"
       >
         <i
-          className="icon fa fa-link"
+          className="icon icon-link-variant"
         />
         <MemoizedFormattedMessage
           defaultMessage="Link Selected Groups"
@@ -171,11 +171,11 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       className="group-list-link-unlink"
     >
       <button
-        className="btn btn-inactive disabled"
+        className="btn btn-primary"
         type="button"
       >
         <i
-          className="icon fa fa-link"
+          className="icon icon-link-variant"
         />
         <MemoizedFormattedMessage
           defaultMessage="Link Selected Groups"
@@ -305,7 +305,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -315,7 +315,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -434,7 +434,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -444,7 +444,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -563,7 +563,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -573,7 +573,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -620,11 +620,11 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       className="group-list-link-unlink"
     >
       <button
-        className="btn btn-inactive disabled"
+        className="btn btn-primary"
         type="button"
       >
         <i
-          className="icon fa fa-link"
+          className="icon icon-link-variant"
         />
         <MemoizedFormattedMessage
           defaultMessage="Link Selected Groups"
@@ -727,7 +727,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -737,7 +737,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -784,11 +784,11 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       className="group-list-link-unlink"
     >
       <button
-        className="btn btn-inactive disabled"
+        className="btn btn-primary"
         type="button"
       >
         <i
-          className="icon fa fa-link"
+          className="icon icon-link-variant"
         />
         <MemoizedFormattedMessage
           defaultMessage="Link Selected Groups"
@@ -982,7 +982,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -992,7 +992,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -1039,11 +1039,11 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       className="group-list-link-unlink"
     >
       <button
-        className="btn btn-inactive disabled"
+        className="btn btn-primary"
         type="button"
       >
         <i
-          className="icon fa fa-link"
+          className="icon icon-link-variant"
         />
         <MemoizedFormattedMessage
           defaultMessage="Link Selected Groups"
@@ -1237,7 +1237,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </div>
     <button
-      className="btn btn-link prev "
+      className="btn btn-tertiary prev "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -1247,7 +1247,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -1294,11 +1294,11 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       className="group-list-link-unlink"
     >
       <button
-        className="btn btn-inactive disabled"
+        className="btn btn-primary"
         type="button"
       >
         <i
-          className="icon fa fa-link"
+          className="icon icon-link-variant"
         />
         <MemoizedFormattedMessage
           defaultMessage="Link Selected Groups"
@@ -1401,7 +1401,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </div>
     <button
-      className="btn btn-link prev "
+      className="btn btn-tertiary prev "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -1411,7 +1411,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -1458,11 +1458,11 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       className="group-list-link-unlink"
     >
       <button
-        className="btn btn-inactive disabled"
+        className="btn btn-primary"
         type="button"
       >
         <i
-          className="icon fa fa-link"
+          className="icon icon-link-variant"
         />
         <MemoizedFormattedMessage
           defaultMessage="Link Selected Groups"
@@ -1521,11 +1521,11 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       className="group-list-link-unlink"
     >
       <button
-        className="btn btn-inactive disabled"
+        className="btn btn-primary"
         type="button"
       >
         <i
-          className="icon fa fa-link"
+          className="icon icon-link-variant"
         />
         <MemoizedFormattedMessage
           defaultMessage="Link Selected Groups"
@@ -1592,7 +1592,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -1602,7 +1602,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
diff --git a/webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx b/webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx
index 47042c0e774..5e7e26f3546 100644
--- a/webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx
+++ b/webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx
@@ -187,10 +187,10 @@ export default class GroupsList extends React.PureComponent<Props, State> {
             return (
                 <button
                     type='button'
-                    className='btn btn-inactive disabled'
+                    className='btn btn-primary'
                     disabled={this.props.readOnly}
                 >
-                    <i className='icon fa fa-link'/>
+                    <i className='icon icon-link-variant'/>
                     <FormattedMessage
                         id='admin.group_settings.groups_list.link_selected'
                         defaultMessage='Link Selected Groups'
@@ -517,7 +517,7 @@ export default class GroupsList extends React.PureComponent<Props, State> {
                         </div>
                         <button
                             type='button'
-                            className={'btn btn-link prev ' + (firstPage ? 'disabled' : '')}
+                            className={'btn btn-tertiary prev ' + (firstPage ? 'disabled' : '')}
                             onClick={(e: any) => this.previousPage(e)}
                             disabled={firstPage}
                         >
@@ -525,7 +525,7 @@ export default class GroupsList extends React.PureComponent<Props, State> {
                         </button>
                         <button
                             type='button'
-                            className={'btn btn-link next ' + (lastPage ? 'disabled' : '')}
+                            className={'btn btn-tertiary next ' + (lastPage ? 'disabled' : '')}
                             onClick={(e: any) => this.nextPage(e)}
                             disabled={lastPage}
                         >
diff --git a/webapp/channels/src/components/admin_console/jobs/table.test.tsx b/webapp/channels/src/components/admin_console/jobs/table.test.tsx
index 591d2684245..e1452334234 100644
--- a/webapp/channels/src/components/admin_console/jobs/table.test.tsx
+++ b/webapp/channels/src/components/admin_console/jobs/table.test.tsx
@@ -115,7 +115,7 @@ describe('components/admin_console/jobs/table', () => {
             <JobTable {...baseProps}/>,
         );
 
-        wrapper.find('.job-table__create-button > div > .btn-default').simulate('click', {preventDefault: jest.fn()});
+        wrapper.find('.job-table__create-button > div > .btn-tertiary').simulate('click', {preventDefault: jest.fn()});
         expect(createJob).toHaveBeenCalledTimes(1);
     });
 
diff --git a/webapp/channels/src/components/admin_console/jobs/table.tsx b/webapp/channels/src/components/admin_console/jobs/table.tsx
index 34681ea9862..61bf01b2001 100644
--- a/webapp/channels/src/components/admin_console/jobs/table.tsx
+++ b/webapp/channels/src/components/admin_console/jobs/table.tsx
@@ -119,7 +119,7 @@ class JobTable extends React.PureComponent<Props> {
                         <div>
                             <button
                                 type='button'
-                                className='btn btn-default'
+                                className='btn btn-tertiary'
                                 onClick={this.handleCreateJob}
                                 disabled={this.props.disabled}
                             >
diff --git a/webapp/channels/src/components/admin_console/manage_roles_modal/manage_roles_modal.tsx b/webapp/channels/src/components/admin_console/manage_roles_modal/manage_roles_modal.tsx
index ff7e2579308..98e0115162e 100644
--- a/webapp/channels/src/components/admin_console/manage_roles_modal/manage_roles_modal.tsx
+++ b/webapp/channels/src/components/admin_console/manage_roles_modal/manage_roles_modal.tsx
@@ -367,7 +367,7 @@ export default class ManageRolesModal extends React.PureComponent<Props, State>
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.props.onModalDismissed}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx
index 28f0e8aa772..b14d7378a2b 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx
@@ -159,7 +159,7 @@ export default function EditPostTimeLimitModal(props: Props) {
                 </div>
                 <button
                     type='button'
-                    className='btn btn-cancel'
+                    className='btn btn-tertiary'
                     onClick={props.onClose}
                 >
                     <FormattedMessage
@@ -170,7 +170,7 @@ export default function EditPostTimeLimitModal(props: Props) {
                 <button
                     id='linkModalCloseButton'
                     type='button'
-                    className='btn btn-default'
+                    className='btn btn-tertiary'
                     onClick={save}
                     disabled={saving}
                 >
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
index 659f86cf796..58f8aedf04c 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
@@ -384,7 +384,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -398,7 +398,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
       savingMessage="Saving Config..."
     />
     <Connect(BlockableLink)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -407,7 +407,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
       />
     </Connect(BlockableLink)>
     <a
-      className="cancel-button reset-defaults-btn"
+      className="btn btn-quaternary"
       data-testid="resetPermissionsToDefault"
       onClick={[Function]}
     >
@@ -695,7 +695,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -709,7 +709,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
       savingMessage="Saving Config..."
     />
     <Connect(BlockableLink)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -718,7 +718,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
       />
     </Connect(BlockableLink)>
     <a
-      className="cancel-button reset-defaults-btn"
+      className="btn btn-quaternary"
       data-testid="resetPermissionsToDefault"
       onClick={[Function]}
     >
@@ -1006,7 +1006,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -1020,7 +1020,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
       savingMessage="Saving Config..."
     />
     <Connect(BlockableLink)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1029,7 +1029,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
       />
     </Connect(BlockableLink)>
     <a
-      className="cancel-button reset-defaults-btn"
+      className="btn btn-quaternary"
       data-testid="resetPermissionsToDefault"
       onClick={[Function]}
     >
@@ -1317,7 +1317,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -1331,7 +1331,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
       savingMessage="Saving Config..."
     />
     <Connect(BlockableLink)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1340,7 +1340,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
       />
     </Connect(BlockableLink)>
     <a
-      className="cancel-button reset-defaults-btn"
+      className="btn btn-quaternary"
       data-testid="resetPermissionsToDefault"
       onClick={[Function]}
     >
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.test.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.test.tsx
index 499c304e3d7..3c60337a87b 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.test.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.test.tsx
@@ -233,7 +233,7 @@ describe('components/admin_console/permission_schemes_settings/permission_system
             <PermissionSystemSchemeSettings {...defaultProps}/>,
         );
         expect(wrapper.state().showResetDefaultModal).toBe(false);
-        wrapper.find('.reset-defaults-btn').first().simulate('click');
+        wrapper.find('.btn-quaternary').first().simulate('click');
         expect(wrapper.state().showResetDefaultModal).toBe(true);
     });
 
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx
index 2e3992b7d92..ec29cc595f3 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx
@@ -516,7 +516,7 @@ export default class PermissionSystemSchemeSettings extends React.PureComponent<
                         savingMessage={localizeMessage('admin.saving', 'Saving Config...')}
                     />
                     <BlockableLink
-                        className='cancel-button'
+                        className='btn btn-tertiary'
                         to='/admin_console/user_management/permissions'
                     >
                         <FormattedMessage
@@ -527,7 +527,7 @@ export default class PermissionSystemSchemeSettings extends React.PureComponent<
                     <a
                         data-testid='resetPermissionsToDefault'
                         onClick={() => this.setState({showResetDefaultModal: true})}
-                        className='cancel-button reset-defaults-btn'
+                        className='btn btn-quaternary'
                     >
                         <FormattedMessage
                             id='admin.permissions.systemScheme.resetDefaultsButton'
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
index 150b7e5576e..129553691a5 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
@@ -280,7 +280,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -633,7 +633,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -988,7 +988,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -1409,7 +1409,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
index 4ea8805e5f8..191bc42158e 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
@@ -146,7 +146,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -161,7 +161,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -309,7 +309,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -494,7 +494,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -509,7 +509,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -657,7 +657,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -753,7 +753,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -938,7 +938,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -953,7 +953,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -1101,7 +1101,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -1286,7 +1286,7 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   disabled={true}
                   type="button"
                 >
@@ -1303,7 +1303,7 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -1451,7 +1451,7 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -1636,7 +1636,7 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -1651,7 +1651,7 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -1803,7 +1803,7 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -1988,7 +1988,7 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -2003,7 +2003,7 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -2151,7 +2151,7 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -2336,7 +2336,7 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   disabled={true}
                   type="button"
                 >
@@ -2353,7 +2353,7 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -2476,7 +2476,7 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -2661,7 +2661,7 @@ exports[`components/PluginManagement should match snapshot, text entered into th
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -2676,7 +2676,7 @@ exports[`components/PluginManagement should match snapshot, text entered into th
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -2824,7 +2824,7 @@ exports[`components/PluginManagement should match snapshot, text entered into th
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -3026,7 +3026,7 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -3179,7 +3179,7 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -3364,7 +3364,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -3379,7 +3379,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -3590,7 +3590,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -3775,7 +3775,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -3790,7 +3790,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -3969,7 +3969,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -4154,7 +4154,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -4169,7 +4169,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -4348,7 +4348,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -4533,7 +4533,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -4548,7 +4548,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -4727,7 +4727,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
@@ -4912,7 +4912,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 className="file__upload"
               >
                 <button
-                  className="btn btn-primary"
+                  className="btn btn-tertiary"
                   type="button"
                 >
                   <MemoizedFormattedMessage
@@ -4927,7 +4927,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 />
               </div>
               <button
-                className="btn"
+                className="btn btn-primary"
                 disabled={true}
                 id="uploadPlugin"
                 onClick={[Function]}
@@ -5138,7 +5138,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       className="admin-console-save"
     >
       <SaveButton
-        btnClass="btn-primary"
+        btnClass=""
         defaultMessage={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
index e1e653ec84c..13a05f402a9 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
+++ b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
@@ -917,7 +917,7 @@ export default class PluginManagement extends AdminSettings<Props, State> {
             lastMessage = <div className='col-sm-12'><div className='form-group half'>{this.state.lastMessage}</div></div>;
         }
 
-        let btnClass = 'btn';
+        let btnClass = 'btn btn-primary';
         if (this.state.fileSelected) {
             btnClass = 'btn btn-primary';
         }
@@ -1157,7 +1157,7 @@ export default class PluginManagement extends AdminSettings<Props, State> {
                                         <div className='file__upload'>
                                             <button
                                                 type='button'
-                                                className={classNames(['btn', {'btn-primary': enableUploads}])}
+                                                className={classNames(['btn', {'btn-tertiary': enableUploads}])}
                                                 disabled={!enableUploadButton || this.props.isDisabled}
                                             >
                                                 <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap b/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
index 142bbd54a46..b17572098d0 100644
--- a/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
   >
     <div>
       <button
-        className="btn btn-default"
+        className="btn btn-tertiary"
         disabled={false}
         onClick={[Function]}
         type="button"
@@ -92,7 +92,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
     >
       <div>
         <button
-          className="btn btn-default"
+          className="btn btn-tertiary"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -229,7 +229,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
     >
       <div>
         <button
-          className="btn btn-default"
+          className="btn btn-tertiary"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -358,7 +358,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
     >
       <div>
         <button
-          className="btn btn-default"
+          className="btn btn-tertiary"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -488,7 +488,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
     >
       <div>
         <button
-          className="btn btn-default"
+          className="btn btn-tertiary"
           disabled={false}
           onClick={[Function]}
           type="button"
diff --git a/webapp/channels/src/components/admin_console/request_button/request_button.tsx b/webapp/channels/src/components/admin_console/request_button/request_button.tsx
index 46bbce556e7..ccf0b28498a 100644
--- a/webapp/channels/src/components/admin_console/request_button/request_button.tsx
+++ b/webapp/channels/src/components/admin_console/request_button/request_button.tsx
@@ -257,7 +257,7 @@ export default class RequestButton extends React.PureComponent<Props, State> {
                     <div>
                         <button
                             type='button'
-                            className='btn btn-default'
+                            className='btn btn-tertiary'
                             onClick={this.handleRequest}
                             disabled={this.props.disabled}
                         >
diff --git a/webapp/channels/src/components/admin_console/reset_email_modal/__snapshots__/reset_email_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/reset_email_modal/__snapshots__/reset_email_modal.test.tsx.snap
index 0a90e1f8848..3dd34ed010a 100644
--- a/webapp/channels/src/components/admin_console/reset_email_modal/__snapshots__/reset_email_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/reset_email_modal/__snapshots__/reset_email_modal.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`components/admin_console/reset_email_modal/reset_email_modal.tsx should
       componentClass="div"
     >
       <button
-        className="btn btn-link"
+        className="btn btn-tertiary"
         onClick={[Function]}
         type="button"
       >
@@ -222,7 +222,7 @@ exports[`components/admin_console/reset_email_modal/reset_email_modal.tsx should
       componentClass="div"
     >
       <button
-        className="btn btn-link"
+        className="btn btn-tertiary"
         onClick={[Function]}
         type="button"
       >
diff --git a/webapp/channels/src/components/admin_console/reset_email_modal/reset_email_modal.tsx b/webapp/channels/src/components/admin_console/reset_email_modal/reset_email_modal.tsx
index 4441fde506f..e6f6c7fba10 100644
--- a/webapp/channels/src/components/admin_console/reset_email_modal/reset_email_modal.tsx
+++ b/webapp/channels/src/components/admin_console/reset_email_modal/reset_email_modal.tsx
@@ -233,7 +233,7 @@ export default class ResetEmailModal extends React.PureComponent<Props, State> {
                     <Modal.Footer>
                         <button
                             type='button'
-                            className='btn btn-link'
+                            className='btn btn-tertiary'
                             onClick={this.doCancel}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/reset_password_modal/__snapshots__/reset_password_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/reset_password_modal/__snapshots__/reset_password_modal.test.tsx.snap
index 214b39d7254..3dcd3f864dc 100644
--- a/webapp/channels/src/components/admin_console/reset_password_modal/__snapshots__/reset_password_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/reset_password_modal/__snapshots__/reset_password_modal.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`components/admin_console/reset_password_modal/reset_password_modal.tsx
       componentClass="div"
     >
       <button
-        className="btn btn-link"
+        className="btn btn-tertiary"
         onClick={[Function]}
         type="button"
       >
diff --git a/webapp/channels/src/components/admin_console/reset_password_modal/reset_password_modal.tsx b/webapp/channels/src/components/admin_console/reset_password_modal/reset_password_modal.tsx
index dd32400fb50..44c8fe22c3e 100644
--- a/webapp/channels/src/components/admin_console/reset_password_modal/reset_password_modal.tsx
+++ b/webapp/channels/src/components/admin_console/reset_password_modal/reset_password_modal.tsx
@@ -224,7 +224,7 @@ export default class ResetPasswordModal extends React.PureComponent<Props, State
                     <Modal.Footer>
                         <button
                             type='button'
-                            className='btn btn-link'
+                            className='btn btn-tertiary'
                             onClick={this.doCancel}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/server_logs/log_list.tsx b/webapp/channels/src/components/admin_console/server_logs/log_list.tsx
index b38373b0163..957910e80b3 100644
--- a/webapp/channels/src/components/admin_console/server_logs/log_list.tsx
+++ b/webapp/channels/src/components/admin_console/server_logs/log_list.tsx
@@ -209,7 +209,7 @@ export default class LogList extends React.PureComponent<Props, State> {
                     options: (
                         <button
                             type='submit'
-                            className='btn btn-inverted'
+                            className='btn btn-secondary btn-sm'
                         >
                             <FormattedMessage
                                 id='admin.logs.fullEvent'
@@ -282,7 +282,7 @@ export default class LogList extends React.PureComponent<Props, State> {
 
         const errorsButton: JSX.Element = (
             <button
-                className='btn btn-dangerous'
+                className='btn btn-tertiary btn-sm ml-2'
                 onClick={this.showErrors}
             >
                 <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/server_logs/plain_log_list.tsx b/webapp/channels/src/components/admin_console/server_logs/plain_log_list.tsx
index 57fcb95b386..23fe1ba1abe 100644
--- a/webapp/channels/src/components/admin_console/server_logs/plain_log_list.tsx
+++ b/webapp/channels/src/components/admin_console/server_logs/plain_log_list.tsx
@@ -76,7 +76,7 @@ export default class PlainLogList extends React.PureComponent<Props, State> {
             nextButton = (
                 <button
                     type='button'
-                    className='btn btn-default filter-control filter-control__next pull-right'
+                    className='btn btn-tertiary filter-control filter-control__next pull-right'
                     onClick={this.nextPage}
                     disabled={this.state.nextDisabled}
                 >
@@ -93,7 +93,7 @@ export default class PlainLogList extends React.PureComponent<Props, State> {
             previousButton = (
                 <button
                     type='button'
-                    className='btn btn-default filter-control filter-control__prev'
+                    className='btn btn-tertiary filter-control filter-control__prev'
                     onClick={this.previousPage}
                 >
                     <LocalizedIcon
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
index 14e56619c31..56473fb7953 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
@@ -141,7 +141,7 @@ exports[`components/admin_console/system_user_detail should match default snapsh
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -378,7 +378,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if LD
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -622,7 +622,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if MF
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -860,7 +860,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if SA
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -1097,7 +1097,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if no
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
@@ -1334,7 +1334,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if us
     className="admin-console-save"
   >
     <SaveButton
-      btnClass="btn-primary"
+      btnClass=""
       defaultMessage={
         <Memo(MemoizedFormattedMessage)
           defaultMessage="Save"
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/team_list/__snapshots__/abstract_list.test.tsx.snap b/webapp/channels/src/components/admin_console/system_user_detail/team_list/__snapshots__/abstract_list.test.tsx.snap
index 5f73e1627dc..971de41fb87 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/team_list/__snapshots__/abstract_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_user_detail/team_list/__snapshots__/abstract_list.test.tsx.snap
@@ -243,7 +243,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       />
     </div>
     <button
-      className="btn btn-link prev "
+      className="btn btn-tertiary prev "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -253,7 +253,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       />
     </button>
     <button
-      className="btn btn-link next "
+      className="btn btn-tertiary next "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -472,7 +472,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -482,7 +482,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       />
     </button>
     <button
-      className="btn btn-link next "
+      className="btn btn-tertiary next "
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -589,7 +589,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -599,7 +599,7 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       disabled={true}
       onClick={[Function]}
       type="button"
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss b/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss
index 4ac71610cbc..50a5041f85f 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss
+++ b/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss
@@ -52,7 +52,7 @@
         border-top: solid 1px rgba(0, 0, 0, 0.1);
         background: $white;
 
-        .btn-link {
+        .btn-tertiary {
             color: $dark-gray;
 
             &.disabled {
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.tsx b/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.tsx
index 50f714f9bf0..129f558670e 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.tsx
+++ b/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.tsx
@@ -161,7 +161,7 @@ export default class AbstractList extends React.PureComponent<Props, State> {
                         </div>
                         <button
                             type='button'
-                            className={'btn btn-link prev ' + (firstPage ? 'disabled' : '')}
+                            className={'btn btn-tertiary prev ' + (firstPage ? 'disabled' : '')}
                             onClick={firstPage ? () => null : this.previousPage}
                             disabled={firstPage}
                         >
@@ -169,7 +169,7 @@ export default class AbstractList extends React.PureComponent<Props, State> {
                         </button>
                         <button
                             type='button'
-                            className={'btn btn-link next ' + (lastPage ? 'disabled' : '')}
+                            className={'btn btn-tertiary next ' + (lastPage ? 'disabled' : '')}
                             onClick={lastPage ? () => null : this.nextPage}
                             disabled={lastPage}
                         >
diff --git a/webapp/channels/src/components/admin_console/system_users/__snapshots__/system_users.test.tsx.snap b/webapp/channels/src/components/admin_console/system_users/__snapshots__/system_users.test.tsx.snap
index ee36e8fac61..956568f4ea1 100644
--- a/webapp/channels/src/components/admin_console/system_users/__snapshots__/system_users.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_users/__snapshots__/system_users.test.tsx.snap
@@ -79,7 +79,7 @@ exports[`components/admin_console/system_users should match default snapshot 1`]
           className="pt-3 pb-3"
         >
           <button
-            className="btn btn-default"
+            className="btn btn-tertiary"
             id="revoke-all-users"
             onClick={[Function]}
             type="button"
diff --git a/webapp/channels/src/components/admin_console/system_users/system_users.tsx b/webapp/channels/src/components/admin_console/system_users/system_users.tsx
index d350ef2faa9..882ebfba264 100644
--- a/webapp/channels/src/components/admin_console/system_users/system_users.tsx
+++ b/webapp/channels/src/components/admin_console/system_users/system_users.tsx
@@ -407,7 +407,7 @@ export default class SystemUsers extends React.PureComponent<Props, State> {
                                 <button
                                     id='revoke-all-users'
                                     type='button'
-                                    className='btn btn-default'
+                                    className='btn btn-tertiary'
                                     onClick={() => this.handleShowRevokeAllSessionsModal()}
                                     disabled={this.props.isDisabled}
                                 >
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/__snapshots__/abstract_list.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/__snapshots__/abstract_list.test.tsx.snap
index 48531f95083..f20fb5c82ec 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/__snapshots__/abstract_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/__snapshots__/abstract_list.test.tsx.snap
@@ -108,7 +108,7 @@ exports[`admin_console/team_channel_settings/AbstractList should match snapshot,
       />
     </div>
     <button
-      className="btn btn-link prev disabled"
+      className="btn btn-tertiary prev disabled"
       disabled={true}
       type="button"
     >
@@ -117,7 +117,7 @@ exports[`admin_console/team_channel_settings/AbstractList should match snapshot,
       />
     </button>
     <button
-      className="btn btn-link next disabled"
+      className="btn btn-tertiary next disabled"
       data-testid="page-link-next"
       disabled={true}
       type="button"
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/abstract_list.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/abstract_list.tsx
index 1690ee53f03..73f1ea2b77a 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/abstract_list.tsx
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/abstract_list.tsx
@@ -159,7 +159,7 @@ export default class AbstractList extends React.PureComponent<Props, State> {
                     </div>
                     <button
                         type='button'
-                        className={'btn btn-link prev ' + (firstPage ? 'disabled' : '')}
+                        className={'btn btn-tertiary prev ' + (firstPage ? 'disabled' : '')}
                         onClick={firstPage ? undefined : this.previousPage}
                         disabled={firstPage}
                     >
@@ -167,7 +167,7 @@ export default class AbstractList extends React.PureComponent<Props, State> {
                     </button>
                     <button
                         type='button'
-                        className={'btn btn-link next ' + (lastPage ? 'disabled' : '')}
+                        className={'btn btn-tertiary next ' + (lastPage ? 'disabled' : '')}
                         onClick={lastPage ? undefined : this.nextPage}
                         disabled={lastPage}
                         data-testid='page-link-next'
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_profile.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_profile.test.tsx.snap
index f78fed9811b..14b8b0cf801 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_profile.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_profile.test.tsx.snap
@@ -39,11 +39,11 @@ exports[`admin_console/team_channel_settings/channel/ChannelProfile should match
         className="AdminChannelDetails_archiveContainer"
       >
         <button
-          className="btn btn-secondary ArchiveButton ArchiveButton___unarchived"
+          className="btn btn-secondary btn-danger"
           type="button"
         >
-          <ArchiveIcon
-            className="channel-icon channel-icon__archive"
+          <i
+            className="icon icon-archive-outline"
           />
           <MemoizedFormattedMessage
             defaultMessage="Archive Channel"
@@ -112,11 +112,11 @@ exports[`admin_console/team_channel_settings/channel/ChannelProfile should match
         className="AdminChannelDetails_archiveContainer"
       >
         <button
-          className="btn btn-secondary ArchiveButton ArchiveButton___unarchived"
+          className="btn btn-secondary btn-danger"
           type="button"
         >
-          <ArchiveIcon
-            className="channel-icon channel-icon__archive"
+          <i
+            className="icon icon-archive-outline"
           />
           <MemoizedFormattedMessage
             defaultMessage="Archive Channel"
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_profile.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_profile.tsx
index 717f525b9be..85dab9a5221 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_profile.tsx
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_profile.tsx
@@ -11,8 +11,6 @@ import type {Team} from '@mattermost/types/teams';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import SharedChannelIndicator from 'components/shared_channel_indicator';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
-import ArchiveIcon from 'components/widgets/icons/archive_icon';
-import UnarchiveIcon from 'components/widgets/icons/unarchive_icon';
 
 import {t} from 'utils/i18n';
 
@@ -95,15 +93,15 @@ export const ChannelProfile: React.SFC<ChannelProfileProps> = (props: ChannelPro
                                 classNames(
                                     'btn',
                                     'btn-secondary',
-                                    'ArchiveButton',
-                                    {ArchiveButton___archived: isArchived},
-                                    {ArchiveButton___unarchived: !isArchived},
+                                    {'btn-danger': !isArchived},
                                     {disabled: isDisabled},
                                 )
                             }
                             onClick={props.onToggleArchive}
                         >
-                            {isArchived ? <UnarchiveIcon className='channel-icon channel-icon__unarchive'/> : <ArchiveIcon className='channel-icon channel-icon__archive'/>}
+                            {isArchived ?
+                                <i className='icon icon-archive-arrow-up-outline'/> :
+                                <i className='icon icon-archive-outline'/>}
                             <FormattedMessage
                                 id={archiveBtnID}
                                 defaultMessage={archiveBtnDefault}
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/errors.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/errors.tsx
index ecd7a75796c..8782554621d 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/errors.tsx
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/errors.tsx
@@ -88,7 +88,7 @@ export const UsersWillBeRemovedError = ({users, total, scope, scopeId}: UsersWil
                 <span>
                     {error}
                     <ToggleModalButton
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         modalId={ModalIdentifiers.USERS_TO_BE_REMOVED}
                         dialogType={UsersToBeRemovedModal}
                         dialogProps={{total, users, scope, scopeId}}
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/save_changes_panel.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/save_changes_panel.tsx
index b1dd93d6c6d..674cb0d0235 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/save_changes_panel.tsx
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/save_changes_panel.tsx
@@ -29,7 +29,7 @@ const SaveChangesPanel = ({saveNeeded, onClick, saving, serverError, cancelLink,
             />
             <BlockableLink
                 id='cancelButtonSettings'
-                className='cancel-button'
+                className='btn btn-quaternary'
                 to={cancelLink}
             >
                 <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_profile.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_profile.test.tsx.snap
index a714b14a38e..276a3fdc1e0 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_profile.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_profile.test.tsx.snap
@@ -321,30 +321,14 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud restore sho
               className="AdminChannelDetails_archiveContainer"
             >
               <button
-                className="btn btn-secondary ArchiveButton ArchiveButton___archived cloud-limits-disabled"
+                className="btn ArchiveButton ArchiveButton___archived cloud-limits-disabled"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
               >
-                <UnarchiveIcon
-                  className="channel-icon channel-icon__unarchive"
-                >
-                  <span
-                    className="channel-icon channel-icon__unarchive"
-                  >
-                    <svg
-                      aria-label="Archive Icon"
-                      height="16px"
-                      role="img"
-                      viewBox="0 0 16 16"
-                      width="16px"
-                    >
-                      <path
-                        d="M13.994 14.75H2.006V6.50605H3.5V13.256H12.5V6.50605H13.994V14.75ZM1.25 1.25005H14.75V5.75005H1.25V1.25005ZM2.744 2.74405V4.25605H13.256V2.74405H2.744ZM6.884 11.744V9.49405H4.994L8 6.50605L11.006 9.49405H9.134V11.744H6.884Z"
-                      />
-                    </svg>
-                  </span>
-                </UnarchiveIcon>
+                <i
+                  className="icon icon-archive-arrow-up-outline"
+                />
                 <FormattedMessage
                   defaultMessage="Unarchive Team"
                   id="admin.team_settings.team_details.unarchiveTeam"
@@ -682,7 +666,7 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
                     onMouseOver={[Function]}
                   >
                     <button
-                      className="btn btn-secondary ArchiveButton ArchiveButton___archived cloud-limits-disabled"
+                      className="btn btn-danger ArchiveButton ArchiveButton___archived cloud-limits-disabled"
                       disabled={true}
                       onClick={[Function]}
                       style={
@@ -692,25 +676,9 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
                       }
                       type="button"
                     >
-                      <UnarchiveIcon
-                        className="channel-icon channel-icon__unarchive"
-                      >
-                        <span
-                          className="channel-icon channel-icon__unarchive"
-                        >
-                          <svg
-                            aria-label="Archive Icon"
-                            height="16px"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16px"
-                          >
-                            <path
-                              d="M13.994 14.75H2.006V6.50605H3.5V13.256H12.5V6.50605H13.994V14.75ZM1.25 1.25005H14.75V5.75005H1.25V1.25005ZM2.744 2.74405V4.25605H13.256V2.74405H2.744ZM6.884 11.744V9.49405H4.994L8 6.50605L11.006 9.49405H9.134V11.744H6.884Z"
-                            />
-                          </svg>
-                        </span>
-                      </UnarchiveIcon>
+                      <i
+                        className="icon icon-archive-arrow-up-outline"
+                      />
                       <FormattedMessage
                         defaultMessage="Unarchive Team"
                         id="admin.team_settings.team_details.unarchiveTeam"
@@ -951,30 +919,14 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
               className="AdminChannelDetails_archiveContainer"
             >
               <button
-                className="btn btn-secondary ArchiveButton ArchiveButton___unarchived cloud-limits-disabled"
+                className="btn ArchiveButton ArchiveButton___unarchived cloud-limits-disabled"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
               >
-                <ArchiveIcon
-                  className="channel-icon channel-icon__archive"
-                >
-                  <span
-                    className="channel-icon channel-icon__archive"
-                  >
-                    <svg
-                      aria-label="Archive Icon"
-                      height="16px"
-                      role="img"
-                      viewBox="0 0 16 16"
-                      width="16px"
-                    >
-                      <path
-                        d="M13.994 14.75H2.006V6.50599H3.5V13.256H12.5V6.50599H13.994V14.75ZM1.25 1.24999H14.75V5.74999H1.25V1.24999ZM6.128 7.24399H9.872C9.98 7.24399 10.07 7.27999 10.142 7.35199C10.214 7.42399 10.25 7.51399 10.25 7.62199V8.75599H5.75V7.62199C5.75 7.51399 5.786 7.42399 5.858 7.35199C5.93 7.27999 6.02 7.24399 6.128 7.24399ZM2.744 2.74399V4.25599H13.256V2.74399H2.744Z"
-                      />
-                    </svg>
-                  </span>
-                </ArchiveIcon>
+                <i
+                  className="icon icon-archive-outline"
+                />
                 <FormattedMessage
                   defaultMessage="Archive Team"
                   id="admin.team_settings.team_details.archiveTeam"
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.tsx
index fa9046ca62b..b6b9600bb59 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.tsx
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.tsx
@@ -20,8 +20,6 @@ import OverlayTrigger from 'components/overlay_trigger';
 import PricingModal from 'components/pricing_modal';
 import Tooltip from 'components/tooltip';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
-import ArchiveIcon from 'components/widgets/icons/archive_icon';
-import UnarchiveIcon from 'components/widgets/icons/unarchive_icon';
 import TeamIcon from 'components/widgets/team_icon/team_icon';
 
 import {ModalIdentifiers} from 'utils/constants';
@@ -106,7 +104,7 @@ export function TeamProfile({team, isArchived, onToggleArchive, isDisabled, save
                             className={
                                 classNames(
                                     'btn',
-                                    'btn-secondary',
+                                    'btn-danger',
                                     'ArchiveButton',
                                     {ArchiveButton___archived: isArchived},
                                     {ArchiveButton___unarchived: !isArchived},
@@ -117,11 +115,9 @@ export function TeamProfile({team, isArchived, onToggleArchive, isDisabled, save
                             onClick={noop}
                         >
                             {isArchived ? (
-                                <UnarchiveIcon
-                                    className='channel-icon channel-icon__unarchive'
-                                />
+                                <i className='icon icon-archive-arrow-up-outline'/>
                             ) : (
-                                <ArchiveIcon className='channel-icon channel-icon__archive'/>
+                                <i className='icon icon-archive-outline'/>
                             )}
                             <FormattedMessage
                                 id={archiveBtnID}
@@ -140,7 +136,6 @@ export function TeamProfile({team, isArchived, onToggleArchive, isDisabled, save
                 className={
                     classNames(
                         'btn',
-                        'btn-secondary',
                         'ArchiveButton',
                         {ArchiveButton___archived: isArchived},
                         {ArchiveButton___unarchived: !isArchived},
@@ -151,11 +146,9 @@ export function TeamProfile({team, isArchived, onToggleArchive, isDisabled, save
                 onClick={toggleArchive}
             >
                 {isArchived ? (
-                    <UnarchiveIcon
-                        className='channel-icon channel-icon__unarchive'
-                    />
+                    <i className='icon icon-archive-arrow-up-outline'/>
                 ) : (
-                    <ArchiveIcon className='channel-icon channel-icon__archive'/>
+                    <i className='icon icon-archive-outline'/>
                 )}
                 <FormattedMessage
                     id={archiveBtnID}
diff --git a/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap b/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
index 9cf9d60206f..6ed50cee831 100644
--- a/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
+++ b/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
@@ -193,7 +193,7 @@ exports[`AppsFormComponent should set match snapshot 1`] = `
     >
       <div>
         <button
-          className="btn btn-link cancel-button"
+          className="btn btn-tertiary cancel-button"
           id="appsModalCancel"
           onClick={[Function]}
           type="button"
diff --git a/webapp/channels/src/components/apps_form/apps_form_component.tsx b/webapp/channels/src/components/apps_form/apps_form_component.tsx
index c02ce6aeb20..092aa8071f5 100644
--- a/webapp/channels/src/components/apps_form/apps_form_component.tsx
+++ b/webapp/channels/src/components/apps_form/apps_form_component.tsx
@@ -562,7 +562,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
                     <button
                         id='appsModalCancel'
                         type='button'
-                        className='btn btn-link cancel-button'
+                        className='btn btn-tertiary cancel-button'
                         onClick={this.onHide}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/authorize/authorize.tsx b/webapp/channels/src/components/authorize/authorize.tsx
index 272f2049fd9..f13f600b654 100644
--- a/webapp/channels/src/components/authorize/authorize.tsx
+++ b/webapp/channels/src/components/authorize/authorize.tsx
@@ -158,7 +158,7 @@ export default class Authorize extends React.PureComponent<Props, State> {
                     <div className='prompt__buttons'>
                         <button
                             type='submit'
-                            className='btn btn-link authorize-btn'
+                            className='btn btn-tertiary authorize-btn'
                             onClick={this.handleDeny}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap b/webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap
index cbe19ffd343..d19cca0fca7 100644
--- a/webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap
+++ b/webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`components/BrowseChannels should match snapshot and state 1`] = `
     >
       <button
         aria-label="Create New Channel"
-        className="btn outlineButton"
+        className="btn btn-secondary btn-sm"
         id="createNewChannelButton"
         onClick={[Function]}
         type="button"
@@ -138,7 +138,7 @@ exports[`components/BrowseChannels should match snapshot and state 1`] = `
         >
           <button
             aria-label="Create New Channel"
-            className="btn primaryButton"
+            className="btn btn-primary"
             id="createNewChannelButton"
             onClick={[Function]}
             type="button"
diff --git a/webapp/channels/src/components/browse_channels/browse_channels.scss b/webapp/channels/src/components/browse_channels/browse_channels.scss
index ab8d0e0e652..f4087a1cddd 100644
--- a/webapp/channels/src/components/browse_channels/browse_channels.scss
+++ b/webapp/channels/src/components/browse_channels/browse_channels.scss
@@ -224,20 +224,6 @@
         }
     }
 
-    .outlineButton {
-        border: 1px solid var(--button-bg);
-        background: none;
-        border-radius: 4px;
-        color: var(--button-bg);
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 16px;
-    }
-
-    .outlineButton:hover {
-        background-color: rgba(var(--button-bg-rgb), 0.08);
-    }
-
     .filter-controls {
         padding: 0;
 
@@ -259,14 +245,6 @@
         margin-bottom: 30px;
     }
 
-    .primaryButton {
-        background-color: var(--button-bg);
-        border-radius: 4px;
-        color: var(--button-color);
-        font-size: 14px;
-        font-weight: 600;
-    }
-
     #createNewChannelButton {
         padding: 10px 20px;
     }
diff --git a/webapp/channels/src/components/browse_channels/browse_channels.tsx b/webapp/channels/src/components/browse_channels/browse_channels.tsx
index c5cbebf7243..4d447767e8e 100644
--- a/webapp/channels/src/components/browse_channels/browse_channels.tsx
+++ b/webapp/channels/src/components/browse_channels/browse_channels.tsx
@@ -328,7 +328,7 @@ export default class BrowseChannels extends React.PureComponent<Props, State> {
                         defaultMessage='Try searching different keywords, checking for typos or adjusting the filters.'
                     />
                 </p>
-                {createNewChannelButton('primaryButton', <i className='icon-plus'/>)}
+                {createNewChannelButton('btn-primary', <i className='icon-plus'/>)}
             </>
         );
 
@@ -370,7 +370,7 @@ export default class BrowseChannels extends React.PureComponent<Props, State> {
                 aria-labelledby='browseChannelsModalLabel'
                 compassDesign={true}
                 modalHeaderText={title}
-                headerButton={createNewChannelButton('outlineButton')}
+                headerButton={createNewChannelButton('btn-secondary btn-sm')}
                 autoCloseOnConfirmButton={false}
                 aria-modal={true}
                 enforceFocus={false}
diff --git a/webapp/channels/src/components/channel_info_rhs/header.tsx b/webapp/channels/src/components/channel_info_rhs/header.tsx
index 5807c266e4e..40165b7282f 100644
--- a/webapp/channels/src/components/channel_info_rhs/header.tsx
+++ b/webapp/channels/src/components/channel_info_rhs/header.tsx
@@ -85,7 +85,7 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
                 <button
                     id='rhsCloseButton'
                     type='button'
-                    className='sidebar--right__close btn-icon'
+                    className='sidebar--right__close btn btn-icon btn-sm'
                     aria-label='Close'
                     onClick={onClose}
                 >
diff --git a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
index 755164228a3..4e32aaeaae6 100644
--- a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
     >
       <MultiSelect
         ariaLabelRenderer={[Function]}
-        backButtonClass="btn-cancel tertiary-button"
+        backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
         customNoOptionsMessage={null}
         focusOnLoad={true}
@@ -162,7 +162,7 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
     >
       <MultiSelect
         ariaLabelRenderer={[Function]}
-        backButtonClass="btn-cancel tertiary-button"
+        backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
         customNoOptionsMessage={null}
         focusOnLoad={true}
@@ -283,7 +283,7 @@ exports[`components/channel_invite_modal should match snapshot with exclude and
     >
       <MultiSelect
         ariaLabelRenderer={[Function]}
-        backButtonClass="btn-cancel tertiary-button"
+        backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
         customNoOptionsMessage={null}
         focusOnLoad={true}
diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
index b0cfa467a9d..220f4b8996a 100644
--- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
+++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
@@ -474,7 +474,7 @@ export default class ChannelInviteModal extends React.PureComponent<Props, State
             return (
                 <ToggleModalButton
                     id='inviteGuest'
-                    className={`${props.inviteAsGuest ? 'invite-as-guest' : ''} btn btn-link`}
+                    className={`${props.inviteAsGuest ? 'invite-as-guest' : ''} btn btn-tertiary`}
                     modalId={ModalIdentifiers.INVITATION}
                     dialogType={InvitationModal}
                     dialogProps={{
@@ -529,7 +529,7 @@ export default class ChannelInviteModal extends React.PureComponent<Props, State
                 valueWithImage={true}
                 backButtonText={localizeMessage('multiselect.cancel', 'Cancel')}
                 backButtonClick={closeMembersInviteModal}
-                backButtonClass={'btn-cancel tertiary-button'}
+                backButtonClass={'btn-tertiary tertiary-button'}
                 customNoOptionsMessage={this.props.emailInvitationsEnabled ? customNoOptionsMessage : null}
             />
         );
diff --git a/webapp/channels/src/components/channel_members_rhs/header.tsx b/webapp/channels/src/components/channel_members_rhs/header.tsx
index 2497a7dce34..bd1144fd59d 100644
--- a/webapp/channels/src/components/channel_members_rhs/header.tsx
+++ b/webapp/channels/src/components/channel_members_rhs/header.tsx
@@ -81,7 +81,7 @@ const Header = ({channel, canGoBack, onClose, goBack}: Props) => {
                 <button
                     id='rhsCloseButton'
                     type='button'
-                    className='sidebar--right__close btn-icon'
+                    className='sidebar--right__close btn btn-icon btn-sm'
                     aria-label='Close'
                     onClick={onClose}
                 >
diff --git a/webapp/channels/src/components/confirm_modal.tsx b/webapp/channels/src/components/confirm_modal.tsx
index 685438b4594..1e9057c3702 100644
--- a/webapp/channels/src/components/confirm_modal.tsx
+++ b/webapp/channels/src/components/confirm_modal.tsx
@@ -147,7 +147,7 @@ export default class ConfirmModal extends React.Component<Props, State> {
             cancelButton = (
                 <button
                     type='button'
-                    className='btn btn-link btn-cancel'
+                    className='btn btn-tertiary'
                     onClick={this.handleCancel}
                     id='cancelModalButton'
                 >
diff --git a/webapp/channels/src/components/convert_channel_modal/convert_channel_modal.tsx b/webapp/channels/src/components/convert_channel_modal/convert_channel_modal.tsx
index f0aa27df308..52aca5f88c2 100644
--- a/webapp/channels/src/components/convert_channel_modal/convert_channel_modal.tsx
+++ b/webapp/channels/src/components/convert_channel_modal/convert_channel_modal.tsx
@@ -111,7 +111,7 @@ export default class ConvertChannelModal extends React.PureComponent<Props, Stat
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.onHide}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/create_team/components/__snapshots__/display_name.test.tsx.snap b/webapp/channels/src/components/create_team/components/__snapshots__/display_name.test.tsx.snap
index a69d114fc92..f9c854cc48a 100644
--- a/webapp/channels/src/components/create_team/components/__snapshots__/display_name.test.tsx.snap
+++ b/webapp/channels/src/components/create_team/components/__snapshots__/display_name.test.tsx.snap
@@ -55,8 +55,8 @@ exports[`/components/create_team/components/display_name should match snapshot 1
         defaultMessage="Next"
         id="create_team.display_name.next"
       />
-      <NextIcon
-        additionalClassName={null}
+      <i
+        className="icon icon-chevron-right"
       />
     </button>
   </form>
diff --git a/webapp/channels/src/components/create_team/components/display_name.tsx b/webapp/channels/src/components/create_team/components/display_name.tsx
index cca27aabffa..c47ce84024a 100644
--- a/webapp/channels/src/components/create_team/components/display_name.tsx
+++ b/webapp/channels/src/components/create_team/components/display_name.tsx
@@ -8,8 +8,6 @@ import type {Team} from '@mattermost/types/teams';
 
 import {trackEvent} from 'actions/telemetry_actions.jsx';
 
-import NextIcon from 'components/widgets/icons/fa_next_icon';
-
 import logoImage from 'images/logo.png';
 import Constants from 'utils/constants';
 import {cleanUpUrlable} from 'utils/url';
@@ -150,7 +148,7 @@ export default class TeamSignupDisplayNamePage extends React.PureComponent<Props
                             id='create_team.display_name.next'
                             defaultMessage='Next'
                         />
-                        <NextIcon/>
+                        <i className='icon icon-chevron-right'/>
                     </button>
                 </form>
             </div>
diff --git a/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap b/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
index 38fb416e91f..21cec084bff 100644
--- a/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
+++ b/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`component/create_user_groups_modal should match snapshot with back butt
   >
     <button
       aria-label="Back"
-      className="modal-header-back-button btn-icon"
+      className="modal-header-back-button btn btn-icon"
       onClick={[Function]}
       type="button"
     >
diff --git a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
index 399aa5287ce..fb7c3c98d79 100644
--- a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
+++ b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
@@ -181,7 +181,7 @@ export default class CreateUserGroupsModal extends React.PureComponent<Props, St
                             <>
                                 <button
                                     type='button'
-                                    className='modal-header-back-button btn-icon'
+                                    className='modal-header-back-button btn btn-icon'
                                     aria-label='Back'
                                     onClick={() => {
                                         this.goBack();
diff --git a/webapp/channels/src/components/delete_channel_modal/__snapshots__/delete_channel_modal.test.tsx.snap b/webapp/channels/src/components/delete_channel_modal/__snapshots__/delete_channel_modal.test.tsx.snap
index 6e3b4d4f3ba..7f8412b74da 100644
--- a/webapp/channels/src/components/delete_channel_modal/__snapshots__/delete_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/delete_channel_modal/__snapshots__/delete_channel_modal.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`components/delete_channel_modal should match snapshot for delete_channe
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       onClick={[Function]}
       type="button"
     >
diff --git a/webapp/channels/src/components/delete_channel_modal/delete_channel_modal.tsx b/webapp/channels/src/components/delete_channel_modal/delete_channel_modal.tsx
index ba3e6cc84ad..3bf6a0b73ee 100644
--- a/webapp/channels/src/components/delete_channel_modal/delete_channel_modal.tsx
+++ b/webapp/channels/src/components/delete_channel_modal/delete_channel_modal.tsx
@@ -95,7 +95,7 @@ export default class DeleteChannelModal extends React.PureComponent<Props, State
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.onHide}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap b/webapp/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap
index a38221f5135..b8ec363720f 100644
--- a/webapp/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap
+++ b/webapp/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       onClick={[Function]}
       type="button"
     >
@@ -194,7 +194,7 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       onClick={[Function]}
       type="button"
     >
@@ -299,7 +299,7 @@ exports[`components/delete_post_modal should match snapshot for post with 1 comm
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       onClick={[Function]}
       type="button"
     >
diff --git a/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx b/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
index 114d1decd66..db95a849bdc 100644
--- a/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
+++ b/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
@@ -166,7 +166,7 @@ export default class DeletePostModal extends React.PureComponent<Props, State> {
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.onHide}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
index 949773ccfef..b2869296ced 100644
--- a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
+++ b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -243,7 +243,7 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -380,7 +380,7 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -507,7 +507,7 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -634,7 +634,7 @@ exports[`components/EditChannelHeaderModal submitted 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
diff --git a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
index c6b1483590b..fc87a3e88d0 100644
--- a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
+++ b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
@@ -294,7 +294,7 @@ export default class EditChannelHeaderModal extends React.PureComponent<Props, S
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link cancel-button'
+                        className='btn btn-tertiary cancel-button'
                         onClick={this.hideModal}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/edit_channel_purpose_modal/__snapshots__/edit_channel_purpose_modal.test.tsx.snap b/webapp/channels/src/components/edit_channel_purpose_modal/__snapshots__/edit_channel_purpose_modal.test.tsx.snap
index ed60b1f16d4..0f627b6a5ae 100644
--- a/webapp/channels/src/components/edit_channel_purpose_modal/__snapshots__/edit_channel_purpose_modal.test.tsx.snap
+++ b/webapp/channels/src/components/edit_channel_purpose_modal/__snapshots__/edit_channel_purpose_modal.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`comoponents/EditChannelPurposeModal clear error on next 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -99,7 +99,7 @@ exports[`comoponents/EditChannelPurposeModal clear error on next 1`] = `
       />
     </button>
     <button
-      className="btn btn-primary save-button"
+      className="btn btn-primary"
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -202,7 +202,7 @@ exports[`comoponents/EditChannelPurposeModal match with modal error 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -212,7 +212,7 @@ exports[`comoponents/EditChannelPurposeModal match with modal error 1`] = `
       />
     </button>
     <button
-      className="btn btn-primary save-button"
+      className="btn btn-primary"
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -315,7 +315,7 @@ exports[`comoponents/EditChannelPurposeModal match with modal error with fake id
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -325,7 +325,7 @@ exports[`comoponents/EditChannelPurposeModal match with modal error with fake id
       />
     </button>
     <button
-      className="btn btn-primary save-button"
+      className="btn btn-primary"
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -418,7 +418,7 @@ exports[`comoponents/EditChannelPurposeModal should match for private channel 1`
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -428,7 +428,7 @@ exports[`comoponents/EditChannelPurposeModal should match for private channel 1`
       />
     </button>
     <button
-      className="btn btn-primary save-button"
+      className="btn btn-primary"
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -521,7 +521,7 @@ exports[`comoponents/EditChannelPurposeModal should match on init 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -531,7 +531,7 @@ exports[`comoponents/EditChannelPurposeModal should match on init 1`] = `
       />
     </button>
     <button
-      className="btn btn-primary save-button"
+      className="btn btn-primary"
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -632,7 +632,7 @@ exports[`comoponents/EditChannelPurposeModal should match submitted 1`] = `
       componentClass="div"
     >
       <button
-        className="btn btn-link cancel-button"
+        className="btn btn-tertiary cancel-button"
         onClick={[Function]}
         type="button"
       >
@@ -642,7 +642,7 @@ exports[`comoponents/EditChannelPurposeModal should match submitted 1`] = `
         />
       </button>
       <button
-        className="btn btn-primary save-button"
+        className="btn btn-primary"
         disabled={false}
         onClick={[Function]}
         type="button"
@@ -736,7 +736,7 @@ exports[`comoponents/EditChannelPurposeModal should match with display name 1`]
     componentClass="div"
   >
     <button
-      className="btn btn-link cancel-button"
+      className="btn btn-tertiary cancel-button"
       onClick={[Function]}
       type="button"
     >
@@ -746,7 +746,7 @@ exports[`comoponents/EditChannelPurposeModal should match with display name 1`]
       />
     </button>
     <button
-      className="btn btn-primary save-button"
+      className="btn btn-primary"
       disabled={false}
       onClick={[Function]}
       type="button"
diff --git a/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.test.tsx b/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.test.tsx
index 28ba4e4a519..d89651b1e99 100644
--- a/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.test.tsx
+++ b/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.test.tsx
@@ -200,7 +200,7 @@ describe('comoponents/EditChannelPurposeModal', () => {
             {disableLifecycleMethods: true},
         );
 
-        wrapper.find('.save-button').simulate('click');
+        wrapper.find('.btn-primary').simulate('click');
 
         expect(patchChannel).toBeCalledWith('channel_id', {purpose: 'testPurpose'});
     });
diff --git a/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.tsx b/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.tsx
index cf8d3abce02..42fc8247e83 100644
--- a/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.tsx
+++ b/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.tsx
@@ -193,7 +193,7 @@ export class EditChannelPurposeModal extends React.PureComponent<Props, State> {
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link cancel-button'
+                        className='btn btn-tertiary cancel-button'
                         onClick={this.onHide}
                     >
                         <FormattedMessage
@@ -203,7 +203,7 @@ export class EditChannelPurposeModal extends React.PureComponent<Props, State> {
                     </button>
                     <button
                         type='button'
-                        className='btn btn-primary save-button'
+                        className='btn btn-primary'
                         disabled={this.state.requestStarted}
                         onClick={this.handleSave}
                     >
diff --git a/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap b/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
index 67f0145c886..adc22488957 100644
--- a/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
+++ b/webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap
@@ -113,7 +113,7 @@ exports[`components/emoji/components/AddEmoji should match snapshot 1`] = `
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/undefined/emoji"
         >
           <MemoizedFormattedMessage
@@ -288,7 +288,7 @@ exports[`components/emoji/components/AddEmoji should select a file and match sna
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/undefined/emoji"
         >
           <MemoizedFormattedMessage
@@ -427,7 +427,7 @@ exports[`components/emoji/components/AddEmoji should update emoji name and match
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/undefined/emoji"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/emoji/add_emoji/add_emoji.tsx b/webapp/channels/src/components/emoji/add_emoji/add_emoji.tsx
index d6c11363409..68f7b17b625 100644
--- a/webapp/channels/src/components/emoji/add_emoji/add_emoji.tsx
+++ b/webapp/channels/src/components/emoji/add_emoji/add_emoji.tsx
@@ -376,7 +376,7 @@ export default class AddEmoji extends React.PureComponent<AddEmojiProps, AddEmoj
                                 error={this.state.error}
                             />
                             <Link
-                                className='btn btn-link btn-sm'
+                                className='btn btn-tertiary'
                                 to={'/' + this.props.team.name + '/emoji'}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/components/emoji/emoji_list/emoji_list.tsx b/webapp/channels/src/components/emoji/emoji_list/emoji_list.tsx
index e86aa564177..59a30e1a59f 100644
--- a/webapp/channels/src/components/emoji/emoji_list/emoji_list.tsx
+++ b/webapp/channels/src/components/emoji/emoji_list/emoji_list.tsx
@@ -237,7 +237,7 @@ export default class EmojiList extends React.PureComponent<Props, State> {
 
                 nextButton = (
                     <SaveButton
-                        btnClass='btn-link'
+                        btnClass='btn-tertiary'
                         extraClasses='pull-right'
                         onClick={this.nextPage}
                         saving={this.state.nextLoading}
@@ -251,7 +251,7 @@ export default class EmojiList extends React.PureComponent<Props, State> {
             if (this.state.page > 0) {
                 previousButton = (
                     <button
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.previousPage}
                     >
                         <PreviousIcon additionalClassName='mr-2'/>
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx
index 2e50ff3ecb1..56b5ea8e978 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx
@@ -28,7 +28,7 @@ function EmojiPickerCustomEmojiButton({customEmojisEnabled, currentTeamName, han
         <AnyTeamPermissionGate permissions={[Permissions.CREATE_EMOJIS]}>
             <div className='emoji-picker__custom'>
                 <Link
-                    className='btn btn-link'
+                    className='btn btn-tertiary'
                     to={`/${currentTeamName}/emoji`}
                     onClick={handleEmojiPickerClose}
                 >
diff --git a/webapp/channels/src/components/get_link_modal.tsx b/webapp/channels/src/components/get_link_modal.tsx
index 10cd32e88a2..f6148402559 100644
--- a/webapp/channels/src/components/get_link_modal.tsx
+++ b/webapp/channels/src/components/get_link_modal.tsx
@@ -132,7 +132,7 @@ export default class GetLinkModal extends React.PureComponent<Props, State> {
                     <button
                         id='linkModalCloseButton'
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.onHide}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
index 3e06bac1ccb..ee7d995223a 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap
@@ -441,7 +441,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/test/integrations/commands"
         >
           <MemoizedFormattedMessage
@@ -911,7 +911,7 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/test/integrations/commands"
         >
           <MemoizedFormattedMessage
@@ -1384,7 +1384,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/test/integrations/commands"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
index 45678e2f487..9f7731e7674 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
@@ -234,7 +234,7 @@ exports[`components/integrations/AbstractIncomingWebhook should call action func
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/team_name/integrations/incoming_webhooks"
         >
           <MemoizedFormattedMessage
@@ -495,7 +495,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot 1
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/team_name/integrations/incoming_webhooks"
         >
           <MemoizedFormattedMessage
@@ -759,7 +759,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/team_name/integrations/incoming_webhooks"
         >
           <MemoizedFormattedMessage
@@ -987,7 +987,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/team_name/integrations/incoming_webhooks"
         >
           <MemoizedFormattedMessage
@@ -1215,7 +1215,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/team_name/integrations/incoming_webhooks"
         >
           <MemoizedFormattedMessage
@@ -1476,7 +1476,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/team_name/integrations/incoming_webhooks"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.jsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.jsx.snap
index 65e0e7a2de0..4c8da97d1fe 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.jsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.jsx.snap
@@ -275,7 +275,7 @@ https://test.com/callback2"
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/test/integrations/oauth2-apps"
         >
           <MemoizedFormattedMessage
@@ -580,7 +580,7 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot, display
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/test/integrations/oauth2-apps"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
index ad4cdbde380..b16dea427ba 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
@@ -320,7 +320,7 @@ callbackUrl2.com
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/team_name/integrations/outgoing_webhooks"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/abstract_command.tsx b/webapp/channels/src/components/integrations/abstract_command.tsx
index b85b92e2714..ce4f81620c5 100644
--- a/webapp/channels/src/components/integrations/abstract_command.tsx
+++ b/webapp/channels/src/components/integrations/abstract_command.tsx
@@ -653,7 +653,7 @@ export default class AbstractCommand extends React.PureComponent<Props, State> {
                                 errors={[this.props.serverError, this.state.clientError]}
                             />
                             <Link
-                                className='btn btn-link btn-sm'
+                                className='btn btn-tertiary'
                                 to={'/' + this.props.team.name + '/integrations/commands'}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx b/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
index 33ca9912ce2..df27cc84855 100644
--- a/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
+++ b/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
@@ -371,7 +371,7 @@ export default class AbstractIncomingWebhook extends PureComponent<Props, State>
                                 errors={[this.props.serverError, this.state.clientError]}
                             />
                             <Link
-                                className='btn btn-link btn-sm'
+                                className='btn btn-tertiary'
                                 to={`/${this.props.team.name}/integrations/incoming_webhooks`}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/components/integrations/abstract_oauth_app.jsx b/webapp/channels/src/components/integrations/abstract_oauth_app.jsx
index 7ae71ffb8fc..e985b54039b 100644
--- a/webapp/channels/src/components/integrations/abstract_oauth_app.jsx
+++ b/webapp/channels/src/components/integrations/abstract_oauth_app.jsx
@@ -443,7 +443,7 @@ export default class AbstractOAuthApp extends React.PureComponent {
                                 errors={[this.props.serverError, this.state.clientError]}
                             />
                             <Link
-                                className='btn btn-link btn-sm'
+                                className='btn btn-tertiary'
                                 to={`/${this.props.team.name}/integrations/oauth2-apps`}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
index 67ec246897f..28fac881dd2 100644
--- a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
+++ b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
@@ -582,7 +582,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent<Props,
                                 errors={[this.props.serverError, this.state.clientError]}
                             />
                             <Link
-                                className='btn btn-link btn-sm'
+                                className='btn btn-tertiary'
                                 to={`/${this.props.team.name}/integrations/outgoing_webhooks`}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap b/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
index f5cf10dd4ea..db0f8518e73 100644
--- a/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`components/integrations/bots/AddBot blank 1`] = `
             />
           </div>
           <div
-            className="btn btn-sm btn-primary btn-file sel-btn"
+            className="btn btn-sm btn-primary btn-file"
           >
             <MemoizedFormattedMessage
               defaultMessage="Upload Image"
@@ -329,7 +329,7 @@ exports[`components/integrations/bots/AddBot blank 1`] = `
           type="backstage"
         />
         <Link
-          className="btn btn-link btn-sm"
+          className="btn btn-tertiary"
           to="/DN/integrations/bots"
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx b/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
index 28dc3b3943b..32b603ab3d5 100644
--- a/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
+++ b/webapp/channels/src/components/integrations/bots/add_bot/add_bot.tsx
@@ -522,7 +522,7 @@ export default class AddBot extends React.PureComponent<Props, State> {
                                     {removeImageIcon}
                                 </div>
                                 <div
-                                    className='btn btn-sm btn-primary btn-file sel-btn'
+                                    className='btn btn-sm btn-primary btn-file'
                                 >
                                     <FormattedMessage
                                         id='bots.image.upload'
@@ -718,7 +718,7 @@ export default class AddBot extends React.PureComponent<Props, State> {
                                 errors={[this.state.error]}
                             />
                             <Link
-                                className='btn btn-link btn-sm'
+                                className='btn btn-tertiary'
                                 to={`/${this.props.team.name}/integrations/bots`}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/components/integrations/bots/bot.tsx b/webapp/channels/src/components/integrations/bots/bot.tsx
index 17e896cf1af..b8c5aef28f2 100644
--- a/webapp/channels/src/components/integrations/bots/bot.tsx
+++ b/webapp/channels/src/components/integrations/bots/bot.tsx
@@ -411,7 +411,7 @@ export default class Bot extends React.PureComponent<Props, State> {
                                         saving={false}
                                     />
                                     <button
-                                        className='btn btn-sm btn-link'
+                                        className='btn btn-sm btn-tertiary'
                                         onClick={this.closeCreateToken}
                                     >
                                         <FormattedMessage
diff --git a/webapp/channels/src/components/interactive_dialog/interactive_dialog.jsx b/webapp/channels/src/components/interactive_dialog/interactive_dialog.jsx
index 63a6d987f40..ee90f9c409a 100644
--- a/webapp/channels/src/components/interactive_dialog/interactive_dialog.jsx
+++ b/webapp/channels/src/components/interactive_dialog/interactive_dialog.jsx
@@ -258,7 +258,7 @@ export default class InteractiveDialog extends React.PureComponent {
                         <button
                             id='interactiveDialogCancel'
                             type='button'
-                            className='btn btn-link cancel-button'
+                            className='btn btn-tertiary cancel-button'
                             onClick={this.onHide}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/invitation_modal/invite_view.scss b/webapp/channels/src/components/invitation_modal/invite_view.scss
index b953080c262..bc232776797 100644
--- a/webapp/channels/src/components/invitation_modal/invite_view.scss
+++ b/webapp/channels/src/components/invitation_modal/invite_view.scss
@@ -1,10 +1,4 @@
 @import 'sass/utils/_mixins';
-// MM-40611 workaround to not show outline on Microsoft browsers
-// had to be this specific, i.e. `button.InviteView__copyLink:focus`
-// does not work
-button.InviteView__copyLink.tertiary-button:focus {
-    outline: none;
-}
 
 .InviteView {
     &__sectionTitle {
@@ -17,30 +11,6 @@ button.InviteView__copyLink.tertiary-button:focus {
         }
     }
 
-    &__copyLink {
-        @include secondary-button;
-        @include button-medium;
-
-        display: flex;
-        align-items: center;
-
-        &:active {
-            box-shadow: none;
-        }
-
-        &:focus {
-            outline: none;
-        }
-
-        &.btn.btn-cancel {
-            padding-left: 0;
-        }
-
-        .icon-check {
-            color: var(--online-indicator);
-        }
-    }
-
     &__footer {
         display: flex;
         justify-content: space-between;
diff --git a/webapp/channels/src/components/invitation_modal/invite_view.tsx b/webapp/channels/src/components/invitation_modal/invite_view.tsx
index 39b32ba0f5a..f66611c90d4 100644
--- a/webapp/channels/src/components/invitation_modal/invite_view.tsx
+++ b/webapp/channels/src/components/invitation_modal/invite_view.tsx
@@ -103,7 +103,7 @@ export default function InviteView(props: Props) {
                     defaultMessage: 'team invite link {inviteURL}',
                 }, {inviteURL})
             }
-            className='InviteView__copyLink'
+            className='btn btn-secondary'
             aria-live='polite'
         >
             {!copyText.copiedRecently && (
diff --git a/webapp/channels/src/components/invitation_modal/result_view.tsx b/webapp/channels/src/components/invitation_modal/result_view.tsx
index 70d6c467eb6..efb422ef1ec 100644
--- a/webapp/channels/src/components/invitation_modal/result_view.tsx
+++ b/webapp/channels/src/components/invitation_modal/result_view.tsx
@@ -77,7 +77,7 @@ export default function ResultView(props: Props) {
             <Modal.Footer className={props.footerClass}>
                 <button
                     onClick={props.inviteMore}
-                    className='btn btn-cancel ResultView__inviteMore'
+                    className='btn btn-tertiary ResultView__inviteMore'
                     data-testid='invite-more'
                 >
                     <FormattedMessage
diff --git a/webapp/channels/src/components/leave_team_modal/__snapshots__/leave_team_modal.test.tsx.snap b/webapp/channels/src/components/leave_team_modal/__snapshots__/leave_team_modal.test.tsx.snap
index 3140a09f007..0f2f1e4d402 100644
--- a/webapp/channels/src/components/leave_team_modal/__snapshots__/leave_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/leave_team_modal/__snapshots__/leave_team_modal.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`components/LeaveTeamModal should render the leave team model 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="leaveTeamNo"
       onClick={[Function]}
       type="button"
diff --git a/webapp/channels/src/components/leave_team_modal/leave_team_modal.test.tsx b/webapp/channels/src/components/leave_team_modal/leave_team_modal.test.tsx
index 314e74be999..f3403adfb86 100644
--- a/webapp/channels/src/components/leave_team_modal/leave_team_modal.test.tsx
+++ b/webapp/channels/src/components/leave_team_modal/leave_team_modal.test.tsx
@@ -31,7 +31,7 @@ describe('components/LeaveTeamModal', () => {
 
     it('should hide when cancel is clicked', () => {
         const wrapper = shallow(<LeaveTeamModal {...requiredProps}/>);
-        const cancel = wrapper.find('.btn-link').first();
+        const cancel = wrapper.find('.btn-tertiary').first();
 
         cancel.simulate('click');
 
diff --git a/webapp/channels/src/components/leave_team_modal/leave_team_modal.tsx b/webapp/channels/src/components/leave_team_modal/leave_team_modal.tsx
index f691254962e..f745e276491 100644
--- a/webapp/channels/src/components/leave_team_modal/leave_team_modal.tsx
+++ b/webapp/channels/src/components/leave_team_modal/leave_team_modal.tsx
@@ -177,7 +177,7 @@ export default class LeaveTeamModal extends React.PureComponent<Props, State> {
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.handleHide}
                         id='leaveTeamNo'
                     >
diff --git a/webapp/channels/src/components/linking_landing_page/linking_landing_page.tsx b/webapp/channels/src/components/linking_landing_page/linking_landing_page.tsx
index 30908f1d219..89cf8db8a5f 100644
--- a/webapp/channels/src/components/linking_landing_page/linking_landing_page.tsx
+++ b/webapp/channels/src/components/linking_landing_page/linking_landing_page.tsx
@@ -374,27 +374,23 @@ export default class LinkingLandingPage extends PureComponent<Props, State> {
             <div className='get-app__dialog-body'>
                 {this.renderDialogHeader()}
                 <div className='get-app__buttons'>
-                    <div className='get-app__status'>
-                        {this.renderGoNativeAppMessage()}
-                    </div>
-                    <div className='get-app__status'>
-                        <a
-                            href={this.state.location}
-                            onMouseDown={() => {
-                                this.setPreference(LandingPreferenceTypes.BROWSER, true);
-                            }}
-                            onClick={() => {
-                                this.setPreference(LandingPreferenceTypes.BROWSER, true);
-                                this.setState({navigating: true});
-                            }}
-                            className='btn btn-default btn-lg get-app__continue'
-                        >
-                            <FormattedMessage
-                                id='get_app.continueToBrowser'
-                                defaultMessage='View in Browser'
-                            />
-                        </a>
-                    </div>
+                    {this.renderGoNativeAppMessage()}
+                    <a
+                        href={this.state.location}
+                        onMouseDown={() => {
+                            this.setPreference(LandingPreferenceTypes.BROWSER, true);
+                        }}
+                        onClick={() => {
+                            this.setPreference(LandingPreferenceTypes.BROWSER, true);
+                            this.setState({navigating: true});
+                        }}
+                        className='btn btn-tertiary btn-lg'
+                    >
+                        <FormattedMessage
+                            id='get_app.continueToBrowser'
+                            defaultMessage='View in Browser'
+                        />
+                    </a>
                 </div>
                 <div className='get-app__preference'>
                     <button
diff --git a/webapp/channels/src/components/list_modal.tsx b/webapp/channels/src/components/list_modal.tsx
index afc597b2092..355018498c4 100644
--- a/webapp/channels/src/components/list_modal.tsx
+++ b/webapp/channels/src/components/list_modal.tsx
@@ -241,7 +241,7 @@ export default class ListModal extends React.PureComponent<Props, State> {
                                 {this.state.page > 0 &&
                                 <button
                                     onClick={this.onPrev}
-                                    className='btn btn-link filter-control filter-control__prev'
+                                    className='btn btn-tertiary filter-control filter-control__prev'
                                 >
                                     <FormattedMessage
                                         id='filtered_user_list.prev'
@@ -251,7 +251,7 @@ export default class ListModal extends React.PureComponent<Props, State> {
                                 {this.props.numPerPage && (this.state.items.length >= this.props.numPerPage) && endCount !== this.state.totalCount &&
                                 <button
                                     onClick={this.onNext}
-                                    className='btn btn-link filter-control filter-control__next'
+                                    className='btn btn-tertiary filter-control filter-control__next'
                                 >
                                     <FormattedMessage
                                         id='filtered_user_list.next'
diff --git a/webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap b/webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap
index 5f0c938d075..389a8affed6 100644
--- a/webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap
+++ b/webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`components/login/Login should match snapshot with base login 1`] = `
                 </Link>
               </div>
               <SaveButton
-                btnClass="btn-primary"
+                btnClass=""
                 defaultMessage="Log in"
                 disabled={false}
                 extraClasses="login-body-card-form-button-submit large"
diff --git a/webapp/channels/src/components/login/__snapshots__/login_mfa.test.tsx.snap b/webapp/channels/src/components/login/__snapshots__/login_mfa.test.tsx.snap
index f50d0e5ed59..10a32a734fc 100644
--- a/webapp/channels/src/components/login/__snapshots__/login_mfa.test.tsx.snap
+++ b/webapp/channels/src/components/login/__snapshots__/login_mfa.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`components/login/LoginMfa should match snapshot 1`] = `
         className="login-mfa-form-button-container"
       >
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage="Submit"
           disabled={true}
           extraClasses="login-mfa-form-button-submit large"
diff --git a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
index cc7af7b9005..1818a0f4468 100644
--- a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
+++ b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
@@ -272,7 +272,7 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="closeModalButton"
       type="button"
     >
@@ -564,7 +564,7 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = `
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       id="closeModalButton"
       type="button"
     >
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index aecb40bd8f9..06b93290fb3 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -315,7 +315,7 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
                     <button
                         id='closeModalButton'
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                     >
                         <FormattedMessage
                             id='general_button.close'
diff --git a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
index fc1905a9650..ca8cb4fb91e 100644
--- a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
@@ -96,7 +96,7 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
           }
         />
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Save"
@@ -188,7 +188,7 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
       className="filter-controls"
     >
       <button
-        className="btn btn-link filter-control filter-control__next"
+        className="btn btn-tertiary filter-control filter-control__next"
         onClick={[Function]}
       >
         <MemoizedFormattedMessage
@@ -297,7 +297,7 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
           }
         />
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Save"
@@ -380,7 +380,7 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
       className="filter-controls"
     >
       <button
-        className="btn btn-link filter-control filter-control__next"
+        className="btn btn-tertiary filter-control filter-control__next"
         onClick={[Function]}
       >
         <MemoizedFormattedMessage
@@ -489,7 +489,7 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
           }
         />
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage={
             <Memo(MemoizedFormattedMessage)
               defaultMessage="Save"
@@ -562,7 +562,7 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
       className="filter-controls"
     >
       <button
-        className="btn btn-link filter-control filter-control__prev"
+        className="btn btn-tertiary filter-control filter-control__prev"
         onClick={[Function]}
       >
         <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index fa639026b72..5d784cb6489 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -361,7 +361,7 @@ export default class MultiSelect<T extends Value> extends React.PureComponent<Pr
                 if (options.length > pageEnd) {
                     nextButton = (
                         <button
-                            className='btn btn-link filter-control filter-control__next'
+                            className='btn btn-tertiary filter-control filter-control__next'
                             onClick={this.nextPage}
                         >
                             <FormattedMessage
@@ -375,7 +375,7 @@ export default class MultiSelect<T extends Value> extends React.PureComponent<Pr
                 if (this.state.page > 0) {
                     previousButton = (
                         <button
-                            className='btn btn-link filter-control filter-control__prev'
+                            className='btn btn-tertiary filter-control filter-control__prev'
                             onClick={this.prevPage}
                         >
                             <FormattedMessage
@@ -523,7 +523,7 @@ export default class MultiSelect<T extends Value> extends React.PureComponent<Pr
                                         this.props.backButtonClick();
                                     }
                                 }}
-                                className={classNames('btn', this.props.backButtonClass)}
+                                className={classNames('btn btn-tertiary', this.props.backButtonClass)}
                             >
                                 {this.props.backButtonText || localizeMessage('multiselect.backButton', 'Back')}
                             </button>
diff --git a/webapp/channels/src/components/new_channel_modal/new_channel_modal.test.tsx b/webapp/channels/src/components/new_channel_modal/new_channel_modal.test.tsx
index 441ac95fdb5..b23e5eed73a 100644
--- a/webapp/channels/src/components/new_channel_modal/new_channel_modal.test.tsx
+++ b/webapp/channels/src/components/new_channel_modal/new_channel_modal.test.tsx
@@ -161,11 +161,11 @@ describe('components/new_channel_modal', () => {
 
         const cancelButton = screen.getByText('Cancel');
         expect(cancelButton).toBeInTheDocument();
-        expect(cancelButton).toHaveClass('GenericModal__button cancel');
+        expect(cancelButton).toHaveClass('btn-tertiary');
 
         const createChannelButton = screen.getByText('Create channel');
         expect(createChannelButton).toBeInTheDocument();
-        expect(createChannelButton).toHaveClass('GenericModal__button confirm');
+        expect(createChannelButton).toHaveClass('btn-primary');
         expect(createChannelButton).toBeDisabled();
     });
 
diff --git a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx
index 3b7da5a2a43..81fd7b70f43 100644
--- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx
+++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx
@@ -127,7 +127,7 @@ const Button = styled.button<{open: boolean}>(({open}) => {
 });
 
 const PlayButton = styled.button`
-    padding: 10px 20px;
+    padding: 10px 0;
     max-width: 175px;
     background: var(--button-bg);
     border-radius: 4px;
diff --git a/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap b/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
index 303ff4f2104..935a50b2941 100644
--- a/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
+++ b/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`components/post_edit_history should display error screen if errors are
             class="pull-right"
           >
             <button
-              class="sidebar--right__expand btn-icon"
+              class="sidebar--right__expand btn btn-icon btn-sm"
               type="button"
             >
               <i
@@ -44,7 +44,7 @@ exports[`components/post_edit_history should display error screen if errors are
             </button>
             <button
               aria-label="Close"
-              class="sidebar--right__close btn-icon"
+              class="sidebar--right__close btn btn-icon btn-sm"
               id="searchResultsCloseButton"
               type="button"
             >
@@ -145,7 +145,7 @@ exports[`components/post_edit_history should match snapshot 1`] = `
             class="pull-right"
           >
             <button
-              class="sidebar--right__expand btn-icon"
+              class="sidebar--right__expand btn btn-icon btn-sm"
               type="button"
             >
               <i
@@ -159,7 +159,7 @@ exports[`components/post_edit_history should match snapshot 1`] = `
             </button>
             <button
               aria-label="Close"
-              class="sidebar--right__close btn-icon"
+              class="sidebar--right__close btn btn-icon btn-sm"
               id="searchResultsCloseButton"
               type="button"
             >
diff --git a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
index c88b7f0f1e0..bb182397dc0 100644
--- a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`components/RenameChannelModal should match snapshot 1`] = `
       componentClass="div"
     >
       <button
-        className="btn btn-link"
+        className="btn btn-tertiary"
         onClick={[Function]}
         type="button"
       >
diff --git a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
index fe9bee20fc1..19c75c350ce 100644
--- a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
+++ b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
@@ -334,7 +334,7 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
                     <Modal.Footer>
                         <button
                             type='button'
-                            className='btn btn-link'
+                            className='btn btn-tertiary'
                             onClick={this.handleCancel}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
index 44fc5ffb64c..662ddb4bce3 100644
--- a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
+++ b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
@@ -167,7 +167,7 @@ export default class RhsCardHeader extends React.PureComponent<Props> {
                     >
                         <button
                             type='button'
-                            className='sidebar--right__expand btn-icon'
+                            className='sidebar--right__expand btn btn-icon btn-sm'
                             aria-label='Expand'
                             onClick={this.props.actions.toggleRhsExpanded}
                         >
@@ -188,7 +188,7 @@ export default class RhsCardHeader extends React.PureComponent<Props> {
                     >
                         <button
                             type='button'
-                            className='sidebar--right__close btn-icon'
+                            className='sidebar--right__close btn btn-icon btn-sm'
                             aria-label='Close'
                             onClick={this.props.actions.closeRightHandSide}
                         >
diff --git a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx b/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
index cd43f45a1a1..d5b5c7928a0 100644
--- a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
+++ b/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
@@ -208,7 +208,7 @@ export default class RhsHeaderPost extends React.PureComponent<RhsHeaderPostProp
                     >
                         <button
                             type='button'
-                            className='sidebar--right__expand btn-icon'
+                            className='sidebar--right__expand btn btn-icon btn-sm'
                             aria-label='Expand'
                             onClick={this.props.toggleRhsExpanded}
                         >
@@ -231,7 +231,7 @@ export default class RhsHeaderPost extends React.PureComponent<RhsHeaderPostProp
                         <button
                             id='rhsCloseButton'
                             type='button'
-                            className='sidebar--right__close btn-icon'
+                            className='sidebar--right__close btn btn-icon btn-sm'
                             aria-label='Close'
                             onClick={this.props.closeRightHandSide}
                         >
diff --git a/webapp/channels/src/components/save_button.tsx b/webapp/channels/src/components/save_button.tsx
index 5ee290ece2e..7e87a9cf353 100644
--- a/webapp/channels/src/components/save_button.tsx
+++ b/webapp/channels/src/components/save_button.tsx
@@ -19,7 +19,7 @@ type Props = {
 
 export default class SaveButton extends React.PureComponent<Props> {
     public static defaultProps: Partial<Props> = {
-        btnClass: 'btn-primary',
+        btnClass: '',
         defaultMessage: (
             <FormattedMessage
                 id='save_button.save'
@@ -47,7 +47,11 @@ export default class SaveButton extends React.PureComponent<Props> {
             ...props
         } = this.props;
 
-        let className = 'save-button btn';
+        let className = 'btn';
+        if (!btnClass) {
+            className += ' btn-primary';
+        }
+
         if (!disabled || saving) {
             className += ' ' + btnClass;
         }
diff --git a/webapp/channels/src/components/search_results_header/search_results_header.tsx b/webapp/channels/src/components/search_results_header/search_results_header.tsx
index ebaa624a4ac..e6ce0c6ed04 100644
--- a/webapp/channels/src/components/search_results_header/search_results_header.tsx
+++ b/webapp/channels/src/components/search_results_header/search_results_header.tsx
@@ -108,7 +108,7 @@ export default class SearchResultsHeader extends React.PureComponent<Props> {
                         >
                             <button
                                 type='button'
-                                className='sidebar--right__expand btn-icon'
+                                className='sidebar--right__expand btn btn-icon btn-sm'
                                 onClick={this.props.actions.toggleRhsExpanded}
                             >
                                 <LocalizedIcon
@@ -130,7 +130,7 @@ export default class SearchResultsHeader extends React.PureComponent<Props> {
                         <button
                             id='searchResultsCloseButton'
                             type='button'
-                            className='sidebar--right__close btn-icon'
+                            className='sidebar--right__close btn btn-icon btn-sm'
                             aria-label='Close'
                             onClick={this.props.actions.closeRightHandSide}
                         >
diff --git a/webapp/channels/src/components/searchable_channel_list.tsx b/webapp/channels/src/components/searchable_channel_list.tsx
index 0b59d889da6..3f1e02094d0 100644
--- a/webapp/channels/src/components/searchable_channel_list.tsx
+++ b/webapp/channels/src/components/searchable_channel_list.tsx
@@ -173,9 +173,9 @@ export default class SearchableChannelList extends React.PureComponent<Props, St
             </div>
         );
 
-        const joinViewChannelButtonClass = classNames('btn', {
-            outlineButton: this.isMemberOfChannel(channel.id),
-            primaryButton: !this.isMemberOfChannel(channel.id),
+        const joinViewChannelButtonClass = classNames('btn btn-sm', {
+            'btn-secondary outlineButton': this.isMemberOfChannel(channel.id),
+            'btn-primary primaryButton': !this.isMemberOfChannel(channel.id),
         });
 
         const joinViewChannelButton = (
diff --git a/webapp/channels/src/components/searchable_user_list/searchable_user_list.tsx b/webapp/channels/src/components/searchable_user_list/searchable_user_list.tsx
index 25077253718..b4deab815ed 100644
--- a/webapp/channels/src/components/searchable_user_list/searchable_user_list.tsx
+++ b/webapp/channels/src/components/searchable_user_list/searchable_user_list.tsx
@@ -249,7 +249,7 @@ class SearchableUserList extends React.PureComponent<Props, State> {
                 nextButton = (
                     <button
                         id='searchableUserListNextBtn'
-                        className='btn btn-link filter-control filter-control__next'
+                        className='btn btn-tertiary filter-control filter-control__next'
                         onClick={this.nextPage}
                         disabled={this.state.nextDisabled}
                     >
@@ -265,7 +265,7 @@ class SearchableUserList extends React.PureComponent<Props, State> {
                 previousButton = (
                     <button
                         id='searchableUserListPrevBtn'
-                        className='btn btn-link filter-control filter-control__prev'
+                        className='btn btn-tertiary filter-control filter-control__prev'
                         onClick={this.previousPage}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/setting_item_max.tsx b/webapp/channels/src/components/setting_item_max.tsx
index 330a4517f46..1936e77ff71 100644
--- a/webapp/channels/src/components/setting_item_max.tsx
+++ b/webapp/channels/src/components/setting_item_max.tsx
@@ -66,7 +66,7 @@ export default class SettingItemMax extends React.PureComponent<Props> {
 
     componentDidMount() {
         if (this.settingList.current) {
-            const focusableElements: NodeListOf<HTMLElement> = this.settingList.current.querySelectorAll('.btn:not(.save-button):not(.btn-cancel), input.form-control, input[type="radio"][checked], input[type="checkbox"], select, textarea, [tabindex]:not([tabindex="-1"])');
+            const focusableElements: NodeListOf<HTMLElement> = this.settingList.current.querySelectorAll('.btn:not(.save-button):not(.btn-tertiary), input.form-control, input[type="radio"][checked], input[type="checkbox"], select, textarea, [tabindex]:not([tabindex="-1"])');
             if (focusableElements.length > 0) {
                 a11yFocus(focusableElements[0]);
             } else {
@@ -92,7 +92,7 @@ export default class SettingItemMax extends React.PureComponent<Props> {
             target.tagName !== 'SELECT' &&
             target.parentElement &&
             target.parentElement.className !== 'react-select__input' &&
-            !target.classList.contains('btn-cancel') &&
+            !target.classList.contains('btn-tertiary') &&
             this.settingList.current &&
             this.settingList.current.contains(target)) {
             this.handleSubmit(e);
@@ -244,7 +244,7 @@ export default class SettingItemMax extends React.PureComponent<Props> {
                             {submit}
                             <button
                                 id={'cancelSetting'}
-                                className='btn btn-sm btn-cancel cursor--pointer style--none'
+                                className='btn btn-tertiary'
                                 onClick={this.handleUpdateSection}
                             >
                                 {cancelButtonText}
diff --git a/webapp/channels/src/components/setting_picture.tsx b/webapp/channels/src/components/setting_picture.tsx
index 0fd5b31206e..e13e8cfe883 100644
--- a/webapp/channels/src/components/setting_picture.tsx
+++ b/webapp/channels/src/components/setting_picture.tsx
@@ -260,7 +260,7 @@ export default class SettingPicture extends Component<Props, State> {
     render() {
         const img = this.renderImg();
 
-        let confirmButtonClass = 'btn btn-sm';
+        let confirmButtonClass = 'btn';
         let disableSaveButtonFocus = false;
         if (this.props.submitActive || this.state.removeSrc || this.state.setDefaultSrc) {
             confirmButtonClass += ' btn-primary';
@@ -298,7 +298,7 @@ export default class SettingPicture extends Component<Props, State> {
                     />
                     <button
                         data-testid='inputSettingPictureButton'
-                        className='btn btn-sm btn-primary btn-file sel-btn'
+                        className='btn btn-primary btn-file'
                         disabled={this.props.loadingPicture}
                         onClick={this.handleInputFile}
                         aria-label={localizeMessage('setting_picture.select', 'Select')}
@@ -361,7 +361,7 @@ export default class SettingPicture extends Component<Props, State> {
                             {buttonRender}
                             <button
                                 data-testid='cancelSettingPicture'
-                                className='btn btn-link btn-sm theme'
+                                className='btn btn-tertiary theme ml-2'
                                 onClick={this.handleCancel}
                                 aria-label={localizeMessage('setting_picture.cancel', 'Cancel')}
                             >
diff --git a/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap b/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap
index 8b0b9c7561a..5e46252572d 100644
--- a/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap
+++ b/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap
@@ -116,7 +116,7 @@ exports[`components/signup/Signup should match snapshot for all signup options e
               </span>
             </div>
             <SaveButton
-              btnClass="btn-primary"
+              btnClass=""
               defaultMessage="Create account"
               disabled={true}
               extraClasses="signup-body-card-form-button-submit large"
@@ -290,7 +290,7 @@ exports[`components/signup/Signup should match snapshot for all signup options e
               </span>
             </div>
             <SaveButton
-              btnClass="btn-primary"
+              btnClass=""
               defaultMessage="Create account"
               disabled={true}
               extraClasses="signup-body-card-form-button-submit large"
diff --git a/webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap b/webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap
index 4573fc84c14..add69ec9827 100644
--- a/webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap
+++ b/webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`components/TeamMembersModal should match snapshot 1`] = `
       teamId="id"
     >
       <button
-        className="btn btn-primary invite-people-btn"
+        className="btn btn-primary btn-sm invite-people-btn"
         id="invitePeople"
         onClick={[Function]}
         type="button"
diff --git a/webapp/channels/src/components/team_members_modal/team_members_modal.tsx b/webapp/channels/src/components/team_members_modal/team_members_modal.tsx
index a6873a62af1..c1860db8137 100644
--- a/webapp/channels/src/components/team_members_modal/team_members_modal.tsx
+++ b/webapp/channels/src/components/team_members_modal/team_members_modal.tsx
@@ -96,7 +96,7 @@ export default class TeamMembersModal extends React.PureComponent<Props, State>
                         <button
                             id='invitePeople'
                             type='button'
-                            className='btn btn-primary invite-people-btn'
+                            className='btn btn-primary btn-sm invite-people-btn'
                             onClick={this.handleInvitePeople}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/unarchive_channel_modal/__snapshots__/unarchive_channel_modal.test.tsx.snap b/webapp/channels/src/components/unarchive_channel_modal/__snapshots__/unarchive_channel_modal.test.tsx.snap
index c717dd9ee44..0fc6e93bbae 100644
--- a/webapp/channels/src/components/unarchive_channel_modal/__snapshots__/unarchive_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/unarchive_channel_modal/__snapshots__/unarchive_channel_modal.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`components/unarchive_channel_modal should match snapshot for unarchive_
     componentClass="div"
   >
     <button
-      className="btn btn-link"
+      className="btn btn-tertiary"
       onClick={[Function]}
       type="button"
     >
diff --git a/webapp/channels/src/components/unarchive_channel_modal/unarchive_channel_modal.tsx b/webapp/channels/src/components/unarchive_channel_modal/unarchive_channel_modal.tsx
index 622593167f0..53161a87052 100644
--- a/webapp/channels/src/components/unarchive_channel_modal/unarchive_channel_modal.tsx
+++ b/webapp/channels/src/components/unarchive_channel_modal/unarchive_channel_modal.tsx
@@ -82,7 +82,7 @@ export default class UnarchiveChannelModal extends React.PureComponent<Props, St
                 <Modal.Footer>
                     <button
                         type='button'
-                        className='btn btn-link'
+                        className='btn btn-tertiary'
                         onClick={this.onHide}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap b/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
index 4bd8c71bd7c..4bc9b7fc0e2 100644
--- a/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`component/update_user_group_modal should match snapshot 1`] = `
   >
     <button
       aria-label="Close"
-      className="modal-header-back-button btn-icon"
+      className="modal-header-back-button btn btn-icon"
       onClick={[Function]}
       type="button"
     >
@@ -110,13 +110,13 @@ exports[`component/update_user_group_modal should match snapshot 1`] = `
         className="update-buttons-wrapper"
       >
         <button
-          className="btn update-group-back"
+          className="btn btn-tertiary"
           onClick={[Function]}
         >
           Back
         </button>
         <SaveButton
-          btnClass="btn-primary"
+          btnClass=""
           defaultMessage="Save Details"
           disabled={true}
           extraClasses=""
diff --git a/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.scss b/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.scss
index 68262e3c23e..3590a939085 100644
--- a/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.scss
+++ b/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.scss
@@ -22,14 +22,6 @@
             button[disabled] {
                 color: rgba(var(--center-channel-color-rgb), 0.32);
             }
-
-            button.update-group-back {
-                padding: 13px 20px;
-                margin-right: 8px;
-                background: rgba(var(--button-bg-rgb), 0.08);
-                color: rgb(var(--button-bg-rgb));
-                line-height: 14px;
-            }
         }
     }
 }
diff --git a/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx b/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
index 1dfdcfdf6d6..d5997e1c9b1 100644
--- a/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
+++ b/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
@@ -158,7 +158,7 @@ const UpdateUserGroupModal = (props: Props) => {
             <Modal.Header closeButton={true}>
                 <button
                     type='button'
-                    className='modal-header-back-button btn-icon'
+                    className='modal-header-back-button btn btn-icon'
                     aria-label='Close'
                     onClick={goBack}
                 >
@@ -218,7 +218,7 @@ const UpdateUserGroupModal = (props: Props) => {
                                 e.preventDefault();
                                 goBack();
                             }}
-                            className='btn update-group-back'
+                            className='btn btn-tertiary'
                         >
                             {Utils.localizeMessage('multiselect.backButton', 'Back')}
                         </button>
diff --git a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
index 49d8b1afe59..f95af5999bf 100644
--- a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
@@ -194,12 +194,12 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                             </Title>
                             <CloseButton
                               aria-label="Close"
-                              className="btn-icon"
+                              className="btn btn-xs btn-icon"
                               onClick={[Function]}
                             >
                               <button
                                 aria-label="Close"
-                                className="CloseButton-lhxEdi gyMeQZ btn-icon"
+                                className="CloseButton-lhxEdi gyMeQZ btn btn-xs btn-icon"
                                 onClick={[Function]}
                               >
                                 <CloseIcon>
@@ -234,7 +234,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                               <span
                                 className="NoShrink-kvXWXm Dot-etDJYJ wzpro jiooBj"
                               >
-                                 • 
+                                •
                               </span>
                             </Dot>
                             <FormattedMessage
diff --git a/webapp/channels/src/components/user_group_popover/user_group_popover.tsx b/webapp/channels/src/components/user_group_popover/user_group_popover.tsx
index 7e7e87119ba..606f3913b2d 100644
--- a/webapp/channels/src/components/user_group_popover/user_group_popover.tsx
+++ b/webapp/channels/src/components/user_group_popover/user_group_popover.tsx
@@ -202,7 +202,7 @@ const UserGroupPopover = (props: Props) => {
                             {group.display_name}
                         </Title>
                         <CloseButton
-                            className='btn-icon'
+                            className='btn btn-xs btn-icon'
                             aria-label={formatMessage({id: 'user_group_popover.close', defaultMessage: 'Close'})}
                             onClick={handleClose}
                             ref={closeRef}
@@ -212,7 +212,7 @@ const UserGroupPopover = (props: Props) => {
                     </Heading>
                     <Subtitle>
                         <span className='overflow--ellipsis text-nowrap'>{'@'}{group.name}</span>
-                        <Dot>{' • '}</Dot>
+                        <Dot>{'•'}</Dot>
                         <FormattedMessage
                             id='user_group_popover.memberCount'
                             defaultMessage='{member_count} {member_count, plural, one {Member} other {Members}}'
diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_list/user_groups_list.tsx b/webapp/channels/src/components/user_groups_modal/user_groups_list/user_groups_list.tsx
index 53e15b8e103..d6072ac87c7 100644
--- a/webapp/channels/src/components/user_groups_modal/user_groups_list/user_groups_list.tsx
+++ b/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
diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss b/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss
index 5ffa777135d..264c7c0670d 100644
--- a/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss
+++ b/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;
-                    }
                 }
             }
         }
diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_modal_header/__snapshots__/user_groups_modal_header.test.tsx.snap b/webapp/channels/src/components/user_groups_modal/user_groups_modal_header/__snapshots__/user_groups_modal_header.test.tsx.snap
index ff1ff49b238..d3ed76d819b 100644
--- a/webapp/channels/src/components/user_groups_modal/user_groups_modal_header/__snapshots__/user_groups_modal_header.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_modal_header/user_groups_modal_header.tsx b/webapp/channels/src/components/user_groups_modal/user_groups_modal_header/user_groups_modal_header.tsx
index dea68242efc..782b554035b 100644
--- a/webapp/channels/src/components/user_groups_modal/user_groups_modal_header/user_groups_modal_header.tsx
+++ b/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
diff --git a/webapp/channels/src/components/user_settings/__snapshots__/import_theme_modal.test.tsx.snap b/webapp/channels/src/components/user_settings/__snapshots__/import_theme_modal.test.tsx.snap
index 6020e3d1c82..d5d74422fb8 100644
--- a/webapp/channels/src/components/user_settings/__snapshots__/import_theme_modal.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/__snapshots__/import_theme_modal.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`components/user_settings/ImportThemeModal should match snapshot 1`] = `
         componentClass="div"
       >
         <button
-          className="btn btn-link"
+          className="btn btn-tertiary"
           id="cancelButton"
           onClick={[Function]}
           type="button"
diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
index 2d70a09eb81..ccac3fcc5ad 100644
--- a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
@@ -603,7 +603,7 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
         className="mt-3"
       >
         <button
-          className="btn btn-link copy-theme-button"
+          className="btn btn-tertiary"
           onClick={[Function]}
         >
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
index 0f988709510..2e545b87067 100644
--- a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
+++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
@@ -433,7 +433,7 @@ export default class CustomThemeChooser extends React.PureComponent<Props, State
                 />
                 <div className='mt-3'>
                     <button
-                        className='btn btn-link copy-theme-button'
+                        className='btn btn-tertiary'
                         onClick={this.copyTheme}
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/user_settings/import_theme_modal.tsx b/webapp/channels/src/components/user_settings/import_theme_modal.tsx
index 46021304139..aafd1358967 100644
--- a/webapp/channels/src/components/user_settings/import_theme_modal.tsx
+++ b/webapp/channels/src/components/user_settings/import_theme_modal.tsx
@@ -207,7 +207,7 @@ class ImportThemeModal extends React.PureComponent<Props, State> {
                             <button
                                 id='cancelButton'
                                 type='button'
-                                className='btn btn-link'
+                                className='btn btn-tertiary'
                                 onClick={this.handleOnHide}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
index 1886d010a7a..acb761b96ff 100644
--- a/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
@@ -195,7 +195,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           >
             <hr />
             <SaveButton
-              btnClass="btn-primary"
+              btnClass=""
               defaultMessage={
                 <Memo(MemoizedFormattedMessage)
                   defaultMessage="Save"
@@ -214,7 +214,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               }
             >
               <button
-                className="save-button btn btn-primary"
+                className="btn btn-primary "
                 data-testid="saveSetting"
                 disabled={false}
                 id="saveSetting"
@@ -244,7 +244,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               </button>
             </SaveButton>
             <button
-              className="btn btn-sm btn-cancel cursor--pointer style--none"
+              className="btn btn-tertiary"
               id="cancelSetting"
               onClick={[Function]}
             >
@@ -612,7 +612,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
           >
             <hr />
             <SaveButton
-              btnClass="btn-primary"
+              btnClass=""
               defaultMessage={
                 <Memo(MemoizedFormattedMessage)
                   defaultMessage="Save"
@@ -631,7 +631,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               }
             >
               <button
-                className="save-button btn btn-primary"
+                className="btn btn-primary "
                 data-testid="saveSetting"
                 disabled={false}
                 id="saveSetting"
@@ -661,7 +661,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               </button>
             </SaveButton>
             <button
-              className="btn btn-sm btn-cancel cursor--pointer style--none"
+              className="btn btn-tertiary"
               id="cancelSetting"
               onClick={[Function]}
             >
diff --git a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
index 87bd9199122..8b2fc96322e 100644
--- a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
@@ -122,7 +122,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
           >
             <hr />
             <SaveButton
-              btnClass="btn-primary"
+              btnClass=""
               defaultMessage={
                 <Memo(MemoizedFormattedMessage)
                   defaultMessage="Save"
@@ -141,7 +141,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
               }
             >
               <button
-                className="save-button btn btn-primary"
+                className="btn btn-primary "
                 data-testid="saveSetting"
                 disabled={false}
                 id="saveSetting"
@@ -171,7 +171,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
               </button>
             </SaveButton>
             <button
-              className="btn btn-sm btn-cancel cursor--pointer style--none"
+              className="btn btn-tertiary"
               id="cancelSetting"
               onClick={[Function]}
             >
@@ -359,7 +359,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
           >
             <hr />
             <SaveButton
-              btnClass="btn-primary"
+              btnClass=""
               defaultMessage={
                 <Memo(MemoizedFormattedMessage)
                   defaultMessage="Save"
@@ -378,7 +378,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
               }
             >
               <button
-                className="save-button btn btn-primary"
+                className="btn btn-primary "
                 data-testid="saveSetting"
                 disabled={false}
                 id="saveSetting"
@@ -408,7 +408,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
               </button>
             </SaveButton>
             <button
-              className="btn btn-sm btn-cancel cursor--pointer style--none"
+              className="btn btn-tertiary"
               id="cancelSetting"
               onClick={[Function]}
             >
diff --git a/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx b/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
index 923d36c0ad6..155f8f5f8de 100644
--- a/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
+++ b/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
@@ -546,7 +546,6 @@ export default class UserAccessTokenSection extends React.PureComponent<Props, S
                             </label>
                         </div>
                         <SaveButton
-                            btnClass='btn-primary'
                             savingMessage={
                                 <FormattedMessage
                                     id='user.settings.tokens.save'
@@ -557,7 +556,7 @@ export default class UserAccessTokenSection extends React.PureComponent<Props, S
                             onClick={this.confirmCreateToken}
                         />
                         <button
-                            className='btn btn-link'
+                            className='btn btn-tertiary'
                             onClick={this.stopCreatingToken}
                         >
                             <FormattedMessage
diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_header_sub_menu/view_user_group_header_sub_menu.tsx b/webapp/channels/src/components/view_user_group_modal/view_user_group_header_sub_menu/view_user_group_header_sub_menu.tsx
index 1bf77eac984..d3ffc60a003 100644
--- a/webapp/channels/src/components/view_user_group_modal/view_user_group_header_sub_menu/view_user_group_header_sub_menu.tsx
+++ b/webapp/channels/src/components/view_user_group_modal/view_user_group_header_sub_menu/view_user_group_header_sub_menu.tsx
@@ -90,7 +90,7 @@ const ViewUserGroupHeaderSubMenu = (props: Props) => {
                 stopPropagationOnToggle={false}
                 id={`detailsCustomWrapper-${group.id}`}
             >
-                <button className='action-wrapper btn-icon'>
+                <button className='btn btn-icon'>
                     <LocalizedIcon
                         className='icon icon-dots-vertical'
                         ariaLabel={{id: t('user_groups_modal.goBackLabel'), defaultMessage: 'Back'}}
diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_list_item/view_user_group_list_item.tsx b/webapp/channels/src/components/view_user_group_modal/view_user_group_list_item/view_user_group_list_item.tsx
index a9e9dcc28bd..649c26154bb 100644
--- a/webapp/channels/src/components/view_user_group_modal/view_user_group_list_item/view_user_group_list_item.tsx
+++ b/webapp/channels/src/components/view_user_group_modal/view_user_group_list_item/view_user_group_list_item.tsx
@@ -66,7 +66,7 @@ const ViewUserGroupListItem = (props: Props) => {
                 (group.source.toLowerCase() !== GroupSource.Ldap && props.permissionToLeaveGroup) &&
                 <button
                     type='button'
-                    className='remove-group-member btn-icon'
+                    className='remove-group-member btn btn-icon btn-xs'
                     aria-label='Close'
                     onClick={removeUserFromGroup}
                 >
diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss
index 706eb935946..22d052c8d1f 100644
--- a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss
+++ b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss
@@ -12,44 +12,12 @@
             }
         }
 
-        button.user-groups-create {
-            margin-right: 24px;
-        }
-
         .details-action {
             margin-right: 42px;
 
             .MenuWrapper {
                 margin-left: auto;
             }
-
-            button.action-wrapper {
-                width: 4rem;
-                height: 4rem;
-                border: none;
-                margin-left: auto;
-                border-radius: 4px;
-                color: rgba(var(--center-channel-color-rgb), 0.56);
-                text-decoration: none;
-
-                &:hover {
-                    background: rgba(var(--center-channel-color-rgb), 0.08);
-                    border-radius: 4px;
-                    color: rgba(var(--center-channel-color-rgb), 0.72);
-                    fill: rgba(var(--center-channel-color-rgb), 0.72);
-                }
-
-                &:active {
-                    background-color: rgba(var(--button-bg-rgb), 0.08);
-                    color: var(--button-bg);
-                }
-
-                i.icon {
-                    display: inline;
-                    font-size: 24px;
-                    line-height: 24px;
-                }
-            }
         }
     }
 
@@ -130,29 +98,8 @@
 
                     button.remove-group-member {
                         display: none;
-                        width: 2.4rem;
-                        height: 2.4rem;
                         margin-right: 0;
                         margin-left: auto;
-                        color: rgba(var(--center-channel-color-rgb), 0.56);
-                        font-size: inherit;
-
-                        &:hover {
-                            background: rgba(var(--center-channel-color-rgb), 0.08);
-                            border-radius: 4px;
-                            color: rgba(var(--center-channel-color-rgb), 0.72);
-                            fill: rgba(var(--center-channel-color-rgb), 0.72);
-                        }
-
-                        &:active {
-                            background-color: rgba(var(--button-bg-rgb), 0.08);
-                            color: var(--button-bg);
-                        }
-
-                        i {
-                            font-size: 14px;
-                            line-height: 14px;
-                        }
                     }
 
                     &:hover {
diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx
index e794c12f414..520757f19f9 100644
--- a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx
+++ b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx
@@ -103,7 +103,7 @@ const ViewUserGroupModalHeader = ({
         if (permissionToJoinGroup) {
             return (
                 <button
-                    className='user-groups-create btn btn-md btn-primary'
+                    className='mr-2 btn btn-secondary btn-sm'
                     onClick={goToAddPeopleModal}
                 >
                     <FormattedMessage
@@ -163,7 +163,7 @@ const ViewUserGroupModalHeader = ({
         <Modal.Header closeButton={true}>
             <button
                 type='button'
-                className='modal-header-back-button btn-icon'
+                className='modal-header-back-button btn btn-icon'
                 aria-label='Close'
                 onClick={goBack}
             >
diff --git a/webapp/channels/src/components/widgets/icons/fa_next_icon.tsx b/webapp/channels/src/components/widgets/icons/fa_next_icon.tsx
index 803a63f7f71..542682c5e01 100644
--- a/webapp/channels/src/components/widgets/icons/fa_next_icon.tsx
+++ b/webapp/channels/src/components/widgets/icons/fa_next_icon.tsx
@@ -17,7 +17,7 @@ export default class NextIcon extends React.PureComponent<Props> {
     };
 
     public render(): JSX.Element {
-        const className = 'fa fa-1x fa-angle-right' + (this.props.additionalClassName ? ' ' + this.props.additionalClassName : '');
+        const className = 'icon icon-chevron-right' + (this.props.additionalClassName ? ' ' + this.props.additionalClassName : '');
         return (
             <LocalizedIcon
                 className={className}
diff --git a/webapp/channels/src/components/widgets/icons/fa_previous_icon.tsx b/webapp/channels/src/components/widgets/icons/fa_previous_icon.tsx
index 7c7e7adb249..8f60bbe600d 100644
--- a/webapp/channels/src/components/widgets/icons/fa_previous_icon.tsx
+++ b/webapp/channels/src/components/widgets/icons/fa_previous_icon.tsx
@@ -17,7 +17,7 @@ export default class PreviousIcon extends React.PureComponent<Props> {
     };
 
     public render(): JSX.Element {
-        const className = 'fa fa-1x fa-angle-left' + (this.props.additionalClassName ? ' ' + this.props.additionalClassName : '');
+        const className = 'icon icon-chevron-left' + (this.props.additionalClassName ? ' ' + this.props.additionalClassName : '');
         return (
             <LocalizedIcon
                 className={className}
diff --git a/webapp/channels/src/components/widgets/icons/unarchive_icon.tsx b/webapp/channels/src/components/widgets/icons/unarchive_icon.tsx
deleted file mode 100644
index 767cffcce24..00000000000
--- a/webapp/channels/src/components/widgets/icons/unarchive_icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-export default function UnarchiveIcon(props: React.HTMLAttributes<HTMLSpanElement>) {
-    const {formatMessage} = useIntl();
-    return (
-        <span {...props}>
-            <svg
-                width='16px'
-                height='16px'
-                viewBox='0 0 16 16'
-                role='img'
-                aria-label={formatMessage({id: 'generic_icons.archive', defaultMessage: 'Archive Icon'})}
-            >
-                <path d='M13.994 14.75H2.006V6.50605H3.5V13.256H12.5V6.50605H13.994V14.75ZM1.25 1.25005H14.75V5.75005H1.25V1.25005ZM2.744 2.74405V4.25605H13.256V2.74405H2.744ZM6.884 11.744V9.49405H4.994L8 6.50605L11.006 9.49405H9.134V11.744H6.884Z'/>
-            </svg>
-        </span>
-    );
-}
diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss
index a46a1dfce08..99bdaa1b455 100644
--- a/webapp/channels/src/sass/components/_buttons.scss
+++ b/webapp/channels/src/sass/components/_buttons.scss
@@ -1,5 +1,26 @@
 @charset 'UTF-8';
 
+.style--none {
+    padding: 0;
+    border: none;
+    background: transparent;
+
+    &:focus {
+        outline: 0;
+        text-decoration: none;
+    }
+
+    &.btn--block {
+        width: 100%;
+        text-align: left;
+    }
+
+    &:hover,
+    &:active {
+        text-decoration: none;
+    }
+}
+
 button {
     .unread-badge {
         display: inline-block;
@@ -9,49 +30,221 @@ button {
         background: #f74343;
         border-radius: 50%;
     }
-
-    &.style--none {
-        padding: 0;
-        border: none;
-        background: transparent;
-
-        &:focus {
-            outline: 0;
-            text-decoration: none;
-        }
-
-        &.btn {
-            padding: 6px 12px;
-        }
-
-        &.btn--block {
-            width: 100%;
-            text-align: left;
-        }
-
-        &:hover,
-        &:active {
-            text-decoration: none;
-        }
-    }
 }
 
 .btn {
-    border-radius: $border-rad;
+    // Important is given to override bootstrap styles on different states
+    display: inline-flex;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    padding: 0 20px;
+    border: none;
+    border-radius: $border-rad * 2;
+    font-size: 14px;
+    font-weight: 600;
+    gap: 8px;
+    outline: none !important;
     transition: all 0.15s ease;
 
-    &.btn-primary {
-        border-color: transparent;
-        background: $primary-color;
+    &.btn-icon {
+        width: 40px;
+        padding: 0;
+        background-color: transparent;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-size: 24px;
+
+        &:hover {
+            background-color: rgba(var(--center-channel-color-rgb), 0.08);
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+        }
 
-        &:hover,
         &:focus,
         &:active {
-            background: $primary-color--hover;
+            background-color: rgba(var(--button-bg-rgb), 0.08);
+            color: rgba(var(--button-bg-rgb), 1);
+        }
+
+        i {
+            font-size: inherit;
+        }
+
+        &.btn-xs {
+            width: 24px;
+            height: 24px;
+            font-size: 14.4px;
+
+            &.btn-compact {
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        &.btn-sm {
+            width: 32px;
+            height: 32px;
+            font-size: 18px;
+
+            &.btn-compact {
+                width: 28px;
+                height: 28px;
+            }
+        }
+
+        &.btn-lg {
+            width: 48px;
+            height: 48px;
+            font-size: 31.2px;
+
+            &.btn-compact {
+                width: 36px;
+                height: 36px;
+            }
+        }
+    }
+
+    &:not(.a11y--active) {
+        box-shadow: none;
+    }
+
+    &:active {
+        box-shadow: none;
+    }
+
+    & + .btn {
+        margin-left: 8px !important;
+    }
+
+    &.btn-full {
+        width: 100%;
+    }
+
+    i {
+        display: inline-flex;
+        width: 18px;
+        height: 18px;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0;
+    }
+
+    &.btn-xs {
+        height: 28px;
+    }
+
+    &.btn-sm {
+        height: 32px;
+        padding: 0 16px;
+        font-size: 12px;
+        gap: 6px;
+    }
+
+    &.btn-lg {
+        height: 48px;
+        padding: 0 24px;
+        font-size: 16px;
+        gap: 10px;
+
+        .i {
+            width: 20px;
+            height: 20px;
+            font-size: 24px;
+        }
+    }
+
+    &.btn-primary {
+        position: relative;
+        border-color: transparent;
+        background-color: rgb(var(--button-bg-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 {
+            background-color: #1a51c8;
+        }
+
+        &:active {
+            background-color: #184ab6;
+        }
+
+        &:disabled,
+        &:disabled:hover,
+        &:disabled:active {
+            background: rgba(var(--center-channel-color-rgb), 0.08);
+            color: rgba(var(--center-channel-color-rgb), 0.32);
+            opacity: 1;
+        }
+    }
+
+    &.btn-secondary {
+        border: 1px solid rgb(var(--button-bg-rgb));
+        background: transparent;
+        color: rgb(var(--button-bg-rgb));
+
+        &.btn-danger {
+            border-color: currentColor;
+            background: transparent;
+            color: var(--error-text);
+
+            &:hover {
+                border-color: currentColor;
+                background-color: rgba(var(--error-text-color-rgb), 0.08);
+                color: var(--error-text);
+            }
+
+            &:active,
+            &:focus {
+                border-color: currentColor;
+                background-color: rgba(var(--error-text-color-rgb), 0.16);
+                color: var(--error-text);
+            }
+        }
+
+        &:hover {
+            background-color: rgb(var(--button-bg-rgb), 0.08);
+        }
+
+        &:active {
+            background-color: rgb(var(--button-bg-rgb), 0.16);
+        }
+    }
+
+    &.btn-tertiary {
+        background: rgba(var(--button-bg-rgb), 0.08);
+        color: rgb(var(--button-bg-rgb));
+
+        &:hover {
+            background-color: rgb(var(--button-bg-rgb), 0.12);
+        }
+
+        &:active {
+            background-color: rgb(var(--button-bg-rgb), 0.16);
+            outline: none;
+        }
+
+        &:disabled,
+        &:disabled:hover,
+        &:disabled:active {
+            background: rgba(var(--center-channel-color-rgb), 0.08);
+            color: rgba(var(--center-channel-color-rgb), 0.32);
+            opacity: 1;
+        }
+    }
+
+    &.btn-quaternary {
+        background: transparent;
+        color: rgb(var(--button-bg-rgb));
+
+        &:hover {
+            background: rgba(var(--button-bg-rgb), 0.08);
+        }
+
+        &:active {
+            background-color: rgb(var(--button-bg-rgb), 0.12);
         }
     }
 
     &.btn-danger {
+        background: var(--error-text);
         color: $white;
 
         .app__body & {
@@ -94,41 +287,8 @@ button {
             margin-left: 6px;
         }
     }
-
-    &.btn-link {
-        &:active,
-        &:focus {
-            outline: none;
-        }
-    }
 }
 
 %btn-transition {
     transition: all 0.15s ease;
 }
-
-.btn-icon {
-    width: 3.2rem;
-    height: 3.2rem;
-    padding: 0;
-    border: none;
-    background: transparent;
-    border-radius: 4px;
-    color: rgba(var(--center-channel-color-rgb), 0.56);
-    fill: rgba(var(--center-channel-color-rgb), 0.56);
-    font-size: 1.6rem;
-
-    &:hover {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-        color: rgba(var(--center-channel-color-rgb), 0.72);
-        fill: rgba(var(--center-channel-color-rgb), 0.72);
-    }
-
-    &:active,
-    &--active,
-    &--active:hover {
-        background: rgba(var(--button-bg-rgb), 0.08);
-        color: v(button-bg);
-        fill: v(button-bg);
-    }
-}
diff --git a/webapp/channels/src/sass/components/_channel-invite-modal.scss b/webapp/channels/src/sass/components/_channel-invite-modal.scss
index e3318ff967f..ae1158f92ee 100644
--- a/webapp/channels/src/sass/components/_channel-invite-modal.scss
+++ b/webapp/channels/src/sass/components/_channel-invite-modal.scss
@@ -66,14 +66,6 @@
         text-align: right;
     }
 
-    .btn-primary {
-        height: 40px;
-        padding: 0 36px;
-        border-radius: 4px;
-        font-size: 14px;
-        font-weight: 600;
-    }
-
     .no-channel-message {
         padding: 1rem;
         font-size: 1.4rem;
@@ -188,19 +180,6 @@
     .multi-select__footer {
         order: 2;
         margin-top: 10px;
-
-        .btn-cancel {
-            @include tertiary-button;
-
-            width: auto;
-            height: 40px;
-            margin-right: 10px;
-        }
-
-        .save-button {
-            width: 67px;
-            padding: 0;
-        }
     }
 
     .custom-no-options-message {
diff --git a/webapp/channels/src/sass/components/_groups.scss b/webapp/channels/src/sass/components/_groups.scss
index d3b7ceb8ceb..e87e6eb9747 100644
--- a/webapp/channels/src/sass/components/_groups.scss
+++ b/webapp/channels/src/sass/components/_groups.scss
@@ -161,7 +161,7 @@
         border-top: solid 1px rgba(0, 0, 0, 0.1);
         background: $white;
 
-        .btn-link {
+        .btn-tertiary {
             color: $dark-gray;
 
             &.disabled {
@@ -430,7 +430,7 @@
             border-top: 0;
         }
 
-        .btn-link {
+        .btn-tertiary {
             color: $dark-gray;
 
             &.disabled {
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 71b27b497e3..b27baeede22 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -166,10 +166,6 @@
         padding: 12px 30px 12px 15px;
     }
 
-    .btn {
-        font-size: 13px;
-    }
-
     .info__label {
         margin-bottom: 3px;
         font-size: 0.9em;
@@ -312,17 +308,6 @@
                 line-height: 10px;
             }
         }
-
-        .btn {
-            &.btn-primary {
-                position: relative;
-                margin-top: -4px;
-
-                i {
-                    margin-right: 5px;
-                }
-            }
-        }
     }
 
     .no-channel-message {
@@ -1187,22 +1172,29 @@
             button.modal-header-back-button {
                 position: absolute;
                 left: 18px;
+                display: flex;
                 width: 4rem;
                 height: 4rem;
+                align-items: center;
+                justify-content: center;
+                border: none;
+                background: transparent;
+                border-radius: 4px;
                 color: rgba(var(--center-channel-color-rgb), 0.56);
                 float: left;
 
                 &:hover {
+                    background-color: rgba(var(--center-channel-color-rgb), 0.08);
                     color: rgba(var(--center-channel-color-rgb), 0.72);
                 }
 
                 &:active {
+                    background-color: rgba(var(--center-channel-color-rgb), 0.12);
                     background-color: rgba(var(--button-bg-rgb), 0.08);
                     color: var(--button-bg);
                 }
 
                 i {
-                    display: inline;
                     font-size: 24px;
                     line-height: 24px;
                 }
diff --git a/webapp/channels/src/sass/layout/_sidebar-right.scss b/webapp/channels/src/sass/layout/_sidebar-right.scss
index 694286b69b0..131f6edf42c 100644
--- a/webapp/channels/src/sass/layout/_sidebar-right.scss
+++ b/webapp/channels/src/sass/layout/_sidebar-right.scss
@@ -150,8 +150,6 @@
     }
 
     .sidebar--right__expand {
-        margin: 0 4px 0 0;
-
         i {
             top: 0;
         }
@@ -236,6 +234,7 @@
         white-space: nowrap;
 
         .btn-icon {
+            margin: 0 !important;
             font-size: 20px;
         }
 
@@ -243,6 +242,7 @@
             display: flex;
             align-items: center;
             justify-content: flex-end;
+            gap: 4px;
         }
     }
 
diff --git a/webapp/channels/src/sass/routes/_admin-console.scss b/webapp/channels/src/sass/routes/_admin-console.scss
index 437b152f0fc..a8364f603bd 100644
--- a/webapp/channels/src/sass/routes/_admin-console.scss
+++ b/webapp/channels/src/sass/routes/_admin-console.scss
@@ -912,7 +912,7 @@
         margin: 1em 0 0.3em;
         margin-top: 1em;
 
-        .btn-link {
+        .btn-tertiary {
             &.danger {
                 color: #c55151;
             }
diff --git a/webapp/channels/src/sass/routes/_get-app.scss b/webapp/channels/src/sass/routes/_get-app.scss
index 9dc71ee00e2..37b5d0bc36a 100644
--- a/webapp/channels/src/sass/routes/_get-app.scss
+++ b/webapp/channels/src/sass/routes/_get-app.scss
@@ -123,40 +123,6 @@
     }
 }
 
-.get-app__download {
-    border: none !important;
-    background-color: #145dbf !important;
-
-    &:hover {
-        background-color: #145dbf !important;
-        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-    }
-
-    &:active,
-    &:focus {
-        background-color: #1151a6 !important;
-    }
-}
-
-.get-app__continue {
-    border-color: #145dbf !important;
-    color: #145dbf !important;
-
-    &:hover {
-        background-color: rgba(255, 255, 255, 0.1) !important;
-        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-    }
-
-    &:active {
-        background-color: rgba(20, 93, 191, 0.1) !important;
-        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-    }
-
-    &:focus {
-        background-color: rgba(20, 93, 191, 0.1) !important;
-    }
-}
-
 .get-app__preference {
     display: flex;
     margin-top: 23px;
diff --git a/webapp/channels/src/sass/routes/_settings.scss b/webapp/channels/src/sass/routes/_settings.scss
index acff61ea2ac..86244ed0991 100644
--- a/webapp/channels/src/sass/routes/_settings.scss
+++ b/webapp/channels/src/sass/routes/_settings.scss
@@ -401,12 +401,6 @@
                         }
                     }
 
-                    .copy-theme-button {
-                        padding: 5px 8px;
-                        border: 1px solid v(link-color);
-                        text-decoration: none;
-                    }
-
                     .copy-theme-success {
                         height: 30px;
                         padding: 5px 12px;
@@ -584,10 +578,6 @@
     font-weight: 500;
 }
 
-.sel-btn {
-    margin-right: 5px;
-}
-
 .member-div {
     position: relative;
     width: 100%;
diff --git a/webapp/channels/src/sass/routes/_signup.scss b/webapp/channels/src/sass/routes/_signup.scss
index ac4ac2b9596..82411b84e1b 100644
--- a/webapp/channels/src/sass/routes/_signup.scss
+++ b/webapp/channels/src/sass/routes/_signup.scss
@@ -272,166 +272,6 @@ body {
         margin-bottom: 0;
     }
 
-    .btn {
-        padding: em(7px) em(15px);
-        margin-right: 5px;
-        font-size: 1em;
-        font-weight: 600;
-
-        .fa {
-            position: relative;
-            top: 1px;
-            margin: 0;
-            font-size: 17px;
-
-            &:last-child {
-                margin-left: 8px;
-            }
-
-            &:first-child {
-                margin-right: 8px;
-            }
-
-            &.fa--margin-top {
-                position: relative;
-                top: 1px;
-            }
-
-            &.fa-check,
-            &.fa-refresh {
-                left: -2px;
-                margin-right: 0.5em;
-                font-size: 0.9em;
-            }
-        }
-
-        .icon {
-            position: relative;
-            display: inline-block;
-            width: 18px;
-            height: 18px;
-            margin-right: 12px;
-            background-size: 100% 100%;
-            text-align: center;
-        }
-
-        &.btn-custom-login {
-            display: flex;
-            width: 200px;
-            min-width: 200px;
-            height: 40px;
-            align-items: center;
-            padding: 0 24px;
-            margin: 1em 0;
-            border-radius: 2px;
-            color: $white;
-            text-align: left;
-
-            > span {
-                position: relative;
-                display: flex;
-                align-items: center;
-
-                > span {
-                    line-height: normal;
-                }
-            }
-
-            &.gitlab {
-                background: #548;
-
-                &:hover {
-                    background: darken(#548, 10%);
-                }
-
-                .icon {
-                    background-image: url('../images/gitlabLogo.png');
-                }
-            }
-
-            &.google {
-                background: #dd4b39;
-
-                &:hover {
-                    background: darken(#dd4b39, 10%);
-                }
-
-                .icon {
-                    background-image: url('../images/googleLogo.png');
-                }
-            }
-
-            &.office365 {
-                background: #0079d6;
-
-                &:hover {
-                    background: darken(#0079d6, 10%);
-                }
-
-                .icon {
-                    background-image: url('../images/office365Logo.png');
-                }
-            }
-
-            &.openid {
-                background: #0079d6;
-                white-space: normal;
-
-                &:hover {
-                    background: darken(#0079d6, 10%);
-                }
-
-                > span {
-                    > span {
-                        overflow: hidden;
-                        width: 150px;
-                        line-height: normal;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                    }
-                }
-            }
-
-            &.ldap {
-                background: #3aa1cf;
-
-                &:hover {
-                    background: darken(#3aa1cf, 10%);
-                }
-            }
-
-            &.email {
-                background: $primary-color;
-
-                &:hover {
-                    background: $primary-color--hover;
-                }
-            }
-
-            &.saml {
-                background: #34a28b;
-
-                &:hover {
-                    background: darken(#34a28b, 10%);
-                }
-            }
-
-            &.btn--full {
-                width: 100%;
-                max-width: 350px;
-                text-align: left;
-            }
-
-            &.btn--large {
-                width: 300px;
-            }
-        }
-
-        &.btn-default {
-            color: #444;
-        }
-    }
-
     .has-error {
         &.no-padding {
             padding: 0;
diff --git a/webapp/channels/src/utils/utils.tsx b/webapp/channels/src/utils/utils.tsx
index 0c899474d1a..f3b84fadbc9 100644
--- a/webapp/channels/src/utils/utils.tsx
+++ b/webapp/channels/src/utils/utils.tsx
@@ -411,7 +411,7 @@ export function applyTheme(theme: Theme) {
     if (theme.linkColor) {
         changeCss('.app__body .more-modal__list .a11y--focused, .app__body .post.a11y--focused, .app__body .channel-header.a11y--focused, .app__body .post-create.a11y--focused, .app__body .user-popover.a11y--focused, .app__body .post-message__text.a11y--focused, #archive-link-home>a.a11y--focused', 'box-shadow: inset 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', inset 0 0 0 1px ' + theme.linkColor);
         changeCss('.app__body .a11y--focused', 'box-shadow: 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', 0 0 0 1px ' + theme.linkColor);
-        changeCss('.app__body .channel-header .channel-header__favorites.inactive:hover, .app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .channel-header__links > .color--link.active, .app__body .color--link, .app__body a:focus, .app__body .color--link:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor);
+        changeCss('.app__body .channel-header .channel-header__favorites.inactive:hover, .app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .channel-header__links > .color--link.active, .app__body .color--link, .app__body a:focus, .app__body .color--link:hover', 'color:' + theme.linkColor);
         changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
         changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover, .app__body .member-list__popover .more-modal__list .more-modal__row:hover', 'background:' + changeOpacity(theme.linkColor, 0.08));
         changeCss('.app__body .channel-header__links .icon:hover, .app__body .channel-header__links > a.active .icon, .app__body .post .post__reply', 'fill:' + theme.linkColor);
@@ -429,22 +429,25 @@ export function applyTheme(theme: Theme) {
     }
 
     if (theme.buttonBg) {
-        changeCss('.app__body .modal .settings-modal .profile-img__remove:hover, .app__body .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover:before, .app__body .modal .settings-modal .team-img__remove:hover, .app__body .btn.btn-transparent:hover, .app__body .btn.btn-transparent:active, .app__body .post-image__details .post-image__download svg:hover, .app__body .file-view--single .file__download:hover, .app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .tutorial__circles .circle.active', 'background:' + theme.buttonBg);
+        changeCss('.app__body .modal .settings-modal .profile-img__remove:hover, .app__body .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover:before, .app__body .modal .settings-modal .team-img__remove:hover, .app__body .btn.btn-transparent:hover, .app__body .btn.btn-transparent:active, .app__body .post-image__details .post-image__download svg:hover, .app__body .file-view--single .file__download:hover, .app__body .new-messages__button div, .app__body .tutorial__circles .circle.active', 'background:' + theme.buttonBg);
         changeCss('.app__body .system-notice__logo svg', 'fill:' + theme.buttonBg);
         changeCss('.app__body .post-image__details .post-image__download svg:hover', 'border-color:' + theme.buttonBg);
-        changeCss('.app__body .btn.btn-primary:hover, .app__body .btn.btn-primary:active, .app__body .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.15));
         changeCss('.app__body .emoji-picker .nav-tabs li.active a, .app__body .emoji-picker .nav-tabs li a:hover', 'fill:' + theme.buttonBg);
         changeCss('.app__body .emoji-picker .nav-tabs > li.active > a', 'border-bottom-color:' + theme.buttonBg + '!important;');
+        changeCss('.app__body .btn-primary:hover', 'background:' + blendColors(theme.buttonBg, '#000000', 0.1));
+        changeCss('.app__body .btn-primary:active', 'background:' + blendColors(theme.buttonBg, '#000000', 0.2));
     }
 
     if (theme.buttonColor) {
-        changeCss('.app__body .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover, .app__body .modal .settings-modal .team-img__remove:hover, .app__body .btn.btn-transparent:hover, .app__body .btn.btn-transparent:active, .app__body .new-messages__button div, .app__body .btn.btn-primary', 'color:' + theme.buttonColor);
+        changeCss('.app__body .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover, .app__body .modal .settings-modal .team-img__remove:hover, .app__body .btn.btn-transparent:hover, .app__body .btn.btn-transparent:active, .app__body .new-messages__button div', 'color:' + theme.buttonColor);
         changeCss('.app__body .new-messages__button svg', 'fill:' + theme.buttonColor);
         changeCss('.app__body .post-image__details .post-image__download svg:hover, .app__body .file-view--single .file__download svg', 'stroke:' + theme.buttonColor);
     }
 
     if (theme.errorTextColor) {
         changeCss('.app__body .error-text, .app__body .modal .settings-modal .settings-table .settings-content .has-error, .app__body .modal .input__help.error, .app__body .color--error, .app__body .has-error .help-block, .app__body .has-error .control-label, .app__body .has-error .radio, .app__body .has-error .checkbox, .app__body .has-error .radio-inline, .app__body .has-error .checkbox-inline, .app__body .has-error.radio label, .app__body .has-error.checkbox label, .app__body .has-error.radio-inline label, .app__body .has-error.checkbox-inline label', 'color:' + theme.errorTextColor);
+        changeCss('.app__body .btn-danger:hover', 'background:' + blendColors(theme.errorTextColor, '#000000', 0.1));
+        changeCss('.app__body .btn-danger:active', 'background:' + blendColors(theme.errorTextColor, '#000000', 0.2));
     }
 
     if (theme.mentionHighlightBg) {
diff --git a/webapp/platform/components/src/generic_modal/generic_modal.scss b/webapp/platform/components/src/generic_modal/generic_modal.scss
index 7a9ae57afad..a7eadc8dcdc 100644
--- a/webapp/platform/components/src/generic_modal/generic_modal.scss
+++ b/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) {
diff --git a/webapp/platform/components/src/generic_modal/generic_modal.tsx b/webapp/platform/components/src/generic_modal/generic_modal.tsx
index 18421b9ebf4..033898f6ed1 100644
--- a/webapp/platform/components/src/generic_modal/generic_modal.tsx
+++ b/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}