Use form-control to display box-shadow on form inputs/selects upon focus

6 files changed, 28 insertions, 79 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
index 19043eee6..4262ff0fc 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -32,9 +32,10 @@
     </div>
 
     <div class="modal-footer inputs">
-      <span i18n class="action-button action-button-cancel" (click)="hide()">
-        Cancel
-      </span>
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="hide()" (key.enter)="hide()"
+      >
 
       <input
         type="submit" i18n-value value="Add this caption" class="action-button-submit"
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 967f3b188..152b069d2 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -9,7 +9,7 @@
           <div class="col-md-8">
             <div class="form-group">
               <label i18n for="name">Title</label>
-              <input type="text" id="name" formControlName="name" />
+              <input type="text" id="name" class="form-control" formControlName="name" />
               <div *ngIf="formErrors.name" class="form-error">
                 {{ formErrors.name }}
               </div>
@@ -58,7 +58,7 @@
             <div class="form-group">
               <label i18n>Channel</label>
               <div class="peertube-select-container">
-                <select formControlName="channelId">
+                <select formControlName="channelId" class="form-control">
                   <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
                 </select>
               </div>
@@ -67,7 +67,7 @@
             <div class="form-group">
               <label i18n for="category">Category</label>
               <div class="peertube-select-container">
-                <select id="category" formControlName="category">
+                <select id="category" formControlName="category" class="form-control">
                   <option></option>
                   <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
                 </select>
@@ -81,7 +81,7 @@
             <div class="form-group">
               <label i18n for="licence">Licence</label>
               <div class="peertube-select-container">
-                <select id="licence" formControlName="licence">
+                <select id="licence" formControlName="licence" class="form-control">
                   <option></option>
                   <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
                 </select>
@@ -95,7 +95,7 @@
             <div class="form-group">
               <label i18n for="language">Language</label>
               <div class="peertube-select-container">
-                <select id="language" formControlName="language">
+                <select id="language" formControlName="language" class="form-control">
                   <option></option>
                   <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
                 </select>
@@ -109,7 +109,7 @@
             <div class="form-group">
               <label i18n for="privacy">Privacy</label>
               <div class="peertube-select-container">
-                <select id="privacy" formControlName="privacy">
+                <select id="privacy" formControlName="privacy" class="form-control">
                   <option></option>
                   <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
                   <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 90d26e13d..1b7bc56b4 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -1,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 .peertube-select-container {
   @include peertube-select-container(auto);
 }
@@ -148,65 +153,4 @@ p-calendar {
   }
 }
 
-::ng-deep {
-  .ng2-tag-input {
-    border: none !important;
-  }
-
-  .ng2-tags-container {
-    display: flex;
-    align-items: center;
-    border: 1px solid #C6C6C6;
-    border-radius: 3px;
-    padding: 5px !important;
-    height: max-content;
-  }
-
-  tag-input-form {
-    input {
-      height: 30px !important;
-      font-size: 12px !important;
-
-      background-color: var(--mainBackgroundColor) !important;
-      color: var(--mainForegroundColor) !important;
-    }
-  }
-
-  tag {
-    background-color: $grey-background-color !important;
-    color: #000 !important;
-    border-radius: 3px !important;
-    font-size: 12px !important;
-    height: 30px !important;
-    line-height: 30px !important;
-    margin: 0 5px 0 0 !important;
-    cursor: default !important;
-    padding: 0 8px 0 10px !important;
-
-    div {
-      height: 100% !important;
-    }
-  }
-
-  delete-icon {
-    cursor: pointer !important;
-    height: auto !important;
-    vertical-align: middle !important;
-    padding-left: 6px !important;
-
-    svg {
-      position: relative;
-      top: -1px;
-      height: auto !important;
-      vertical-align: middle !important;
-
-      path  {
-        fill: $grey-foreground-color !important;
-      }
-    }
-
-    &:hover {
-      transform: none !important;
-    }
-  }
-}
+@include ng2-tags
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
index 3cb57e375..be3a9662b 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
@@ -2,16 +2,16 @@
   <div class="first-step-block">
     <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
 
-    <div class="button-file">
+    <div class="button-file form-control">
       <span i18n>Select the file to upload</span>
-      <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" />
+      <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus />
     </div>
     <span class="button-file-extension">({{ videoExtensions }})</span>
 
     <div class="form-group form-group-channel">
       <label i18n for="first-step-channel">Channel</label>
       <div class="peertube-select-container">
-        <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
+        <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
           <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
         </select>
       </div>
@@ -20,7 +20,7 @@
     <div class="form-group">
       <label i18n for="first-step-privacy">Privacy</label>
       <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
+        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
           <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
           <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
         </select>
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 3e820041d..9b43d91da 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
@@ -43,9 +43,10 @@
     <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
   </div>
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" role="button" (click)="hideVisitorModal()">
-      Cancel
-    </span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
+    >
 
     <input
       type="submit" i18n-value value="Login to comment" class="action-button-submit"
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html
index 608a4632b..935656d23 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.html
@@ -7,6 +7,9 @@
   <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hide()">Maybe later</span>
+    <input
+      type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
+      (click)="hide()" (key.enter)="hide()"
+    >
   </div>
 </ng-template>