39 files changed, 134 insertions, 193 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index d77e44a9d..3b43a4a4d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -25,7 +25,6 @@ textarea {
 
 .no-messages {
   display: flex;
-  font-size: 15px;
   justify-content: center;
 }
 
@@ -45,10 +44,6 @@ textarea {
     color: var(--mainForegroundColor);
     background-color: var(--greyBackgroundColor);
 
-    .content {
-      font-size: 15px;
-    }
-
     .date {
       font-size: 13px;
       color: var(--greyForegroundColor);
diff --git 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
index 7fd9f057e..b8e6136fb 100644
--- 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
@@ -30,7 +30,6 @@ my-actor-avatar {
 }
 
 .actor-info-followers {
-  font-size: 15px;
   padding-bottom: .5rem;
 }
 
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
index c285b6cc3..ba025da4d 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
@@ -1,7 +1,7 @@
 <ng-template #img>
-  <img *ngIf="previewImage || avatarUrl || !initial" [class]="getClass('avatar')" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
+  <img *ngIf="previewImage || avatarUrl || !initial" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
 
-  <div *ngIf="!avatarUrl && initial" [ngClass]="getClass('initial')">
+  <div *ngIf="!avatarUrl && initial" [ngClass]="classes">
     <span>{{ initial }}</span>
   </div>
 </ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 600984aa2..fa4f1e51f 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { VideoChannel } from '../shared-main'
 import { Account } from '../shared-main/account/account.model'
 
@@ -15,7 +15,7 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '
   styleUrls: [ './actor-avatar.component.scss' ],
   templateUrl: './actor-avatar.component.html'
 })
-export class ActorAvatarComponent {
+export class ActorAvatarComponent implements OnChanges {
   private _title: string
 
   @Input() account: ActorInput
@@ -42,6 +42,8 @@ export class ActorAvatarComponent {
     return ''
   }
 
+  classes: string[] = []
+
   get alt () {
     if (this.account) return $localize`Account avatar`
     if (this.channel) return $localize`Channel avatar`
@@ -68,20 +70,18 @@ export class ActorAvatarComponent {
     return name.slice(0, 1)
   }
 
-  getClass (type: 'avatar' | 'initial') {
-    const base = [ 'avatar' ]
+  ngOnChanges () {
+    this.classes = [ 'avatar' ]
 
-    if (this.size) base.push(`avatar-${this.size}`)
+    if (this.size) this.classes.push(`avatar-${this.size}`)
 
-    if (this.channel) base.push('channel')
-    else base.push('account')
+    if (this.channel) this.classes.push('channel')
+    else this.classes.push('account')
 
-    if (type === 'initial' && this.initial) {
-      base.push('initial')
-      base.push(this.getColorTheme())
+    if (!this.avatarUrl && this.initial) {
+      this.classes.push('initial')
+      this.classes.push(this.getColorTheme())
     }
-
-    return base
   }
 
   hasActor () {
diff --git a/client/src/app/shared/shared-forms/input-text.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
index 8baeec21d..ae8bf5fec 100644
--- a/client/src/app/shared/shared-forms/input-text.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -9,8 +9,6 @@ input {
 
 .btn {
   @include button-with-icon(18px);
-
-  font-size: 15px;
 }
 
 .copy-text {
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 5939bb999..421c8cbcc 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -102,7 +102,6 @@ $input-border-radius: 3px;
   min-height: 75px;
   padding: $base-padding;
   overflow-y: auto;
-  font-size: 15px;
   word-wrap: break-word;
 }
 
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index 38a48a2a5..cd06e75ba 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -34,9 +34,9 @@
   </div>
 
   <div class="ms-4 d-flex flex-column">
-    <small class="wrapper mt-2 muted">
+    <div class="wrapper form-group-description">
       <ng-content select="description"></ng-content>
-    </small>
+    </div>
 
     <span class="wrapper mt-3">
       <ng-content select="extra"></ng-content>
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index 5fe20c3a5..ac9127677 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -6,12 +6,7 @@
 
   label {
     display: flex;
-    align-items: center;
-
-    .label-text {
-      font-weight: $font-regular;
-      margin: 0;
-    }
+    font-size: $form-input-font-size;
 
     input {
       @include peertube-checkbox(1px);
@@ -23,12 +18,11 @@
   }
 
   my-help {
-    position: relative;
-    top: 2px;
+    line-height: 17px;
   }
 
-  small {
-    font-size: 90%;
+  .form-group-description {
+    margin-top: 2px;
   }
 
   .wrapper:empty {
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 27d6fa173..e69a06947 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,7 +4,6 @@
 p-inputmask {
   ::ng-deep input {
     width: 80px;
-    font-size: 15px;
 
     &:focus-within,
     &:focus {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.scss b/client/src/app/shared/shared-icons/global-icon.component.scss
index 6795d6628..10180829f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.scss
+++ b/client/src/app/shared/shared-icons/global-icon.component.scss
@@ -3,4 +3,9 @@
     width: inherit;
     height: inherit;
   }
+
+  .feather-flag {
+    margin-left: -1px;
+  }
 }
+
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index 0da7aede9..c8e288462 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -12,6 +12,5 @@
 }
 
 .block {
-  font-size: 15px;
   margin-bottom: 15px;
 }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss
index 105a7681f..bfae0c112 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.scss
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss
@@ -33,7 +33,6 @@ table {
 
   caption {
     caption-side: top;
-    font-size: 15px;
     font-weight: $font-semibold;
     color: pvar(--mainForegroundColor);
   }
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 10dae68f0..017355bd0 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -39,7 +39,7 @@
           </span>
 
           <h6
-            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
             class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
           >
             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 67ac6e1aa..749773f8a 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -48,7 +48,7 @@ export class ActionDropdownComponent<T> {
     return actions.some(a => {
       if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
 
-      return a.isDisplayed === undefined || a.isDisplayed(entry)
+      return a.isHeader !== true && (a.isDisplayed === undefined || a.isDisplayed(entry))
     })
   }
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 3e558bbb8..3e3728623 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,8 +1,8 @@
-<span *ngIf="!routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
+<div *ngIf="!routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" tabindex="0">
   <ng-container *ngTemplateOutlet="content"></ng-container>
-</span>
+</div>
 
-<a *ngIf="routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" [routerLink]="routerLink">
+<a *ngIf="routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" [routerLink]="routerLink">
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>
 
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index cdd75d525..7f0cdf1ed 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -16,7 +16,6 @@
 }
 
 :host {
-  outline: none;
   display: inline-block;
 }
 
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 476057823..10d67831f 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 
 @Component({
@@ -7,7 +7,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
   templateUrl: './button.component.html'
 })
 
-export class ButtonComponent {
+export class ButtonComponent implements OnChanges {
   @Input() label = ''
   @Input() className = 'grey-button'
   @Input() icon: GlobalIconName = undefined
@@ -17,8 +17,10 @@ export class ButtonComponent {
   @Input() disabled = false
   @Input() responsiveLabel = false
 
-  getClasses () {
-    return {
+  classes: { [id: string]: boolean } = {}
+
+  ngOnChanges () {
+    this.classes = {
       [this.className]: true,
       disabled: this.disabled,
       'icon-only': !this.label,
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 0049dfa64..28aacbbff 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -25,10 +25,6 @@ export class EditButtonComponent implements OnInit {
     // <my-edit-button label /> Use default label
     if (this.label === '') {
       this.label = $localize`Update`
-
-      if (!this.title) {
-        this.title = this.label
-      }
     }
   }
 }
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
index 7dcba2ca5..2aa176e1b 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
@@ -5,28 +5,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
 
-  my-global-icon {
-    width: 32px;
-    align-self: flex-start;
+my-global-icon {
+  @include apply-svg-color(pvar(--mainColor));
 
-    ::ng-deep {
-      svg {
-        fill: #0c5460;
-      }
-    }
+  width: 32px;
+  align-self: flex-start;
 
-    + div {
-      margin-left: 10px;
-      text-align: center;
+  + div {
+    margin-left: 10px;
+    text-align: center;
+  }
+}
 
-      a.channels-settings-link {
-        @include peertube-button-link;
-        @include grey-button;
+.channels-settings-link {
+  @include peertube-button-link;
+  @include grey-button;
 
-        height: fit-content;
-        margin-top: 10px;
-      }
-    }
-  }
+  height: fit-content;
+  margin-top: 10px;
 }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index ae57ca5b7..386d26116 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,13 +1,7 @@
 <div class="root">
   <div class="input-group has-clear">
-    <input
-      #ref
-      type="text"
-      [(ngModel)]="value"
-      (keyup.enter)="sendSearch()"
-      [hidden]="!inputShown"
-      [name]="name"
-      [placeholder]="placeholder"
+    <input #ref type="text" class="last-in-group"
+      [(ngModel)]="value" (keyup.enter)="sendSearch()" [hidden]="!inputShown" [name]="name" [placeholder]="placeholder"
     >
 
     <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index 70571bde6..f3e86ce78 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .user-quota {
   label {
     @include margin-right(5px);
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 15632f654..131110318 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -48,7 +48,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td colspan="3">
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No account found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index cabf0e9dd..bc47bf26f 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -50,7 +50,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td colspan="3">
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No server found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
index 2c46c3d03..376fb1693 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
@@ -2,7 +2,6 @@
 @use '_mixins' as *;
 
 .description {
-  font-size: 15px;
   margin-bottom: 15px;
 }
 
diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss
index 3061bbf15..7726eca11 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -6,6 +6,5 @@ textarea {
 }
 
 .live-info {
-  font-size: 15px;
   margin: 40px 0 20px;
 }
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 611291981..456309d2d 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -34,6 +34,10 @@ my-input-text {
   margin-top: 20px;
 }
 
+.alert-private {
+  margin-top: 0;
+}
+
 .filters {
   margin-top: 30px;
 
@@ -46,7 +50,6 @@ my-input-text {
     justify-content: center;
     align-items: center;
     margin-top: 20px;
-    font-size: 16px;
     font-weight: $font-semibold;
     cursor: pointer;
   }
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
index 2fc245ace..da8202594 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index ccd7f8f4b..85b27a4ff 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -42,7 +42,7 @@
       i18n-labelText labelText="Help share videos being played"
     >
       <ng-container ngProjectAs="description">
-        <span i18n>The <a routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
+        <span i18n>The <a class="link-orange" routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
       </ng-container>
     </my-peertube-checkbox>
   </div>
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
index a39e7cf1f..163c899d3 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index a6d851315..0e09c2697 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -1,5 +1,5 @@
 <div
-  class="btn-group-subscribe btn-group"
+  class="btn-group-subscribe btn-group" role="group"
   [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
 >
 
@@ -20,17 +20,11 @@
   </ng-template>
 
   <ng-template #userLoggedIn>
-    <button
-      *ngIf="!isAllChannelsSubscribed" type="button"
-      class="btn btn-sm" (click)="subscribe()"
-    >
+    <button *ngIf="!isAllChannelsSubscribed" type="button" class="btn" (click)="subscribe()">
       <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
     </button>
 
-    <button
-      *ngIf="isAllChannelsSubscribed" type="button"
-      class="btn btn-sm" role="button"
-      (click)="unsubscribe()">
+    <button *ngIf="isAllChannelsSubscribed" type="button" class="btn" role="button" (click)="unsubscribe()">
       <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
     </button>
   </ng-template>
@@ -43,7 +37,7 @@
     class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto"
     role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
   >
-    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
+    <button class="btn dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
       <ng-container
         *ngIf="!isUserLoggedIn(); then userLoggedOut">
       </ng-container>
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index da8eaf646..889596b62 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -3,14 +3,10 @@
 
 .btn-group-subscribe {
   @include peertube-button;
-  @include disable-default-a-behaviour;
 
-  float: right;
-  padding: 0;
-
-  > .btn,
-  > .dropdown > .dropdown-toggle {
-    font-size: 15px;
+  button.dropdown-toggle {
+    font-size: $button-font-size;
+    line-height: 1.2;
   }
 
   &:not(.big) {
@@ -38,7 +34,7 @@
 
   // Unlogged
   > .dropdown > .dropdown-toggle span {
-    @include padding-right(3px);
+    @include padding-right(5px);
   }
 
   // Logged
@@ -65,9 +61,11 @@
       @include padding-left(5px);
     }
   }
+
   &.unsubscribe-button {
     .btn {
       @include grey-button;
+
       font-weight: 600;
     }
   }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index eb9c57b2f..407bdadf2 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -10,7 +10,6 @@
   justify-content: center;
   align-items: center;
   margin-top: 20px;
-  font-size: 16px;
   font-weight: 600;
   cursor: pointer;
 
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index 6a968ed5c..a4e51982c 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -3,7 +3,6 @@
 
 .root {
   margin-bottom: 45px;
-  font-size: 15px;
 }
 
 .first-row {
@@ -49,7 +48,6 @@
 
   border-radius: 24px;
   padding: 4px 15px;
-  font-size: 16px;
   margin-bottom: 15px;
   cursor: pointer;
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 80b418c87..a397efdca 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -4,6 +4,10 @@
 
 $more-button-width: 40px;
 
+.video-miniature {
+  font-size: 14px;
+}
+
 .video-miniature-name {
   @include miniature-name;
 }
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
index 209201a5c..5e3df5a98 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
@@ -54,9 +54,9 @@ $margin-top: 30px;
 }
 
 .date-title {
-  font-size: 16px;
   font-weight: $font-semibold;
   margin-bottom: 20px;
+  font-size: 1rem;
 
   // Make the element span a full grid row within .videos grid
   grid-column: 1 / -1;
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index bd5d37196..6d787796a 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -30,12 +30,10 @@
       </div>
 
       <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
-        <div class="labels">
-          <div i18n>Start at</div>
-          <div i18n>Stop at</div>
-        </div>
+        <div class="header-label" i18n>Start at</div>
+        <div class="header-label" i18n>Stop at</div>
 
-        <div *ngFor="let element of buildOptionalRowElements(playlist)">
+        <ng-container *ngFor="let element of buildOptionalRowElements(playlist)">
           <my-peertube-checkbox
             [inputName]="getOptionalInputName(playlist, element)"
             [ngModel]="element.enabled" [onPushWorkaround]="true"
@@ -55,7 +53,7 @@
             (inputBlur)="onElementTimestampUpdate(playlist, element)"
             #stopAt
           ></my-timestamp-input>
-        </div>
+        </ng-container>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 7db469d7c..de2f1032b 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-$optional-rows-checkbox-width: 34px;
-$timestamp-width: 50px;
-$timestamp-margin-right: 10px;
-
 .header,
 .dropdown-item,
 .input-container {
@@ -52,12 +48,12 @@ $timestamp-margin-right: 10px;
   }
 }
 
-.primary-row,
-.optional-rows > div {
+.primary-row {
   display: flex;
 
   my-peertube-checkbox {
     @include margin-right(10px);
+
     align-self: center;
   }
 
@@ -84,41 +80,30 @@ $timestamp-margin-right: 10px;
       height: 19px;
     }
   }
-
-  my-timestamp-input {
-    @include margin-right($timestamp-margin-right);
-
-    ::ng-deep .ui-inputtext {
-      padding: 0;
-      width: $timestamp-width;
-    }
-  }
 }
 
 .optional-rows {
-  > div {
-    padding: 8px 5px 5px 10px;
-  }
+  display: grid;
+  grid-template-columns: 35px 80px 80px;
+  row-gap: 3px;
+  column-gap: 10px;
+  align-items: center;
 
   my-peertube-checkbox {
-    @include margin-right(0 !important);
-
-    display: block;
-    width: $optional-rows-checkbox-width;
+    @include margin-left(auto);
   }
 
-  .labels {
-    @include margin-left($optional-rows-checkbox-width);
-
+  .header-label {
     font-size: 13px;
     color: pvar(--greyForegroundColor);
-    padding-top: 5px;
-    padding-bottom: 0;
+    padding-left: 2px;
 
-    div {
-      @include margin-right($timestamp-margin-right);
+    &:nth-child(1) {
+      grid-column: 2;
+    }
 
-      width: $timestamp-width;
+    &:nth-child(2) {
+      grid-column: 3;
     }
   }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index c0cf2d1da..e6b01d33d 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -75,40 +75,6 @@ my-video-thumbnail,
         left: -2px;
       }
     }
-
-    .video-info {
-      display: flex;
-      flex-direction: column;
-      align-self: flex-start;
-      min-width: 0;
-
-      .video-info-header {
-        display: flex;
-        align-items: baseline;
-
-        a {
-          width: auto;
-          padding-right: 5px;
-        }
-
-        .pt-badge {
-          @include margin-right(5px);
-        }
-      }
-
-      .video-info-account,
-      .video-info-timestamp {
-        color: pvar(--greyForegroundColor);
-      }
-    }
-  }
-
-  .video-info-name {
-    @include ellipsis;
-
-    font-size: 18px;
-    font-weight: $font-semibold;
-    display: inline-block;
   }
 
   .more,
@@ -139,6 +105,45 @@ my-video-thumbnail,
   }
 }
 
+.video-info-name {
+  @include ellipsis;
+
+  font-size: 18px;
+  font-weight: $font-semibold;
+  display: inline-block;
+}
+
+.video-info {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  min-width: 0;
+
+  .video-info-header {
+    display: flex;
+    align-items: baseline;
+
+    a {
+      width: auto;
+      padding-right: 5px;
+    }
+
+    .pt-badge {
+      @include margin-right(5px);
+    }
+  }
+
+  .video-info-account,
+  .video-info-timestamp {
+    color: pvar(--greyForegroundColor);
+  }
+}
+
+.video-info-account,
+.video-miniature-created-at-views {
+  font-size: 14px;
+}
+
 .dropdown-menu {
 
   .dropdown-item {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 3956d9282..d43afad28 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
 
   .privacy-date {
     margin-top: 5px;
-    font-size: 13px;
+    font-size: 14px;
 
     .privacy {
       font-weight: $font-semibold;