Add mascot in peertube about page

4 files changed, 37 insertions, 22 deletions

diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.html b/client/src/app/+about/about-peertube/about-peertube-contributors.component.html
index 997a6a3e1..de60754cb 100644
--- a/client/src/app/+about/about-peertube/about-peertube-contributors.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.html
@@ -1,13 +1,15 @@
-<h3 i18n class="section-title">Who made this software?</h3>
+<div class="peertube-contributors">
+  <h3 i18n class="section-title">Who made this software?</h3>
 
-<p align="center">
-  <strong>Developed with &#10084; by <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">Framasoft</a></strong>
-</p>
+  <p align="center">
+    <strong>Developed with &#10084; by <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">Framasoft</a></strong>
+  </p>
 
-<p align="center">
-  <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">
-    <img width="150px" src="/client/assets/images/framasoft.png" alt="Framasoft logo"/>
-  </a>
-</p>
+  <p align="center">
+    <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">
+      <img width="150px" src="/client/assets/images/framasoft.png" alt="Framasoft logo"/>
+    </a>
+  </p>
 
-<div [innerHTML]="creditsHtml"></div>
+  <div [innerHTML]="creditsHtml"></div>
+</div>
diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
index 9c3b0a46b..6a22f569f 100644
--- a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
@@ -1,15 +1,17 @@
 @import '_variables';
 @import '_mixins';
 
-/deep/ h1 {
-  font-size: 1rem;
-}
+.peertube-contributors {
+  /deep/ h1 {
+    font-size: 1rem;
+  }
 
-/deep/ ul {
-  padding: 0;
+  /deep/ ul {
+    padding: 0;
 
-  li {
-    display: inline-block;
-    margin-right: 10px;
+    li {
+      display: inline-block;
+      margin-right: 10px;
+    }
   }
 }
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 d1e3e1b3c..5c63052d8 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -1,9 +1,13 @@
 <h1 i18n class="about-peertube-title">
-  About PeerTube
+  What is PeerTube?
 </h1>
 
+<img class="mascot" width="121px" height="147px" src="/client/assets/images/mascot/default.png" alt="mascot" />
+
 <div class="description">
-  <p i18n>PeerTube is a federated (ActivityPub) video streaming platform using P2P (WebTorrent) directly in the web browser.</p>
+  <p i18n>
+    PeerTube is a self hosted federated (ActivityPub) video streaming platform using P2P directly in the web browser.
+  </p>
 
   <p i18n>
     It is a free and open-source software, under the <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3 licence</a>.
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 8fca53e90..cd1364c14 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -2,11 +2,17 @@
 @import '_mixins';
 
 .about-peertube-title {
-  font-size: 20px;
+  font-size: 25px;
+  text-align: center;
   font-weight: $font-semibold;
   margin-bottom: 15px;
 }
 
+.mascot {
+  display: block;
+  margin: 20px auto;
+}
+
 /deep/ .section-title {
   font-weight: $font-semibold;
   font-size: 20px;
@@ -14,7 +20,8 @@
 }
 
 .description {
-  margin-bottom: 30px;
+  margin-bottom: 100px;
+  text-align: center;
 }
 
 .description,