feat(FEV-1570): migrate style of plugin QnA (#301)

* feat(FEV-1570): migrate style of plugin QnA * use new css syntax * add prefix --playkit and save as variables * use playkit-ui repo * update ui-managers dep
kaltura · Jan 11, 2023 · ebb8335 · ebb8335
1 parent 5ebc76f
commit ebb8335
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -63,7 +63,8 @@
   },
   "dependencies": {
     "@playkit-js/common": "^1.0.16",
-    "@playkit-js/ui-managers": "^1.3.1",
+    "@playkit-js/playkit-js-ui": "^0.73.0",
+    "@playkit-js/ui-managers": "^1.3.2",
     "classnames": "^2.2.6"
   },
   "publishConfig": {
@@ -99,7 +100,7 @@
     "name": "qna",
     "dependencies": {
       "playkit-kaltura-cuepoints": "3.0.2",
-      "playkit-ui-managers": "1.3.1"
+      "playkit-ui-managers": "1.3.2"
     }
   }
 }
diff --git a/src/components/auto-expand-text-area/autoExpandTextArea.scss b/src/components/auto-expand-text-area/autoExpandTextArea.scss
@@ -1,3 +1,5 @@
+@import '../../theme.scss';
+
 /* TODO: (2) remove this once 3rd party cross-browser custom scroll bar is Added */
 .textarea::-webkit-scrollbar {
   width: 11px;
@@ -104,20 +106,23 @@
 }
 
 .send-button {
-  background-color: #008297;
-  color: #ffffff;
+  background-color: $primary-color;
+  color: $primary-text-contrast-color;
   border: none;
-  border-radius: 14px;
+  border-radius: $roundness-1;
   font-size: 14px;
   text-align: center;
   cursor: pointer;
   margin-left: 8px;
   padding: 4px 12px;
 
-  &:hover,
+  &:hover {
+    background-color: $primary-darker-color;
+  }
+
   &:active,
   &:focus {
-    background-color: #01accd;
+    background-color: $primary-brighter-color;
   }
 
   &:disabled {

diff --git a/src/components/plugin-button/pluginButton.scss b/src/components/plugin-button/pluginButton.scss
@@ -3,7 +3,7 @@
 .qnaPluginButton {
   position: relative;
   &.active {
-    background-color: map-get($theme-colors, 'gray');
+    background-color: $tone-6-color;
   }
 
   .indicator {

diff --git a/src/theme.scss b/src/theme.scss
@@ -1,7 +1,7 @@
-$theme-colors: (
-  'primary': #ffffff,
-  'gray': #444444
-);
+@import '~@playkit-js/playkit-js-ui';
+
+// border radius
+$roundness-1: 4px;
 
 @mixin plugin-scrollbar {
   &::-webkit-scrollbar {

diff --git a/yarn.lock b/yarn.lock
@@ -655,6 +655,16 @@
     react-redux "^7.2.0"
     redux "^4.0.5"
 
+"@playkit-js/playkit-js-ui@^0.73.0":
+  version "0.73.0"
+  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-ui/-/playkit-js-ui-0.73.0.tgz#3948415346bd0d7fe3a2e3cf558fa51616266c37"
+  integrity sha512-d0Mlt0q6ypAJgK52+y2pH4kpSmxxkpajCXGsR91cHidHRD7F0Ytn6h88LZ4rh9sLSsgXOhfZxH8A5Pc9BtAtvw==
+  dependencies:
+    preact "^10.3.4"
+    preact-i18n "^2.0.0-preactx.2"
+    react-redux "^7.2.0"
+    redux "^4.0.5"
+
 "@playkit-js/playkit-js@^0.80.3":
   version "0.80.3"
   resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.80.3.tgz#07e47e560aeadc6ca3b20afde87dfdf4ab8f7ac0"
@@ -663,10 +673,10 @@
     js-logger "^1.6.0"
     ua-parser-js "1.0.2"
 
-"@playkit-js/ui-managers@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@playkit-js/ui-managers/-/ui-managers-1.3.1.tgz#2643c34f9e9ccf25255c174564f84c2dcc707066"
-  integrity sha512-y13Vl1j9mZn37DM2KtAn93XiszDq1lG6Gk9bt5MMX3gE8CVs+dQ73QoyG6zAXjl3zlkI7JA0t/JIRXuAGAz4eg==
+"@playkit-js/ui-managers@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@playkit-js/ui-managers/-/ui-managers-1.3.2.tgz#fda0c05067aa692c2c9b34a61c32b182f8d5292a"
+  integrity sha512-5k7YvZziUVt+vGVkQFfR7Eyd6ji/MLfAGgPRKIl46fu4isw6DtN7tqCwQcicuJcTt4wQPWxS9loqyJTf3idgMg==
 
 "@sinclair/typebox@^0.24.1":
   version "0.24.20"