added new icons, fixed so different icons in different themes, added animation to hover on icons, styled choose visualization and datasource for both themes, made som styling adjustments to whole panel editor

public/app/features/dashboard/dashgrid/PanelEditor.tsx

@@ -15,6 +15,8 @@ import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
+
 interface PanelEditorProps {
   panel: PanelModel;
   dashboard: DashboardModel;
@@ -47,11 +49,11 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
     const { panel, dashboard, onTypeChanged, plugin, angularPanel } = this.props;
 
     switch (activeTab) {
-      case 'general':
+      case 'advanced':
         return <GeneralTab panel={panel} />;
       case 'queries':
         return <QueriesTab panel={panel} dashboard={dashboard} />;
-      case 'alert':
+      case 'alerts':
         return <AlertTab angularPanel={angularPanel} />;
       case 'visualization':
         return (
@@ -75,21 +77,18 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
     const tabs = [
       { id: 'queries', text: 'Queries' },
       { id: 'visualization', text: 'Visualization' },
-      { id: 'general', text: 'General' },
+      { id: 'advanced', text: 'Advanced' },
     ];
 
     if (config.alertingEnabled && plugin.id === 'graph') {
       tabs.push({
-        id: 'alert',
-        text: 'Alert',
+        id: 'alerts',
+        text: 'Alerts',
       });
     }
 
     return (
       <div className="panel-editor-container__editor">
-        <div className="panel-editor__close">
-          <i className="fa fa-arrow-left" />
-        </div>
         {
           // <div className="panel-editor-resizer">
           //   <div className="panel-editor-resizer__handle">
@@ -124,7 +123,9 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   return (
     <div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
       <a className={tabClasses}>
-        <img src={`public/img/panel-tabs/${tab.id}${activeTab === tab.id ? '-selected' : ''}.svg`} />
+        <Tooltip content={`${tab.text}`} className="popper__manager--block" placement="auto">
+          <i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
+        </Tooltip>
       </a>
     </div>
   );

public/img/icons_dark_theme/icon_advanced.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A0A0C;}
+	.st1{fill:#E3E2E2;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<path class="st1" d="M58.2,51.9c1.2-2.9,1-6.4-1-9.1c-1.5-2.1-3.7-3.3-6.1-3.7c-1.2-0.2-2.5-0.1-3.7,0.2l4,5.5
+			c1.1,1.5,0.8,3.7-0.8,4.8c-0.8,0.6-1.7,0.8-2.6,0.6c-0.9-0.1-1.7-0.6-2.2-1.4l-4-5.5c-2,3.1-1.9,7.2,0.4,10.4
+			c1.5,2.1,3.7,3.3,6.1,3.7c0.8,0.1,1.5,0.1,2.3,0.1l12.8,17.6c0.8,1.1,1.9,1.7,3.1,1.9s2.5-0.1,3.5-0.9c2.1-1.5,2.6-4.5,1-6.6
+			L58.2,51.9z M67.9,71c1,0.2,1.7,1.1,1.5,2.1c-0.2,1-1.1,1.7-2.1,1.5s-1.7-1.1-1.5-2.1C65.9,71.6,66.9,70.9,67.9,71z"/>
+		<path class="st1" d="M61.5,50.9c0,0.1-0.1,0.3-0.1,0.4C61.4,51.2,61.4,51.1,61.5,50.9z"/>
+		<path class="st1" d="M59.9,41.6c0.1,0.1,0.1,0.2,0.2,0.3C60,41.9,60,41.7,59.9,41.6z"/>
+		<path class="st1" d="M61.6,50.1c0,0.2-0.1,0.5-0.1,0.7c0.2-0.8,0.3-1.7,0.3-2.6c0-2.3-0.6-4.4-1.7-6.2
+			C61.5,44.3,62.1,47.2,61.6,50.1z"/>
+		<path class="st1" d="M59.7,41.3C59.7,41.4,59.7,41.4,59.7,41.3C59.7,41.4,59.7,41.4,59.7,41.3z"/>
+		<path class="st1" d="M73.4,59.1l1.9-5.7l-6.4-3c0.1-0.7,0.1-1.5,0.1-2.2c0-0.7,0-1.4-0.1-2.1l6.4-3l-1.9-5.7l-6.9,1.3
+			c-0.7-1.3-1.6-2.4-2.5-3.5l3.4-6.2l-4.9-3.5l-4.8,5.1c-1.3-0.6-2.7-1.1-4.1-1.4l-0.9-7h-6l-0.9,7c-1.4,0.3-2.8,0.7-4.1,1.3
+			l-4.8-5.1L32,28.9l3.4,6.2c-1,1.1-1.8,2.2-2.5,3.5L26,37.2L24.1,43l6.4,3c-0.1,0.7-0.1,1.5-0.1,2.2c0,0.7,0,1.4,0.1,2.1l-6.4,3
+			l1.9,5.7l6.9-1.3c0.7,1.3,1.6,2.4,2.5,3.5L32,67.3l4.9,3.5l4.8-5.1c1.3,0.6,2.7,1.1,4.1,1.4l0.9,7h6l0.9-7c0.2,0,0.4-0.1,0.6-0.1
+			l-4.8-6.6c-0.5,0-1.1-0.1-1.6-0.1c-6.7-1-11.2-7.3-10.2-14c1-6.7,7.3-11.2,14-10.2c3.5,0.5,6.4,2.5,8.2,5.2c0,0,0,0,0.1,0.1
+			c0.1,0.1,0.1,0.2,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0,0c1.1,1.8,1.7,3.9,1.7,6.2c0,0.9-0.1,1.8-0.3,2.6c0,0,0,0.1,0,0.1
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1,0,0.1-0.1,0.2l4.9,6.7c0.1-0.1,0.2-0.3,0.3-0.4L73.4,59.1z"/>
+	</g>
+</g>
+</svg>

public/img/icons_dark_theme/icon_advanced_active.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#0A0A0C;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{fill:url(#SVGID_4_);}
+	.st5{fill:url(#SVGID_5_);}
+	.st6{fill:url(#SVGID_6_);}
+	.st7{fill:url(#SVGID_7_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,49.4C94.4,25,74.6,5.1,50.2,5.1S5.9,25,5.9,49.4s19.9,44.3,44.3,44.3S94.4,73.8,94.4,49.4z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="56.3802" y1="134.9514" x2="56.3802" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st2" d="M58.4,51.3c1.2-2.9,1-6.4-1-9.1c-1.5-2.1-3.7-3.3-6.1-3.7c-1.2-0.2-2.5-0.1-3.7,0.2l4,5.5
+			c1.1,1.5,0.8,3.7-0.8,4.8c-0.8,0.6-1.7,0.8-2.6,0.6c-0.9-0.1-1.7-0.6-2.2-1.4l-4-5.5c-2,3.1-1.9,7.2,0.4,10.4
+			c1.5,2.1,3.7,3.3,6.1,3.7c0.8,0.1,1.5,0.1,2.3,0.1l12.8,17.6c0.8,1.1,1.9,1.7,3.1,1.9s2.5-0.1,3.5-0.9c2.1-1.5,2.6-4.5,1-6.6
+			L58.4,51.3z M68.1,70.4c1,0.2,1.7,1.1,1.5,2.1c-0.2,1-1.1,1.7-2.1,1.5S65.8,73,66,72C66.1,70.9,67.1,70.3,68.1,70.4z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="61.6059" y1="134.9514" x2="61.6059" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st3" d="M61.7,50.3c0,0.1-0.1,0.3-0.1,0.4C61.6,50.6,61.6,50.4,61.7,50.3z"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="60.1683" y1="134.9514" x2="60.1683" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st4" d="M60.1,41c0.1,0.1,0.1,0.2,0.2,0.3C60.2,41.2,60.1,41.1,60.1,41z"/>
+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="61.1232" y1="134.9514" x2="61.1232" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st5" d="M61.8,49.5c0,0.2-0.1,0.5-0.1,0.7c0.2-0.8,0.3-1.7,0.3-2.6c0-2.3-0.6-4.4-1.7-6.2
+			C61.7,43.7,62.3,46.5,61.8,49.5z"/>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="59.8929" y1="134.9514" x2="59.8929" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st6" d="M59.9,40.7C59.9,40.7,59.9,40.8,59.9,40.7C59.9,40.8,59.9,40.7,59.9,40.7z"/>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="49.8648" y1="134.9514" x2="49.8648" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st7" d="M73.6,58.5l1.9-5.7l-6.4-3c0.1-0.7,0.1-1.5,0.1-2.2c0-0.7,0-1.4-0.1-2.1l6.4-3l-1.9-5.7L66.7,38
+			c-0.7-1.3-1.6-2.4-2.5-3.5l3.4-6.2l-4.9-3.5l-4.8,5.1c-1.3-0.6-2.7-1.1-4.1-1.4l-0.9-7h-6l-0.9,7c-1.4,0.3-2.8,0.7-4.1,1.3
+			l-4.8-5.1l-4.9,3.5l3.4,6.2c-1,1.1-1.8,2.2-2.5,3.5l-6.9-1.3l-1.9,5.7l6.4,3c-0.1,0.7-0.1,1.5-0.1,2.2c0,0.7,0,1.4,0.1,2.1l-6.4,3
+			l1.9,5.7l6.9-1.3c0.7,1.3,1.6,2.4,2.5,3.5l-3.4,6.2l4.9,3.5l4.8-5.1c1.3,0.6,2.7,1.1,4.1,1.4l0.9,7h6l0.9-7c0.2,0,0.4-0.1,0.6-0.1
+			l-4.8-6.6c-0.5,0-1.1-0.1-1.6-0.1c-6.7-1-11.2-7.3-10.2-14c1-6.7,7.3-11.2,14-10.2c3.5,0.5,6.4,2.5,8.2,5.2c0,0,0,0,0.1,0.1
+			c0.1,0.1,0.1,0.2,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0,0c1.1,1.8,1.7,3.9,1.7,6.2c0,0.9-0.1,1.8-0.3,2.6c0,0,0,0.1,0,0.1
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1,0,0.1-0.1,0.2l4.9,6.7c0.1-0.1,0.2-0.3,0.3-0.4L73.6,58.5z"/>
+	</g>
+</g>
+</svg>

public/img/icons_dark_theme/icon_alerting.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A0A0C;}
+	.st1{fill:#E3E2E2;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<g>
+			<g>
+				<path class="st1" d="M49.3,77.8c4,0,7.3-3.3,7.3-7.3H42C42,74.5,45.3,77.8,49.3,77.8z"/>
+			</g>
+		</g>
+		<g>
+			<path class="st1" d="M68.2,59v-9.2c0-11.3-5.9-20.8-14-23.5c0-2.7-2.2-4.9-4.9-4.9c-2.7,0-4.9,2.2-4.9,4.9
+				c-8.1,2.8-14,12.3-14,23.5V59c-2.2,0-4,1.8-4,4s1.8,4,4,4v0h0.1h37.8h0.1v0c2.2,0,4-1.8,4-4S70.4,59.1,68.2,59z"/>
+		</g>
+	</g>
+</g>
+</svg>

public/img/icons_dark_theme/icon_alerting_active.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#0A0A0C;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,49.5c0-24.4-19.9-44.3-44.3-44.3S5.8,25.1,5.8,49.5s19.9,44.3,44.3,44.3S94.4,73.9,94.4,49.5z"/>
+	<g>
+		<g>
+			<g>
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3811" y1="132.2195" x2="49.3811" y2="36.6876">
+					<stop  offset="0" style="stop-color:#FFF100"/>
+					<stop  offset="1" style="stop-color:#F05A28"/>
+				</linearGradient>
+				<path class="st2" d="M49.4,77.3c4,0,7.3-3.3,7.3-7.3H42.1C42.1,74.1,45.4,77.3,49.4,77.3z"/>
+			</g>
+		</g>
+		<g>
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="49.3811" y1="132.2195" x2="49.3811" y2="36.6876">
+				<stop  offset="0" style="stop-color:#FFF100"/>
+				<stop  offset="1" style="stop-color:#F05A28"/>
+			</linearGradient>
+			<path class="st3" d="M68.3,58.6v-9.2c0-11.3-5.9-20.8-14-23.5c0-2.7-2.2-4.9-4.9-4.9c-2.7,0-4.9,2.2-4.9,4.9
+				c-8.1,2.8-14,12.3-14,23.5v9.2c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4v0h0.1h37.8h0.1v0c2.2,0,4-1.8,4-4
+				C72.3,60.4,70.5,58.6,68.3,58.6z"/>
+		</g>
+	</g>
+</g>
+</svg>

public/img/icons_dark_theme/icon_query.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A0A0C;}
+	.st1{fill:#E3E2E2;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z M49.1,73.7
+		c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2
+		C74.8,68,63.1,73.7,49.1,73.7z M49.1,62.5c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3
+		s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2C74.8,56.9,63.1,62.5,49.1,62.5z M49.1,51.3c-13.9,0-25.7-5.6-25.7-12.3
+		c0-6.7,11.8-12.3,25.7-12.3S74.8,32.4,74.8,39C74.8,45.7,63.1,51.3,49.1,51.3z"/>
+	<path class="st1" d="M49.1,67.7c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S74.8,68,74.8,61.4
+		c0-0.7-0.1-1.3-0.4-2C70.1,64.4,60.5,67.7,49.1,67.7z"/>
+	<path class="st1" d="M49.1,56.5c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3s25.7-5.6,25.7-12.3
+		c0-0.7-0.1-1.3-0.4-2C70.1,53.2,60.5,56.5,49.1,56.5z"/>
+	<path class="st1" d="M49.1,26.7c-13.9,0-25.7,5.6-25.7,12.3c0,6.7,11.8,12.3,25.7,12.3S74.8,45.7,74.8,39
+		C74.8,32.4,63.1,26.7,49.1,26.7z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+</g>
+</svg>

public/img/icons_dark_theme/icon_query_active.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#0A0A0C;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{fill:url(#SVGID_4_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,50c0-24.4-19.9-44.3-44.3-44.3S5.9,25.6,5.9,50s19.9,44.3,44.3,44.3S94.4,74.4,94.4,50z M49.3,73.7
+		c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2
+		C75,68,63.2,73.7,49.3,73.7z M49.3,62.5c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3
+		c0.2,0.6,0.4,1.3,0.4,2C75,56.9,63.2,62.5,49.3,62.5z M49.3,51.3c-13.9,0-25.7-5.6-25.7-12.3c0-6.7,11.8-12.3,25.7-12.3
+		S75,32.4,75,39C75,45.7,63.2,51.3,49.3,51.3z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.777" x2="49.2981" y2="18.669">
+		<stop  offset="0" style="stop-color:#FFF100"/>
+		<stop  offset="1" style="stop-color:#F05A28"/>
+	</linearGradient>
+	<path class="st2" d="M49.3,67.7c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S75,68,75,61.4
+		c0-0.7-0.1-1.3-0.4-2C70.2,64.4,60.7,67.7,49.3,67.7z"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.7753" x2="49.2981" y2="18.6673">
+		<stop  offset="0" style="stop-color:#FFF100"/>
+		<stop  offset="1" style="stop-color:#F05A28"/>
+	</linearGradient>
+	<path class="st3" d="M49.3,56.5c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S75,56.9,75,50.2
+		c0-0.7-0.1-1.3-0.4-2C70.2,53.2,60.7,56.5,49.3,56.5z"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.7753" x2="49.2981" y2="18.6673">
+		<stop  offset="0" style="stop-color:#FFF100"/>
+		<stop  offset="1" style="stop-color:#F05A28"/>
+	</linearGradient>
+	<path class="st4" d="M49.3,26.7c-13.9,0-25.7,5.6-25.7,12.3c0,6.7,11.8,12.3,25.7,12.3S75,45.7,75,39C75,32.4,63.2,26.7,49.3,26.7z
+		"/>
+</g>
+</svg>

public/img/icons_dark_theme/icon_visualize.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A0A0C;}
+	.st1{fill:#E3E2E2;}
+</style>
+<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+	S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+<g>
+	<path class="st1" d="M77.6,66.3H25.2V30.9c0-1.5-1.2-2.8-2.8-2.8s-2.8,1.2-2.8,2.8v38.1c0,1.5,1.2,2.8,2.8,2.8h55.2
+		c1.5,0,2.8-1.2,2.8-2.8S79.1,66.3,77.6,66.3z"/>
+	<g>
+		<polygon class="st1" points="77.5,63.6 77.8,49.5 62.7,28.8 46.8,50 35.6,39.2 27.9,43.6 27.9,63.6 		"/>
+	</g>
+</g>
+</svg>

public/img/icons_dark_theme/icon_visualize_active.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#0A0A0C;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.1,50c0-24.4-19.9-44.3-44.3-44.3S5.6,25.6,5.6,50s19.9,44.3,44.3,44.3S94.1,74.4,94.1,50z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50.6946" y1="113.8319" x2="50.6946" y2="21.7994">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st2" d="M78.3,65.9H25.9V30.5c0-1.5-1.2-2.8-2.8-2.8c-1.5,0-2.8,1.2-2.8,2.8v38.1c0,1.5,1.2,2.8,2.8,2.8h55.2
+			c1.5,0,2.8-1.2,2.8-2.8S79.8,65.9,78.3,65.9z"/>
+		<g>
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="53.553" y1="113.8319" x2="53.553" y2="21.7994">
+				<stop  offset="0" style="stop-color:#FFF100"/>
+				<stop  offset="1" style="stop-color:#F05A28"/>
+			</linearGradient>
+			<polygon class="st3" points="78.2,63.1 78.5,49 63.4,28.3 47.5,49.5 36.3,38.7 28.6,43.1 28.6,63.1 			"/>
+		</g>
+	</g>
+</g>
+</svg>

public/img/icons_light_theme/icon_advanced.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<path class="st1" d="M58.2,51.9c1.2-2.9,1-6.4-1-9.1c-1.5-2.1-3.7-3.3-6.1-3.7c-1.2-0.2-2.5-0.1-3.7,0.2l4,5.5
+			c1.1,1.5,0.8,3.7-0.8,4.8c-0.8,0.6-1.7,0.8-2.6,0.6c-0.9-0.1-1.7-0.6-2.2-1.4l-4-5.5c-2,3.1-1.9,7.2,0.4,10.4
+			c1.5,2.1,3.7,3.3,6.1,3.7c0.8,0.1,1.5,0.1,2.3,0.1l12.8,17.6c0.8,1.1,1.9,1.7,3.1,1.9s2.5-0.1,3.5-0.9c2.1-1.5,2.6-4.5,1-6.6
+			L58.2,51.9z M67.9,71c1,0.2,1.7,1.1,1.5,2.1c-0.2,1-1.1,1.7-2.1,1.5s-1.7-1.1-1.5-2.1C65.9,71.6,66.9,70.9,67.9,71z"/>
+		<path class="st1" d="M61.5,50.9c0,0.1-0.1,0.3-0.1,0.4C61.4,51.2,61.4,51.1,61.5,50.9z"/>
+		<path class="st1" d="M59.9,41.6c0.1,0.1,0.1,0.2,0.2,0.3C60,41.9,60,41.7,59.9,41.6z"/>
+		<path class="st1" d="M61.6,50.1c0,0.2-0.1,0.5-0.1,0.7c0.2-0.8,0.3-1.7,0.3-2.6c0-2.3-0.6-4.4-1.7-6.2
+			C61.5,44.3,62.1,47.2,61.6,50.1z"/>
+		<path class="st1" d="M59.7,41.3C59.7,41.4,59.7,41.4,59.7,41.3C59.7,41.4,59.7,41.4,59.7,41.3z"/>
+		<path class="st1" d="M73.4,59.1l1.9-5.7l-6.4-3c0.1-0.7,0.1-1.5,0.1-2.2c0-0.7,0-1.4-0.1-2.1l6.4-3l-1.9-5.7l-6.9,1.3
+			c-0.7-1.3-1.6-2.4-2.5-3.5l3.4-6.2l-4.9-3.5l-4.8,5.1c-1.3-0.6-2.7-1.1-4.1-1.4l-0.9-7h-6l-0.9,7c-1.4,0.3-2.8,0.7-4.1,1.3
+			l-4.8-5.1L32,28.9l3.4,6.2c-1,1.1-1.8,2.2-2.5,3.5L26,37.2L24.1,43l6.4,3c-0.1,0.7-0.1,1.5-0.1,2.2c0,0.7,0,1.4,0.1,2.1l-6.4,3
+			l1.9,5.7l6.9-1.3c0.7,1.3,1.6,2.4,2.5,3.5L32,67.3l4.9,3.5l4.8-5.1c1.3,0.6,2.7,1.1,4.1,1.4l0.9,7h6l0.9-7c0.2,0,0.4-0.1,0.6-0.1
+			l-4.8-6.6c-0.5,0-1.1-0.1-1.6-0.1c-6.7-1-11.2-7.3-10.2-14c1-6.7,7.3-11.2,14-10.2c3.5,0.5,6.4,2.5,8.2,5.2c0,0,0,0,0.1,0.1
+			c0.1,0.1,0.1,0.2,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0,0c1.1,1.8,1.7,3.9,1.7,6.2c0,0.9-0.1,1.8-0.3,2.6c0,0,0,0.1,0,0.1
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1,0,0.1-0.1,0.2l4.9,6.7c0.1-0.1,0.2-0.3,0.3-0.4L73.4,59.1z"/>
+	</g>
+</g>
+</svg>

public/img/icons_light_theme/icon_advanced_active.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{fill:url(#SVGID_4_);}
+	.st5{fill:url(#SVGID_5_);}
+	.st6{fill:url(#SVGID_6_);}
+	.st7{fill:url(#SVGID_7_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.3,50.1C94.3,25.7,74.4,5.8,50,5.8S5.8,25.7,5.8,50.1S25.6,94.3,50,94.3S94.3,74.5,94.3,50.1z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="56.209" y1="135.6298" x2="56.209" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st2" d="M58.2,52c1.2-2.9,1-6.4-1-9.1c-1.5-2.1-3.7-3.3-6.1-3.7c-1.2-0.2-2.5-0.1-3.7,0.2l4,5.5
+			c1.1,1.5,0.8,3.7-0.8,4.8c-0.8,0.6-1.7,0.8-2.6,0.6c-0.9-0.1-1.7-0.6-2.2-1.4l-4-5.5c-2,3.1-1.9,7.2,0.4,10.4
+			c1.5,2.1,3.7,3.3,6.1,3.7c0.8,0.1,1.5,0.1,2.3,0.1l12.8,17.6c0.8,1.1,1.9,1.7,3.1,1.9c1.2,0.2,2.5-0.1,3.5-0.9
+			c2.1-1.5,2.6-4.5,1-6.6L58.2,52z M67.9,71.1c1,0.2,1.7,1.1,1.5,2.1c-0.2,1-1.1,1.7-2.1,1.5c-1-0.2-1.7-1.1-1.5-2.1
+			C65.9,71.6,66.9,70.9,67.9,71.1z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="61.4347" y1="135.6298" x2="61.4347" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st3" d="M61.5,51c0,0.1-0.1,0.3-0.1,0.4C61.4,51.2,61.5,51.1,61.5,51z"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="59.9971" y1="135.6298" x2="59.9971" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st4" d="M59.9,41.7c0.1,0.1,0.1,0.2,0.2,0.3C60,41.9,60,41.8,59.9,41.7z"/>
+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="60.952" y1="135.6298" x2="60.952" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st5" d="M61.7,50.1c0,0.2-0.1,0.5-0.1,0.7c0.2-0.8,0.3-1.7,0.3-2.6c0-2.3-0.6-4.4-1.7-6.2
+			C61.5,44.4,62.1,47.2,61.7,50.1z"/>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="59.7217" y1="135.6298" x2="59.7217" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st6" d="M59.7,41.4C59.7,41.4,59.7,41.4,59.7,41.4C59.7,41.4,59.7,41.4,59.7,41.4z"/>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="49.6936" y1="135.6298" x2="49.6936" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st7" d="M73.4,59.2l1.9-5.7l-6.4-3c0.1-0.7,0.1-1.5,0.1-2.2c0-0.7,0-1.4-0.1-2.1l6.4-3l-1.9-5.7l-6.9,1.3
+			c-0.7-1.3-1.6-2.4-2.5-3.5l3.4-6.2l-4.9-3.5l-4.8,5.1c-1.3-0.6-2.7-1.1-4.1-1.4l-0.9-7h-6l-0.9,7c-1.4,0.3-2.8,0.7-4.1,1.3
+			l-4.8-5.1L32,29l3.4,6.2c-1,1.1-1.8,2.2-2.5,3.5L26,37.3L24.1,43l6.4,3c-0.1,0.7-0.1,1.5-0.1,2.2c0,0.7,0,1.4,0.1,2.1l-6.4,3
+			l1.9,5.7l6.9-1.3c0.7,1.3,1.6,2.4,2.5,3.5L32,67.4l4.9,3.5l4.8-5.1c1.3,0.6,2.7,1.1,4.1,1.4l0.9,7h6l0.9-7c0.2,0,0.4-0.1,0.6-0.1
+			l-4.8-6.6c-0.5,0-1.1-0.1-1.6-0.1c-6.7-1-11.2-7.3-10.2-14c1-6.7,7.3-11.2,14-10.2c3.5,0.5,6.4,2.5,8.2,5.2c0,0,0,0,0.1,0.1
+			c0.1,0.1,0.1,0.2,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0,0c1.1,1.8,1.7,3.9,1.7,6.2c0,0.9-0.1,1.8-0.3,2.6c0,0,0,0.1,0,0.1
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1,0,0.1-0.1,0.2l4.9,6.7c0.1-0.1,0.2-0.3,0.3-0.4L73.4,59.2z"/>
+	</g>
+</g>
+</svg>

public/img/icons_light_theme/icon_alerting.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<g>
+			<g>
+				<path class="st1" d="M49.3,77.8c4,0,7.3-3.3,7.3-7.3H42C42,74.5,45.3,77.8,49.3,77.8z"/>
+			</g>
+		</g>
+		<g>
+			<path class="st1" d="M68.2,59v-9.2c0-11.3-5.9-20.8-14-23.5c0-2.7-2.2-4.9-4.9-4.9c-2.7,0-4.9,2.2-4.9,4.9
+				c-8.1,2.8-14,12.3-14,23.5V59c-2.2,0-4,1.8-4,4s1.8,4,4,4v0h0.1h37.8h0.1v0c2.2,0,4-1.8,4-4S70.4,59.1,68.2,59z"/>
+		</g>
+	</g>
+</g>
+</svg>

public/img/icons_light_theme/icon_alerting_active.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,49.5c0-24.4-19.9-44.3-44.3-44.3S5.8,25.1,5.8,49.5s19.9,44.3,44.3,44.3S94.4,73.9,94.4,49.5z"/>
+	<g>
+		<g>
+			<g>
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3811" y1="132.2195" x2="49.3811" y2="36.6876">
+					<stop  offset="0" style="stop-color:#FBB017"/>
+					<stop  offset="1" style="stop-color:#EF4E28"/>
+				</linearGradient>
+				<path class="st2" d="M49.4,77.3c4,0,7.3-3.3,7.3-7.3H42.1C42.1,74.1,45.4,77.3,49.4,77.3z"/>
+			</g>
+		</g>
+		<g>
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="49.3811" y1="132.2195" x2="49.3811" y2="36.6876">
+				<stop  offset="0" style="stop-color:#FBB017"/>
+				<stop  offset="1" style="stop-color:#EF4E28"/>
+			</linearGradient>
+			<path class="st3" d="M68.3,58.6v-9.2c0-11.3-5.9-20.8-14-23.5c0-2.7-2.2-4.9-4.9-4.9c-2.7,0-4.9,2.2-4.9,4.9
+				c-8.1,2.8-14,12.3-14,23.5v9.2c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4v0h0.1h37.8h0.1v0c2.2,0,4-1.8,4-4
+				C72.3,60.4,70.5,58.6,68.3,58.6z"/>
+		</g>
+	</g>
+</g>
+</svg>

public/img/icons_light_theme/icon_query.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z M49.1,73.7
+		c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2
+		C74.8,68,63.1,73.7,49.1,73.7z M49.1,62.5c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3
+		s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2C74.8,56.9,63.1,62.5,49.1,62.5z M49.1,51.3c-13.9,0-25.7-5.6-25.7-12.3
+		c0-6.7,11.8-12.3,25.7-12.3S74.8,32.4,74.8,39C74.8,45.7,63.1,51.3,49.1,51.3z"/>
+	<path class="st1" d="M49.1,67.7c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S74.8,68,74.8,61.4
+		c0-0.7-0.1-1.3-0.4-2C70.1,64.4,60.5,67.7,49.1,67.7z"/>
+	<path class="st1" d="M49.1,56.5c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3s25.7-5.6,25.7-12.3
+		c0-0.7-0.1-1.3-0.4-2C70.1,53.2,60.5,56.5,49.1,56.5z"/>
+	<path class="st1" d="M49.1,26.7c-13.9,0-25.7,5.6-25.7,12.3c0,6.7,11.8,12.3,25.7,12.3S74.8,45.7,74.8,39
+		C74.8,32.4,63.1,26.7,49.1,26.7z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+</g>
+</svg>

public/img/icons_light_theme/icon_query_active.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{fill:url(#SVGID_4_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,50c0-24.4-19.9-44.3-44.3-44.3S5.9,25.6,5.9,50s19.9,44.3,44.3,44.3S94.4,74.4,94.4,50z M49.3,73.7
+		c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2
+		C75,68,63.2,73.7,49.3,73.7z M49.3,62.5c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3
+		c0.2,0.6,0.4,1.3,0.4,2C75,56.9,63.2,62.5,49.3,62.5z M49.3,51.3c-13.9,0-25.7-5.6-25.7-12.3c0-6.7,11.8-12.3,25.7-12.3
+		S75,32.4,75,39C75,45.7,63.2,51.3,49.3,51.3z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.777" x2="49.2981" y2="18.669">
+		<stop  offset="0" style="stop-color:#FBB017"/>
+		<stop  offset="1" style="stop-color:#EF4E28"/>
+	</linearGradient>
+	<path class="st2" d="M49.3,67.7c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S75,68,75,61.4
+		c0-0.7-0.1-1.3-0.4-2C70.2,64.4,60.7,67.7,49.3,67.7z"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.7753" x2="49.2981" y2="18.6673">
+		<stop  offset="0" style="stop-color:#FBB017"/>
+		<stop  offset="1" style="stop-color:#EF4E28"/>
+	</linearGradient>
+	<path class="st3" d="M49.3,56.5c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S75,56.9,75,50.2
+		c0-0.7-0.1-1.3-0.4-2C70.2,53.2,60.7,56.5,49.3,56.5z"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.7753" x2="49.2981" y2="18.6673">
+		<stop  offset="0" style="stop-color:#FBB017"/>
+		<stop  offset="1" style="stop-color:#EF4E28"/>
+	</linearGradient>
+	<path class="st4" d="M49.3,26.7c-13.9,0-25.7,5.6-25.7,12.3c0,6.7,11.8,12.3,25.7,12.3S75,45.7,75,39C75,32.4,63.2,26.7,49.3,26.7z
+		"/>
+</g>
+</svg>

public/img/icons_light_theme/icon_visualize.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<path class="st1" d="M78,65.8H25.6V30.4c0-1.5-1.2-2.8-2.8-2.8c-1.5,0-2.8,1.2-2.8,2.8v38.1c0,1.5,1.2,2.8,2.8,2.8H78
+			c1.5,0,2.8-1.2,2.8-2.8C80.7,67.1,79.5,65.8,78,65.8z"/>
+		<g>
+			<polygon class="st1" points="77.9,63.1 78.2,49 63.1,28.3 47.2,49.5 36,38.7 28.3,43.1 28.3,63.1 			"/>
+		</g>
+	</g>
+</g>
+</svg>

public/img/icons_light_theme/icon_visualize_active.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.1,50c0-24.4-19.9-44.3-44.3-44.3S5.6,25.6,5.6,50s19.9,44.3,44.3,44.3S94.1,74.4,94.1,50z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50.2576" y1="115.6711" x2="50.2576" y2="19.8747">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st2" d="M77.8,65.9H25.4V30.5c0-1.5-1.2-2.8-2.8-2.8c-1.5,0-2.8,1.2-2.8,2.8v38.1c0,1.5,1.2,2.8,2.8,2.8h55.2
+			c1.5,0,2.8-1.2,2.8-2.8S79.4,65.9,77.8,65.9z"/>
+		<g>
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="53.116" y1="115.6711" x2="53.116" y2="19.8747">
+				<stop  offset="0" style="stop-color:#FBB017"/>
+				<stop  offset="1" style="stop-color:#EF4E28"/>
+			</linearGradient>
+			<polygon class="st3" points="77.7,63.1 78,49 62.9,28.3 47.1,49.5 35.8,38.7 28.2,43.1 28.2,63.1 			"/>
+		</g>
+	</g>
+</g>
+</svg>

public/sass/_variables.dark.scss

@@ -369,3 +369,17 @@ $checkbox-bg: $dark-1;
 $checkbox-border: 1px solid $gray-1;
 $checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
 $checkbox-color: $dark-1;
+
+//Panel Edit
+// -------------------------
+$panel-editor-shadow: 0 0 20px black;
+$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
+$panel-editor-toolbar-view-bg: $black;
+$panel-editor-viz-item-shadow: 0 0 8px $dark-5;
+$panel-editor-viz-item-border: 1px solid $dark-5;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
+$panel-editor-viz-item-border-hover: 1px solid $blue;
+$panel-editor-viz-item-bg: $black;
+$panel-editor-tabs-line-color: #e3e3e3;
+$panel-editor-viz-item-bg-hover: darken($blue, 47%);
+$panel-editor-viz-item-bg-hover-active: darken($orange, 45%);

public/sass/_variables.light.scss

@@ -61,7 +61,7 @@ $critical: #ec2128;
 // -------------------------
 
 $body-bg: $gray-7;
-$page-bg: $gray-7;
+$page-bg: $gray-6;
 $body-color: $gray-1;
 $text-color: $gray-1;
 $text-color-strong: $dark-2;
@@ -76,6 +76,7 @@ $textShadow: none;
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
 $page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
+//$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
 $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 
 // Links
@@ -378,3 +379,17 @@ $checkbox-bg: $gray-6;
 $checkbox-border: 1px solid $gray-3;
 $checkbox-checked-bg: linear-gradient(0deg, $yellow, $red);
 $checkbox-color: $gray-7;
+
+//Panel Edit
+// -------------------------
+$panel-editor-shadow: 2px 2px 8px $gray-3;
+$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
+$panel-editor-toolbar-view-bg: $white;
+$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
+$panel-editor-viz-item-border: 1px solid $gray-3;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
+$panel-editor-viz-item-border-hover: 1px solid $blue-light;
+$panel-editor-viz-item-bg: $white;
+$panel-editor-tabs-line-color: $dark-5;
+$panel-editor-viz-item-bg-hover: lighten($blue, 62%);
+$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);

public/sass/base/_icons.scss

@@ -211,3 +211,37 @@
   min-width: 20px;
   padding-right: 5px;
 }
+
+.panel-editor-tabs {
+  .gicon-advanced-active {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced_active.svg');
+  }
+
+  .gicon-advanced {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced.svg');
+  }
+
+  .gicon-alerts-active {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_alerting_active.svg');
+  }
+
+  .gicon-alerts {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_alerting.svg');
+  }
+
+  .gicon-queries-active {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_query_active.svg');
+  }
+
+  .gicon-queries {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_query.svg');
+  }
+
+  .gicon-visualization-active {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_visualize_active.svg');
+  }
+
+  .gicon-visualization {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_visualize.svg');
+  }
+}

public/sass/components/_panel_editor.scss

@@ -34,10 +34,10 @@
   flex-direction: column;
   flex-grow: 1;
   background: $page-bg;
-  margin: 0 62px;
-  border-left: 2px solid #ac5224;
+  margin: 0 20px 0 84px;
+  border-left: 2px solid $orange;
   border-radius: 3px;
-  box-shadow: $popover-shadow;
+  box-shadow: $panel-editor-shadow;
 }
 
 .panel-editor__close {
@@ -69,7 +69,7 @@
 }
 
 .panel-editor__toolbar-view {
-  background: $black;
+  background: $panel-editor-toolbar-view-bg;
   padding: 20px;
 }
 
@@ -140,10 +140,10 @@
 }
 
 .viz-picker__item {
-  background: $panel-bg;
-  border: $panel-border;
+  background: $panel-editor-viz-item-bg;
+  border: $panel-editor-viz-item-border;
   border-radius: 3px;
-  height: 90px;
+  height: 100px;
   width: 150px;
   flex-shrink: 0;
   flex-direction: column;
@@ -152,15 +152,30 @@
   display: flex;
   margin-right: 10px;
   margin-bottom: 10px;
-  border: 1px solid transparent;
+  //border: 1px solid transparent;
   align-items: center;
+  justify-content: center;
+  padding-bottom: 6px;
+  transition: transform 1 ease;
 
   &:hover {
-    background: $card-background-hover;
+    //background: $card-background-hover;
+    transform: scale(1.05);
+    box-shadow: $panel-editor-viz-item-shadow-hover;
+    background: $panel-editor-viz-item-bg-hover;
+    border: $panel-editor-viz-item-border-hover;
   }
 
   &--selected {
-    box-shadow: 0 0 12px #ff4d00;
+    box-shadow: 0 0 6px $orange;
+    border: 1px solid $orange;
+
+    &:hover {
+      transform: scale(1.05);
+      box-shadow: 0 0 6px $orange;
+      border: 1px solid $orange;
+      background: $panel-editor-viz-item-bg-hover-active;
+    }
   }
 }
 
@@ -173,6 +188,7 @@
   flex-direction: column;
   align-self: center;
   height: 23px;
+  font-weight: 500;
 }
 
 .viz-picker__item-img {
@@ -185,19 +201,19 @@
   display: flex;
   flex-direction: column;
   position: absolute;
-  top: 79px;
-  left: 9px;
+  top: 44px;
+  left: 20px;
   align-items: flex-start;
 
   &::before {
     content: '';
     display: block;
     position: absolute;
-    top: 0;
-    bottom: 0;
+    top: 10px;
+    bottom: 10px;
     left: 21px;
     width: 2px;
-    background: #8e8e8e;
+    background: $panel-editor-tabs-line-color;
   }
 }
 
@@ -219,8 +235,17 @@
     position: relative;
   }
 
-  img {
+  .gicon {
     height: 44px;
+    width: 53px;
+    transition: transform 0.1s ease;
+    margin-right: 5px;
+
+    &:hover {
+      filter: $panel-editor-side-menu-shadow;
+      transform: translate(-2px, -2px);
+      transform: scale(1.1);
+    }
   }
 }
 
@@ -232,20 +257,28 @@
 }
 
 .ds-picker-list__item {
-  background: $panel-bg;
-  border: $panel-border;
+  background: $panel-editor-viz-item-bg;
+  border: $panel-editor-viz-item-border;
   border-radius: 3px;
   display: flex;
   cursor: pointer;
   margin-bottom: 3px;
   padding: 5px 15px;
   align-items: center;
+  height: 44px;
 
   &:hover {
     background: $card-background-hover;
+    transform: scaleY(1.1);
+    box-shadow: $panel-editor-viz-item-shadow-hover;
+    background: $panel-editor-viz-item-bg-hover;
+    border: $panel-editor-viz-item-border-hover;
   }
 
   &--selected {
+    box-shadow: 0 0 6px $orange;
+    border: 1px solid $orange;
+
     .ds-picker-list__name {
       color: $text-color;
     }
@@ -290,3 +323,7 @@
 .form-section__body {
   padding: 0 10px;
 }
+
+.panel-editor-tabs__item-popover {
+  background: $orange;
+}