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

client/src/app/+about/about-instance/contact-admin-modal.component.html

@@ -10,7 +10,7 @@
       <div class="form-group">
         <label i18n for="fromName">Your name</label>
         <input
-          type="text" id="fromName"
+          type="text" id="fromName" class="form-control"
           formControlName="fromName" [ngClass]="{ 'input-error': formErrors.fromName }"
         >
         <div *ngIf="formErrors.fromName" class="form-error">{{ formErrors.fromName }}</div>
@@ -19,7 +19,7 @@
       <div class="form-group">
         <label i18n for="fromEmail">Your email</label>
         <input
-          type="text" id="fromEmail"
+          type="text" id="fromEmail" class="form-control"
           formControlName="fromEmail" [ngClass]="{ 'input-error': formErrors['fromEmail'] }"
         >
         <div *ngIf="formErrors.fromEmail" class="form-error">{{ formErrors.fromEmail }}</div>
@@ -28,7 +28,7 @@
       <div class="form-group">
         <label i18n for="subject">Subject</label>
         <input
-          type="text" id="subject"
+          type="text" id="subject" class="form-control"
           formControlName="subject" [ngClass]="{ 'input-error': formErrors['subject'] }"
         >
         <div *ngIf="formErrors.subject" class="form-error">{{ formErrors.subject }}</div>
@@ -36,7 +36,7 @@
 
       <div class="form-group">
         <label i18n for="body">Your message</label>
-        <textarea id="body" formControlName="body" [ngClass]="{ 'input-error': formErrors['body'] }">
+        <textarea id="body" formControlName="body" class="form-control" [ngClass]="{ 'input-error': formErrors['body'] }">
         </textarea>
         <div *ngIf="formErrors.body" class="form-error">{{ formErrors.body }}</div>
       </div>
@@ -44,9 +44,10 @@
       <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
+        <input
-          Cancel
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-        </span>
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Submit" class="action-button-submit"

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html

@@ -19,7 +19,7 @@
               <div class="form-group">
                 <label i18n for="instanceName">Name</label>
                 <input
-                  type="text" id="instanceName"
+                  type="text" id="instanceName" class="form-control"
                   formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
                 >
                 <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
@@ -28,7 +28,7 @@
               <div class="form-group">
                 <label i18n for="instanceShortDescription">Short description</label>
                 <textarea
