Cleanup sub title CSS

client/src/app/+admin/follows/followers-list/followers-list.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Followers of your instance</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Followers of your instance</h1>
+ </div>
+</div>
 
 <p-table
  [value]="followers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/follows/following-list/following-list.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Subscriptions of your instance</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Subscriptions of your instance</h1>
+ </div>
+</div>
 
 <p-table
  [value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Videos redundancies</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Videos redundancies</h1>
+ </div>
+</div>
 
 <div class="admin-sub-header">
  <div class="select-filter-block">

client/src/app/+admin/moderation/abuse-list/abuse-list.component.html

@@ -1,6 +1,8 @@
-<h1>
- <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Reports</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Reports</h1>
+ </div>
+</div>
 
 <my-abuse-list-table viewType="admin"></my-abuse-list-table>

client/src/app/+admin/moderation/registration-list/registration-list.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Registration requests</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Registration requests</h1>
+ </div>
+</div>
 
 <p-table
  [value]="registrations" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/moderation/video-block-list/video-block-list.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Video blocks</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Video blocks</h1>
+ </div>
+</div>
 
 <p-table
  [value]="blocklist" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts

@@ -23,7 +23,7 @@ import { VideoBlockService } from '@app/shared/shared-moderation/video-block.ser
 @Component({
  selector: 'my-video-block-list',
  templateUrl: './video-block-list.component.html',
- styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ],
+ styleUrls: [ '../../../shared/shared-moderation/moderation.scss' ],
  standalone: true,
  imports: [
  GlobalIconComponent,

client/src/app/+admin/moderation/watched-words-list/watched-words-list-admin.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="eye-open" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Instance watched words lists</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="eye-open" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Instance watched words lists</h1>
+ </div>
+</div>
 
 <em class="d-block" i18n>Video name/description and comments that contain any of the watched words are automatically tagged with the name of the list.</em>
 <em class="d-block mb-3" i18n>These automatic tags can be used to filter comments and videos.</em>

client/src/app/+admin/overview/comments/video-comment-list.component.html

@@ -1,9 +1,11 @@
-<h1>
- <my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Video comments</ng-container>
-
- <my-feed [syndicationItems]="syndicationItems"></my-feed>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon class="top--1px" iconName="message-circle" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Video comments</h1>
+
+ <my-feed [syndicationItems]="syndicationItems"></my-feed>
+ </div>
+</div>
 
 <em i18n>This view also shows comments from muted accounts.</em>
 

client/src/app/+admin/overview/comments/video-comment-list.component.ts

@@ -8,7 +8,6 @@ import { VideoCommentListAdminOwnerComponent } from '../../../shared/shared-vide
 @Component({
  selector: 'my-video-comment-list',
  templateUrl: './video-comment-list.component.html',
- styleUrls: [ './video-comment-list.component.scss' ],
  standalone: true,
  imports: [
  GlobalIconComponent,

client/src/app/+admin/overview/users/user-list/user-list.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Users</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Users</h1>
+ </div>
+</div>
 
 <p-table
  [value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/overview/users/user-list/user-list.component.scss

@@ -3,6 +3,11 @@
 @use '_mixins' as *;
 @use 'bootstrap/scss/functions' as *;
 
+.sub-title-container my-global-icon {
+ position: relative;
+ top: -2px;
+}
+
 .banned-info {
  font-style: italic;
 }
@@ -20,10 +25,6 @@ p-tableCheckbox {
  top: -2.5px;
 }
 
-my-global-icon {
- width: 18px;
-}
-
 @media screen and (max-width: $primeng-breakpoint) {
  .empty-cell {
  padding: 0;

client/src/app/+admin/overview/videos/video-list.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Videos</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Videos</h1>
+ </div>
+</div>
 
 <p-table
  [value]="videos" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/system/debug/debug.component.html

@@ -1,17 +1,22 @@
-<div class="root">
- <h4 i18n>IP address</h4>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Debug</h1>
+ </div>
+</div>
 
- <p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
+<h2 class="fs-5" i18n>IP address</h2>
 
- <p i18n>If this is not your correct public IP, please consider fixing it because:</p>
- <ul>
- <li i18n>Views may not be counted correctly (reduced compared to what they should be)</li>
- <li i18n>Anti brute force system could be overzealous</li>
- <li i18n>P2P system could not work correctly</li>
- </ul>
+<p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
 
- <p i18n>To fix it:<p>
- <ul>
- <li i18n>Check the <code>trust_proxy</code> configuration key</li>
- </ul>
-</div>
+<p i18n>If this is not your correct public IP, please consider fixing it because:</p>
+<ul>
+ <li i18n>Views may not be counted correctly (reduced compared to what they should be)</li>
+ <li i18n>Anti brute force system could be overzealous</li>
+ <li i18n>P2P system could not work correctly</li>
+</ul>
+
+<p i18n>To fix it:<p>
+<ul>
+ <li i18n>Check the <code>trust_proxy</code> configuration key</li>
+</ul>

client/src/app/+admin/system/debug/debug.component.ts

@@ -2,11 +2,15 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { Debug } from '@peertube/peertube-models'
 import { DebugService } from './debug.service'
+import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 
 @Component({
  templateUrl: './debug.component.html',
  styleUrls: [ './debug.component.scss' ],
- standalone: true
+ standalone: true,
+ imports: [
+ GlobalIconComponent
+ ]
 })
 export class DebugComponent implements OnInit {
  debug: Debug

client/src/app/+admin/system/jobs/jobs.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Local jobs</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Local jobs</h1>
+ </div>
+</div>
 
 <div class="admin-sub-header">
  <div class="select-filter-block">

client/src/app/+admin/system/jobs/jobs.component.scss

@@ -59,5 +59,5 @@ pre {
 }
 
 .job-error {
- color: #ff0000;
+ color: pvar(--red);
 }

client/src/app/+admin/system/logs/logs.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Logs</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Logs</h1>
+ </div>
+</div>
 
 <div class="header">
 

client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html

@@ -1,14 +1,16 @@
-<h1 class="d-flex justify-content-between">
- <span class="text-nowrap me-2">
- <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
- <span i18n>Runner jobs</span>
- </span>
-
- <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
- <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Remote runners</ng-container>
- </a>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon class="top--1px" iconName="globe" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Runner jobs</h1>
+ </div>
+
+ <div>
+ <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
+ <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
+ <ng-container i18n>Remote runners</ng-container>
+ </a>
+ </div>
+</div>
 
 <p-table
  [value]="runnerJobs" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/system/runners/runner-list/runner-list.component.html

@@ -1,14 +1,16 @@
-<h1 class="d-flex justify-content-between">
- <span class="text-nowrap me-2">
+<div class="sub-title-container">
+ <span class="sub-title">
  <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Remote runners</ng-container>
+ <h1 i18n>Remote runners</h1>
  </span>
 
- <a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon grey-button">
- <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Runner registration tokens</ng-container>
- </a>
-</h1>
+ <div>
+ <a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon grey-button">
+ <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+ <ng-container i18n>Runner registration tokens</ng-container>
+ </a>
+ </div>
+</div>
 
 <p-table
  [value]="runners" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html

@@ -1,7 +1,7 @@
-<h1 class="d-flex justify-content-between">
- <span class="text-nowrap me-2">
+<div class="sub-title-container">
+ <span class="sub-title">
  <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Runner registration tokens</ng-container>
+ <h1 i18n>Runner registration tokens</h1>
  </span>
 
  <div>
@@ -10,7 +10,7 @@ <h1 class="d-flex justify-content-between">
  <ng-container i18n>Remote runners</ng-container>
  </a>
  </div>
-</h1>
+</div>
 
 <p-table
  [value]="registrationTokens" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html

@@ -1,6 +1,8 @@
-<h1>
- <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Reports</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Reports</h1>
+ </div>
+</div>
 
 <my-abuse-list-table viewType="user"></my-abuse-list-table>

client/src/app/+my-account/my-account-applications/my-account-applications.component.html

@@ -1,7 +1,9 @@
-<h1>
- <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
- <ng-container i18n>Applications</ng-container>
-</h1>
+<div class="sub-title-container">
+ <div class="sub-title">
+ <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
+ <h1 i18n>Applications</h1>
+ </div>
+</div>
 
 <div class="pt-two-cols"> <!-- built-in token grid -->