fix(ADA-1084): Color contrast of v7 player icons (#894)

Issue: menu controls can have very low contrast ratios Fix: make the gradient stronger and add a shadow to the icons and the text Resolves ADA-1084
kaltura · Jun 23, 2024 · 4521661 · 4521661
1 parent 52fc63a
commit 4521661
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/src/components/bottom-bar/_bottom-bar.scss b/src/components/bottom-bar/_bottom-bar.scss
@@ -1,5 +1,5 @@
 .player .bottom-bar {
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
   color: #fff;
   height: auto;
   width: 100%;

diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
@@ -136,6 +136,7 @@
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;
+  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.70));
 }
 
 .badge-icon:after {

diff --git a/src/components/time-display/_time-display.scss b/src/components/time-display/_time-display.scss
@@ -5,6 +5,7 @@
   font-size: 14px;
   padding: 0 23px;
   font-weight: bold;
+  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.70));
 }
 
 .touch .time-display {

diff --git a/src/components/top-bar/_top-bar.scss b/src/components/top-bar/_top-bar.scss
@@ -1,5 +1,5 @@
 .player .top-bar {
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
   color: #fff;
   visibility: hidden;
   position: relative;