11 files changed, 57 insertions, 67 deletions

diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.html b/client/src/app/shared/shared-instance/feature-boolean.component.html
index ccb8a30cc..6de5d2075 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.html
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.html
@@ -1,3 +1,2 @@
-<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span>
-<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span>
-
+<my-global-icon *ngIf="value === true" iconName="tick" i18n-aria-label aria-label="yes"></my-global-icon>
+<my-global-icon *ngIf="value === false" iconName="cross" i18n-aria-label aria-label="no"></my-global-icon>
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss
index 8683ecc55..29b8c3e02 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,10 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.glyphicon-ok {
+my-global-icon[iconName=tick] {
   color: $green;
 }
 
-.glyphicon-remove {
+my-global-icon[iconName=cross] {
   color: $red;
 }
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
index 73e511d1c..466d73ca4 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
@@ -1,6 +1,6 @@
-<h2 class="instance-name">{{ about?.instance.name }}</h2>
+<h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2>
 
-<div class="instance-short-description">{{ about?.instance.shortDescription }}</div>
+<div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div>
 
 <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
   <ngb-panel *ngIf="panels.features" id="instance-features" i18n-title title="Features found on this instance">
@@ -32,7 +32,7 @@
       </ng-template>
     </ngb-panel>
 
-    <ngb-panel *ngIf="termsPanel" id="terms" i18n-title title="Terms">
+    <ngb-panel *ngIf="termsPanel" id="terms" [title]="getTermsTitle()">
       <ng-template ngbPanelContent>
         <div class="block" [innerHTML]="aboutHtml.terms"></div>
       </ng-template>
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 be6099a97..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
@@ -8,34 +8,9 @@
 .instance-short-description {
   @include ellipsis-multiline(1rem, 3);
 
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin: 25px 0;
 }
 
 .block {
-  font-size: 15px;
   margin-bottom: 15px;
 }
-
-ngb-accordion ::ng-deep {
-  .card {
-    border-color: var(--mainBackgroundColor);
-
-    .card-header {
-      background-color: unset;
-      padding: 0;
-
-      + .collapse.show {
-        background-color: var(--submenuBackgroundColor);
-      }
-    }
-  }
-
-  .btn {
-    @include peertube-button;
-    @include grey-button;
-
-    border-radius: unset;
-    width: 100%;
-  }
-}
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
index b9f57e2a4..e13703c03 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
@@ -15,6 +15,9 @@ export class InstanceAboutAccordionComponent implements OnInit {
 
   @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()
 
+  @Input() displayInstanceName = true
+  @Input() displayInstanceShortDescription = true
+
   @Input() pluginScope: PluginClientScope
   @Input() pluginHook: ClientFilterHookName
 
@@ -66,6 +69,10 @@ export class InstanceAboutAccordionComponent implements OnInit {
     return !!(this.aboutHtml?.administrator || this.about?.instance.maintenanceLifetime || this.about?.instance.businessModel)
   }
 
+  getTermsTitle () {
+    return $localize`Terms of ${this.about.instance.name}`
+  }
+
   get moderationPanel () {
     return this.panels.moderation && !!this.aboutHtml.moderationInformation
   }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.html b/client/src/app/shared/shared-instance/instance-features-table.component.html
index 1fdef95ff..761243bfe 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.html
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="serverConfig" class="feature-table">
 
-  <table class="table" *ngIf="serverConfig">
+  <table *ngIf="serverConfig">
     <caption i18n>Features found on this instance</caption>
     <tr>
       <th i18n class="label" scope="row">PeerTube version</th>
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 56ca105f4..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
@@ -4,6 +4,7 @@
 table {
   font-size: 14px;
   color: pvar(--mainForegroundColor);
+  width: 100%;
 
   .label,
   .sub-label {
@@ -24,13 +25,14 @@ table {
     }
   }
 
+  th,
   td {
-    vertical-align: middle;
+    padding: 0.75rem;
+    border-top: 1px solid #dee2e6;
   }
 
   caption {
     caption-side: top;
-    font-size: 15px;
     font-weight: $font-semibold;
     color: pvar(--mainForegroundColor);
   }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.ts b/client/src/app/shared/shared-instance/instance-features-table.component.ts
index 6335de450..e405c5790 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.ts
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
+import { prepareIcu } from '@app/helpers'
 import { ServerConfig } from '@shared/models'
 import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
 
@@ -65,15 +66,20 @@ export class InstanceFeaturesTableComponent implements OnInit {
 
   private getApproximateTime (seconds: number) {
     const hours = Math.floor(seconds / 3600)
-    let pluralSuffix = ''
-    if (hours > 1) pluralSuffix = 's'
-    if (hours > 0) return `~ ${hours} hour${pluralSuffix}`
 
-    const minutes = Math.floor(seconds % 3600 / 60)
+    if (hours !== 0) {
+      return prepareIcu($localize`~ {hours, plural, =1 {1 hour} other {{hours} hours}}`)(
+        { hours },
+        $localize`~ ${hours} hours`
+      )
+    }
 
-    if (minutes === 1) return $localize`~ 1 minute`
+    const minutes = Math.floor(seconds % 3600 / 60)
 
-    return $localize`~ ${minutes} minutes`
+    return prepareIcu($localize`~ {minutes, plural, =1 {1 minute} other {{minutes} minutes}}`)(
+      { minutes },
+      $localize`~ ${minutes} minutes`
+    )
   }
 
   private buildQuotaHelpIndication () {
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
index 2ca61fd94..68b209990 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.html
@@ -10,7 +10,7 @@
           <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
           <p class="stat-label" i18n>users</p>
         </div>
-        <i class="glyphicon glyphicon-user icon-bottom"></i>
+        <my-global-icon iconName="user"></my-global-icon>
       </div>
     </div>
 
@@ -20,7 +20,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
           <p class="stat-label" i18n>videos</p>
         </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
       </div>
     </div>
 
@@ -30,7 +30,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
           <p class="stat-label" i18n>views</p>
         </div>
-        <i class="glyphicon glyphicon-eye-open"></i>
+        <my-global-icon iconName="eye-open"></my-global-icon>
       </div>
     </div>
 
@@ -40,7 +40,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
           <p class="stat-label" i18n>comments</p>
         </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
       </div>
     </div>
 
@@ -50,7 +50,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
           <p class="stat-label" i18n>hosted video</p>
         </div>
-        <i class="glyphicon glyphicon-hdd"></i>
+        <my-global-icon iconName="home"></my-global-icon>
       </div>
     </div>
   </div>
@@ -64,7 +64,7 @@
           <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
           <p class="stat-label" i18n>videos</p>
         </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
       </div>
     </div>
 
@@ -74,7 +74,7 @@
           <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
           <p class="stat-label" i18n>comments</p>
         </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
       </div>
     </div>
 
@@ -84,7 +84,7 @@
           <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
           <p class="stat-label" i18n>followers</p>
         </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="share"></my-global-icon>
       </div>
     </div>
 
@@ -94,7 +94,7 @@
           <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
           <p class="stat-label" i18n>following</p>
         </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="globe"></my-global-icon>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.scss b/client/src/app/shared/shared-instance/instance-statistics.component.scss
index 5286ab03a..e1d489d28 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.scss
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.scss
@@ -1,3 +1,5 @@
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h3 {
   font-size: 1.25rem;
@@ -19,22 +21,19 @@ h3 {
     margin: 0;
   }
 
-  .glyphicon {
-    opacity: 0.12;
-    position: absolute;
-    left: 16px;
-    top: -24px;
-
-    &.icon-bottom {
-      top: 4px;
-    }
-
-    &::before {
-      font-size: 8em;
-    }
-  }
-
   .card-body {
     z-index: 2;
   }
 }
+
+my-global-icon {
+  opacity: 0.12;
+  position: absolute;
+  left: 16px;
+  top: -24px;
+  width: 110px;
+
+  &.icon-bottom {
+    top: 4px;
+  }
+}
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..dfce88e11 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
 
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,6 +13,7 @@ import { InstanceService } from './instance.service'
 @NgModule({
   imports: [
     SharedMainModule,
+    SharedGlobalIconModule,
     NgbAccordionModule
   ],