Cleanup

2024-11-22 16:16:12 +01:00 · 2024-11-22 16:16:12 +01:00 · e346077a94
parent c3aaee5dff
commit e346077a94
70 changed files with 306 additions and 315 deletions
--- a/client/package.json
+++ b/client/package.json
@ -89,7 +89,7 @@
    "buffer": "^6.0.3",
    "chart.js": "^4.3.0",
    "chartjs-plugin-zoom": "~2.0.1",
-    "color-bits": "^1.0.3",
+    "color-bits": "^1.0.4",
    "core-js": "^3.22.8",
    "debug": "^4.3.1",
    "dompurify": "^3.1.6",
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@ -15,8 +15,11 @@

 .middle-title {
  margin-top: 0;
+  text-transform: uppercase;
+  color: pvar(--fg);
+  font-weight: $font-bold;

-  @include in-content-small-title;
+  @include font-size(22px);
  @include margin-bottom(1.5rem);
 }

@ -42,9 +45,6 @@
  .middle-title,
  .section-title {
    display: inline-block;
-  }
-
-  .section-title {
-    color: pvar(--fg);
+    color: pvar(--fg-400);
  }
 }
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@ -4,15 +4,9 @@
  </div>
 </ng-template>

-<h1 class="title-page-v2">
-  <strong class="underline-orange">{{ instanceName }}</strong>
-
-  >
-
-  <ng-container i18n>Login</ng-container>
-</h1>
-
 <div class="margin-content">
