fix(FEC-12097): More plugins - Manage the UI & order of the plugin ic…

…ons (#688)

solves: FEC-12097 & FEC-12500, FEC-12497, FEC-12538, FEC-12553

related pr:
kaltura/playkit-js-ui-managers#10

in addition to the required changes from upper bar manager pr
the following general UI bugs were fixed: FEC-12500, FEC-12497, FEC-12538, FEC-12553

package.json

@@ -19,6 +19,13 @@
   },
   "license": "AGPL-3.0",
   "main": "dist/playkit-ui.js",
+  "sass": "src/styles/exported.scss",
+  "files": [
+    "dist/**/*",
+    "src/styles/exported.scss",
+    "translations/**/*",
+    "flow-typed/**/*"
+  ],
   "scripts": {
     "prebuild": "npm run clean",
     "build": "NODE_ENV=production webpack --mode production",

src/components/cvaa-overlay/_cvaa-overlay.scss

@@ -61,7 +61,7 @@
   .custom-captions-applied {
     margin-top: 50px;
     a {
-      color: #01accd;
+      color: $brand-color-light;
     }
   }
 

src/components/icon/icon.scss

@@ -249,7 +249,7 @@
 }
 
 .icon-vr-stereo-full {
-  background-image: icon(vrStereoFull, '#01ACCD');
+  background-image: icon(vrStereoFull, $brand-color);
 }
 
 .icon-chromecast {

src/components/language/_language.scss

@@ -1,7 +1,7 @@
 .player {
   a:not([href]) {
     &.advanced-captions-menu-link {
-      color: #01accd;
+      color: $brand-color-light;
       text-decoration: underline;
     }
   }

src/styles/_plugin-button.scss

@@ -0,0 +1,29 @@
+.upper-bar-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  padding: 2px;
+  cursor: pointer;
+  color: $tone-1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  border: none;
+  background-color: transparent;
+  margin: 0 4px;
+
+  &:hover {
+    background-color: $tone-4;
+    opacity: 1;
+  }
+
+  &:focus {
+    background-color: $tone-6;
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+  }
+}

src/styles/_variables.scss

@@ -1,25 +1,33 @@
-$brand-color: #01accd;
-$tab-focus-color: #00cbff;
+@import 'exported';
+
+$brand-color: #006bff;
+$brand-color-dark: #004bb3;
+$brand-color-light: #4d89ff;
+$brand-color-text-contrast: #ffffff;
+$tab-focus-color: $brand-color;
+
+// Old version - deprecated
 $white: #ffffff;
 $grayscale1: #333;
 $grayscale2: #424242;
 $grayscale3: #999;
 $grayscale4: #cccccc;
+
 $headline-font-size: 18px;
 $subheadline-font-size: 14px;
 $success-color: #009444;
 $danger-color: #db1f26;
 $ads-color: #f9a71b;
 $live-color: #da1f26;
 $new-live-color: #e12437;
-$tooltip-bg-color: #fff;
-$tooltip-color: $grayscale1;
+$tooltip-bg-color: $tone-1;
+$tooltip-color: $tone-7;
 $tooltip-margin: calc(100% + 10px);
 $tooltip-arrow-height: 4px;
 $tooltip-arrow-width: 5px;
 $tooltip-semi-side-margin: 16px;
 $tooltip-semi-side-arrow-margin: 11px;
-$font-family: sans-serif;
+$font-family: Lato, Helvetica Neue, Segoe UI, sans-serif;
 $progress-bar-height: 4px;
 $progress-bar-border-radius: $progress-bar-height / 2;
 $spinner-circle-radius: 4px;

src/styles/exported.scss

@@ -0,0 +1,11 @@
+// Sass variables exported using the npm package for plugins usage
+
+// New version - upcoming
+$tone-1: #ffffff;
+$tone-2: #cccccc;
+$tone-3: #999999;
+$tone-4: #888888;
+$tone-5: #666666;
+$tone-6: #444444;
+$tone-7: #222222;
+$tone-8: #000000;

src/styles/style.scss

@@ -5,6 +5,7 @@
 @import 'buttons';
 @import 'dropdown';
 @import 'control-button';
+@import 'plugin-button';
 @import 'links';
 @import 'shell';
 @import 'captions';

src/ui-presets/playback.js

@@ -71,6 +71,7 @@ class PlaybackUI extends Component {
             <VideoArea />
             <GuiArea>
               <Fragment>
+                <UnmuteIndication />
                 <Loading />
                 <OverlayPortal />
                 <PictureInPictureOverlay />
@@ -84,7 +85,6 @@ class PlaybackUI extends Component {
                   <TopBar />
                   <InteractiveArea>
                     <Watermark />
-                    <UnmuteIndication />
                     <PlaylistCountdown />
                   </InteractiveArea>
                   <BottomBar