From 90556fe00faa13dea2678455b244096e88ffc32a Mon Sep 17 00:00:00 2001
From: kimsible <kimsible@users.noreply.github.com>
Date: Fri, 24 Jul 2020 00:37:58 +0200
Subject: [PATCH] Customize focus stume on user-quota

---
 .../app/shared/shared-main/users/user-quota.component.html   | 4 ++--
 .../app/shared/shared-main/users/user-quota.component.scss   | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
index 5c12ebd1cbe8..f9fb32133b2a 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.html
+++ b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -1,6 +1,6 @@
 <div class="user-quota mb-3">
   <div>
-    <strong tabindex="0" i18n>Total video quota</strong>
+    <strong class="user-quota-title" tabindex="0" i18n>Total video quota</strong>
     <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuota()">
       <div class="progress-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }"
         [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota">
@@ -10,7 +10,7 @@
   </div>
 
   <div *ngIf="hasDailyQuota()" class="mt-3">
-    <strong tabindex="0" i18n>Daily video quota</strong>
+    <strong class="user-quota-title" tabindex="0" i18n>Daily video quota</strong>
     <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
       <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
         [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily">
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index e1dae38b561f..904add0f451b 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -13,6 +13,11 @@
     width: 100% !important;
   }
 
+  .user-quota-title, .progress {
+    @include disable-outline;
+    @include button-focus(pvar(--mainColorLightest));
+  }
+
   .progress {
     @include progressbar;