Add mascot in welcome modal

3 files changed, 80 insertions, 36 deletions

diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index d28bbf699..f99bbe2ef 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -7,61 +7,81 @@
   <div class="modal-body">
 
     <div class="block-documentation">
-      <div i18n class="subtitle">Documentation</div>
-
       <div class="columns">
         <a class="link-block" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">
-          <a class="link-title" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">CLI</a>
+          <a class="link-title" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">CLI
+            documentation</a>
 
           <div>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
         </a>
 
         <a class="link-block" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">
-          <a class="link-title" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">Administer</a>
+          <a class="link-title" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">Administer
+            documentation</a>
 
           <div>Managing users, following other instances, dealing with spammers...</div>
         </a>
 
         <a class="link-block" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">
-          <a class="link-title" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">Use</a>
+          <a class="link-title" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">Use
+            documentation</a>
 
           <div>Setup your account, managing video playlists, discover third-party applications...</div>
         </a>
       </div>
     </div>
 
-    <div class="block-configuration">
-      <div i18n class="subtitle">It's time to configure your instance!</div>
+    <div class="two-columns">
+
+      <div class="mascot">
+        <img src="/client/assets/images/mascot/pointing.png" alt="mascot">
+      </div>
 
-      <p i18n>
-        Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, specifying <strong>who you are</strong>,
-        why <strong>you created your instance</strong> and <strong>how long</strong> you plan to <strong>maintain your it</strong>
-        is very important for visitors to understand on what type of instance they are.
-      </p>
+      <div class="block-links">
+        <div i18n class="subtitle">Useful links</div>
 
-      <p i18n>
-        If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong>
-        and specify the categories and languages you speak. This way, you will help users to register on <strong>the appropriate</strong> PeerTube instance.
-      </p>
+        <ul>
+          <li>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank"
+                                                                           rel="noopener noreferrer">https://joinpeertube.org</a></li>
 
-      <div class="configure-instance">
-        <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a>
+          <li>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
+          </li>
+        </ul>
       </div>
     </div>
 
-    <div class="block-links">
-      <div i18n class="subtitle">Useful links</div>
-
-      <ul>
-        <li>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a></li>
+    <div class="two-columns">
+      <div class="mascot">
+        <img src="/client/assets/images/mascot/happy.png" alt="mascot">
+      </div>
 
-        <li>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a></li>
-      </ul>
+      <div class="block-configuration">
+        <div i18n class="subtitle">It's time to configure your instance!</div>
+
+        <p i18n>
+          Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, specifying <strong>who you are</strong>,
+          why <strong>you created your instance</strong> and <strong>how long</strong> you plan to <strong>maintain your it</strong>
+          is very important for visitors to understand on what type of instance they are.
+        </p>
+
+        <p i18n>
+          If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance
+          terms</strong>
+          and specify the categories and languages you speak. This way, you will help users to register on <strong>the
+          appropriate</strong>
+          PeerTube instance.
+        </p>
+      </div>
     </div>
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-submit" (click)="hide()">Understood!</span>
+    <span i18n class="action-button action-button-understood" (click)="hide()">Remind me later</span>
+
+    <a i18n (click)="doNotOpenAgain(); hide()" class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+       rel="noopener noreferrer">
+      Configure my instance
+    </a>
   </div>
 
 </ng-template>
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index 8bb6973f4..b9200115e 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -5,19 +5,28 @@
   font-size: 15px;
 }
 
+.two-columns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+}
+
+.mascot {
+  display: block;
+  min-width: 170px;
+}
+
 .subtitle {
   font-weight: $font-semibold;
   margin-bottom: 10px;
   font-size: 16px;
 }
 
-.block-documentation .subtitle {
-  margin-bottom: 20px;
-}
-
-.block-configuration,
-.block-instance {
-  margin-top: 30px;
+.block-documentation {
+  .subtitle {
+    margin-bottom: 20px;
+  }
 }
 
 li {
@@ -52,5 +61,22 @@ li {
       justify-content: center;
       margin-bottom: 5px;
     }
+
+    .link-title,
+    div {
+      text-align: center;
+    }
   }
 }
+
+.configure-instance-button {
+  @include peertube-button;
+  @include orange-button;
+
+  display: inline-block;
+}
+
+.action-button-understood {
+  @include peertube-button;
+  @include grey-button;
+}
diff --git a/client/src/app/modal/welcome-modal.component.ts b/client/src/app/modal/welcome-modal.component.ts
index 05412a4cd..9097de984 100644
--- a/client/src/app/modal/welcome-modal.component.ts
+++ b/client/src/app/modal/welcome-modal.component.ts
@@ -18,13 +18,11 @@ export class WelcomeModalComponent {
   ) { }
 
   show () {
-    const ref = this.modalService.open(this.modal,{
+    this.modalService.open(this.modal,{
       backdrop: 'static',
       keyboard: false,
       size: 'lg'
     })
-
-    ref.result.finally(() => this.doNotOpenAgain())
   }
 
   private doNotOpenAgain () {