Migrate to bootstrap 5

5 files changed, 9 insertions, 14 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 6bc1d0448..f16f8bd71 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -1,5 +1,6 @@
 <div class="row">
-  <h1 class="sr-only" i18n>Follows</h1>
+  <h1 class="visually-hidden" i18n>Follows</h1>
+
   <div class="col-xl-6 col-md-12">
     <h2 i18n class="subtitle">Follower instances ({{ followersPagination.totalItems }})</h2>
 
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 80eb997e4..057d04ced 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -15,6 +15,7 @@ a {
 
 .no-results {
   justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .show-more {
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 7f2a6aa77..b113df82f 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -8,9 +8,9 @@
     </div>
 
     <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
-      <span *ngFor="let category of categories" class="badge badge-primary category">{{ category }}</span>
+      <span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span>
 
-      <span *ngFor="let language of languages" class="badge badge-secondary language">{{ language }}</span>
+      <span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
     </div>
 
     <div class="short-description">
@@ -204,7 +204,7 @@
   </div>
 
   <div class="col-md-12 col-xl-6" myPluginSelector pluginSelectorId="about-instance-features">
-    <h2 class="sr-only" i18n>FEATURES</h2>
+    <h2 class="visually-hidden" i18n>FEATURES</h2>
     <my-instance-features-table></my-instance-features-table>
   </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 965c04b6c..a48783639 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -19,18 +19,11 @@
 }
 
 .instance-badges {
-  font-size: 16px;
   margin-bottom: 20px;
+  font-size: 16px;
 
-  .badge {
+  .pt-badge {
     @include margin-right(5px);
-
-    font-size: 12px;
-    font-weight: $font-semibold;
-
-    &.category {
-      background-color: pvar(--mainColor);
-    }
   }
 }
 
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 63d429ebf..3b7343a04 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div>
   <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
 
     <div class="links">