UI/feature editor style (#192)

* edit polygon  style

* style komplett

* style for inactive geometries

---------

Co-authored-by: Martin Alzueta <martin.alzueta@wheregroup.com>

Author: cioddi

src/hooks/useFeatureEditor/utils/FeatureEditorStyle.tsx

@@ -13,30 +13,23 @@ function featureEditorStyle() {
 				['!=', 'mode', 'static'],
 			],
 			paint: {
-				'fill-color': '#3bb2d0',
-				'fill-outline-color': '#3bb2d0',
-				'fill-opacity': 0.1,
+				'fill-color': '#009EE0',
+				'fill-outline-color': '#009EE0',	
+				'fill-opacity': 0.3,
 			},
 		},
+
 		{
 			id: 'gl-draw-polygon-fill-active',
 			type: 'fill',
 			filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
 			paint: {
-				'fill-color': '#fbb03b',
-				'fill-outline-color': '#fbb03b',
-				'fill-opacity': 0.1,
-			},
-		},
-		{
-			id: 'gl-draw-polygon-midpoint',
-			type: 'circle',
-			filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
-			paint: {
-				'circle-radius': mediaIsMobile ? 7 : 5,
-				'circle-color': '#fbb03b',
+				'fill-color': '#009EE0',
+				'fill-outline-color': '#009EE0',
+				'fill-opacity': 0.2,
 			},
 		},
+		
 		{
 			id: 'gl-draw-polygon-stroke-inactive',
 			type: 'line',
@@ -51,8 +44,8 @@ function featureEditorStyle() {
 				'line-join': 'round',
 			},
 			paint: {
-				'line-color': '#3bb2d0',
-				'line-width': 2,
+				'line-color': '#009EE0',
+				'line-width': 3,
 			},
 		},
 		{
@@ -64,11 +57,12 @@ function featureEditorStyle() {
 				'line-join': 'round',
 			},
 			paint: {
-				'line-color': '#fbb03b',
+				'line-color': '#009EE0',
 				'line-dasharray': [0.2, 2],
 				'line-width': 2,
 			},
 		},
+		
 		{
 			id: 'gl-draw-line-inactive',
 			type: 'line',
@@ -83,8 +77,8 @@ function featureEditorStyle() {
 				'line-join': 'round',
 			},
 			paint: {
-				'line-color': '#3bb2d0',
-				'line-width': 2,
+				'line-color': '#009EE0',
+				'line-width': 3,
 			},
 		},
 		{
@@ -96,11 +90,22 @@ function featureEditorStyle() {
 				'line-join': 'round',
 			},
 			paint: {
-				'line-color': '#fbb03b',
+				'line-color': "#009EE0",
 				'line-dasharray': [0.2, 2],
 				'line-width': 2,
 			},
 		},
+		{
+			id: 'gl-draw-polygon-midpoint',
+			type: 'circle',
+			filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
+			paint: {
+				'circle-radius': mediaIsMobile ? 5 : 4,
+				'circle-color': '#ffffff',
+				'circle-stroke-color': '#009EE0',	
+				'circle-stroke-width': 1
+			},
+		},
 		{
 			id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
 			type: 'circle',
@@ -114,9 +119,11 @@ function featureEditorStyle() {
 			id: 'gl-draw-polygon-and-line-vertex-inactive',
 			type: 'circle',
 			filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
-			paint: {
+			paint:  {
 				'circle-radius': mediaIsMobile ? 7 : 5,
-				'circle-color': '#fbb03b',
+				'circle-color': '#ffffff',
+				'circle-stroke-color': '#009EE0',	
+				'circle-stroke-width': 1
 			},
 		},
 		{
@@ -132,7 +139,7 @@ function featureEditorStyle() {
 			paint: {
 				'circle-radius': mediaIsMobile ? 10 : 9,
 				'circle-opacity': 1,
-				'circle-color': '#fff',
+				'circle-color': '#009EE0',
 			},
 		},
 		{
@@ -147,7 +154,7 @@ function featureEditorStyle() {
 			],
 			paint: {
 				'circle-radius': mediaIsMobile ? 7.5 : 6.5,
-				'circle-color': '#3bb2d0',
+				'circle-color': '#009EE0',		
 			},
 		},
 		{
@@ -175,7 +182,7 @@ function featureEditorStyle() {
 			],
 			paint: {
 				'circle-radius': mediaIsMobile ? 8.5 : 7.5,
-				'circle-color': '#fbb03b',
+				'circle-color': '#009EE0',
 			},
 		},
 		{