+  <h1 class="title-page" i18n>Login on {{ instanceName }}</h1>
+
  <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">

    <my-alert type="primary">
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@ -18,7 +18,6 @@ input[type=email] {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
-  margin: auto;

  > div {
    flex: 1 1;
@ -32,8 +31,7 @@ my-alert {

 my-alert {
  display: block;
-
-  @include margin(0, auto, 2rem);
+  margin-bottom: 2rem;
 }

 .login-form-and-externals {
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@ -124,10 +124,10 @@
  }

  .video-channel-display-name {
-    font-size: $video-miniature-row-mobile-name-font-size;
+    font-size: $miniature-fs-mobile-big;
  }

  .video-channel-name {
-    font-size: $video-miniature-row-mobile-info-font-size;
+    font-size: $miniature-fs-mobile-medium;
  }
 }
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@ -5,10 +5,12 @@
 $index-block-height: 40px;

 header {
-  margin-bottom: 30px;
-  padding-bottom: 25px;
  width: 100%;
-  background-color: pvar(--primary-50);
+  background-color: pvar(--primary-150);
+  border-radius: 5px;
+
+  @include rfs(2rem, margin-bottom);
+  @include rfs(2rem, padding);
 }

 .header-steps {
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@ -1,16 +1,10 @@
-<div>
+<div class="margin-content">

-  <div class="margin-content signup-disabled" *ngIf="signupDisabled">
+  <div class="signup-disabled" *ngIf="signupDisabled">
    <my-alert type="warning" i18n>Signup is not enabled on this instance.</my-alert>
  </div>

  <ng-container *ngIf="!signupDisabled">
-    <h1 class="title-page-v2">
-      <strong class="underline-orange">{{ instanceName }}</strong>
-      >
-      <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
-    </h1>
-
    <div class="register-content">
      <my-custom-stepper linear>

@ -26,7 +20,7 @@
          <my-register-step-about [serverStats]="serverStats" [requiresApproval]="requiresApproval" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>

          <div class="step-buttons">
-            <a i18n class="skip-step underline-orange" routerLink="/login">
+            <a i18n class="skip-step link-primary fw-normal" routerLink="/login">
              <strong>I already have an account</strong>, I log in
            </a>

@ -93,7 +87,7 @@
            <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>

            <div class="skip-step">
-              <button class="underline-orange button-unstyle" (click)="skipChannelCreation()">
+              <button class="link-primary button-unstyle" (click)="skipChannelCreation()">
                <strong i18n>I don't want to create a channel</strong>
              </button>

--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@ -9,12 +9,6 @@ my-signup-step-title strong {
  padding-top: 30vh;
 }

-.title-page-v2 {
-  background-color: pvar(--primary-50);
-  margin: 0;
-  padding-bottom: 10px;
-}
-
 my-instance-about-accordion {
  display: block;
  margin-bottom: 30px;
@ -36,14 +30,6 @@ my-instance-about-accordion {
    font-size: 14px;
  }

-  .underline-orange {
-    color: pvar(--fg);
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
  > button,
  .skip-step {
    margin-top: 20px;
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@ -7,7 +7,7 @@ import { AuthService, ServerService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance/instance-about-accordion.component'
 import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
-import { ServerConfig, ServerStats, UserRegister } from '@peertube/peertube-models'
+import { PeerTubeProblemDocument, ServerConfig, ServerStats, UserRegister } from '@peertube/peertube-models'
 import { LoaderComponent } from '../../shared/shared-main/common/loader.component'
 import { SignupLabelComponent } from '../../shared/shared-main/users/signup-label.component'
 import { SignupStepTitleComponent } from '../shared/signup-step-title.component'
@ -213,7 +213,7 @@ export class RegisterComponent implements OnInit {
      },

      error: err => {
-        this.signupError = err.message
+        this.signupError = (err.body as PeerTubeProblemDocument)?.detail || err.message
      }
    })
  }
--- a/client/src/app/+stats/video/video-stats.component.html
+++ b/client/src/app/+stats/video/video-stats.component.html
@ -1,5 +1,9 @@
 <div class="margin-content">
-  <h1 class="title-page" i18n>{{ video.name }}</h1>
+  <h1 class="title-page">
+    <my-global-icon iconName="stats"></my-global-icon>
+
+    <ng-container i18n>{{ video.name }} statistics</ng-container>
+  </h1>

  <div class="stats-embed">
    <div class="global-stats">
--- a/client/src/app/+stats/video/video-stats.component.scss
+++ b/client/src/app/+stats/video/video-stats.component.scss
@ -46,7 +46,8 @@

  .label,
  .more-info {
-    font-size: 14px;
+    font-size: 1rem;
+    font-weight: $font-semibold;
  }

  .value {
--- a/client/src/app/+stats/video/video-stats.component.ts
+++ b/client/src/app/+stats/video/video-stats.component.ts
@ -27,6 +27,7 @@ import { NgFor, NgIf } from '@angular/common'
 import { NumberFormatterPipe } from '@app/shared/shared-main/common/number-formatter.pipe'
 import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
 import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service'
+import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'

 type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries' | 'regions'

@ -69,7 +70,8 @@ ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg')
    NgbNavContent,
    ChartModule,
    ButtonComponent,
-    NgbNavOutlet
+    NgbNavOutlet,
+    GlobalIconComponent
  ]
 })
 export class VideoStatsComponent implements OnInit {
@ -583,7 +585,7 @@ export class VideoStatsComponent implements OnInit {
  }

  private buildChartColor () {
-    return getComputedStyle(document.body).getPropertyValue('--primary-400')
+    return getComputedStyle(document.body).getPropertyValue('--border-primary')
  }

  private formatXTick (options: {
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@ -1,8 +1,4 @@
 <div class="margin-content">
-  <h1 i18n class="title-page" *ngIf="pagination.totalItems">
-    Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
-  </h1>
-
  <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>

  <div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@ -19,11 +19,6 @@
 }

@media screen and (max-width: $mobile-view) {
-  .title-page {
-    display: block;
-    text-align: center;
-  }
-
  .playlists {
    justify-content: left;

--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@ -4,8 +4,9 @@
@use '_miniature' as *;
@use '_button-mixins' as *;

+$owner-block-bg: pvar(--bg-secondary-350);
+
 .root {
-  --co-global-top-padding: 2rem;
  --co-channel-img-margin: 30px;
  --co-font-size: 16px;
  --co-channel-handle-font-size: 16px;
@ -28,7 +29,6 @@
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;

-  padding-top: var(--co-global-top-padding);
  font-size: var(--co-font-size);

  @include margin-bottom(3rem);
@ -41,7 +41,6 @@
 .channel-description {
  grid-column: 1;
  word-break: break-word;
-  padding-bottom: var(--co-global-top-padding);
 }

 .show-more {
@ -84,8 +83,6 @@
 }

 .owner-block {
-  $owner-block-bg: pvar(--bg-secondary-350);
-
  background-color: $owner-block-bg;
  padding: 30px;
  width: 300px;
@ -146,7 +143,6 @@ my-copy-button {

@media screen and (max-width: 1100px) {
  .root {
-    --co-global-top-padding: 45px;
    --co-channel-img-margin: 15px;
  }

@ -159,7 +155,7 @@ my-copy-button {
  .channel-description:not(.expanded) {
    max-height: 70px;

-    @include fade-text(30px, pvar(--bg-secondary-350));
+    @include fade-text(30px, pvar(--bg));
  }

  .show-more {
@ -182,16 +178,14 @@ my-copy-button {

  .bottom-owner {
    display: block;
-    width: 100%;
    border-bottom: 2px solid $separator-border-color;
-    padding: var(--co-global-top-padding) 45px;
    margin-bottom: 60px;
  }

  .owner-block {
    display: grid;
    width: 100%;
-    padding: 0;
+    padding: 1rem;

    .avatar-row {
      grid-column: 1;
@ -203,7 +197,7 @@ my-copy-button {
      grid-column: 2;
      max-height: 70px;

-      @include fade-text(30px, pvar(--bg));
+      @include fade-text(30px, $owner-block-bg);
    }

    .view-account {
@ -224,7 +218,6 @@ my-copy-button {

@media screen and (max-width: $mobile-view) {
  .root {
-    --co-global-top-padding: 1rem;
    --co-font-size: 14px;
    --co-channel-handle-font-size: 13px;
    --co-owner-handle-font-size: 13px;
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.html
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.html
@ -1,5 +1,9 @@
 <div class="margin-content">
-  <h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
+  <h1 class="title-page">
+    <my-global-icon iconName="film"></my-global-icon>
+
+    <ng-container i18n>Studio for {{ video.name }}</ng-container>
+  </h1>

  <div class="grid-container">
    <form [formGroup]="form">
@ -11,12 +15,12 @@

        <div class="form-group">
          <label i18n for="cutStart">New start</label>
-          <my-timestamp-input inputName="cutStart" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
+          <my-timestamp-input inputName="cutStart" enableBorder="true" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
        </div>

        <div class="form-group">
          <label i18n for="cutEnd">New end</label>
-          <my-timestamp-input inputName="cutEnd" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
+          <my-timestamp-input inputName="cutEnd" enableBorder="true" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
        </div>
      </div>

--- a/client/src/app/+video-studio/edit/video-studio-edit.component.scss
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
@ -52,16 +52,12 @@ my-timestamp-input {
  }
 }

-h1 {
-  font-size: 20px;
-}
-
 h2 {
  font-weight: $font-bold;
  font-size: 16px;
  padding: 0 5px;
  width: fit-content;
-  margin: -8px 0 1rem;
+  margin-top: 0.5rem;
 }

 .section {
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.ts
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.ts
@ -15,6 +15,7 @@ import { ReactiveFileComponent } from '../../shared/shared-forms/reactive-file.c
 import { TimestampInputComponent } from '../../shared/shared-forms/timestamp-input.component'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
+import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'

@Component({
  selector: 'my-video-studio-edit',
@ -29,7 +30,8 @@ import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
    ButtonComponent,
    EmbedComponent,
    NgIf,
-    NgFor
+    NgFor,
+    GlobalIconComponent
  ]
 })
 export class VideoStudioEditComponent extends FormReactive implements OnInit {
--- 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
@ -52,7 +52,7 @@

                    <my-timestamp-input
                      class="me-1"
-                      inputName="segmentStart" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
+                      inputName="segmentStart" enableBorder="true" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
                      [(ngModel)]="segment.startMs" [parser]="timestampParser" [formatter]="timestampFormatter"
                    ></my-timestamp-input>

@ -67,7 +67,7 @@

                    <my-timestamp-input
                      class="me-1"
-                      inputName="segmentEnd" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
+                      inputName="segmentEnd" enableBorder="true" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
                      [(ngModel)]="segment.endMs" [parser]="timestampParser" [formatter]="timestampFormatter"
                    ></my-timestamp-input>

--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@ -262,7 +262,7 @@
                <div class="position">{{ i + 1 }}</div>

                <my-timestamp-input
-                  class="d-block" [disableBorder]="false" [inputName]="'timecode[' + i + ']'"
+                  class="d-block" enableBorder="true" [inputName]="'timecode[' + i + ']'"
                  [maxTimestamp]="publishedVideo?.duration" formControlName="timecode"
                ></my-timestamp-input>

--- 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
@ -29,6 +29,7 @@
    </div>

    <input
+      class="peertube-button primary-button"
      [disabled]="firstStepPermanentLive !== true && firstStepPermanentLive !== false"
      type="button" i18n-value value="Go Live" (click)="goLive()"
    />
--- 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
@ -13,6 +13,8 @@ $width-size: 275px;
 }

 .first-step-block {
+  --input-bg: #{pvar(--bg-secondary-500)};
+
  display: flex;
  flex-direction: column;
  align-items: center;
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@ -42,15 +42,18 @@
      <ng-container i18n>Instead, <a class="text-decoration-underline alert-link" routerLink="/admin/overview/users">create a dedicated account</a> to upload your videos.</ng-container>
    </my-alert>

+    <my-channels-setup-message></my-channels-setup-message>
+
    <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'"></my-user-quota>

    <div class="title-page" *ngIf="isInSecondStep()">
-      <ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container>
-      <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
+      @if (secondStepType === 'import-url' || secondStepType === 'import-torrent') {
+        <ng-container i18n>Import {{ videoName }}</ng-container>
+      } @else if (secondStepType === 'upload') {
+        <ng-container i18n>Upload {{ videoName }}</ng-container>
+      }
    </div>

-    <my-channels-setup-message></my-channels-setup-message>
-
    <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [activeId]="activeNav" (activeIdChange)="onNavChange($event)" [ngClass]="{ 'hide-nav': !!secondStepType }">
      <ng-container ngbNavItem="upload">
        <a ngbNavLink>
@ -93,6 +96,6 @@
      </ng-container>
    </div>

-    <div [ngbNavOutlet]="nav"></div>
+    <div class="nav-content" [ngbNavOutlet]="nav"></div>
  </div>
 }
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@ -37,10 +37,6 @@ $nav-link-height: 40px;
  }
 }

-.margin-content {
-  padding-top: 20px;
-}
-
 :host ::ng-deep .video-add-nav {
  @include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);

--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@ -1,8 +1,5 @@
 <div class="margin-content">
-  <div class="title-page">
-    <span class="me-1" i18n>Update</span>
-    <a [routerLink]="getVideoUrl()">{{ videoDetails?.name }}</a>
-  </div>
+  <h1 class="title-page" i18n>Update {{ videoDetails?.name }}</h1>

  <my-upload-progress
    [isUploading]="isReplacingVideoFile" [uploadPercents]="videoUploadPercents" [error]="uploadError" [uploaded]="updateDone"
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@ -53,24 +53,17 @@ form {

  ::ng-deep .help-tooltip-button {
    my-global-icon {
+      color: pvar(--input-placeholder);
      height: $markdown-icon-height;
      width: $markdown-icon-width;

      svg {
-        color: pvar(--input-border-color);
-        fill: pvar(--input-border-color);
        border-radius: 3px;
      }
    }

-    &:focus,
-    &:active,
-    &:hover {
-      my-global-icon svg {
-        background-color: pvar(--input-border-color);
-        color: pvar(--bg);
-        fill: pvar(--bg);
-      }
+    &:focus my-global-icon {
+      color: pvar(--input-fg);
    }
  }
 }
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@ -32,7 +32,7 @@

 .highlighted-comment {
  display: inline-block;
-  background-color: pvar(--bg-secondary-500);
+  background-color: pvar(--bg-secondary-400);
  color: pvar(--fg);
  padding: 0 5px;
  font-size: 13px;
@ -48,7 +48,8 @@

 .video-author {
  height: 20px;
-  background-color: #888888;
+  background-color: pvar(--bg-secondary-400);
+  color: pvar(--fg);
  border-radius: 12px;
  margin-bottom: 2px;
  max-width: 100%;
@ -56,7 +57,6 @@
  flex-direction: row;
  align-items: center;
  display: inline-flex;
-  color: #fff !important;

  @include padding-right(6px);
  @include padding-left(6px);
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@ -1,15 +1,16 @@
 <div>
  <div class="title-block">
-    <h2 class="title-page">
+    <h2>
      {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
    </h2>

    <my-feed [syndicationItems]="syndicationItems"></my-feed>

-    <div ngbDropdown class="d-inline-block ms-4 dropdown-root">
-      <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
+    <div ngbDropdown class="d-inline-block ms-auto dropdown-root">
+      <button class="peertube-button tertiary-button" id="dropdown-sort-comments" ngbDropdownToggle i18n>
        SORT BY
      </button>
+
      <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
        <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
        <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
--- 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
@ -16,8 +16,11 @@
 }

 .title-block {
-  .title-page {
-    @include margin-right(0);
+  > h2 {
+    display: inline-block;
+    margin-bottom: 1.5rem;
+
+    @include font-size(1.25rem);
  }

  my-feed {
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
@ -1,7 +1,7 @@
 <div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
  @if (videos.length !== 0) {
    <div class="title-page-container">
-      <h2 i18n class="title-page">Other videos</h2>
+      <h2 i18n>Other videos</h2>

      <div
        *ngIf="!playlist" class="title-page-autoplay"
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
@ -8,9 +8,10 @@
  margin-bottom: 25px;
  flex-wrap: wrap-reverse;

-  .title-page {
-    margin-bottom: unset;
+  > h2 {
+    margin-bottom: 0;
    margin-top: 0;
+    font-size: 1.25rem;

    @include margin-right(.5rem !important);
  }
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@ -107,7 +107,7 @@
      <my-video-attributes [video]="video"></my-video-attributes>

      <my-video-comments
-        class="border-top"
+        class="border-top pt-3"
        [video]="video"
        [videoPassword]="videoPassword"
        [user]="user"
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@ -207,14 +207,14 @@ export class ThemeService {

      const mainColorHSL = toHSLA(parse(mainColor))

-      let lastColorHSL = { ...mainColorHSL }
-
      // Inject in alphabetical order for easy debug
      const toInject: { id: number, key: string, value: string }[] = [
        { id: 500, key: `--${prefix}-500`, value: this.toHSLStr(mainColorHSL) }
      ]

      for (const j of [ -1, 1 ]) {
+        let lastColorHSL = { ...mainColorHSL }
+
        for (let i = 1; i <= 9; i++) {
          const suffix = 500 + (50 * i * j)
          const key = `--${prefix}-${suffix}`
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@ -5,10 +5,11 @@

 .root {
  --co-logo-size: 34px;
+  --co-root-padding: 1.5rem;

  background-color: pvar(--bg);

-  padding: 1.5rem;
+  padding: var(--co-root-padding);
  width: 100%;

  display: flex;
@ -34,6 +35,7 @@
  width: 100%;

  @include ellipsis;
+  @include margin-left(10px);
 }

 .icon-logo {
@ -45,8 +47,6 @@

  background-repeat: no-repeat;
  background-size: contain;
-
-  @include margin-right(10px);
 }

 my-search-typeahead {
@ -135,15 +135,15 @@ my-actor-avatar {

@media screen and (max-width: $small-view) {
  .root {
-    padding: 1rem;
+    --co-root-padding: 1rem;
  }

  my-search-typeahead {
    @include margin-right(0.5rem);
  }

-  .margin-button.tertiary-button {
-    @include margin-right(0);
+  .margin-button[theme=tertiary] {
+    @include margin-right(5px);
  }

  my-actor-avatar {
@ -177,8 +177,8 @@ my-actor-avatar {
  .root {
    --co-logo-size: 48px;

-    padding: 1rem;
    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0.5rem;
    justify-content: space-between;

@ -196,11 +196,15 @@ my-actor-avatar {
  my-search-typeahead {
    grid-row: 2 !important;
    grid-column: 1 / 4;
-    max-width: none;
+    max-width: 100%;

    @include margin-right(0);
  }

+  .peertube-title {
+    @include margin-right(5px)
+  }
+
  .instance-name {
    display: none;
  }
--- a/client/src/app/header/notification-dropdown.component.html
+++ b/client/src/app/header/notification-dropdown.component.html
@ -69,10 +69,11 @@
          [markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()"
        ></my-user-notifications>

-        <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)">
-          <my-global-icon class="me-1" iconName="bell" aria-hidden="true"></my-global-icon>
-          <span i18n>See all your notifications</span>
-        </a>
+        <div class="all-notifications">
+          <a *ngIf="loaded" class="text-decoration-underline" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)" i18n>
+            View all
+          </a>
+        </div>
      </div>
    </div>

--- a/client/src/app/header/notification-dropdown.component.scss
+++ b/client/src/app/header/notification-dropdown.component.scss
@ -50,7 +50,7 @@
        display: flex;
        justify-content: space-between;

-        border-bottom: 1px solid $separator-border-color;
+        border-bottom: 1px solid $separator-border-color-on-secondary;
        align-items: center;
        padding: 0 12px;
        font-size: 14px;
@ -61,17 +61,10 @@
      }

      .all-notifications {
-        border-top: 1px solid pvar(--bg-secondary-300);
+        border-top: 1px solid $separator-border-color-on-secondary;
        margin-top: -1px; // To not have 2 borders with the last notification
        text-align: center;
-        font-weight: $font-semibold;
-        color: pvar(--fg);
        padding: 0.75rem 0;
-        text-decoration: underline !important;
-
-        &:hover {
-          opacity: 0.85;
-        }
      }
    }
  }
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@ -28,7 +28,7 @@
    <!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion -->
    <div *ngIf="showSearchGlobalHelp()" id="typeahead-suggestion-help" class="overflow-hidden">
      <div class="d-flex justify-content-between">
-        <div class="small-title mb-2" i18n>GLOBAL SEARCH</div>
+        <div class="section-label mb-2" i18n>GLOBAL SEARCH</div>

        <span *ngIf="serverConfig" class="muted" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
      </div>
@ -39,7 +39,7 @@
    <!-- search instructions, when search input is empty -->
    <div [hidden]="this.search" id="typeahead-input-help" class="overflow-hidden">
      <span class="muted" i18n>Your query will be matched against video names or descriptions, channel names.</span>
-      <div class="mt-3 mb-2 small-title" i18n>ADVANCED SEARCH</div>
+      <div class="mt-3 mb-2 section-label" i18n>ADVANCED SEARCH</div>

      <ul>
        <li>
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@ -116,10 +116,6 @@
  }
 }

-.small-title {
-  @include in-content-small-title;
-}
-
 my-suggestion {
  width: 100%;
 }
--- a/client/src/app/menu/quick-settings-modal.component.html
+++ b/client/src/app/menu/quick-settings-modal.component.html
@ -9,7 +9,7 @@
  <div class="modal-body">
    <my-alert i18n type="primary">These settings apply only to your session on this instance.</my-alert>

-    <h5 i18n class="mt-4 mb-2">Videos</h5>
+    <h5 i18n class="section-label mt-4 mb-2">VIDEOS</h5>

    <my-user-video-settings
      *ngIf="!isUserLoggedIn()"
@ -17,7 +17,7 @@
    >
    </my-user-video-settings>

-    <h5 i18n class="mt-4 mb-2">Interface</h5>
+    <h5 i18n class="section-label mt-4 mb-2">INTERFACE</h5>

    <my-user-interface-settings
      *ngIf="!isUserLoggedIn()"
--- a/client/src/app/modal/admin-welcome-modal.component.html
+++ b/client/src/app/modal/admin-welcome-modal.component.html
@ -11,19 +11,19 @@
    <div class="block-documentation">
      <div class="columns">
        <a class="link-block" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" i18n-title title="Go to the CLI documentation">
-          <h5 i18n class="underline-orange">CLI documentation</h5>
+          <h5 i18n class="link-primary">CLI documentation</h5>

          <div i18n>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
        </a>

        <a class="link-block" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" i18n-title title="Go to the admin documentation">
-          <h5 i18n class="underline-orange">Admin documentation</h5>
+          <h5 i18n class="link-primary">Admin documentation</h5>

          <div i18n>Managing users, following other instances, dealing with spammers...</div>
        </a>

        <a class="link-block" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" i18n-title title="Go to the user documentation">
-          <h5 i18n class="underline-orange">User documentation</h5>
+          <h5 i18n class="link-primary">User documentation</h5>

          <div i18n>Setup your account, managing video playlists, discover third-party applications...</div>
        </a>
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@ -11,9 +11,7 @@
          class="chip me-1"
        >
          <my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
-          <div>
-            <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
-          </div>
+          <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
        </a>

        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
@ -32,9 +30,7 @@
          class="chip me-1"
        >
          <my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
-          <div>
-            <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
-          </div>
+          <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
        </a>

        <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@ -3,7 +3,7 @@
@use '_miniature' as *;

 .comment-html {
-  background-color: #ececec;
+  background-color: pvar(--bg-secondary-400);
  padding: 10px;
 }

@ -17,5 +17,5 @@
 }

 my-global-icon[iconName=flag] {
-  width: 15px;
+  @include global-icon-size(15px);
 }
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@ -12,7 +12,7 @@ input {
    text-indent: -9999px;
    width: 35px;
    height: 20px;
-    background: #cccccc;
+    background: pvar(--input-bg);
    display: block;
    border-radius: 100px;
    position: relative;
@ -25,7 +25,7 @@ input {
      left: 3px;
      width: 14px;
      height: 14px;
-      background: pvar(--on-primary);
+      background: pvar(--fg-300);
      border-radius: 50%;
      transition: 0.3s ease-out;
    }
@ -41,6 +41,7 @@ input {
    &::after {
      left: calc(100% - 3px);
      transform: translateX(-100%);
+      background: pvar(--on-primary);
    }
  }

--- a/client/src/app/shared/shared-forms/timestamp-input.component.html
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.html
@ -1,5 +1,5 @@
 <p-inputMask
  [disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
-  [ngClass]="{ 'border-disabled': disableBorder }"
+  [ngClass]="{ 'with-border': enableBorder }"
  [mask]="mask" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName"
 ></p-inputMask>
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@ -3,10 +3,16 @@
@use '_form-mixins' as *;

 p-inputmask {
+  &.with-border {
+    --input-border-color: #{pvar(--bg-secondary-500)};
+  }
+
  ::ng-deep input {
    width: 100%;
    text-align: center;

+    @include peertube-input-text(100%);
+
    &:focus-within,
    &:focus {
      box-shadow: $focus-box-shadow-form;
@ -17,16 +23,4 @@ p-inputmask {
      opacity: 0.5;
    }
  }
-
-  &.border-disabled {
-    ::ng-deep input {
-      border: 0;
-    }
-  }
-
-  &:not(.border-disabled) {
-    ::ng-deep input {
-      @include peertube-input-text(100%);
-    }
-  }
 }
--- a/client/src/app/shared/shared-forms/timestamp-input.component.ts
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.ts
@ -23,7 +23,7 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit {
  @Input() timestamp: number

  @Input({ transform: booleanAttribute }) disabled = false
-  @Input({ transform: booleanAttribute }) disableBorder = true
+  @Input({ transform: booleanAttribute }) enableBorder = false

  @Input() inputName: string
  @Input() mask = '99:99:99'
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@ -15,8 +15,7 @@
 }

 my-global-icon {
-  line-height: 24px;
-
+  @include global-icon-size(24px);
  @include margin-right(15px);
 }

--- a/client/src/app/shared/shared-main/menu/horizontal-menu.component.html
+++ b/client/src/app/shared/shared-main/menu/horizontal-menu.component.html
@ -3,7 +3,6 @@
    <my-global-icon *ngIf="h1Icon" [iconName]="h1Icon"></my-global-icon>

    {{ h1 }}
-
  </h1>

  <ng-template #entryTemplate let-item="item">
--- a/client/src/app/shared/shared-main/users/signup-label.component.html
+++ b/client/src/app/shared/shared-main/users/signup-label.component.html
@ -1,2 +1,13 @@
-<ng-container i18n *ngIf="requiresApproval">Request an account</ng-container>
-<ng-container i18n *ngIf="!requiresApproval">Create an account</ng-container>
+@if (withInstanceName) {
+  @if (requiresApproval) {
+    <ng-container i18n>Request an account on {{ instanceName }}</ng-container>
+  } @else {
+    <ng-container i18n>Create an account on {{ instanceName }}</ng-container>
+  }
+} @else {
+  @if (requiresApproval) {
+    <ng-container i18n>Request an account</ng-container>
+  } @else {
+    <ng-container i18n>Create an account</ng-container>
+  }
+}
--- a/client/src/app/shared/shared-main/users/signup-label.component.ts
+++ b/client/src/app/shared/shared-main/users/signup-label.component.ts
@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core'
+import { booleanAttribute, Component, Input } from '@angular/core'
 import { NgIf } from '@angular/common'
+import { ServerService } from '@app/core'

@Component({
  selector: 'my-signup-label',
@ -8,5 +9,13 @@ import { NgIf } from '@angular/common'
  imports: [ NgIf ]
 })
 export class SignupLabelComponent {
-  @Input() requiresApproval: boolean
+  @Input({ transform: booleanAttribute }) requiresApproval: boolean
+  @Input({ transform: booleanAttribute }) withInstanceName = false
+
+  constructor (private server: ServerService) {
+  }
+
+  get instanceName () {
+    return this.server.getHTMLConfig().instance.name
+  }
 }
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@ -48,6 +48,7 @@ my-action-dropdown.show {

 .table-comment-link,
 .table-account-link {
+  text-decoration: none;
  color: pvar(--fg);

  @include disable-outline;
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@ -1,33 +1,34 @@
 <div class="root" [formGroup]="form">

-  <div class="scope-row" *ngIf="totalFollowing && !hideScope">
-    @if (filters.scope === 'local') {
-      <ng-container i18n>Videos on {{ instanceName }}</ng-container>
-    } @else {
-      <ng-container i18n>Videos on {{ instanceName }} and {{ totalFollowing }} other platforms</ng-container>
+  <div class="d-flex flex-wrap mb-3">
+    @for (quickFilter of quickFilters; track quickFilter) {
+      <my-button
+        theme="secondary" [icon]="quickFilter.iconName" class="me-2 mb-2"
+        ptRouterLink="." [ptQueryParams]="quickFilter.filters" [active]="quickFilter.isActive()" ptQueryParamsHandling="merge"
+        (click)="onQuickFilter($event, quickFilter)"
+        >{{ quickFilter.label }} </my-button>
    }
  </div>

-
-  <div class="filters-row">
-    <div class="d-flex flex-wrap">
-      <div class="d-flex flex-wrap me-2">
-        @for (quickFilter of quickFilters; track quickFilter) {
-          <my-button
-            theme="secondary" [icon]="quickFilter.iconName" class="me-2 mb-2"
-            ptRouterLink="." [ptQueryParams]="quickFilter.filters" [active]="quickFilter.isActive()" ptQueryParamsHandling="merge"
-            (click)="onQuickFilter($event, quickFilter)"
-            >{{ quickFilter.label }} </my-button>
+  <div class="d-flex flex-wrap-reverse align-items-start justify-content-between">
+    <div class="me-3">
+      <div class="scope-info" *ngIf="totalFollowing && !hideScope">
+        @if (filters.scope === 'local') {
+          <ng-container i18n>Videos on <strong>{{ instanceName }}</strong></ng-container>
+        } @else {
+          <ng-container i18n>Videos on <strong>{{ instanceName }}</strong> and <strong>{{ totalFollowing }}</strong> other platforms</ng-container>
        }
      </div>

      <div class="filters-summary d-inline-block">
        <div class="d-inline-block active-filters">
          @for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) {
-            <div class="d-inline-block">
-              <span i18n *ngIf="filter.value">{{ filter.label }}: </span>
-              <strong>{{ getFilterValue(filter) || filter.label }}</strong>
-            </div>
+            @if (filter.key !== 'scope') {
+              <div class="d-inline-block">
+                <span i18n *ngIf="filter.value">{{ filter.label }}: </span>
+                <strong>{{ getFilterValue(filter) || filter.label }}</strong>
+              </div>
+            }
          }
        </div>

@ -47,7 +48,7 @@
      </div>
    </div>

-    <div class="d-flex flex-wrap align-items-center ms-3" >
+    <div class="d-flex flex-wrap align-items-center mb-2">
      <label for="sort-videos" i18n class="select-label">Sort by:</label>

      <my-select-options inputId="sort-videos" class="d-inline-block me-2" formControlName="sort" [items]="sortItems"></my-select-options>
--- 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
@ -7,19 +7,15 @@ $filters-background: pvar(--bg-secondary-400);
  --input-bg: #{pvar(--input-bg-in-secondary)};
  --input-border-color: #{pvar(--input-bg-in-secondary)};

-  margin-bottom: 45px;
+  margin-bottom: 1rem;
+
+  // Prevent layout shift
+  min-height: 140px;
 }

-.scope-row {
+.scope-info {
  font-size: 20px;
  color: pvar(--fg-350);
-  margin-bottom: 0.5rem;
-}
-
-.filters-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
 }

 .select-label {
@ -92,6 +88,8 @@ $filters-background: pvar(--bg-secondary-400);
  @include margin-left(0.25rem);

  my-global-icon {
+    color: pvar(--secondary-icon-color);
+
    @include margin-left(5px);
  }

--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
@ -1,24 +1,23 @@
 import { NgClass, NgIf } from '@angular/common'
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { ActivatedRoute, Params, RouterLink } from '@angular/router'
+import { RouterLink } from '@angular/router'
 import { AuthService, RedirectService } from '@app/core'
 import { ServerService } from '@app/core/server/server.service'
 import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'
 import { UserRight, VideoConstant } from '@peertube/peertube-models'
+import { AttributesOnly } from '@peertube/peertube-typescript-utils'
 import debug from 'debug'
-import { Subscription } from 'rxjs'
 import { SelectOptionsItem } from 'src/types'
 import { PeertubeCheckboxComponent } from '../shared-forms/peertube-checkbox.component'
 import { SelectCategoriesComponent } from '../shared-forms/select/select-categories.component'
 import { SelectLanguagesComponent } from '../shared-forms/select/select-languages.component'
 import { SelectOptionsComponent } from '../shared-forms/select/select-options.component'
 import { GlobalIconComponent, GlobalIconName } from '../shared-icons/global-icon.component'
+import { InstanceFollowService } from '../shared-instance/instance-follow.service'
 import { ButtonComponent } from '../shared-main/buttons/button.component'
 import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
 import { VideoFilterActive, VideoFilters } from './video-filters.model'
-import { InstanceFollowService } from '../shared-instance/instance-follow.service'
-import { AttributesOnly } from '@peertube/peertube-typescript-utils'

 const debugLogger = debug('peertube:videos:VideoFiltersHeaderComponent')

--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@ -204,8 +204,8 @@ $more-button-width: 40px;
    margin-bottom: 0.5rem;
  }

-  my-actor-avatar + .owner-label {
-    @include margin-left(0.5rem);
+  my-actor-avatar {
+    @include margin-right(0.5rem);
  }

  .video-actions {
@ -232,5 +232,13 @@ $more-button-width: 40px;
  .video-miniature.display-as-row {
    --co-row-thumbnail-width: #{$video-thumbnail-small-width};
    --co-row-thumbnail-height: #{$video-thumbnail-small-height};
+
+    --co-fs-small: 0.875rem;
+    --co-fs-medium: 0.875rem;
+    --co-fs-big: 1rem;
+
+    my-actor-avatar {
+      display: none;
+    }
  }
 }
--- 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
@ -98,7 +98,7 @@
  display: flex;

  .miniature-name {
-    font-size: $video-miniature-row-name-font-size;
+    font-size: $miniature-fs-row-big;
  }

  .miniature-thumbnail {
@ -121,5 +121,9 @@
  .miniature.display-as-row {
    --co-row-thumbnail-width: #{$video-thumbnail-small-width};
    --co-row-thumbnail-height: #{$video-thumbnail-small-height};
+
+    .miniature-name {
+      font-size: $miniature-fs-mobile-big;
+    }
  }
 }
--- a/client/src/app/shared/standalone-notifications/user-notifications.component.scss
+++ b/client/src/app/shared/standalone-notifications/user-notifications.component.scss
@ -13,16 +13,21 @@
  align-items: center;
  font-size: inherit;
  padding: 15px 5px 15px 10px;
-  border-bottom: 1px solid $separator-border-color;
+  border-bottom: 1px solid $separator-border-color-on-secondary;
  word-break: break-word;

  &.unread {
    background-color: pvar(--bg-secondary-400);
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: pvar(--bg-secondary-350);
  }

  my-global-icon {
    width: 24px;
-    color: pvar(--fg);
+    color: pvar(--secondary-icon-color);

    @include margin-right(11px);
    @include margin-left(3px);
@ -43,6 +48,7 @@

    a {
      font-weight: $font-semibold;
+      text-decoration: underline;
    }
  }

--- a/client/src/assets/images/misc/markdown.svg
+++ b/client/src/assets/images/misc/markdown.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#C6C6C6" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="currentColor" stroke-width="10" fill="none"/><path fill="currentColor" d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@ -51,6 +51,9 @@ body {
  --input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
  --input-bg-in-secondary: #{pvar(--bg-secondary-450)};

+  --input-check-active-fg: #{pvar(--on-primary)};
+  --input-check-active-bg: #{pvar(--primary)};
+
  --input-y-padding: 5px;
  --input-x-padding: 20px;

@ -78,6 +81,10 @@ body {

  --header-height: #{$header-height};

+  @media screen and (max-width: $small-view) {
+    --header-height: #{$header-height-small-view};
+  }
+
  @media screen and (max-width: $mobile-view) {
    --header-height: #{$header-height-mobile-view};
  }
@ -102,6 +109,9 @@ body {
    --secondary-icon-color: hsl(0, 9%, 51%);
    --input-placeholder: hsl(0, 9%, 51%);

+    --input-check-active-fg: #{pvar(--bg)};
+    --input-check-active-bg: #{pvar(--fg-250)};
+
    --alert-primary-fg: #{pvar(--on-primary)};
    --alert-primary-bg: #{pvar(--primary-200)};
    --alert-primary-border-color: #{pvar(--primary-300)};
@ -204,6 +214,14 @@ code {
  vertical-align: middle;
 }

+a {
+  color: inherit;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
 .main-col {
  // Don't use rfs to get exact pixels
  margin-inline-start: $menu-width;
@ -256,16 +274,6 @@ my-global-icon[iconName=external-link] {
  top: -0.1em;
 }

-@media screen and (max-width: #{breakpoint(xl)}) {
-  /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
-  .main-col,
-  .main-col.expanded {
-    .title-page {
-      font-size: 17px;
-    }
-  }
-}
-
@media screen and (max-width: $menu-overlay-view) {
  .menu-open {
    overflow: hidden !important;
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@ -218,6 +218,14 @@ body {
 // Nav
 // ---------------------------------------------------------------------------

+.nav:not(.nav-pills) {
+  --bs-nav-link-padding-x: 0;
+
+  .nav-link {
+    @include margin-right(2rem);
+  }
+}
+
 .nav .nav-link {
  display: flex !important;
  align-items: center;
@ -281,11 +289,15 @@ body {
 .accordion-button {
  font-size: 18px;

+  my-global-icon {
+    color: pvar(--secondary-icon-color);
+  }
+
  &:not(.collapsed) {
    font-weight: $font-bold;

    my-global-icon {
-      color: pvar(--primary-400);
+      color: pvar(--fg);
    }
  }
 }
--- a/client/src/sass/class-helpers/_common.scss
+++ b/client/src/sass/class-helpers/_common.scss
@ -49,7 +49,7 @@

 .callout {
  padding: 1.25rem;
-  border: 1px solid #eee;
+  border: 1px solid pvar(--bg-secondary-400);
  border-radius: 0.25rem;
  position: relative;

@ -57,7 +57,7 @@
    position: relative;
    top: -5px;
    left: -10px;
-    color: #6c757d !important;
+    color: pvar(--fg-400) !important;
    font-size: 1rem;
    font-weight: $font-bold;
    margin-bottom: 0.5rem;
@ -69,7 +69,7 @@
  }

  &.callout-primary {
-    border-color: pvar(--primary-100);
+    border-color: pvar(--primary-350);

    &:not(.callout-light) {
      border-left-color: pvar(--primary);
@ -96,6 +96,10 @@
      color: pvar(--alert-primary-fg) !important;
    }

+    .link-primary {
+      color: inherit !important;
+    }
+
    .secondary-button {
      @include secondary-button(
        $fg: pvar(--alert-primary-fg),
--- a/client/src/sass/class-helpers/_menu.scss
+++ b/client/src/sass/class-helpers/_menu.scss
@ -38,36 +38,15 @@
  }
 }

-.title-page-v2 {
-  font-weight: normal;
-  font-size: 15px;
-  padding: 35px 25px;
-}
-
 .title-page {
-  margin-top: 30px;
-  margin-bottom: 25px;
+  margin-bottom: 1.5rem;
+  color: pvar(--fg-400);

-  color: pvar(--fg);
-  display: inline-block;
-  font-weight: $font-semibold;
-  font-size: 1.25rem;
+  @include font-size(2rem);

-  @include margin-right(55px);
-
-  a {
-    color: inherit;
-
-    @include disable-default-a-behaviour;
-
-    &:hover {
-      color: inherit;
-      opacity: 0.8;
-    }
-  }
-
-  @media screen and (max-width: $mobile-view) {
-    @include margin-left(15px);
+  my-global-icon {
+    @include global-icon-size(28px);
+    @include margin-right(0.5rem);
  }
 }

--- a/client/src/sass/class-helpers/_text.scss
+++ b/client/src/sass/class-helpers/_text.scss
@ -70,13 +70,13 @@
  font-weight: $font-semibold;
  line-height: 1.1;

-  @include underline-orange;
+  @include underline-primary;

  &:hover {
    color: pvar(--fg);
    opacity: 0.8;

-    @include underline-orange;
+    @include underline-primary;
  }
 }

@ -92,10 +92,6 @@
  }
 }

-.underline-orange {
-  @include underline-orange;
-}
-
 .section-label {
  @include section-label;
 }
--- a/client/src/sass/include/_badges.scss
+++ b/client/src/sass/include/_badges.scss
@ -9,6 +9,8 @@
  font-weight: $font-semibold;
  line-height: 1.1;
  max-width: 100%;
+  white-space: normal;
+  word-break: normal;

  &.badge-fs-normal {
    font-size: 100%;
--- a/client/src/sass/include/_form-mixins.scss
+++ b/client/src/sass/include/_form-mixins.scss
@ -86,7 +86,7 @@

      padding: pvar(--input-y-padding) calc(#{pvar(--input-x-padding)} + 23px) pvar(--input-y-padding) pvar(--input-x-padding);
      position: relative;
-      border: 0;
+      border: 0 !important;
      appearance: none;
      text-overflow: ellipsis;

@ -148,9 +148,9 @@
    content: '';
    position: absolute;
    left: 0;
-    top: 0;
-    width: 18px;
-    height: 18px;
+    top: -1px;
+    width: 20px;
+    height: 20px;
    border: 2px solid pvar(--fg-300);
    border-radius: 100%;
  }
@ -158,11 +158,11 @@
  [type=radio]:checked + label::after,
  [type=radio]:not(:checked) + label::after {
    content: '';
-    width: 8px;
-    height: 8px;
-    background: pvar(--primary);
+    width: 10px;
+    height: 10px;
+    background: pvar(--input-check-active-bg);
    position: absolute;
-    top: 5px;
+    top: 4px;
    left: 5px;
    border-radius: 100%;
    transition: all 0.2s ease;
@ -212,29 +212,30 @@
    &::after {
      content: '';
      position: absolute;
-      top: 3px;
+      top: 4px;
      left: 6px;
      width: 5px;
-      height: 8px;
+      height: 7px;
      opacity: 0;
      transform: rotate(45deg) scale(0);
-      border-right: 2px solid pvar(--on-primary);
-      border-bottom: 2px solid pvar(--on-primary);
+      border-right: 2px solid pvar(--input-check-active-fg);
+      border-bottom: 2px solid pvar(--input-check-active-fg);
    }
  }

  &:checked + span {
-    background: pvar(--fg-400);
+    background: pvar(--input-check-active-bg);
    animation: jelly 0.6s ease;

    &::before {
      content: '';
      width: 100%;
      height: 100%;
-      background: pvar(--primary);
+      background: pvar(--input-check-active-bg);
      position: absolute;
+      left: 0;
      transition: all 0.2s ease;
-      border: 2px solid transparent;
+      border: 2px solid pvar(--input-check-active-fg);
      border-radius: 2px;
    }

--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@ -3,7 +3,7 @@
@use '_variables' as *;
@import '_bootstrap-mixins';

-@mixin underline-orange {
+@mixin underline-primary {
  text-decoration: underline !important;
  text-decoration-color: pvar(--border-primary) !important;
  text-underline-offset: 0.25em !important;
@ -135,15 +135,6 @@
  }
 }

-@mixin in-content-small-title {
-  text-transform: uppercase;
-  color: pvar(--fg);
-  font-weight: $font-bold;
-  font-size: 13px;
-
-  @include underline-orange();
-}
-
@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
  display: flex;
  min-height: $min-height;
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@ -21,7 +21,8 @@ $white: #fff;
 $button-font-size: 1rem;

 $header-height: 94px;
-$header-height-mobile-view: 144px;
+$header-height-small-view: 74px;
+$header-height-mobile-view: 124px;

 $menu-width: 248px;
 $menu-collapsed-width: 50px;
@ -37,11 +38,19 @@ $max-channels-width: 1200px;
 $footer-height: 30px;
 $footer-margin: 30px;

-$video-miniature-row-name-font-size: 1.3em;
-$video-miniature-row-mobile-name-font-size: 14px;
+// ---------------------------------------------------------------------------

-$video-miniature-row-info-font-size: 14px;
-$video-miniature-row-mobile-info-font-size: 12px;
+$miniature-fs-small: 0.75rem;
+$miniature-fs-medium: 0.875rem;
+$miniature-fs-big: 1rem;
+
+$miniature-fs-row-small: 0.875rem;
+$miniature-fs-row-medium: 1rem;
+$miniature-fs-row-big: 1.25rem;
+
+$miniature-fs-mobile-small: 0.875rem;
+$miniature-fs-mobile-medium: 0.875rem;
+$miniature-fs-mobile-big: 1rem;

 $video-thumbnail-height: 153px;
 $video-thumbnail-width: 280px;
@ -87,9 +96,14 @@ $variables: (

  --input-fg: var(--input-fg),
  --input-bg: var(--input-bg),
+
  --input-placeholder: var(--input-placeholder),
  --input-border-color: var(--input-border-color),
  --input-bg-in-secondary: var(--input-bg-in-secondary),
+
+  --input-check-active-fg: var(--input-check-active-fg),
+  --input-check-active-bg: var(--input-check-active-bg),
+
  --input-x-padding: var(--input-x-padding),
  --input-y-padding: var(--input-y-padding),

@ -201,4 +215,5 @@ $zindex: (
 // ---------------------------------------------------------------------------

 $separator-border-color: pvar(--bg-secondary-400);
+$separator-border-color-on-secondary: pvar(--bg-secondary-450);
 $focus-box-shadow-form: #{$focus-box-shadow-dimensions} #{pvar(--fg-100)};
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@ -2,6 +2,8 @@
@use '_mixins' as *;
@use '_icons' as *;

+$hover-bg: pvar(--bg-secondary-350);
+
 /* stylelint-disable */
@import 'primeng/resources/primeng.css';

@ -71,7 +73,7 @@ body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
 body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
 body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
 body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: pvar(--bg-secondary-400);
+  background-color: $hover-bg;
  color: pvar(--fg);
 }
 body .p-paginator .p-paginator-first:focus,
@ -128,7 +130,7 @@ body .p-paginator .p-paginator-pages .p-paginator-page {
  border-radius: 0;
 }
 body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: pvar(--bg-secondary-400);
+  background-color: $hover-bg;
  color: pvar(--fg);
 }
 body .p-paginator .p-paginator-pages .p-paginator-page:focus {
@ -243,7 +245,7 @@ body .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
  color: pvar(--fg);
-  background: pvar(--bg-secondary-400);
+  background: $hover-bg;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
  margin: 0;
@ -565,7 +567,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
  background: pvar(--bg-secondary-500);
 }
 .p-multiselect.p-variant-filled:not(.p-disabled):hover {
-  background-color: pvar(--bg-secondary-400);
+  background-color: $hover-bg;
 }
 .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
  background-color: pvar(--bg-secondary-500);
@ -816,7 +818,7 @@ p-table {
  .p-datatable-tbody {
    tr {
      &:hover {
-        background-color: pvar(--bg-secondary-400) !important;
+        background-color: $hover-bg !important;
      }

      td {
@ -860,7 +862,7 @@ p-table {
    color: pvar(--fg) !important;

    &.p-sortable-column:hover {
-      background-color: pvar(--bg-secondary-400) !important;
+      background-color: $hover-bg !important;
    }

    &.p-sortable-column:focus-visible {
--- a/client/src/typings.d.ts
+++ b/client/src/typings.d.ts
@ -7,6 +7,3 @@ interface NodeModule {
 }

 declare module 'markdown-it-emoji/lib/light.mjs'
-
-// FIXME: remove color-bits upgrade (with https://github.com/romgrk/color-bits/commit/ea01b950ab89e5ea7a85471642b95dd1fbffb68d included)
-declare module 'color-bits'
--- a/client/yarn.lock
+++ b/client/yarn.lock
@ -4444,10 +4444,10 @@ clone@^1.0.2:
  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==

-color-bits@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/color-bits/-/color-bits-1.0.3.tgz#bd1c52eebffb4cd1e0c906161a76b7377a98dd8c"
-  integrity sha512-CkCco0HfT8kWR317vK8r5hzIRcKbiM+kdhlZ/RbmEmoj5vINgzoCZ29S5cY6BMQZC49b+p2elgNj/xbdF9FOdg==
+color-bits@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/color-bits/-/color-bits-1.0.4.tgz#9ed0acc9bc67509493a713f60f356783f189adbf"
+  integrity sha512-gcNCga5BpVlzW+ZqO+U1/4thYuJ13DsQSBzrnhBcEUUe30eF54STR/kqnPn2I18jLp0lfXDw8KJT228DTyLKXA==

 color-convert@^1.9.0:
  version "1.9.3"