Better welcome modal

5 files changed, 73 insertions, 35 deletions

diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index f9e07333a..64f14e69b 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -10,7 +10,7 @@
 
     <ul>
       <li i18n *ngIf="about.instance.name.toLowerCase() === 'peertube'">Instance name</li>
-      <li i18n *ngIf="about.instance.shortDescription">Instance short description</li>
+      <li i18n *ngIf="isDefaultShortDescription(about.instance.shortDescription)">Instance short description</li>
 
       <li i18n *ngIf="!about.instance.administrator">Who you are</li>
       <li i18n *ngIf="!about.instance.maintenanceLifetime">How long you plan to maintain your instance</li>
@@ -20,7 +20,10 @@
       <li i18n *ngIf="!about.instance.terms">Instance terms</li>
     </ul>
 
-    <p>Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.</p>
+    <p>
+      Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.
+      Without them, your instance may not be referenced on <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">JoinPeerTube website</a>.
+    </p>
 
     <div class="configure-instance">
       <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure these fields</a>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index 5888736c1..ff62a1b9c 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -17,4 +17,6 @@ li {
   text-align: center;
   font-weight: 600;
   font-size: 18px;
+  margin-top: 40px;
+  margin-bottom: 10px;
 }
diff --git a/client/src/app/modal/instance-config-warning-modal.component.ts b/client/src/app/modal/instance-config-warning-modal.component.ts
index 08d83f383..742a7dd41 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.ts
+++ b/client/src/app/modal/instance-config-warning-modal.component.ts
@@ -31,6 +31,11 @@ export class InstanceConfigWarningModalComponent {
     })
   }
 
+  isDefaultShortDescription (description: string) {
+    return description === 'PeerTube, a federated (ActivityPub) video streaming platform using P2P (BitTorrent) directly ' +
+      'in the web browser with WebTorrent and Angular.'
+  }
+
   private doNotOpenAgain () {
     this.userService.updateMyProfile({ noInstanceConfigWarningModal: true })
         .subscribe(
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 79e6d4667..09ff2163b 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -6,44 +6,42 @@
 
   <div class="modal-body">
 
-    <div class="block-links">
-      <div i18n class="subtitle">Useful links</div>
+    <div class="block-documentation">
+      <div i18n class="subtitle">Documentation</div>
 
-      <ul>
-        <li i18n>
-          Official PeerTube website: <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a>
-        </li>
-
-        <li i18n>
-          Discover CLI PeerTube tools (to upload or import videos, parse logs, prune storage directories, reset user password...):
-          <a href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/maintain-tools</a>
-        </li>
-
-        <li i18n>
-          Understand how to administer your instance (managing users, following other instances, dealing with spammers...):
-          <a href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/admin-following-instances</a>
-        </li>
-
-        <li i18n>
-          Learn how to use PeerTube (setup your account, managing video playlists, discover third-party applications...):
-          <a href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/use-setup-account</a>
-        </li>
-      </ul>
+      <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>
+
+          <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>
+
+          <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>
+
+          <div>Setup your account, managing video playlists, discover third-party applications...</div>
+        </a>
+      </div>
     </div>
 
     <div class="block-configuration">
-      <div i18n class="subtitle">Configure your instance</div>
+      <div i18n class="subtitle">It's time to configure your instance!</div>
 
       <p i18n>
-        Now it's time to configure your instance! Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>,
-        specifying <strong>who you are</strong> and <strong>how long</strong> you plan to <strong>maintain your instance</strong>
+        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, users that are looking for a PeerTube instance on which they can register
-        will be able to choose <strong>the right one</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 class="configure-instance">
@@ -51,13 +49,14 @@
       </div>
     </div>
 
-    <div class="block-instance">
-      <div i18n class="subtitle">Index your instance</div>
+    <div class="block-links">
+      <div i18n class="subtitle">Useful links</div>
 
-      <ng-container i18n>
-        If you want, you can index your PeerTube instance on the public PeerTube instances list:
-        <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
-      </ng-container>
+      <ul>
+        <li>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a></li>
+
+        <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>
 
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index a59c5b7a9..8bb6973f4 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -11,6 +11,10 @@
   font-size: 16px;
 }
 
+.block-documentation .subtitle {
+  margin-bottom: 20px;
+}
+
 .block-configuration,
 .block-instance {
   margin-top: 30px;
@@ -24,4 +28,29 @@ li {
   text-align: center;
   font-weight: 600;
   font-size: 18px;
+  margin: 20px 0 40px 0;
+}
+
+.columns {
+  display: flex;
+
+  .link-block {
+    @include disable-default-a-behaviour;
+
+    color: var(--mainForegroundColor);
+    padding: 10px;
+    transition: background-color 0.2s ease-in;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .link-title {
+      font-size: 16px;
+      font-weight: $font-semibold;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 5px;
+    }
+  }
 }