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

8 files changed, 20 insertions, 18 deletions

diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
index 674a4e8a2..a155d90e0 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
+++ b/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()">
-        Cancel
-      </span>
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="dismiss()" (key.enter)="dismiss()"
+      >
 
       <input
           type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index 76886c73e..f39f66696 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/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'] }}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index cec70c6b5..4756cfecd 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/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'] }}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
index 6f48d8f7d..b12184ddc 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
+++ b/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>
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index 14e51f57c..818e34ee0 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/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">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 7f4437b19..5e95e2f9a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/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>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index 29d2b935d..59ac5097b 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/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">
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
index 22f127904..9d809d2bf 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
+++ b/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()">
-        Cancel
-      </span>
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="dismiss()" (key.enter)="dismiss()"
+      >
 
       <input
         type="submit" i18n-value value="Submit" class="action-button-submit"