Redesign buttons

2024-11-14 13:07:13 +01:00 · 2024-11-14 13:07:13 +01:00 · 45d7858cee
parent c0b372d7a5
commit 45d7858cee
148 changed files with 338 additions and 618 deletions
--- a/client/e2e/src/po/video-watch.po.ts
+++ b/client/e2e/src/po/video-watch.po.ts
@ -199,7 +199,7 @@ export class VideoWatchPage {

    await textarea.setValue(comment)

-    const confirmButton = await $('.comment-buttons .orange-button')
+    const confirmButton = await $('.comment-buttons .primary-button')
    await confirmButton.waitForClickable()
    await confirmButton.click()

@ -218,7 +218,7 @@ export class VideoWatchPage {
    await textarea.waitForClickable()
    await textarea.setValue(comment)

-    const confirmButton = await $('my-video-comment .comment-buttons .orange-button')
+    const confirmButton = await $('my-video-comment .comment-buttons .primary-button')
    await confirmButton.waitForClickable()
    await confirmButton.click()

--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@ -11,7 +11,7 @@
        {{ follower.name }}
      </a>

-      <button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
+      <button i18n class="peertube-button-link secondary-button mt-1" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
    </div>

    <div class="col-xl-6 col-md-12">
@ -23,7 +23,7 @@
        {{ following.name }}
      </a>

-      <button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
+      <button i18n class="peertube-button-link secondary-button mt-1" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
    </div>

  </div>
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@ -9,7 +9,7 @@
      <div class="d-flex justify-content-between">
        <h1 i18n class="fw-semibold fs-5">About {{ instanceName }}</h1>

-        <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link orange-button h-100 d-flex align-items-center">Contact us</a>
+        <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link primary-button h-100 d-flex align-items-center">Contact us</a>
      </div>

      <div class="mb-4" *ngIf="categories.length !== 0 || languages.length !== 0">
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@ -50,11 +50,11 @@

      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
          (click)="hide()" (key.enter)="hide()"
        >

-        <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value value="Submit" class="peertube-button primary-button" [disabled]="!form.valid" />
      </div>
    </form>

--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@ -35,7 +35,7 @@

      <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>

-      <a i18n class="button-show-channel peertube-button-link orange-button-inverted" [routerLink]="getVideoChannelLink(videoChannel)">Show this channel</a>
+      <a i18n class="button-show-channel peertube-button-link primary-button" [routerLink]="getVideoChannelLink(videoChannel)">Show this channel</a>

      <div class="videos-overflow-workaround">
        <div class="videos">
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@ -130,11 +130,6 @@ my-subscribe-button {
    }
  }

-  .show-channel a {
-    @include peertube-button-link;
-    @include orange-button-inverted;
-  }
-
  .videos {
    display: none;
  }
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@ -56,7 +56,7 @@
    </button>

    <div class="buttons">
-      <a *ngIf="isManageable()" routerLink="/my-account" class="peertube-button-link orange-button" i18n>
+      <a *ngIf="isManageable()" routerLink="/my-account" class="peertube-button-link primary-button" i18n>
        Manage account
      </a>

--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@ -87,6 +87,7 @@
      </span>

      <input
+        class="peertube-button primary-button"
        (click)="formValidated()" type="submit" i18n-value value="Update configuration"
        [disabled]="!form.valid || !hasConsistentOptions() || !isUpdateAllowed()"
      >
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@ -65,8 +65,6 @@ my-select-custom-value {
 input[type=submit] {
  display: flex;

-  @include peertube-button;
-  @include orange-button;
  @include margin-left(auto);

  + .form-error {
@ -131,18 +129,6 @@ ngb-tabset:not(.previews) ::ng-deep {
  height: 0;
  width: 100%;
  justify-content: right;
-
-  .callout-link {
-    position: relative;
-    right: 3.3em;
-    top: .3em;
-    font-size: 90%;
-    color: pvar(--mainColor);
-    background-color: pvar(--bg);
-    padding: 0 .3em;
-
-    @include peertube-button-link;
-  }
 }

 my-actor-banner-edit {
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@ -16,7 +16,7 @@
    <div class="caption">
      <div class="left-buttons">
        <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
          [actions]="bulkActions" [entry]="selectedRows"
        >
        </my-action-dropdown>
--- a/client/src/app/+admin/follows/following-list/follow-modal.component.html
+++ b/client/src/app/+admin/follows/following-list/follow-modal.component.html
@ -32,11 +32,11 @@

      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
          (click)="hide()" (key.enter)="hide()"
        >

-        <input type="submit" i18n-value value="Follow" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value value="Follow" class="peertube-button primary-button" [disabled]="!form.valid" />
      </div>
    </form>
  </div>
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@ -16,7 +16,7 @@
    <div class="caption">
      <div class="left-buttons">
        <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
          [actions]="bulkActions" [entry]="selectedRows"
        >
        </my-action-dropdown>
--- a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
+++ b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
@ -66,11 +66,11 @@

    <div class="modal-footer inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
        (click)="hide()" (key.enter)="hide()"
      >

-      <input type="submit" [value]="getSubmitValue()" class="peertube-button orange-button" [disabled]="!form.valid">
+      <input type="submit" [value]="getSubmitValue()" class="peertube-button primary-button" [disabled]="!form.valid">
    </div>
  </form>
 </ng-template>
--- a/client/src/app/+admin/moderation/registration-list/registration-list.component.html
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
@ -16,7 +16,7 @@
    <div class="caption">
      <div class="left-buttons">
        <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
          [actions]="bulkActions" [entry]="selectedRows"
        >
        </my-action-dropdown>
@ -62,7 +62,7 @@
      <td class="action-cell">
        <my-action-dropdown
          [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="registrationActions" [entry]="registration"
+          i18n-label label="Actions" [actions]="registrationActions" [entry]="registration" buttonSize="small"
        ></my-action-dropdown>
      </td>

--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@ -48,7 +48,7 @@
      <td class="action-cell">
        <my-action-dropdown
          [ngClass]="{ 'show': expanded }" placement="bottom-right auto" container="body"
-          i18n-label label="Actions" [actions]="videoBlocklistActions" [entry]="videoBlock"
+          i18n-label label="Actions" [actions]="videoBlocklistActions" [entry]="videoBlock" buttonSize="small"
        ></my-action-dropdown>
      </td>

--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@ -207,7 +207,7 @@
          </my-peertube-checkbox>
        </div>

-        <input class="peertube-button orange-button" type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+        <input class="peertube-button primary-button" type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
      </form>

      <div class="d-none d-xxl-block col-7">
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@ -15,7 +15,7 @@
    <div class="caption">
      <div class="left-buttons">
        <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
          [actions]="bulkActions" [entry]="selectedRows"
        >
        </my-action-dropdown>
@ -97,7 +97,7 @@
      <td class="action-cell">
        <my-user-moderation-dropdown
          *ngIf="!isInSelectionMode()" [user]="user" [account]="user.accountMutedStatus" [displayOptions]="userModerationDisplayOptions"
-          container="body" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
+          container="body" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()" buttonSize="small">
        </my-user-moderation-dropdown>
      </td>

--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@ -16,7 +16,7 @@
    <div class="caption">
      <div class="left-buttons">
        <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
          [actions]="bulkActions" [entry]="selectedRows"
        >
        </my-action-dropdown>
@ -63,7 +63,7 @@
      <td class="action-cell">
        <my-video-actions-dropdown
          placement="bottom auto" buttonDirection="horizontal" buttonStyled="true" [video]="video" [displayOptions]="videoActionsOptions"
-          (videoRemoved)="reloadData()" (videoFilesRemoved)="reloadData()" (transcodingCreated)="reloadData()"
+          (videoRemoved)="reloadData()" (videoFilesRemoved)="reloadData()" (transcodingCreated)="reloadData()" buttonSize="small"
        ></my-video-actions-dropdown>
      </td>

--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@ -8,10 +8,10 @@
  <ng-container *ngFor="let plugin of plugins">
    <my-plugin-card [plugin]="plugin" [version]="plugin.version" [pluginType]="pluginType">
      <div ngProjectAs="buttons">
-        <my-edit-button
+        <my-button
          *ngIf="!isTheme(plugin)" [ptRouterLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
-          [responsiveLabel]="true"
-        ></my-edit-button>
+          [responsiveLabel]="true" icon="config"
+        ></my-button>

        <my-button
          class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@ -5,19 +5,23 @@
 </my-alert>

 <div class="result-and-search">
-  <ng-container *ngIf="!search">
+  @if (!search) {
    <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
-    <ng-container *ngIf="!isThemeSearch()" i18n>Popular plugins</ng-container>
-    <ng-container *ngIf="isThemeSearch()" i18n>Popular themes</ng-container>
-  </ng-container>

-  <ng-container *ngIf="search && !isSearching">
+    @if (isThemeSearch()) {
+      <ng-container i18n>Popular themes</ng-container>
+    } @else {
+      <ng-container i18n>Popular plugins</ng-container>
+    }
+  }
+
+  @if (search && !isSearching) {
    <my-global-icon iconName="search"></my-global-icon>

    <ng-container i18n>
      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
    </ng-container>
-  </ng-container>
+  }

  <div class="search-bar">
    <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
@ -34,13 +38,15 @@
      <div ngProjectAs="badges">
        <span i18n *ngIf="plugin.installed" class="pt-badge badge-success">Installed</span>

-        <span *ngIf="plugin.official" class="pt-badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft, the not-for-profit that develops PeerTube">
-          Official
-        </span>
+        <span
+          *ngIf="plugin.official" class="pt-badge badge-primary"
+          i18n i18n-title title="This plugin is developed by Framasoft, the not-for-profit that develops PeerTube"
+        >Official</span>

-        <span *ngIf="plugin.recommended" class="pt-badge badge-primary" i18n i18n-title title="This plugin is recommended by Framasoft, the not-for-profit that develops PeerTube">
-          Recommended
-        </span>
+        <span
+          *ngIf="plugin.recommended" class="pt-badge badge-primary"
+          i18n i18n-title title="This plugin is recommended by Framasoft, the not-for-profit that develops PeerTube"
+        >Recommended</span>
      </div>

      <div ngProjectAs="buttons">
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@ -1,6 +1,6 @@
 <ng-container *ngIf="plugin">

-  <h2>
+  <h2 class="mb-4">
    <ng-container>{{ pluginTypeLabel }}</ng-container>
    {{ plugin.name }}
  </h2>
@ -10,7 +10,7 @@
      <my-dynamic-form-field [hidden]="isSettingHidden(setting)" [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
    </div>

-    <input type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">
+    <input class="peertube-button primary-button mt-3" type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">
  </form>

  <div *ngIf="!hasRegisteredSettings()" i18n class="no-settings">
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@ -1,14 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-h2 {
-  margin-bottom: 20px;
-}
-
-input[type=submit],
-button {
-  margin-top: 10px;
-
-  @include peertube-button;
-  @include orange-button;
-}
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@ -15,7 +15,6 @@ import { BuildFormArgument } from '@app/shared/form-validators/form-validator.mo
@Component({
  selector: 'my-plugin-show-installed',
  templateUrl: './plugin-show-installed.component.html',
-  styleUrls: [ './plugin-show-installed.component.scss' ],
  standalone: true,
  imports: [ NgIf, FormsModule, ReactiveFormsModule, NgFor, DynamicFormFieldComponent ]
 })
--- a/client/src/app/+admin/plugins/shared/plugin-card.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
@ -51,11 +51,6 @@
  }
 }

-.action-button {
-  @include peertube-button-link;
-  @include button-with-icon(21px, 0, -2px);
-}
-
@media screen and (max-width: $small-view) {
  .first-row {
    flex-wrap: wrap;
--- a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
@ -5,7 +5,7 @@
  </div>

  <div>
-    <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
+    <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon secondary-button">
      <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
      <ng-container i18n>Remote runners</ng-container>
    </a>
@ -46,7 +46,7 @@
    <div class="caption">
      <div class="left-buttons">
        <my-action-dropdown
-          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="primary"
          [actions]="bulkActions" [entry]="selectedRows"
        >
        </my-action-dropdown>
@ -73,7 +73,7 @@
      <td class="action-cell">
        <my-action-dropdown
          placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="actions" [entry]="runnerJob"
+          i18n-label label="Actions" [actions]="actions" [entry]="runnerJob" buttonSize="small"
        ></my-action-dropdown>
      </td>

--- a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
@ -5,7 +5,7 @@
  </span>

  <div>
-    <a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon grey-button">
+    <a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon secondary-button">
      <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
      <ng-container i18n>Runner registration tokens</ng-container>
    </a>
@ -36,7 +36,7 @@
      <td class="action-cell">
        <my-action-dropdown
          placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="actions" [entry]="runner"
+          i18n-label label="Actions" [actions]="actions" [entry]="runner" buttonSize="small"
        ></my-action-dropdown>
      </td>

--- a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
@ -5,7 +5,7 @@
  </span>

  <div>
-    <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
+    <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon secondary-button">
      <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
      <ng-container i18n>Remote runners</ng-container>
    </a>
@ -32,7 +32,7 @@
  <ng-template pTemplate="caption">
    <div class="caption">
      <div class="left-buttons">
-        <my-button theme="orange" i18n-label label="Generate token" icon="add" (click)="generateToken()"></my-button>
+        <my-button theme="primary" i18n-label label="Generate token" icon="add" (click)="generateToken()"></my-button>
      </div>
    </div>
  </ng-template>
@ -42,7 +42,7 @@
      <td class="action-cell">
        <my-action-dropdown
          placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="actions" [entry]="registrationToken"
+          i18n-label label="Actions" [actions]="actions" [entry]="registrationToken" buttonSize="small"
        ></my-action-dropdown>
      </td>

--- a/client/src/app/+error-page/error-page.component.html
+++ b/client/src/app/+error-page/error-page.component.html
@ -12,7 +12,7 @@
        }
      </div>

-      <my-login-link className="peertube-button-big-link orange-button mt-5"></my-login-link>
+      <my-login-link className="peertube-button-big-link primary-button mt-5"></my-login-link>
    </div>
  } @else if (status === 403) {
    <div class="box">
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@ -87,7 +87,7 @@
            ></my-input-text>
          </div>

-          <input type="submit" class="peertube-button orange-button w-100" i18n-value value="Login" [disabled]="!form.valid">
+          <input type="submit" class="peertube-button primary-button w-100" i18n-value value="Login" [disabled]="!form.valid">

          <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5 text-center">
            <button type="button" i18n class="button-unstyle link-orange mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">
@ -158,12 +158,12 @@

  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button d-none d-sm-block"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button d-none d-sm-block"
      (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
    >

    <input
-      type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
+      type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button primary-button"
      (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
    >
  </div>
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@ -82,7 +82,7 @@
          ></my-peertube-checkbox>
        </div>

-        <input type="submit" class="peertube-button orange-button mt-4" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+        <input type="submit" class="peertube-button primary-button mt-4" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
      </div>
    </div>
  </form>
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@ -29,7 +29,7 @@
      <div class="form-group-description" i18n>⚠️ Never share your feed token with anyone.</div>
    </div>

-    <input (click)="renewToken()" class="peertube-button orange-button mt-4" type="submit" i18n-value value="Renew token">
+    <input (click)="renewToken()" class="peertube-button primary-button mt-4" type="submit" i18n-value value="Renew token">

  </div>
 </div>
--- a/client/src/app/+my-account/my-account-import-export/my-account-export.component.html
+++ b/client/src/app/+my-account/my-account-import-export/my-account-export.component.html
@ -58,14 +58,14 @@
          </td>

          <td>
-            <a i18n *ngIf="export.privateDownloadUrl" [href]="export.privateDownloadUrl" class="peertube-button-link grey-button">Download your archive</a>
+            <a i18n *ngIf="export.privateDownloadUrl" [href]="export.privateDownloadUrl" class="peertube-button-link secondary-button">Download your archive</a>
          </td>
        </tr>
      </table>

      <div class="mt-3">
        <input
-          class="peertube-button orange-button"
+          class="peertube-button primary-button"
          [disabled]="isRequestArchiveDisabled()"
          (click)="openNewArchiveModal()"
          type="submit" i18n-value value="Request a new archive"
@ -109,12 +109,12 @@

  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
      (click)="hide()" (key.enter)="hide()"
    >

    <input
-      type="submit" i18n-value value="Request an archive" class="peertube-button orange-button"
+      type="submit" i18n-value value="Request an archive" class="peertube-button primary-button"
      (click)="requestNewArchive()"
    />
  </div>
--- a/client/src/app/+my-account/my-account-import-export/my-account-import.component.scss
+++ b/client/src/app/+my-account/my-account-import-export/my-account-import.component.scss
@ -3,7 +3,7 @@

 .button-file {
  @include peertube-button-file(max-content);
-  @include orange-button;
+  @include primary-button;
 }

 my-alert {
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@ -6,7 +6,7 @@
 </div>

 <div class="header">
-  <a class="peertube-button-link grey-button" routerLink="/my-account/settings" fragment="notifications">
+  <a class="peertube-button-link secondary-button" routerLink="/my-account/settings" fragment="notifications">
    <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
    <span i18n>Notification preferences</span>
  </a>
@ -18,7 +18,7 @@
    </select>
  </div>

-  <button class="ms-auto peertube-button grey-button" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
+  <button class="ms-auto peertube-button secondary-button" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
    <ng-container *ngIf="hasUnreadNotifications()">
      <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>

--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@ -31,5 +31,5 @@
    ></my-input-text>
  </div>

-  <input type="submit" i18n-value value="Change email" [disabled]="!form.valid">
+  <input class="peertube-button primary-button" type="submit" i18n-value value="Change email" [disabled]="!form.valid">
 </form>
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@ -14,11 +14,6 @@ input[type=email] {
  @include peertube-input-text(100%);
 }

-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
-}
-
 .pending-email {
  margin-bottom: 15px;
 }
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@ -18,5 +18,5 @@
    [formError]="formErrors['new-confirmed-password']" autocomplete="new-password"
  ></my-input-text>

-  <input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
+  <input class="mt-3 peertube-button primary-button" type="submit" i18n-value value="Change password" [disabled]="!form.valid">
 </form>
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@ -13,10 +13,3 @@ my-input-text {
 my-input-text + my-input-text {
  margin-top: 15px;
 }
-
-input[type=submit] {
-  margin-top: 15px;
-
-  @include peertube-button;
-  @include orange-button;
-}
--- a/client/src/app/+my-account/my-account-settings/my-account-email-preferences/my-account-email-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-email-preferences/my-account-email-preferences.component.html
@ -17,5 +17,5 @@
    </my-peertube-checkbox>
  </div>

-  <input class="peertube-button orange-button" type="submit" i18n-value value="Save email settings" [disabled]="!form.valid">
+  <input class="peertube-button primary-button" type="submit" i18n-value value="Save email settings" [disabled]="!form.valid">
 </form>
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@ -35,5 +35,5 @@
    </div>
  </div>

-  <input type="submit" i18n-value value="Save profile" [disabled]="!form.valid">
+  <input class="mt-3 peertube-button primary-button" type="submit" i18n-value value="Save profile" [disabled]="!form.valid">
 </form>
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@ -9,13 +9,6 @@ input[type=text] {
  @include peertube-input-text(340px);
 }

-input[type=submit] {
-  margin-top: 15px;
-
-  @include peertube-button;
-  @include orange-button;
-}
-
 textarea {
  max-width: 100%;

--- a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html
@ -2,11 +2,11 @@
  <ng-container *ngIf="!twoFactorEnabled">
    <p i18n>Two factor authentication adds an additional layer of security to your account by requiring a numeric code from another device (most commonly mobile phones) when you log in.</p>

-    <my-button [ptRouterLink]="[ '/my-account/two-factor-auth' ]" theme="orange" i18n>Enable two-factor authentication</my-button>
+    <my-button [ptRouterLink]="[ '/my-account/two-factor-auth' ]" theme="primary" i18n>Enable two-factor authentication</my-button>
  </ng-container>

  <ng-container *ngIf="twoFactorEnabled">
-    <my-button theme="orange" (click)="disableTwoFactor()" i18n>Disable two-factor authentication</my-button>
+    <my-button theme="primary" (click)="disableTwoFactor()" i18n>Disable two-factor authentication</my-button>
  </ng-container>

 </div>
--- a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
@ -21,7 +21,7 @@
        [formError]="formErrorsPassword['current-password']" autocomplete="current-password"
      ></my-input-text>

-      <input class="peertube-button orange-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formPassword.valid">
+      <input class="peertube-button primary-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formPassword.valid">
    </form>
  </ng-container>

@ -49,7 +49,7 @@
        [formError]="formErrorsOTP['otp-token']" autocomplete="otp-token"
      ></my-input-text>

-      <input class="peertube-button orange-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formOTP.valid">
+      <input class="peertube-button primary-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formOTP.valid">
    </form>
  </ng-container>

--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@ -6,7 +6,7 @@
  </div>

  <div>
-    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link grey-button peertube-button-icon">
+    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link secondary-button peertube-button-icon">
      <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
      <ng-container i18n>My synchronizations</ng-container>
    </a>
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@ -16,10 +16,7 @@
    <label for="track-watch-history" i18n>Track watch history</label>
  </div>

-  <button class="delete-history" (click)="clearAllHistory()" i18n>
-    <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
-    Clear all history
-  </button>
+  <my-button icon="delete" (click)="clearAllHistory()" i18n>Clear all history</my-button>
 </div>

 <my-videos-selection
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@ -39,10 +39,6 @@

  .delete-history {
    grid-column: 4;
-
-    @include peertube-button;
-    @include grey-button;
-    @include button-with-icon;
  }
 }

--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@ -13,12 +13,14 @@ import { Video } from '@app/shared/shared-main/video/video.model'
 import { UserHistoryService } from '@app/shared/shared-main/users/user-history.service'
 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature/video-miniature.component'
 import { VideosSelectionComponent } from '@app/shared/shared-video-miniature/videos-selection.component'
+import { ButtonComponent } from '@app/shared/shared-main/buttons/button.component'

@Component({
  templateUrl: './my-history.component.html',
  styleUrls: [ './my-history.component.scss' ],
  standalone: true,
  imports: [
+    ButtonComponent,
    GlobalIconComponent,
    NgIf,
    AdvancedInputFilterComponent,
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
@ -19,12 +19,12 @@
  <div class="modal-footer inputs">
    <div class="inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
        (click)="dismiss()" (key.enter)="dismiss()"
      >

      <input
-        type="submit" i18n-value value="Accept" class="peertube-button orange-button"
+        type="submit" i18n-value value="Accept" class="peertube-button primary-button"
        (click)="close()"
      >
    </div>
--- a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
+++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
@ -46,8 +46,8 @@
    <tr>
      <td class="action-cell">
        <my-action-dropdown
-           container="body"
-          [actions]="videoChannelSyncActions" [entry]="videoChannelSync"
+          container="body" [actions]="videoChannelSyncActions" [entry]="videoChannelSync"
+          buttonSize="small"
        ></my-action-dropdown>
      </td>

--- a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html
+++ b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html
@ -52,7 +52,7 @@
        </div>
      </div>

-      <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+      <input type="submit" class="peertube-button primary-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
    </form>
  </div>
 </div>
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@ -5,7 +5,7 @@
  </div>

  <div>
-    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link peertube-icon-link grey-button">
+    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link peertube-icon-link secondary-button">
      <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
      <ng-container i18n>My synchronizations</ng-container>
    </a>
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@ -72,7 +72,7 @@
        <div *ngIf="formErrors['videoChannelId']" class="form-error" role="alert">{{ formErrors['videoChannelId'] }}</div>
      </div>

-      <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+      <input type="submit" class="peertube-button primary-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
    </form>
  </div>
 </div>
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
@ -7,10 +7,8 @@
    ></my-video-playlist-miniature>

    <div class="playlist-buttons">
-      <button (click)="showShareModal()" class="action-button share-button">
-        <my-global-icon iconName="share" aria-hidden="true"></my-global-icon>
-        <span class="icon-text" i18n>Share</span>
-      </button>
+
+      <my-button class="me-3" (click)="showShareModal()" i18n icon="share">Share</my-button>

      <my-action-dropdown
        *ngIf="isRegularPlaylist(playlist)"
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@ -28,14 +28,6 @@
 .playlist-buttons {
  display: flex;
  margin: 30px 0 10px;
-
-  .share-button {
-    @include peertube-button;
-    @include button-with-icon(17px, 3px, -1px);
-    @include grey-button;
-    @include apply-svg-color(pvar(--actionButtonColor));
-    @include margin-right(10px);
-  }
 }

 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
@ -1,19 +1,20 @@
-import { Subject, Subscription } from 'rxjs'
-import { CdkDragDrop, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop'
+import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop'
+import { NgFor, NgIf } from '@angular/common'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ComponentPagination, ConfirmService, HooksService, Notifier, ScreenService } from '@app/core'
-import { VideoPlaylistType } from '@peertube/peertube-models'
-import { VideoPlaylistElementMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-element-miniature.component'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
-import { ActionDropdownComponent, DropdownAction } from '../../shared/shared-main/buttons/action-dropdown.component'
-import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
-import { VideoPlaylistMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-miniature.component'
-import { NgIf, NgFor } from '@angular/common'
-import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.model'
-import { VideoPlaylistElement } from '@app/shared/shared-video-playlist/video-playlist-element.model'
+import { ButtonComponent } from '@app/shared/shared-main/buttons/button.component'
 import { VideoShareComponent } from '@app/shared/shared-share-modal/video-share.component'
+import { VideoPlaylistElement } from '@app/shared/shared-video-playlist/video-playlist-element.model'
+import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.model'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-playlist.service'
+import { VideoPlaylistType } from '@peertube/peertube-models'
+import { Subject, Subscription } from 'rxjs'
+import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
+import { ActionDropdownComponent, DropdownAction } from '../../shared/shared-main/buttons/action-dropdown.component'
+import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
+import { VideoPlaylistElementMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-element-miniature.component'
+import { VideoPlaylistMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-miniature.component'

@Component({
  templateUrl: './my-video-playlist-elements.component.html',
@ -21,6 +22,7 @@ import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-pl
  standalone: true,
  imports: [
    NgIf,
+    ButtonComponent,
    VideoPlaylistMiniatureComponent,
    GlobalIconComponent,
    ActionDropdownComponent,
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@ -25,12 +25,12 @@
  <div class="modal-footer">
    <div class="inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
        (click)="dismiss()" (key.enter)="dismiss()"
      >

      <input
-        type="submit" i18n-value value="Submit" class="peertube-button orange-button"
+        type="submit" i18n-value value="Submit" class="peertube-button primary-button"
        [disabled]="!form.valid" (click)="close()"
      />
    </div>
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@ -6,12 +6,12 @@
  </div>

  <div>
-    <a routerLink="/my-library/video-imports" class="peertube-button-link grey-button peertube-button-icon me-2">
+    <a routerLink="/my-library/video-imports" class="peertube-button-link secondary-button peertube-button-icon me-2">
      <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
      <ng-container i18n>My imports</ng-container>
    </a>

-    <a routerLink="/my-library/ownership" class="peertube-button-link grey-button peertube-button-icon">
+    <a routerLink="/my-library/ownership" class="peertube-button-link secondary-button peertube-button-icon">
      <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
      <ng-container i18n>Ownership changes</ng-container>
    </a>
@ -45,10 +45,7 @@
  #videosSelection
 >
  <ng-template ptTemplate="globalButtons">
-    <button class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
-      <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
-      <ng-container i18n>Delete</ng-container>
-    </button>
+    <my-delete-button class="delete-selection" (click)="deleteSelectedVideos()"></my-delete-button>
  </ng-template>

  <ng-template ptTemplate="rowButtons" let-video>
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@ -10,18 +10,6 @@ input[type=text] {
  @include margin-left(0.5rem);
 }

-.action-button-delete-selection {
-  display: inline-block;
-
-  @include peertube-button;
-  @include orange-button;
-  @include button-with-icon(21px);
-
-  my-global-icon {
-    @include apply-svg-color(#fff);
-  }
-}
-
 .action-button {
  display: flex;
  align-self: flex-end;
@ -58,6 +46,7 @@ my-edit-button {
      width: 100%;
      margin-bottom: 12px;
    }
+
    .peertube-select-container {
      @include margin-left(0);
    }
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@ -6,6 +6,7 @@ import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenServi
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { formatICU, immutableAssign } from '@app/helpers'
 import { DropdownAction } from '@app/shared/shared-main/buttons/action-dropdown.component'
+import { DeleteButtonComponent } from '@app/shared/shared-main/buttons/delete-button.component'
 import { Video } from '@app/shared/shared-main/video/video.model'
 import { VideoService } from '@app/shared/shared-main/video/video.service'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live/live-stream-information.component'
@ -18,8 +19,8 @@ import { concat, Observable } from 'rxjs'
 import { tap, toArray } from 'rxjs/operators'
 import { AdvancedInputFilter, AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
-import { PeerTubeTemplateDirective } from '../../shared/shared-main/common/peertube-template.directive'
 import { EditButtonComponent } from '../../shared/shared-main/buttons/edit-button.component'
+import { PeerTubeTemplateDirective } from '../../shared/shared-main/common/peertube-template.directive'
 import {
  VideoActionsDisplayType,
  VideoActionsDropdownComponent
@ -32,6 +33,7 @@ import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.c
  standalone: true,
  imports: [
    GlobalIconComponent,
+    DeleteButtonComponent,
    NgIf,
    RouterLink,
    AdvancedInputFilterComponent,
--- a/client/src/app/+reset-password/reset-password.component.html
+++ b/client/src/app/+reset-password/reset-password.component.html
@ -21,7 +21,7 @@
    </div>

    <input
-      class="peertube-button orange-button" type="submit" i18n-value value="Reset my password"
+      class="peertube-button primary-button" type="submit" i18n-value value="Reset my password"
      [disabled]="!form.valid || !isConfirmedPasswordValid()"
    >
  </form>
--- a/client/src/app/+search/search-filters.component.html
+++ b/client/src/app/+search/search-filters.component.html
@ -230,6 +230,9 @@
      Reset
    </button>

-    <input type="submit" i18n-value value="Filter" i18n-ariaLabel aria-label="Filter the results and automatically close the filters panel">
+    <input
+      class="peertube-button primary-button" type="submit" i18n-value value="Filter"
+      i18n-ariaLabel aria-label="Filter the results and automatically close the filters panel"
+    >
  </div>
 </form>
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@ -25,11 +25,6 @@ input[type=text] {
  @include peertube-input-text(100%);
 }

-input[type=submit] {
-  @include peertube-button-link;
-  @include orange-button;
-}
-
 .submit-button {
  text-align: end;
 }
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@ -30,7 +30,7 @@
              <strong>I already have an account</strong>, I log in
            </a>

-            <button cdkStepperNext>
+            <button class="peertube-button-big primary-button" cdkStepperNext>
              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
            </button>
          </div>
@ -56,8 +56,8 @@
          ></my-register-step-terms>

          <div class="step-buttons">
-            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
-            <button cdkStepperNext [disabled]="!formStepTerms || !formStepTerms.valid">{{ defaultNextStepButtonLabel }}</button>
+            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+            <button class="peertube-button-big primary-button" cdkStepperNext [disabled]="!formStepTerms || !formStepTerms.valid">{{ defaultNextStepButtonLabel }}</button>
          </div>
        </cdk-step>

@ -73,8 +73,8 @@
          ></my-register-step-user>

          <div class="step-buttons">
-            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
-            <button cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button>
+            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+            <button class="peertube-button-big primary-button" cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button>
          </div>
        </cdk-step>

@ -90,7 +90,7 @@
          ></my-register-step-channel>

          <div class="step-buttons">
-            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>

            <div class="skip-step">
              <button class="underline-orange button-unstyle" (click)="skipChannelCreation()">
@ -100,7 +100,7 @@
              <div class="skip-step-description" i18n>You will be able to create a channel later</div>
            </div>

-            <button cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()">
+            <button class="peertube-button-big primary-button" cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()">
              <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
            </button>
          </div>
@ -122,7 +122,7 @@
          ></my-signup-success-before-email>

          <div *ngIf="signupError" class="step-buttons">
-            <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
          </div>
        </cdk-step>
      </my-custom-stepper>
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@ -44,18 +44,6 @@ my-instance-about-accordion {
    }
  }

-  > button {
-    @include peertube-button-big;
-
-    &[cdkStepperNext] {
-      @include orange-button;
-    }
-
-    &[cdkStepperPrevious] {
-      @include grey-button;
-    }
-  }
-
  > button,
  .skip-step {
    margin-top: 20px;
--- a/client/src/app/+signup/+register/steps/step.component.scss
+++ b/client/src/app/+signup/+register/steps/step.component.scss
@ -11,11 +11,6 @@ input:not([type=submit]) {
  }
 }

-input[type=submit],
-button {
-  @include peertube-button;
-}
-
 label {
  font-size: 18px;
  margin-bottom: 5px;
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
@ -13,7 +13,7 @@
      <div *ngIf="formErrors['verify-email-email']" class="form-error" role="alert">{{ formErrors['verify-email-email'] }}</div>
    </div>

-    <input class="peertube-button orange-button" type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
+    <input class="peertube-button primary-button" type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
  </form>

  <ng-template #emailVerificationNotRequired>
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@ -6,13 +6,13 @@
  <div class="channel-info">

    <ng-template #buttonsTemplate>
-      <a *ngIf="isManageable()" [routerLink]="[ '/manage/update', videoChannel.nameWithHost  ]" class="peertube-button-link orange-button" i18n>
+      <a *ngIf="isManageable()" [routerLink]="[ '/manage/update', videoChannel.nameWithHost  ]" class="peertube-button-link primary-button" i18n>
        Manage channel
      </a>

      <my-subscribe-button *ngIf="!isOwner()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>

-      <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
+      <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button primary-button-inverted">
        <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
        <span class="icon-text" i18n>Support</span>
      </button>
@ -43,11 +43,11 @@
          <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
        </div>

-        <a class="view-account short" [routerLink]="getAccountUrl()" i18n>
+        <a class="view-account peertube-button-link primary-button short mt-3" [routerLink]="getAccountUrl()" i18n>
          View account
        </a>

-        <a class="view-account complete" [routerLink]="getAccountUrl()" i18n>
+        <a class="view-account link-orange complete" [routerLink]="getAccountUrl()" i18n>
          View owner account
        </a>
      </div>
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@ -133,13 +133,6 @@
  }
 }

-.view-account.short {
-  margin-top: 30px;
-
-  @include peertube-button-link;
-  @include orange-button-inverted;
-}
-
 .view-account.complete {
  display: none;
 }
@ -232,7 +225,6 @@ my-copy-button {
    display: block;
    text-align: end;
    margin-top: 10px;
-    color: pvar(--mainColor);
  }

  .view-account.short {
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.html
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.html
@ -63,7 +63,7 @@
      </div>

      <my-button
-        theme="orange" i18n-label label="Run video edition" icon="circle-tick"
+        theme="primary" i18n-label label="Run video edition" icon="circle-tick"
        (click)="runEdition()" (keydown.enter)="runEdition()"
        [disabled]="!form.valid || isRunningEdition || noEdition()"
      ></my-button>
--- a/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html
+++ b/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html
@ -36,12 +36,12 @@

    <div class="modal-footer inputs">
      <input
-        type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+        type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
        (click)="hide()" (key.enter)="hide()"
      >

      <input
-        type="submit" i18n-value value="Add this caption" class="peertube-button orange-button"
+        type="submit" i18n-value value="Add this caption" class="peertube-button primary-button"
        [disabled]="!form.valid" (click)="addCaption()"
      >
    </div>
--- a/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.html
+++ b/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.html
@ -121,12 +121,12 @@

 <div class="modal-footer inputs">
  <input
-    type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+    type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
    (click)="hide()" (key.enter)="hide()"
  >

  <input
-    type="button" i18n-value value="Edit this caption" class="peertube-button orange-button"
+    type="button" i18n-value value="Edit this caption" class="peertube-button primary-button"
    [disabled]="rawEdition && !form.valid" (click)="updateCaption()"
  >
 </div>
--- a/client/src/app/+videos/+video-edit/shared/thumbnail-manager/thumbnail-manager.component.html
+++ b/client/src/app/+videos/+video-edit/shared/thumbnail-manager/thumbnail-manager.component.html
@ -15,9 +15,9 @@
  <div class="mt-2">

    @if (selectingFromVideo) {
-      <button i18n type="button" class="peertube-button orange-button me-2" (click)="selectFrame()">Use this frame</button>
+      <button i18n type="button" class="peertube-button primary-button me-2" (click)="selectFrame()">Use this frame</button>

-      <button i18n type="button" i18n class="peertube-button grey-button" (click)="resetSelectFromVideo()">Cancel</button>
+      <button i18n type="button" i18n class="peertube-button secondary-button" (click)="resetSelectFromVideo()">Cancel</button>
    }
    @else {
      <my-reactive-file
@ -28,7 +28,7 @@
      </my-reactive-file>

      @if (canSelectFromVideo()) {
-        <button i18n type="button" class="peertube-button grey-button ms-2" (click)="selectFromVideo()">Select from video</button>
+        <button i18n type="button" class="peertube-button secondary-button ms-2" (click)="selectFromVideo()">Select from video</button>
      }
    }

--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@ -99,7 +99,7 @@ p-calendar {

 .button-file {
  @include peertube-button-file(max-content);
-  @include orange-button;
+  @include primary-button;
 }

 .hide-chapter-label {
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
@ -57,7 +57,7 @@

  <div class="submit-container">
    <my-button
-      theme="orange" i18n-label label="Update" icon="circle-tick"
+      theme="primary" i18n-label label="Update" icon="circle-tick"
      (click)="updateSecondStep()" [disabled]="!form.valid || isUpdatingVideo === true"
    ></my-button>
  </div>
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
@ -64,7 +64,7 @@

  <div class="submit-container">
    <my-button
-      theme="orange" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
+      theme="primary" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
      [disabled]="!form.valid || isUpdatingVideo === true"
    ></my-button>
  </div>
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
@ -62,7 +62,7 @@

  <div class="submit-container">
    <my-button
-      theme="orange" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
+      theme="primary" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
      [disabled]="!form.valid || isUpdatingVideo === true"
    ></my-button>
  </div>
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@ -49,16 +49,8 @@ $width-size: 275px;
    @include peertube-input-text($width-size);
  }

-  input[type=button] {
-    width: $width-size;
-    margin-top: 30px;
-
-    @include peertube-button;
-    @include orange-button;
-  }
-
  .button-file {
    @include peertube-button-file(max-content);
-    @include orange-button;
+    @include primary-button;
  }
 }
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
@ -42,7 +42,7 @@
      </div>

      <div class="form-group upload-audio-button">
-        <my-button theme="orange" [label]="getAudioUploadLabel()" icon="upload" (click)="uploadAudio()"></my-button>
+        <my-button theme="primary" [label]="getAudioUploadLabel()" icon="upload" (click)="uploadAudio()"></my-button>
      </div>
    </ng-container>
  </div>
@ -71,7 +71,7 @@
    <div i18n *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>

    <my-button
-      theme="orange" i18n-label label="Publish" icon="circle-tick"
+      theme="primary" i18n-label label="Publish" icon="circle-tick"
      (click)="updateSecondStep()" (keydown.enter)="updateSecondStep()" [disabled]="isPublishingButtonDisabled()"
    ></my-button>
  </div>
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@ -1,8 +1,8 @@
 <ng-template #AlertButtons>
  @if (isContactFormEnabled) {
-    <a i18n routerLink="/about/contact" class="peertube-button-link orange-button mt-2">Contact us</a>
+    <a i18n routerLink="/about/contact" class="peertube-button-link primary-button mt-2">Contact us</a>
  } @else {
-    <a i18n routerLink="/about/instance" class="peertube-button-link orange-button mt-2">Read instance rules for help</a>
+    <a i18n routerLink="/about/instance" class="peertube-button-link primary-button mt-2">Read instance rules for help</a>
  }
 </ng-template>

--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@ -44,7 +44,7 @@

    <div class="submit-container">
      <my-button
-        theme="orange" i18n-label label="Update" icon="circle-tick" (click)="update()" (keydown.enter)="update()"
+        theme="primary" i18n-label label="Update" icon="circle-tick" (click)="update()" (keydown.enter)="update()"
        [disabled]="!form.valid || isUpdatingVideo === true"
      ></my-button>
    </div>
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@ -50,7 +50,7 @@
      Cancel
    </button>

-    <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [disabled]="!form.valid || addingComment">
+    <button *ngIf="isAddButtonDisplayed()" class="peertube-button primary-button" [disabled]="!form.valid || addingComment">
      {{ addingCommentButtonValue }}
    </button>
  </div>
@ -75,11 +75,11 @@

  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
      (click)="hideModals()" (key.enter)="hideModals()"
    >

-    <my-login-link i18n-label label="Login to comment" className="peertube-button-link orange-button"></my-login-link>
+    <my-login-link i18n-label label="Login to comment" className="peertube-button-link primary-button"></my-login-link>
  </div>
 </ng-template>

--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@ -24,8 +24,8 @@
    display: inline-block;
    transition: ease-in .2s opacity;
    width: 12px;
-    position: relative;
-    top: -3px;
+    height: 12px;
+    line-height: 12px;

    @include margin-left(5px);
  }
--- a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
@ -10,7 +10,7 @@
    <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
  </div>

-  <button i18n class="ms-2 peertube-button orange-button" (click)="acceptedPrivacyConcern()">
+  <button i18n class="ms-2 peertube-button primary-button" (click)="acceptedPrivacyConcern()">
    OK
  </button>
 </div>
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@ -10,11 +10,11 @@
    @if (!loggedIn) {
      <my-button theme="tertiary" rounded="true" class="me-3" icon="cog" (click)="openQuickSettings()"></my-button>

-      <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button peertube-button-link text-truncate d-block">
+      <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link secondary-button w-100 text-truncate me-3">
        <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
      </a>

-      <my-login-link className="peertube-button-link orange-button w-100 text-truncate"></my-login-link>
+      <my-login-link className="peertube-button-link primary-button w-100 text-truncate"></my-login-link>
    } @else {
      <my-notification-dropdown class="me-3" (navigate)="onActiveLinkScrollToAnchor($event)"></my-notification-dropdown>

@ -54,14 +54,14 @@
          >
            <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
            <span i18n>Interface:</span>
-            <span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
+            <span class="ms-auto ps-2 muted">{{ currentInterfaceLanguage }}</span>
          </button>

          <a ngbDropdownItem class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
            #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
            <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
            <span i18n>Videos:</span>
-            <span class="ms-auto muted">{{ videoLanguages.join(', ') }}</span>
+            <span class="ms-auto ps-2 muted">{{ videoLanguages.join(', ') }}</span>
          </a>

          <a ngbDropdownItem class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
@ -71,14 +71,14 @@
            <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="eye-open" aria-hidden="true"></my-global-icon>
            <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="eye-close" aria-hidden="true"></my-global-icon>
            <span i18n>Sensitive:</span>
-            <span class="ms-auto muted">{{ nsfwPolicy }}</span>
+            <span class="ms-auto ps-2 muted">{{ nsfwPolicy }}</span>
          </a>

          <button class="dropdown-item" (mousedown)="$event.stopPropagation(); toggleUseP2P()" [ariaPressed]="user.p2pEnabled" ngbDropdownItem>
            <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
            <ng-container i18n>Help share videos</ng-container>

-            <my-input-switch inputName="p2p-enabled" class="ms-auto" [preventUpdate]="true" [checked]="user.p2pEnabled"></my-input-switch>
+            <my-input-switch inputName="p2p-enabled" class="ms-auto ps-2" [preventUpdate]="true" [checked]="user.p2pEnabled"></my-input-switch>
          </button>

          <div class="dropdown-divider"></div>
--- a/client/src/app/header/notification-dropdown.component.scss
+++ b/client/src/app/header/notification-dropdown.component.scss
@ -121,9 +121,11 @@
    font-size: 10px;
    font-weight: $font-semibold;

-    border-radius: 15px;
-    width: 15px;
-    height: 15px;
+    border-radius: 16px;
+    width: 16px;
+    height: 16px;
+
+    line-height: 1;

    @media screen and (max-width: $mobile-view) {
      top: -4px;
--- a/client/src/app/menu/language-chooser.component.html
+++ b/client/src/app/menu/language-chooser.component.html
@ -7,7 +7,7 @@
  </div>


-  <a i18n class="help-to-translate" target="_blank" rel="noreferrer noopener" href="https://github.com/Chocobozzz/PeerTube/blob/develop/support/doc/translation.md">
+  <a i18n class="peertube-button-link primary-button rounded-0" target="_blank" rel="noreferrer noopener" href="https://github.com/Chocobozzz/PeerTube/blob/develop/support/doc/translation.md">
    Help to translate PeerTube!
  </a>

--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@ -1,18 +1,6 @@
@use '_variables' as *;
@use '_mixins' as *;

-.help-to-translate {
-  border-radius: 0;
-
-  @include peertube-button-link;
-  @include orange-button;
-
-  &:focus-visible,
-  &:focus {
-    box-shadow: none;
-  }
-}
-
 .modal-body {
  text-align: center;

--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@ -36,7 +36,11 @@
  border-radius: 100%;
  background-color: pvar(--secondary-400);

-  @include button-with-icon(20px, 0, -1px, 1px);
+  @include button-with-icon(20px, 0, 0, 1px);
+
+  my-global-icon {
+    margin: auto;
+  }

  &:hover {
    opacity: 0.8;
@ -88,20 +92,6 @@
  background-color: pvar(--secondary-300);
 }

-.collapsed {
-  .main-menu-wrapper {
-    max-height: 100%;
-  }
-
-  .main-menu {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-}
-
 .menu-link,
 .menu-button,
 .block-title,
@ -122,8 +112,26 @@
  }
 }

-.collapsed .toggle-menu-container {
-  text-align: center;
+.collapsed {
+  .main-menu-wrapper {
+    max-height: 100%;
+  }
+
+  .main-menu {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .toggle-menu-container {
+    text-align: center;
+  }
+
+  .menu-link {
+    justify-content: center;
+  }
 }

 .block-title {
@ -140,7 +148,7 @@
  color: #2b2f32;
  white-space: normal;
  word-break: break-word;
-  transition: background-color .1s ease-inF-out;
+  transition: background-color .1s ease-in-out;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
@ -159,6 +167,7 @@
  my-global-icon {
    width: 22px;
    height: 22px;
+    line-height: 22px;
    position: relative;
    top: -1px;
    color: pvar(--secondary);
@ -169,10 +178,6 @@
  }
 }

-.menu-container.collapsed .menu-link {
-  justify-content: center;
-}
-
 .menu-button {
  margin-top: 0.5rem;
 }
--- a/client/src/app/modal/account-setup-warning-modal.component.html
+++ b/client/src/app/modal/account-setup-warning-modal.component.html
@ -27,12 +27,12 @@
    </my-peertube-checkbox>

    <input
-      type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Close" class="peertube-button secondary-button"
      (click)="hide()" (key.enter)="hide()"
    >

    <a i18n (click)="hide()" (key.enter)="hide()"
-       class="peertube-button-link orange-button" routerLink="/my-account"
+       class="peertube-button-link primary-button" routerLink="/my-account"
       rel="noopener noreferrer" ngbAutofocus>
      Set up
    </a>
--- a/client/src/app/modal/admin-welcome-modal.component.html
+++ b/client/src/app/modal/admin-welcome-modal.component.html
@ -72,12 +72,12 @@

  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Remind me later" class="peertube-button secondary-button"
      (click)="hide()" (key.enter)="hide()"
    >

    <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
-       class="peertube-button-link orange-button" href="/admin/config/edit-custom" target="_blank"
+       class="peertube-button-link primary-button" href="/admin/config/edit-custom" target="_blank"
       rel="noopener noreferrer" ngbAutofocus>
      Configure my instance
    </a>
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@ -31,13 +31,13 @@

  <div class="modal-footer inputs">
    <input
-      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
      (click)="dismiss()" (key.enter)="dismiss()"
    >

    <input
      ngbAutofocus
-      type="submit" [value]="confirmButtonText" class="peertube-button orange-button" [disabled]="isConfirmationDisabled()"
+      type="submit" [value]="confirmButtonText" class="peertube-button primary-button" [disabled]="isConfirmationDisabled()"
      (click)="close()" (key.enter)="confirm()"
    >
  </div>
--- a/client/src/app/modal/custom-modal.component.html
+++ b/client/src/app/modal/custom-modal.component.html
@ -11,12 +11,12 @@

  <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
    <input
-      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button grey-button"
+      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button secondary-button"
      (click)="onCancelClick()" (key.enter)="onCancelClick()"
    >

    <input
-      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button orange-button"
+      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button primary-button"
      (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
    >
  </div>
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@ -37,11 +37,11 @@
    </my-peertube-checkbox>

    <input
-      type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
+      type="button" role="button" i18n-value value="Close" class="peertube-button secondary-button"
      (click)="hide()" (key.enter)="hide()"
    >

-    <a i18n class="peertube-button-link orange-button" ngbAutofocus
+    <a i18n class="peertube-button-link primary-button" ngbAutofocus
       href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">
       Configure
    </a>
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@ -38,7 +38,7 @@
      <td class="action-cell">
        <my-action-dropdown
          [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
-          i18n-label label="Actions" [actions]="abuseActions" [entry]="abuse"
+          i18n-label label="Actions" [actions]="abuseActions" [entry]="abuse" buttonSize="small"
        ></my-action-dropdown>
      </td>

@ -133,7 +133,7 @@
      <td class="abuse-messages">
        <button
          *ngIf="isLocalAbuse(abuse)" (click)="openAbuseMessagesModal(abuse)"
-          class="peertube-button grey-button"
+          class="peertube-button secondary-button"
          [ariaLabel]="getSendMessageButtonLabel(abuse)"
          [title]="getSendMessageButtonLabel(abuse)"
        >
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
@ -43,7 +43,7 @@
      </div>

      <div class="form-group inputs">
-        <input type="submit" i18n-value value="Add a message" class="peertube-button orange-button" [disabled]="!form.valid || sendingMessage">
+        <input type="submit" i18n-value value="Add a message" class="peertube-button primary-button" [disabled]="!form.valid || sendingMessage">
      </div>
    </form>

--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
@ -25,11 +25,11 @@

      <div class="form-group inputs">
        <input
-          type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
          (click)="hide()" (key.enter)="hide()"
        >

-        <input type="submit" i18n-value value="Update this comment" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value value="Update this comment" class="peertube-button primary-button" [disabled]="!form.valid" />
      </div>
    </form>
  </div>
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@ -33,6 +33,7 @@

 .actor-img-edit-button {
  border-radius: 50%;
+  padding: 8px 20px;

  position: absolute;
  bottom: 5px;
--- a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
@ -8,7 +8,7 @@
 .actor-img-edit-button {
  @include peertube-button-file(31px);
  @include button-with-icon(19px, 0);
-  @include orange-button;
+  @include primary-button;

  & {
    display: flex;
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
@ -32,8 +32,8 @@ export class ButtonMarkupComponent implements CustomMarkupComponent {

  getClasses () {
    const additionalClass = this.theme === 'primary'
-      ? 'orange-button'
-      : 'grey-button'
+      ? 'primary-button'
+      : 'secondary-button'

    return [ 'peertube-button-link', additionalClass ]
  }
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@ -62,8 +62,8 @@ export class ReactiveFileComponent implements OnInit, OnChanges, ControlValueAcc
  buildClasses () {
    this.classes = {
      'with-icon': !!this.icon,
-      'orange-button': this.theme === 'primary',
-      'grey-button': this.theme === 'secondary'
+      'primary-button': this.theme === 'primary',
+      'secondary-button': this.theme === 'secondary'
    }
  }

--- a/Show More
+++ b/Show More