-                  id="instanceShortDescription" formControlName="shortDescription" class="small"
+                  id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
                   [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
                 ></textarea>
                 <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
@@ -107,7 +107,7 @@
                 </my-help>
 
                 <div class="peertube-select-container">
-                  <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
+                  <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
                     <option i18n value="do_not_list">Do not list</option>
                     <option i18n value="blur">Blur thumbnails</option>
                     <option i18n value="display">Display</option>
@@ -172,7 +172,7 @@
                 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
 
                 <textarea
-                  id="instanceCreationReason" formControlName="creationReason" class="small"
+                  id="instanceCreationReason" formControlName="creationReason" class="small" class="form-control"
                   [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
                 ></textarea>
                 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
@@ -183,7 +183,7 @@
                 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
 
                 <textarea
-                  id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small"
+                  id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="form-control small"
                   [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
                 ></textarea>
                 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
@@ -194,7 +194,7 @@
                 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
 
                 <textarea
-                  id="instanceBusinessModel" formControlName="businessModel" class="small"
+                  id="instanceBusinessModel" formControlName="businessModel" class="form-control small"
                   [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
                 ></textarea>
                 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
@@ -249,7 +249,7 @@
                 <label i18n for="themeDefault">Theme</label>
 
                 <div class="peertube-select-container">
-                  <select formControlName="default" id="themeDefault">
+                  <select formControlName="default" id="themeDefault" class="form-control">
                     <option i18n value="default">default</option>
 
                     <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
@@ -261,7 +261,7 @@
             <div class="form-group" formGroupName="instance">
               <label i18n for="instanceDefaultClientRoute">Landing page</label>
               <div class="peertube-select-container">
-                <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
+                <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
                   <option i18n value="/videos/overview">Discover videos</option>
                   <option i18n value="/videos/trending">Trending videos</option>
                   <option i18n value="/videos/most-liked">Most liked videos</option>
@@ -303,7 +303,7 @@
                     <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
                       <label i18n for="signupLimit">Signup limit</label>
                       <input
-                        type="number" min="-1" id="signupLimit"
+                        type="number" min="-1" id="signupLimit" class="form-control"
                         formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
                       >
                       <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
@@ -318,7 +318,7 @@
               <div class="form-group">
                 <label i18n for="userVideoQuota">Default video quota per user</label>
                 <div class="peertube-select-container">
-                  <select id="userVideoQuota" formControlName="videoQuota">
+                  <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
                     <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
                       {{ videoQuotaOption.label }}
                     </option>
@@ -330,7 +330,7 @@
               <div class="form-group">
                 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
                 <div class="peertube-select-container">
-                  <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily">
+                  <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
                     <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
                       {{ videoQuotaDailyOption.label }}
                     </option>
@@ -451,7 +451,7 @@
                         <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
                           <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
                           <input
-                            type="text" id="followingsInstanceAutoFollowIndexUrl"
+                            type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
                             formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
                           >
                           <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
@@ -477,7 +477,7 @@
             <div class="form-group" formGroupName="admin">
               <label i18n for="adminEmail">Admin email</label>
               <input
-                type="text" id="adminEmail"
+                type="text" id="adminEmail" class="form-control"
                 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
               >
               <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
@@ -518,7 +518,7 @@
                   <label i18n for="signupLimit">Your Twitter username</label>
 
                   <input
-                    type="text" id="servicesTwitterUsername"
+                    type="text" id="servicesTwitterUsername" class="form-control"
                     formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
                   >
                   <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
@@ -656,7 +656,7 @@
                 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                   <label i18n for="transcodingThreads">Transcoding threads</label>
                   <div class="peertube-select-container">
-                    <select id="transcodingThreads" formControlName="threads">
+                    <select id="transcodingThreads" formControlName="threads" class="form-control">
                       <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
                         {{ transcodingThreadOption.label }}
                       </option>
@@ -707,7 +707,7 @@
               <div class="form-group" formGroupName="previews">
                 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
                 <input
-                  type="number" min="0" id="cachePreviewsSize"
+                  type="number" min="0" id="cachePreviewsSize" class="form-control"
                   formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
                 >
                 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
@@ -716,7 +716,7 @@
               <div class="form-group" formGroupName="captions">
                 <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
                 <input
-                  type="number" min="0" id="cacheCaptionsSize"
+                  type="number" min="0" id="cacheCaptionsSize" class="form-control"
                   formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
                 >
                 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
@@ -750,7 +750,7 @@
                   </my-help>
 
                   <textarea
-                    id="customizationJavascript" formControlName="javascript"
+                    id="customizationJavascript" formControlName="javascript" class="form-control"
                     [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
                   ></textarea>
 
@@ -780,7 +780,7 @@
                   </my-help>
 
                   <textarea
-                    id="customizationCSS" formControlName="css"
+                    id="customizationCSS" formControlName="css" class="form-control"
                     [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
                   ></textarea>
                   <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>

client/src/app/+admin/follows/following-add/following-add.component.scss

@@ -5,13 +5,6 @@ textarea {
   height: 250px;
 }
 
-.form-control {
-  &, &:focus {
-    background-color: var(--inputBackgroundColor);
-    color: var(--mainForegroundColor);
-  }
-}
-
 input[type=submit] {
   @include peertube-button;
   @include orange-button;

client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html

@@ -20,7 +20,10 @@
       </div>
 
       <div class="form-group 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="Update this comment" class="action-button-submit"

client/src/app/+admin/users/user-edit/user-edit.component.html

@@ -82,7 +82,7 @@
       <div class="form-group" *ngIf="isCreation()">
         <label i18n for="username">Username</label>
         <input
-          type="text" id="username" i18n-placeholder placeholder="john"
+          type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
           formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
         >
         <div *ngIf="formErrors.username" class="form-error">
@@ -93,7 +93,7 @@
       <div class="form-group">
         <label i18n for="email">Email</label>
         <input
-          type="text" id="email" i18n-placeholder placeholder="mail@example.com"
+          type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
           formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
           autocomplete="off"
         >
@@ -112,7 +112,7 @@
           </ng-template>
         </my-help>
         <input
-          type="password" id="password" autocomplete="new-password"
+          type="password" id="password" autocomplete="new-password" class="form-control"
           formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
         >
         <div *ngIf="formErrors.password" class="form-error">

client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html

@@ -21,9 +21,10 @@
 
   <div class="modal-footer inputs">
     <div class="form-group inputs">
-      <span i18n class="action-button action-button-cancel" (click)="dismiss()">
+      <input
-        Cancel
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-      </span>
+        (click)="dismiss()" (key.enter)="dismiss()"
+      >
 
       <input
           type="submit" i18n-value value="Submit" class="action-button-submit"

client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html

@@ -14,7 +14,7 @@
   <div class="form-group">
     <label i18n for="new-email">New email</label>
     <input
-      type="email" id="new-email" i18n-placeholder placeholder="Your new email"
+      type="email" id="new-email" i18n-placeholder placeholder="Your new email" class="form-control"
       formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
     >
     <div *ngIf="formErrors['new-email']" class="form-error">
@@ -25,7 +25,7 @@
   <div class="form-group">
     <input
       type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off"
-      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" class="form-control"
     >
     <div *ngIf="formErrors['password']" class="form-error">
       {{ formErrors['password'] }}

client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html

@@ -5,7 +5,7 @@
   <label i18n for="current-password">Change password</label>
   <input
     type="password" id="current-password" i18n-placeholder placeholder="Current password" autocomplete="current-password"
-    formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }"
+    formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }" class="form-control"
   >
   <div *ngIf="formErrors['current-password']" class="form-error">
     {{ formErrors['current-password'] }}
@@ -13,7 +13,7 @@
 
   <input
     type="password" id="new-password" i18n-placeholder placeholder="New password" autocomplete="new-password"
-    formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
+    formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" class="form-control"
   >
   <div *ngIf="formErrors['new-password']" class="form-error">
     {{ formErrors['new-password'] }}
@@ -21,7 +21,7 @@
 
   <input
     type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password" autocomplete="new-password"
-    formControlName="new-confirmed-password"
+    formControlName="new-confirmed-password" class="form-control"
   >
   <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
     {{ formErrors['new-confirmed-password'] }}

client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html

@@ -3,7 +3,7 @@
     <label i18n for="theme">Theme</label>
 
     <div class="peertube-select-container">
-      <select formControlName="theme" id="theme">
+      <select formControlName="theme" id="theme" class="form-control">
         <option i18n value="instance-default">instance default</option>
         <option i18n value="default">peertube default</option>
 

client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html

@@ -5,7 +5,7 @@
   <div class="form-group">
     <label i18n for="display-name">Display name</label>
     <input
-      type="text" id="display-name"
+      type="text" id="display-name" class="form-control"
       formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
     >
     <div *ngIf="formErrors['display-name']" class="form-error">
@@ -16,7 +16,7 @@
   <div class="form-group">
     <label i18n for="description">Description</label>
     <textarea
-      id="description" formControlName="description"
+      id="description" formControlName="description" class="form-control"
       [ngClass]="{ 'input-error': formErrors['description'] }"
     ></textarea>
     <div *ngIf="formErrors.description" class="form-error">

client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html

@@ -10,7 +10,7 @@
     </my-help>
 
     <div class="peertube-select-container">
-      <select id="nsfwPolicy" formControlName="nsfwPolicy">
+      <select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
         <option i18n value="do_not_list">Do not list</option>
         <option i18n value="blur">Blur thumbnails</option>
         <option i18n value="display">Display</option>

client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html

@@ -33,7 +33,7 @@
         <div class="input-group">
           <input
             type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
-            formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
+            formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
           >
           <div class="input-group-append">
             <span class="input-group-text">@{{ instanceHost }}</span>
@@ -52,7 +52,7 @@
       <div class="form-group">
         <label i18n for="display-name">Display name</label>
         <input
-          type="text" id="display-name"
+          type="text" id="display-name" class="form-control"
           formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
         >
         <div *ngIf="formErrors['display-name']" class="form-error">
@@ -63,7 +63,7 @@
       <div class="form-group">
         <label i18n for="description">Description</label>
         <textarea
-          id="description" formControlName="description"
+          id="description" formControlName="description" class="form-control"
           [ngClass]="{ 'input-error': formErrors['description'] }"
         ></textarea>
         <div *ngIf="formErrors.description" class="form-error">

client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html

@@ -18,9 +18,10 @@
 
   <div class="modal-footer inputs">
     <div class="form-group inputs">
-      <span i18n class="action-button action-button-cancel" (click)="dismiss()">
+      <input
-        Cancel
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-      </span>
+        (click)="dismiss()" (key.enter)="dismiss()"
+      >
 
       <input
         type="submit" i18n-value value="Submit" class="action-button-submit"

client/src/app/+signup/+register/register-step-user.component.html

@@ -21,7 +21,7 @@
     <div class="input-group">
       <input
         type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
-        formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+        formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
       >
       <div class="input-group-append">
         <span class="input-group-text">@{{ instanceHost }}</span>
@@ -41,7 +41,7 @@
     <label for="email" i18n>Email</label>
     <input
       type="text" id="email" i18n-placeholder placeholder="Email"
-      formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+      formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
     >
     <div *ngIf="formErrors.email" class="form-error">
       {{ formErrors.email }}
@@ -52,7 +52,7 @@
     <label for="password" i18n>Password</label>
     <input
       type="password" id="password" i18n-placeholder placeholder="Password" autocomplete="new-password"
-      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+      formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
     >
     <div *ngIf="formErrors.password" class="form-error">
       {{ formErrors.password }}

client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html

@@ -8,7 +8,7 @@
       <label i18n for="verify-email-email">Email</label>
       <input
         type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
-        formControlName="verify-email-email" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
+        formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
       >
       <div *ngIf="formErrors['verify-email-email']" class="form-error">
           {{ formErrors['verify-email-email'] }}

client/src/app/login/login.component.html

@@ -28,7 +28,7 @@
         <label i18n for="username">User</label>
         <input
           type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
-          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
+          formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
         >
         <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
           or create an account
@@ -45,7 +45,7 @@
       <div>
         <input
           type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
-          formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+          formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
         >
         <a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
       </div>
@@ -81,7 +81,10 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">Cancel</span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
+    >
 
     <input
       type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"

client/src/app/modal/instance-config-warning-modal.component.html

@@ -40,7 +40,10 @@
 
     </my-peertube-checkbox>
 
-    <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
+    <input
+      type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
+      (click)="hide()" (key.enter)="hide()"
+    >
   </div>
 
 </ng-template>

client/src/app/modal/welcome-modal.component.html

@@ -76,10 +76,14 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-understood" (click)="hide()">Remind me later</span>
+    <input
+      type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
+      (click)="hide()" (key.enter)="hide()"
+    >
 
-    <a i18n (click)="doNotOpenAgain(); hide()" class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+    <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
-       rel="noopener noreferrer">
+       class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+       rel="noopener noreferrer" ngbAutofocus>
       Configure my instance
     </a>
   </div>

client/src/app/search/search-filters.component.html

@@ -46,6 +46,7 @@
               type="text" id="original-publication-after" name="original-publication-after"
               i18n-placeholder placeholder="After..."
               [(ngModel)]="originallyPublishedStartYear"
+              class="form-control"
             >
           </div>
           <div class="col-sm-6">
@@ -55,6 +56,7 @@
               type="text" id="original-publication-before" name="original-publication-before"
               i18n-placeholder placeholder="Before..."
               [(ngModel)]="originallyPublishedEndYear"
+              class="form-control"
             >
           </div>
         </div>
@@ -102,7 +104,7 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf">
+          <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf" class="form-control">
             <option [value]="undefined" i18n>Display all categories</option>
             <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
           </select>
@@ -115,7 +117,7 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf">
+          <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf" class="form-control">
             <option [value]="undefined" i18n>Display all licenses</option>
             <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
           </select>
@@ -128,7 +130,7 @@
           Reset
         </button>
         <div class="peertube-select-container">
-          <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf">
+          <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf" class="form-control">
             <option [value]="undefined" i18n>Display all languages</option>
             <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
           </select>

client/src/app/search/search-filters.component.scss

@@ -66,65 +66,4 @@ input[type=submit] {
   white-space: nowrap;
 }
 
-::ng-deep {
+@include ng2-tags
-  .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;
-    }
-  }
-}

client/src/app/shared/confirm/confirm.component.html

@@ -16,11 +16,15 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="dismiss()" (key.enter)="dismiss()"
+    >
 
     <input
+      ngbAutofocus
       type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
-      (click)="close()"
+      (click)="close()" (key.enter)="confirm()"
     >
   </div>
 </ng-template>

client/src/app/shared/confirm/confirm.component.ts

@@ -45,7 +45,6 @@ export class ConfirmComponent implements OnInit {
     )
   }
 
-  @HostListener('document:keydown.enter')
   confirm () {
     if (this.openedModal) this.openedModal.close()
   }

client/src/app/shared/forms/markdown-textarea.component.html

@@ -1,7 +1,8 @@
 <div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
   <textarea
     [(ngModel)]="content" (ngModelChange)="onModelChange()"
-    [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+    class="form-control" [ngClass]="classes"
+    [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
     [id]="name" [name]="name">
   </textarea>
 

client/src/app/shared/moderation/user-ban-modal.component.html

@@ -8,8 +8,10 @@
   <div class="modal-body">
     <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+        <textarea
-        </textarea>
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          class="form-control" [ngClass]="{ 'input-error': formErrors['reason'] }"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
@@ -20,7 +22,10 @@
       </div>
 
       <div class="form-group 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="Ban this user" class="action-button-submit"

client/src/app/shared/video/modals/video-blacklist.component.html

@@ -8,8 +8,10 @@
 
     <form novalidate [formGroup]="form" (ngSubmit)="blacklist()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+        <textarea
-        </textarea>
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
@@ -27,9 +29,10 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
+        <input
-          Cancel
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-        </span>
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Submit" class="action-button-submit"

client/src/app/shared/video/modals/video-download.component.html

@@ -95,9 +95,10 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hide()">
+    <input
-      Cancel
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-    </span>
+      (click)="hide()" (key.enter)="hide()"
+    >
 
     <input
       type="submit" i18n-value value="Download" class="action-button-submit"

client/src/app/shared/video/modals/video-report.component.html

@@ -12,17 +12,20 @@
 
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
+        <textarea 
-        </textarea>
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
+        <input
-          Cancel
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-        </span>
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Submit" class="action-button-submit"

client/src/app/shared/video/video-miniature.component.html

@@ -52,7 +52,7 @@
     <div class="video-actions">
       <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
       <my-video-actions-dropdown
-        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
+        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left auto"
         (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
       ></my-video-actions-dropdown>
     </div>

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()">
+      <input
-        Cancel
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-      </span>
+        (click)="hide()" (key.enter)="hide()"
+      >
 
       <input
         type="submit" i18n-value value="Add this caption" class="action-button-submit"

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>

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 {
+@include ng2-tags
-  .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;
-    }
-  }
-}

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>

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()">
+    <input
-      Cancel
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-    </span>
+      (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
+    >
 
     <input
       type="submit" i18n-value value="Login to comment" class="action-button-submit"

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>

client/src/sass/application.scss

@@ -25,6 +25,7 @@ body {
   // for css custom properties #{$var}
   --mainColor: #{$main-color};
   --mainColorLighter: #{$main-color-lighter};
+  --mainColorLightest: #{$main-color-lightest};
   --mainHoverColor: #{$main-hover-color};
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
@@ -113,6 +114,7 @@ label {
 .main-col {
   margin-left: $menu-width;
   width: calc(100% - #{$menu-width});
+  outline: none;
 
   .margin-content {
     margin-left: $not-expanded-horizontal-margins;

client/src/sass/bootstrap.scss

@@ -230,3 +230,20 @@ ngb-tooltip-window {
     background-color: var(--secondaryColor);
   }
 }
+
+// input box-shadow on focus
+.form-control {
+  font-size: 15px;
+  color: var(--mainForegroundColor);
+  background-color: var(--inputBackgroundColor);
+  outline: none;
+
+  &:focus-within,
+  &:focus {
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+
+    &.input-error {
+      box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
+    }
+  }
+}

client/src/sass/include/_mixins.scss

@@ -80,9 +80,10 @@
   }
 }
 
-@mixin button-focus-visible-shadow($color) {
+@mixin button-focus($color) {
+  &:focus,
   &.focus-visible {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
+    box-shadow: 0 0 0 .2rem $color;
   }
 }
 
@@ -127,7 +128,7 @@
 }
 
 @mixin orange-button {
-  @include button-focus-visible-shadow(var(--mainHoverColor));
+  @include button-focus(var(--mainColorLightest));
 
   &, &:active, &:focus {
     color: #fff;
@@ -151,6 +152,8 @@
 }
 
 @mixin tertiary-button {
+  @include button-focus($grey-button-outline-color);
+
   color: $grey-foreground-color;
   background-color: transparent;
 
@@ -164,6 +167,8 @@
 }
 
 @mixin grey-button {
+  @include button-focus($grey-button-outline-color);
+
   &, &:active, &:focus {
     background-color: $grey-background-color;
     color: $grey-foreground-color;
@@ -274,10 +279,8 @@
 @mixin peertube-select-container ($width) {
   padding: 0;
   margin: 0;
-  border: 1px solid #C6C6C6;
   width: $width;
   border-radius: 3px;
-  overflow: hidden;
   background: var(--inputBackgroundColor);
   position: relative;
   font-size: 15px;
@@ -303,8 +306,7 @@
     width: calc(100% + 2px);
     position: relative;
     left: 1px;
-    border: none;
+    border: 1px solid #C6C6C6;
-    box-shadow: none;
     background: transparent none;
     appearance: none;
     cursor: pointer;
@@ -370,7 +372,7 @@
   position: absolute;
 
   &:focus + span {
-    box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest);
   }
 
   & + span {
@@ -703,3 +705,72 @@
     text-align: center;
   }
 }
+
+@mixin ng2-tags {
+  ::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;
+
+      &:focus-within {
+        box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+      }
+    }
+
+    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;
+      }
+    }
+  }
+}

client/src/sass/include/_variables.scss

@@ -12,11 +12,13 @@ $grey-background-color: #E5E5E5;
 $grey-background-hover-color: #EFEFEF;
 $grey-foreground-color: #585858;
 $grey-foreground-hover-color: #303030;
+$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
 
 // Palette
 $main-color: hsl(24, 90%, 50%);
 $main-hover-color: lighten($main-color, 5%);
 $main-color-lighter: lighten($main-color, 10%);
+$main-color-lightest: lighten($main-color, 40%);
 $secondary-color: hsl(187, 77, 34);
 //
 
@@ -77,6 +79,7 @@ $activated-action-button-color: black;
 $variables: (
   --mainColor: var(--mainColor),
   --mainColorLighter: var(--mainColorLighter),
+  --mainColorLightest: var(--mainColorLightest),
   --mainHoverColor: var(--mainHoverColor),
   --mainBackgroundColor: var(--mainBackgroundColor),
   --mainForegroundColor: var(--mainForegroundColor),