Change chart type image Codeinwp/visualizer-pro#343

Author: girishpanchal30

css/frame.css

@@ -484,6 +484,7 @@ div.viz-group-content .viz-group-description {
 	height: 17px;
 	border: none;
 	color: #fff;
+	z-index: 1;
 	background: #c55555;
 }
 
@@ -494,18 +495,21 @@ div.viz-group-content .viz-group-description {
 	padding: 15px;
 	border: 1px solid #e0e0e0;
 	background-color: white;
-	background-image: url(../images/chart_types_v340_g.png);
+	background-image: url(../images/chart_types_v395.png);
 	background-repeat: no-repeat;
 	background-position: center center;
+	background-size: 900px 1150px;
+	filter: grayscale(100%);
 }
 
 .type-label-selected,
-.type-box > .type-label:hover {
-	background-image: url(../images/chart_types_v340.png);
+.type-box .type-label:hover {
+/*	background-image: url(../images/chart_types_v340.png);*/
+	filter: grayscale(0);
 }
 
 .type-box-area .type-label {
-	background-position: 0 -225px;
+	background-position: -8px -225px;
 }
 
 .type-box-line .type-label {
@@ -521,23 +525,23 @@ div.viz-group-content .viz-group-description {
 }
 
 .type-box-gauge .type-label {
-	background-position: 0 -450px;
+	background-position: -7px -450px;
 }
 
 .type-box-geo .type-label {
 	background-position: -600px -450px;
 }
 
 .type-box-candlestick .type-label {
-	background-position: -300px -450px;
+	background-position: -304px -450px;
 }
 
 .type-box-bar .type-label {
 	background-position: -300px -225px;
 }
 
 .type-box-bubble .type-label {
-	background-position: -600px -906px;
+	background-position: -604px -906px;
 }
 
 .type-box-column .type-label {
@@ -551,11 +555,11 @@ div.viz-group-content .viz-group-description {
 }
 
 .type-box-timeline .type-label {
-	background-position: -2px -670px;
+	background-position: -8px -670px;
 }
 
 .type-box-combo .type-label {
-	background-position: -597px -670px;
+	background-position: -606px -670px;
 }
 
 .type-box-polarArea .type-label {

css/style-wizard.css

@@ -1054,31 +1054,33 @@ display: none;
 	height: 198px;
 	background-color: #ffffff;
 	margin-bottom: 20px;
-	background-image: url(../images/chart_types_v340_g.png);
+	background-image: url(../images/chart_types_v395.png);
 	background-repeat: no-repeat;
 	background-position: center center;
 	transition: all .3s ease-in-out;
 	/* filter: grayscale(100%);
 	-webkit-filter: grayscale(100%); */
+	background-size: 900px 1150px;
+	filter: grayscale(100%);
 }
 .vz-chart-option .img.type-box-pie{
-	background-position: 15px -10px;
+	background-position: -5px -17px;
 }
 .vz-chart-option .img.type-box-bar{
-	background-position: -295px -235px;
+	background-position: -305px -235px;
 }
 .vz-chart-option .img.type-box-line{
-	background-position: -600px -7px;
+	background-position: -606px -14px;
 }
 .vz-chart-option .img.type-box-tabular{
-	background-position: -334px -742px;
-  background-size: 1000px 1250px;
+	background-position: -306px -693px;
 }
 .vz-chart-option .img.type-box-geo{
-	background-position: -600px -460px;
+	background-position: -603px -459px;
 }
 .vz-chart-option:hover .img{
-	background-image: url(../images/chart_types_v340.png);
+	background-image: url(../images/chart_types_v395.png);
+	filter: grayscale(0);
 }
 .vz-chart-option .bg{
 	position: absolute;
@@ -1133,7 +1135,8 @@ display: none;
 	background: #BDE6EB;	
 }
 .vz-chart-option input[type=radio].vz-radio-btn:checked ~ .img{
-	background-image: url(../images/chart_types_v340.png);
+	background-image: url(../images/chart_types_v395.png);
+	filter: grayscale(0);
 }
 
 .vz-pro-option{