38 files changed, 248 insertions, 240 deletions
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index c3c71bdee..7d93796ec 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/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"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index bde27b206..4ce4c18fc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/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>
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss
index df104c14e..7594b502c 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.scss
+++ b/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;
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
index 303a788d2..8fbd33871 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
+++ b/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"
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 6c42fde57..070695e57 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/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">
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()">
+      <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"
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()">
+      <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"
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index 6bac4e4a4..1bd378b13 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/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 }}
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
index 2e4180632..ece9d1022 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
+++ b/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'] }}
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 38b59a1eb..3a2d4b876 100644
--- a/client/src/app/login/login.component.html
+++ b/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"
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index e303104c5..44c994bc8 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/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>
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 9b210eb4d..8bfcc4bf6 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/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"
-    <a i18n (click)="doNotOpenAgain(); hide()" class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+      (click)="hide()" (key.enter)="hide()"
-       rel="noopener noreferrer">
+    >
+    <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
+       class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+       rel="noopener noreferrer" ngbAutofocus>
      Configure my instance
    </a>
  </div>
diff --git a/client/src/app/search/search-filters.component.html b/client/src/app/search/search-filters.component.html
index 60680c7bd..54fc7338f 100644
--- a/client/src/app/search/search-filters.component.html
+++ b/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>
diff --git a/client/src/app/search/search-filters.component.scss b/client/src/app/search/search-filters.component.scss
index 99af2e4c5..edd85bc70 100644
--- a/client/src/app/search/search-filters.component.scss
+++ b/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;
-    }
-  }
-}
diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
index 65df1cd4d..dbc8c23e3 100644
--- a/client/src/app/shared/confirm/confirm.component.html
+++ b/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>
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
index d67d4f3c8..c6e40fe72 100644
--- a/client/src/app/shared/confirm/confirm.component.ts
+++ b/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()
  }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index fb6e1343d..3cadb3619 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/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>
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index f38ea543d..365eb1938 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/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"
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 857a4dcec..8f06a6b02 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.html
+++ b/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"
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index ab6f4449d..c65e371ee 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/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"
diff --git a/client/src/app/shared/video/modals/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html
index cc1d361b3..e336b6660 100644
--- a/client/src/app/shared/video/modals/video-report.component.html
+++ b/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"
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 819be6d48..6a8558de3 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/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>
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()">
+      <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"
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 {
+@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;
-    }
-  }
-}
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()">
+    <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"
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>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 089a58009..c8966d22b 100644
--- a/client/src/sass/application.scss
+++ b/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;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 297f1f18a..f0357b579 100644
--- a/client/src/sass/bootstrap.scss
+++ b/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%)};
+    }
+  }
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f96a43b34..76e3f3f97 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 3c9fa5939..d0f1a3630 100644
--- a/client/src/sass/include/_variables.scss
+++ b/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),