WRQ-32412: WebOS ColorPicker fixes and improvements (#1672)

* Added useEffect, so the sliders change when selecting a new color from favorites.

* Added a switch to chose between HSL or RGB format.

* Revert npm-shrinkwrap override

* style improvements

* spacing adjustments

---------

Co-authored-by: Stanca <stanca.pop@lgepartner.com>

ColorPickerPOC/ColorPickerGrid.module.less

@@ -1,8 +1,8 @@
 // ColorPicker.module.less
 //
-@import '../styles/colors.less';
-@import '../styles/mixins.less';
-@import '../styles/variables.less';
+@import "../styles/colors.less";
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
 
 .colorPicker {
 	.colorsColumn {

ColorPickerPOC/ColorPickerPOC.js

@@ -12,7 +12,7 @@ import Skinnable from '../Skinnable';
 import TabLayout, {Tab} from '../TabLayout';
 
 import ColorPickerGrid from './ColorPickerGrid';
-import ColorPickerSlider, {ColorPickerSliderHSL} from './ColorPickerSlider'; // eslint-disable-line no-unused-vars
+import ColorPickerSlider from './ColorPickerSlider';
 import ColorPickerSpectrum from './ColorPickerSpectrum';
 import {generateOppositeColor} from './utils';
 
@@ -184,29 +184,28 @@ const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor,
 	}, [favoriteColors, onChangeColor, selectedColor]);
 
 	return (
-		<Popup open={open} position={'center'} {...rest}>
+		<Popup open={open} position="center" {...rest}>
 			<Row>
-				<Cell size={'75%'}>
-					<TabLayout css={css} orientation={'horizontal'}>
-						<Tab style={{width: ri.scaleToRem(400)}} title={'Grid'}>
+				<Cell size="75%">
+					<TabLayout className={componentsCss.pickerTabLayout} css={css} orientation="horizontal">
+						<Tab style={{width: ri.scaleToRem(400)}} title="Grid">
 							<div className={componentsCss.colorPicker}>
 								<ColorPickerGrid selectedColorHandler={setSelectedColor} />
 							</div>
 						</Tab>
-						<Tab style={{width: ri.scaleToRem(400)}} title={'Spectrum'}>
+						<Tab style={{width: ri.scaleToRem(400)}} title="Spectrum">
 							<div className={componentsCss.colorPicker}>
 								<ColorPickerSpectrum selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />
 							</div>
 						</Tab>
-						<Tab style={{width: ri.scaleToRem(400)}} title={'Sliders'}>
+						<Tab style={{width: ri.scaleToRem(400)}} title="Sliders">
 							<div className={componentsCss.colorPicker}>
 								<ColorPickerSlider selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />
-								{/* <ColorPickerSliderHSL selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />*/}
 							</div>
 						</Tab>
 					</TabLayout>
 				</Cell>
-				<Cell align={'end'} size={'25%'}>
+				<Cell align="end" size="25%">
 					<Column>
 						<FavoriteColors
 							colorHandler={onChangeColor}

ColorPickerPOC/ColorPickerPOC.module.less

@@ -1,4 +1,8 @@
-@import '../styles/mixins.less';
+@import "../styles/mixins.less";
+
+.pickerTabLayout {
+	align-items: center;
+}
 
 .colorPicker {
 	display: flex;
@@ -16,7 +20,6 @@
 		height: 240px;
 		margin-inline: 0;
 		transition: transform .2s;
-		width: 95%;
 
 		.selectedColorIcon {
 			transition: transform .2s;