Normalize modal close buttons, and cancel/submit button styles

10 files changed, 38 insertions, 25 deletions

diff --git a/client/src/app/modal/quick-settings-modal.component.html b/client/src/app/modal/quick-settings-modal.component.html
index 8ee83e7dc..e2ea51b92 100644
--- a/client/src/app/modal/quick-settings-modal.component.html
+++ b/client/src/app/modal/quick-settings-modal.component.html
@@ -1,6 +1,7 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Settings</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
   
   <div class="modal-body">
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
index 763454c4f..d67d4f3c8 100644
--- a/client/src/app/shared/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -60,7 +60,7 @@ export class ConfirmComponent implements OnInit {
   showModal () {
     this.inputValue = ''
 
-    this.openedModal = this.modalService.open(this.confirmModal)
+    this.openedModal = this.modalService.open(this.confirmModal, { centered: true })
 
     this.openedModal.result
         .then(() => this.confirmService.confirmResponse.next(true))
diff --git a/client/src/app/shared/forms/input-readonly-copy.component.html b/client/src/app/shared/forms/input-readonly-copy.component.html
index b6a56ec44..9566e9741 100644
--- a/client/src/app/shared/forms/input-readonly-copy.component.html
+++ b/client/src/app/shared/forms/input-readonly-copy.component.html
@@ -1,4 +1,4 @@
-<div class="input-group">
+<div class="input-group input-group-sm">
   <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="value" />
 
   <div class="input-group-append">
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index f1b6cd601..1724449e8 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -4,7 +4,7 @@
 .header,
 .dropdown-item,
 .input-container {
-  padding: 6px 24px 10px 24px;
+  padding: 8px 24px;
 }
 
 .header {
@@ -54,11 +54,12 @@
 }
 
 .playlist {
-  display: flex;
+  display: inline-flex;
   cursor: pointer;
 
   my-peertube-checkbox {
     margin-right: 10px;
+    align-self: center;
   }
 
   .display-name {
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.html b/client/src/app/shared/video/modals/video-blacklist.component.html
index 1a87bdcd4..857a4dcec 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.html
+++ b/client/src/app/shared/video/modals/video-blacklist.component.html
@@ -18,8 +18,12 @@
       <div class="form-group" *ngIf="video.isLocal">
         <my-peertube-checkbox
           inputName="unfederate" formControlName="unfederate"
-          i18n-labelText labelText="Unfederate the video (ask for its deletion from the remote instances)"
-        ></my-peertube-checkbox>
+          i18n-labelText labelText="Unfederate the video"
+        >
+          <ng-container ngProjectAs="description">
+            <span i18n>This will ask remote instances to delete it</span>
+          </ng-container>
+        </my-peertube-checkbox>
       </div>
 
       <div class="form-group inputs">
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index 69f45346e..67c4d6fbc 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -1,8 +1,7 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction, DropdownButtonSize, DropdownDirection } from '@app/shared/buttons/action-dropdown.component'
-import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
-import { BlocklistService } from '@app/shared/blocklist'
+import { AuthService, ConfirmService, Notifier } from '@app/core'
 import { Video } from '@app/shared/video/video.model'
 import { VideoService } from '@app/shared/video/video.service'
 import { VideoDetails } from '@app/shared/video/video-details.model'
@@ -73,10 +72,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoBlacklistService: VideoBlacklistService,
-    private serverService: ServerService,
     private screenService: ScreenService,
     private videoService: VideoService,
-    private blocklistService: BlocklistService,
     private redundancyService: RedundancyService,
     private i18n: I18n
   ) { }
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index 3a9977df6..29c7a8bfa 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -29,15 +29,11 @@
 <ng-template #visitorModal let-modal>
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
-    <button type="button" class="close" aria-label="Close" (click)="hideVisitorModal()"></button>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideVisitorModal()"></my-global-icon>
   </div>
   <div class="modal-body">
     <span i18n>
-      If you have an account on this instance, you can login:
-    </span>
-    <span class="btn btn-sm mx-3" role="button" (click)="gotoLogin()" i18n>login to comment</span>
-    <span i18n>
-      Otherwise, you can comment using an account on any ActivityPub-compatible instance.
+      You can comment using an account on any ActivityPub-compatible instance.
       On most platforms, you can find the video by typing its URL in the search bar and then comment it
       from within the software's interface.
     </span>
@@ -50,5 +46,10 @@
     <span i18n class="action-button action-button-cancel" role="button" (click)="hideVisitorModal()">
       Cancel
     </span>
+
+    <input
+      type="submit" i18n-value value="Login to comment" class="action-button-submit"
+      (click)="gotoLogin()"
+    >
   </div>
 </ng-template>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
index a5766d983..11cbb8c0b 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -17,10 +17,6 @@ my-input-readonly-copy {
   @include peertube-select-container(200px);
 }
 
-.action-button-cancel {
-  margin-right: 0 !important;
-}
-
 .qr-code-group {
   text-align: center;
 }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index bb7b21274..61f9d016b 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -95,15 +95,15 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
     }
 
     my-global-icon {
-      @include icon(24px);
+      @include icon(22px);
 
       position: relative;
-      top: 3px;
+      top: 5px;
       float: right;
 
       margin: 0;
       padding: 0;
-      opacity: 1;
+      opacity: .5;
     }
   }
 
@@ -113,7 +113,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
     .action-button-cancel {
       @include peertube-button;
-      @include grey-button;
+      @include tertiary-button;
 
       display: inline-block;
       margin-right: 10px;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index de9c9d6d6..9a8d0073a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -150,6 +150,19 @@
   }
 }
 
+@mixin tertiary-button {
+  color: $grey-foreground-color;
+  background-color: transparent;
+
+  &[disabled], &.disabled {
+    cursor: default;
+  }
+
+  my-global-icon {
+    @include apply-svg-color(transparent)
+  }
+}
+
 @mixin grey-button {
   &, &:active, &:focus {
     background-color: $grey-background-color;