Color picker polish (Fixes microsoft#83589)

Author: Miguel Solorio

src/vs/editor/contrib/colorPicker/colorPicker.css

@@ -28,12 +28,20 @@
 
 .colorpicker-header .picked-color {
 	width: 216px;
-	text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	line-height: 24px;
 	cursor: pointer;
 	color: white;
 	flex: 1;
-	text-align: center;
+}
+
+.colorpicker-header .picked-color .codicon {
+	color: inherit;
+	font-size: 14px;
+	position: absolute;
+	left: 8px;
 }
 
 .colorpicker-header .picked-color.light {

src/vs/editor/contrib/colorPicker/colorPickerWidget.ts

@@ -12,6 +12,7 @@ import { Emitter, Event } from 'vs/base/common/event';
 import { Disposable } from 'vs/base/common/lifecycle';
 import 'vs/css!./colorPicker';
 import { ColorPickerModel } from 'vs/editor/contrib/colorPicker/colorPickerModel';
+import { localize } from 'vs/nls';
 import { editorHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 
@@ -31,6 +32,9 @@ export class ColorPickerHeader extends Disposable {
 
 		this.pickedColorNode = dom.append(this.domNode, $('.picked-color'));
 
+		const tooltip = localize('clickToToggleColorOptions', "Click to toggle color options (rgb/hsl/hex)");
+		this.pickedColorNode.setAttribute('title', tooltip);
+
 		const colorBox = dom.append(this.domNode, $('.original-color'));
 		colorBox.style.backgroundColor = Color.Format.CSS.format(this.model.originalColor) || '';
 
@@ -58,6 +62,7 @@ export class ColorPickerHeader extends Disposable {
 
 	private onDidChangePresentation(): void {
 		this.pickedColorNode.textContent = this.model.presentation ? this.model.presentation.label : '';
+		this.pickedColorNode.prepend($('.codicon.codicon-color-mode'));
 	}
 }