Refactoring style for about component

6 files changed, 120 insertions, 215 deletions

diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 6516b595d..84626809d 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/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>
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
index 057d04ced..e80e9d96e 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/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;
@@ -16,11 +10,4 @@ a {
 .no-results {
   justify-content: flex-start;
   align-items: flex-start;
-}
-
-.show-more {
-  @include peertube-button-link;
-  @include grey-button;
-
-  margin-top: 1%;
-}
+}
\ No newline at end of file
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index f602ec1b5..5230b5c4e 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/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">
-      <h1 i18n class="title">About {{ instanceName }}</h1>
+    <div class="d-flex justify-content-between">
+      <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="block short-description">{{ shortDescription }}</div>
+    <div class="mt-2">
+      <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>
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index c01e690d1..7ff6539ca 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -1,29 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.about-instance-title {
-  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);
-  }
+.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;
-}
-
-.short-description {
-  margin-top: 10px;
-}
-
-.short-description .dedicated-to-nsfw {
-  margin-top: 20px;
-  font-weight: $font-semibold;
+  @include margin-bottom(4.5rem);
 }
 
 .anchor-link {
@@ -77,4 +47,4 @@
   .section-title {
     color: var(--mainForegroundColor);
   }
-}
+}
\ No newline at end of file
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index f8700d9b6..c748154e9 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/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,104 +59,101 @@
     </div>
   </div>
 
-  <div class="privacy-contributors">
-    <div class="p2p-privacy">
-      <h2 class="section-title">
-        <div class="anchor" id="privacy"></div> <!-- privacy anchor -->
-        <ng-container i18n>P2P & Privacy</ng-container>
-      </h2>
-
-      <p i18n>
-        PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server,
-        but ultimately leaves you the choice to switch back to regular streaming exclusively from the server of the video. What
-        follows applies only if you want to keep using the P2P mode of PeerTube.
-      </p>
-
-      <p i18n>
-        The main threat to your privacy induced by BitTorrent lies in your IP address being stored in the instance's BitTorrent
-        tracker as long as you download or watch the video.
-      </p>
-
-      <h3 i18n class="p2p-privacy-title">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.
-        In practice, this is much more difficult because:
-      </p>
-
-      <ul>
-        <li i18n>
-          An HTTP request has to be sent on each tracker for each video to spy.
-          If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot)
-        </li>
-
-        <li i18n>
-          For each request sent, the tracker returns random peers at a limited number.
-          For instance, if there are 1000 peers in the swarm and the tracker sends only 20 peers for each request, there must be at least 50
-          requests sent to know every peer in the swarm
-        </li>
-
-        <li i18n>
-          Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
-        </li>
-
-        <li i18n>
-          If an IP address is stored in the tracker, it doesn't mean that the person behind the IP (if this person exists) has watched the
-          video
-        </li>
-
-        <li i18n>
-          The IP address is a vague information: usually, it regularly changes and can represent many persons or entities
-        </li>
-
-        <li i18n>
-          Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker.
-          When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers
-          to forward the information to.
-          See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
-        </li>
-      </ul>
-
-      <p i18n>
-        The worst-case scenario of an average person spying on their friends is quite unlikely.
-        There are much more effective ways to get that kind of information.
-      </p>
-
-      <h3 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h3>
-
-      <p i18n>
-        The threats to privacy with YouTube are different from PeerTube's.
-        In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
-        Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
-      </p>
-
-      <h3 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h3>
-
-      <p i18n>
-        Your IP address is public so every time you consult a website, there is a number of actors (in addition to the final website) seeing
-        your IP in their connection logs: ISP/routers/trackers/CDN and more.
-        PeerTube is transparent about it: we warn you that if you want to keep your IP private, you must use a VPN or Tor Browser.
-        Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
-      </p>
-
-      <h3 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h3>
-
-      <p i18n>
-        PeerTube wants to deliver the best countermeasures possible, to give you more choice
-        and render attacks less likely. Here is what we put in place so far:
-      </p>
-
-      <ul>
-        <li i18n>We set a limit to the number of peers sent by the tracker</li>
-        <li i18n>We set a limit on the request frequency received by the tracker</li>
-        <li i18n>Allow instance admins to disable P2P from the administration interface</li>
-      </ul>
-
-      <p i18n>
-        Ultimately, remember you can always disable P2P by toggling it in the video player, or just by disabling
-        WebRTC in your browser.
-      </p>
-    </div>
+  <div class="d-flex flex-column">
+    <h2 class="mb-4 mt-5 text-center pt-fs-5 fw-semibold">
+      <div class="anchor" id="privacy"></div> <!-- privacy anchor -->
+      <ng-container i18n>P2P & Privacy</ng-container>
+    </h2>
+
+    <p i18n>
+      PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server,
+      but ultimately leaves you the choice to switch back to regular streaming exclusively from the server of the video. What
+      follows applies only if you want to keep using the P2P mode of PeerTube.
+    </p>
+
+    <p i18n>
+      The main threat to your privacy induced by BitTorrent lies in your IP address being stored in the instance's BitTorrent
+      tracker as long as you download or watch the video.
+    </p>
+
+    <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.
+      In practice, this is much more difficult because:
+    </p>
+
+    <ul>
+      <li i18n>
+        An HTTP request has to be sent on each tracker for each video to spy.
+        If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot)
+      </li>
+
+      <li i18n>
+        For each request sent, the tracker returns random peers at a limited number.
+        For instance, if there are 1000 peers in the swarm and the tracker sends only 20 peers for each request, there must be at least 50
+        requests sent to know every peer in the swarm
+      </li>
+
+      <li i18n>
+        Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
+      </li>
+
+      <li i18n>
+        If an IP address is stored in the tracker, it doesn't mean that the person behind the IP (if this person exists) has watched the
+        video
+      </li>
+
+      <li i18n>
+        The IP address is a vague information: usually, it regularly changes and can represent many persons or entities
+      </li>
+
+      <li i18n>
+        Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker.
+        When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers
+        to forward the information to.
+        See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
+      </li>
+    </ul>
+
+    <p i18n>
+      The worst-case scenario of an average person spying on their friends is quite unlikely.
+      There are much more effective ways to get that kind of information.
+    </p>
 
