Design video watch modals

6 files changed, 40 insertions, 20 deletions

diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html
index ddc57e999..7efc79e93 100644
--- a/client/src/app/videos/+video-watch/video-download.component.html
+++ b/client/src/app/videos/+video-watch/video-download.component.html
@@ -6,18 +6,19 @@
         <button type="button" class="close" aria-label="Close" (click)="hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Download</h4>
+        <h4 class="title-page title-page-single">Download</h4>
       </div>
 
       <div class="modal-body">
         <div *ngFor="let file of video.files" class="resolution-block">
           <label>{{ file.resolutionLabel }}</label>
-          <a class="btn btn-default " target="_blank" [href]="file.torrentUrl">
-            <span class="glyphicon glyphicon-download"></span>
+
+          <a class="orange-button-link " target="_blank" [href]="file.torrentUrl">
+            <span class="icon icon-download"></span>
             Torrent file
           </a>
-          <a class="btn btn-default" target="_blank" [href]="file.fileUrl">
-            <span class="glyphicon glyphicon-download"></span>
+          <a class="orange-button-link" target="_blank" [href]="file.fileUrl">
+            <span class="icon icon-download"></span>
             Download
           </a>
 
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss
new file mode 100644
index 000000000..c9d5af9c1
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-download.component.scss
@@ -0,0 +1,23 @@
+.resolution-block:not(:first-child) {
+  margin-top: 30px;
+}
+
+.orange-button-link {
+  margin-right: 10px;
+}
+
+label {
+  display: block;
+}
+
+.icon {
+  @include icon(21px);
+
+  margin-right: 5px;
+  position: relative;
+  top: -1px;
+
+  &.icon-download {
+    background-image: url('../../../assets/images/video/download-white.svg');
+  }
+}
diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts
index 010a246cd..095df1698 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -5,7 +5,7 @@ import { VideoDetails } from '../../shared/video/video-details.model'
 @Component({
   selector: 'my-video-download',
   templateUrl: './video-download.component.html',
-  styles: [ '.resolution-block { margin-top: 20px; }' ]
+  styleUrls: [ './video-download.component.scss' ]
 })
 export class VideoDownloadComponent {
   @Input() video: VideoDetails = null
diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html
index ceb7cf50a..20474bab4 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
@@ -6,28 +6,28 @@
         <button type="button" class="close" aria-label="Close" (click)="hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Report video</h4>
+        <h4 class="title-page title-page-single">Report video</h4>
       </div>
 
       <div class="modal-body">
 
-        <form novalidate [formGroup]="form">
+        <form novalidate [formGroup]="form" (ngSubmit)="report()">
           <div class="form-group">
             <label for="reason">Reason</label>
             <textarea
               id="reason" class="form-control" placeholder="Reason..."
-              formControlName="reason"
+              formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
             >
             </textarea>
-            <div *ngIf="formErrors.reason" class="alert alert-danger">
+            <div *ngIf="formErrors.reason" class="form-error">
               {{ formErrors.reason }}
             </div>
           </div>
 
           <div class="form-group">
             <input
-              type="button" value="Report" class="btn btn-default form-control"
-              [disabled]="!form.valid" (click)="report()"
+              type="submit" value="Report" class="orange-button"
+              [disabled]="!form.valid"
             >
           </div>
         </form>
diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html
index 88f59c063..36ec38d88 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -6,7 +6,7 @@
         <button type="button" class="close" aria-label="Close" (click)="hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Share</h4>
+        <h4 class="title-page title-page-single">Share</h4>
       </div>
 
       <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 3f36410f4..6973619b2 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -51,12 +51,8 @@
           padding: 0 10px 0 10px;
 
           .icon {
-            display: inline-block;
-            background-repeat: no-repeat;
-            background-size: contain;
-            width: 21px;
-            height: 21px;
-            vertical-align: middle;
+            @include icon(21px);
+
             position: relative;
             top: -2px;
 
@@ -105,7 +101,7 @@
             top: -1px;
 
             &.icon-download {
-              background-image: url('../../../assets/images/video/download.svg');
+              background-image: url('../../../assets/images/video/download-grey.svg');
             }
 
             &.icon-alert {