Refactoring style for about component

2 files changed, 12 insertions, 42 deletions

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