+    <h3 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h3>
+
+    <p i18n>
+      The threats to privacy with YouTube are different from PeerTube's.
+      In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
+      Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
+    </p>
+
+    <h3 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h3>
+
+    <p i18n>
+      Your IP address is public so every time you consult a website, there is a number of actors (in addition to the final website) seeing
+      your IP in their connection logs: ISP/routers/trackers/CDN and more.
+      PeerTube is transparent about it: we warn you that if you want to keep your IP private, you must use a VPN or Tor Browser.
+      Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
+    </p>
+
+    <h3 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h3>
+
+    <p i18n>
+      PeerTube wants to deliver the best countermeasures possible, to give you more choice
+      and render attacks less likely. Here is what we put in place so far:
+    </p>
+
+    <ul>
+      <li i18n>We set a limit to the number of peers sent by the tracker</li>
+      <li i18n>We set a limit on the request frequency received by the tracker</li>
+      <li i18n>Allow instance admins to disable P2P from the administration interface</li>
+    </ul>
+
+    <p i18n>
+      Ultimately, remember you can always disable P2P by toggling it in the video player, or just by disabling
+      WebRTC in your browser.
+    </p>
   </div>
 </div>
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index a0d227a28..efb8b49f5 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -6,63 +6,14 @@
   margin: auto;
 }
 
-.about-peertube-title {
-  font-size: 25px;
-  text-align: center;
-  font-weight: $font-semibold;
-  margin-bottom: 15px;
-}
+.card {
+  @include rfs(2rem, margin);
 
-.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;
-    }
-  }
+  flex-basis: 300px;
 }
 
 .card-title {
   font-size: 1.1rem;
   text-align: center;
   margin-bottom: 1rem;
-}
-
-.p2p-privacy-title {
-  font-size: 20px;
-}
+}
\ No newline at end of file