Refactoring style for about component

client/src/app/+about/about-follows/about-follows.component.html

@@ -2,7 +2,7 @@
   <h1 class="visually-hidden" i18n>Follows</h1>
 
   <div class="col-xl-6 col-md-12">
-    <h2 i18n class="subtitle">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
+    <h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
 
     <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
 
@@ -10,11 +10,11 @@
       {{ follower }}
     </a>
 
-    <button i18n class="show-more" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
+    <button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
   </div>
 
   <div class="col-xl-6 col-md-12">
-    <h2 i18n class="subtitle">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
+    <h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
 
     <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
 
@@ -22,7 +22,7 @@
       {{ following }}
     </a>
 
-    <button i18n class="show-more" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
+    <button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
   </div>
 
 </div>

client/src/app/+about/about-follows/about-follows.component.scss

@@ -1,12 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.subtitle {
-  font-size: 18px;
-  font-weight: $font-semibold;
-  margin-bottom: 20px;
-}
-
 a {
   display: block;
   width: fit-content;
@@ -17,10 +11,3 @@ a {
   justify-content: flex-start;
   align-items: flex-start;
 }
-
-.show-more {
-  @include peertube-button-link;
-  @include grey-button;
-
-  margin-top: 1%;
-}

client/src/app/+about/about-instance/about-instance.component.html

@@ -1,22 +1,22 @@
 <div class="row">
   <div class="col-md-12 col-xl-6">
 
-    <div class="about-instance-title">
+    <div class="d-flex justify-content-between">
-      <h1 i18n class="title">About {{ instanceName }}</h1>
+      <h1 i18n class="fw-semibold pt-fs-5">About {{ instanceName }}</h1>
 
-      <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact us</a>
+      <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link orange-button h-100 d-flex align-items-center">Contact us</a>
     </div>
 
-    <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
+    <div class="mb-4" *ngIf="categories.length !== 0 || languages.length !== 0">
       <span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span>
 
       <span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
     </div>
 
-    <div class="short-description">
+    <div class="mt-2">
-      <div class="block short-description">{{ shortDescription }}</div>
+      <div class="block">{{ shortDescription }}</div>
 
-      <div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
+      <div i18n *ngIf="isNSFW" class="block mt-4 fw-semibold">This instance is dedicated to sensitive/NSFW content.</div>
     </div>
 
     <div class="anchor" id="administrators-and-sustainability"></div>

client/src/app/+about/about-instance/about-instance.component.scss

@@ -1,29 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.about-instance-title {
+.pt-badge {
-  display: flex;
-  justify-content: space-between;
-
-  .title {
-    font-size: 20px;
-    font-weight: $font-semibold;
-  }
-
-  .contact-admin {
-    @include peertube-button-link;
-    @include orange-button;
-
-    height: fit-content;
-  }
-}
-
-.instance-badges {
-  margin-bottom: 20px;
-
-  .pt-badge {
   @include margin-right(5px);
-  }
 }
 
 .section-title {
@@ -36,22 +15,13 @@
 
 .middle-title {
   @include in-content-small-title;
+  @include margin-bottom(1.5rem);
 
   margin-top: 0;
-  margin-bottom: 25px;
 }
 
 .block {
-  margin-bottom: 75px;
+  @include margin-bottom(4.5rem);
-}
-
-.short-description {
-  margin-top: 10px;
-}
-
-.short-description .dedicated-to-nsfw {
-  margin-top: 20px;
-  font-weight: $font-semibold;
 }
 
 .anchor-link {

client/src/app/+about/about-peertube/about-peertube.component.html

@@ -1,11 +1,11 @@
 <div class="root">
-  <h1 i18n class="about-peertube-title">
+  <h1 i18n class="pt-fs-3 text-center fw-semibold mb-3">
     This website is powered by PeerTube
   </h1>
 
-  <img class="mascot" width="121px" height="147px" src="/client/assets/images/mascot/default.svg" alt="mascot"/>
+  <img class="d-block my-4 mx-auto" width="121px" height="147px" src="/client/assets/images/mascot/default.svg" alt="mascot"/>
 
-  <div class="description">
+  <div class="text-center">
     <p i18n>
       PeerTube is a self-hosted ActivityPub-federated video streaming platform using P2P directly in your web browser.
     </p>
@@ -20,7 +20,7 @@
     </p>
   </div>
 
-  <div class="documentation">
+  <div class="d-flex flex-wrap justify-content-center my-5">
 
     <div class="card">
       <div class="card-body">
@@ -59,9 +59,8 @@
     </div>
   </div>
 
-  <div class="privacy-contributors">
+  <div class="d-flex flex-column">
-    <div class="p2p-privacy">
+    <h2 class="mb-4 mt-5 text-center pt-fs-5 fw-semibold">
-      <h2 class="section-title">
       <div class="anchor" id="privacy"></div> <!-- privacy anchor -->
       <ng-container i18n>P2P & Privacy</ng-container>
     </h2>
@@ -77,7 +76,7 @@
       tracker as long as you download or watch the video.
     </p>
 
-      <h3 i18n class="p2p-privacy-title">What are the consequences?</h3>
+    <h3 i18n class="pt-fs-5">What are the consequences?</h3>
 
     <p i18n>
       In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
@@ -157,6 +156,4 @@
       WebRTC in your browser.
     </p>
   </div>
-
-  </div>
 </div>

client/src/app/+about/about-peertube/about-peertube.component.scss

@@ -6,55 +6,10 @@
   margin: auto;
 }
 
-.about-peertube-title {
+.card {
-  font-size: 25px;
+  @include rfs(2rem, margin);
-  text-align: center;
-  font-weight: $font-semibold;
-  margin-bottom: 15px;
-}
 
-.mascot {
-  display: block;
-  margin: 20px auto;
-}
-
-::ng-deep .section-title {
-  font-weight: $font-semibold;
-  font-size: 20px;
-  margin-bottom: 5px;
-}
-
-.description {
-  text-align: center;
-}
-
-.documentation {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 50px 0;
-  justify-content: center;
-
-  .card {
-    margin: 30px;
   flex-basis: 300px;
-  }
-}
-
-.privacy-contributors {
-  display: flex;
-  flex-direction: column;
-
-  .p2p-privacy {
-    .section-title {
-      margin: 50px 0 20px;
-      text-align: center;
-    }
-
-    h6 {
-      font-size: 20px;
-      margin-top: 15px;
-    }
-  }
 }
 
 .card-title {
@@ -62,7 +17,3 @@
   text-align: center;
   margin-bottom: 1rem;
 }
-
-.p2p-privacy-title {
-  font-size: 20px;
-}