From 3f672c80ac3e06e902c074c1de1911abb9757a72 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Tue, 8 Aug 2023 17:08:05 -0300
Subject: [PATCH] Add custom opacity for shapes and markers

---
 src/assets/css/leaflet.css                        | 9 +++++++--
 src/assets/css/vars.css                           | 3 +++
 src/components/Map/icons/AssertedDistribution.js  | 2 +-
 src/components/Map/icons/CollectionObject.js      | 2 +-
 src/components/Map/icons/Georeference.js          | 2 +-
 src/components/Map/icons/TypeMaterial.js          | 2 +-
 src/components/Map/shapes/Aggregate.js            | 2 +-
 src/components/Map/shapes/AssertedDistribution.js | 2 +-
 src/components/Map/shapes/CollectionObject.js     | 2 +-
 src/components/Map/shapes/TypeMaterial.js         | 2 +-
 10 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/assets/css/leaflet.css b/src/assets/css/leaflet.css
index 155ede1..8ee01bd 100644
--- a/src/assets/css/leaflet.css
+++ b/src/assets/css/leaflet.css
@@ -1,5 +1,6 @@
 :root {
-  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
+  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg)
+    saturate(0.3) brightness(0.7);
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -8,10 +9,14 @@
   }
 } */
 
+.map-point-marker {
+  opacity: var(--color-map-marker-opacity);
+}
+
 .dark {
   color-scheme: dark;
 
   .map-tiles {
-    filter:var(--map-tiles-filter, none);
+    filter: var(--map-tiles-filter, none);
   }
 }
diff --git a/src/assets/css/vars.css b/src/assets/css/vars.css
index 37d06d0..f73a037 100644
--- a/src/assets/css/vars.css
+++ b/src/assets/css/vars.css
@@ -25,6 +25,9 @@
 
   --color-scrollbar-thumb: 156, 163, 175;
   --color-scrollbar-track: 229, 231, 235;
+
+  --color-map-shape-opacity: 0.5;
+  --color-map-marker-opacity: 0.75;
 }
 
 .dark {
diff --git a/src/components/Map/icons/AssertedDistribution.js b/src/components/Map/icons/AssertedDistribution.js
index 3887228..c85e783 100644
--- a/src/components/Map/icons/AssertedDistribution.js
+++ b/src/components/Map/icons/AssertedDistribution.js
@@ -1,5 +1,5 @@
 export const AssertedDistribution = {
-  className: 'bg-map-asserted bg-opacity-50 rounded-full',
+  className: 'bg-map-asserted rounded-full map-point-marker',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 }
diff --git a/src/components/Map/icons/CollectionObject.js b/src/components/Map/icons/CollectionObject.js
index e6ade65..86278f9 100644
--- a/src/components/Map/icons/CollectionObject.js
+++ b/src/components/Map/icons/CollectionObject.js
@@ -1,5 +1,5 @@
 export const CollectionObject = {
-  className: 'bg-map-collection-object bg-opacity-50 rounded-full',
+  className: 'bg-map-collection-object rounded-full map-point-marker',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 }
diff --git a/src/components/Map/icons/Georeference.js b/src/components/Map/icons/Georeference.js
index c41015f..cbd82a4 100644
--- a/src/components/Map/icons/Georeference.js
+++ b/src/components/Map/icons/Georeference.js
@@ -1,5 +1,5 @@
 export const Georeference = {
-  className: 'bg-map-georeference bg-opacity-50 rounded-full',
+  className: 'bg-map-georeference rounded-full map-point-marker',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 }
diff --git a/src/components/Map/icons/TypeMaterial.js b/src/components/Map/icons/TypeMaterial.js
index a5d6162..0cafe22 100644
--- a/src/components/Map/icons/TypeMaterial.js
+++ b/src/components/Map/icons/TypeMaterial.js
@@ -1,5 +1,5 @@
 export const TypeMaterial = {
-  className: 'bg-map-type-material bg-opacity-50 rounded-full',
+  className: 'bg-map-type-material map-point-marker rounded-full',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 }
diff --git a/src/components/Map/shapes/Aggregate.js b/src/components/Map/shapes/Aggregate.js
index 460948b..cdfc205 100644
--- a/src/components/Map/shapes/Aggregate.js
+++ b/src/components/Map/shapes/Aggregate.js
@@ -3,5 +3,5 @@ export const Aggregate = {
   weight: 1,
   dashArray: '3',
   dashOffset: '3',
-  fillOpacity: 0.25
+  fillOpacity: 'var(--color-map-shape-opacity)'
 }
diff --git a/src/components/Map/shapes/AssertedDistribution.js b/src/components/Map/shapes/AssertedDistribution.js
index 3fc597d..86e4923 100644
--- a/src/components/Map/shapes/AssertedDistribution.js
+++ b/src/components/Map/shapes/AssertedDistribution.js
@@ -3,5 +3,5 @@ export const AssertedDistribution = {
   weight: 1,
   dashArray: '3',
   dashOffset: '3',
-  fillOpacity: 0.25
+  fillOpacity: 'var(--color-map-shape-opacity)'
 }
diff --git a/src/components/Map/shapes/CollectionObject.js b/src/components/Map/shapes/CollectionObject.js
index 8479942..e889b77 100644
--- a/src/components/Map/shapes/CollectionObject.js
+++ b/src/components/Map/shapes/CollectionObject.js
@@ -1,5 +1,5 @@
 export const CollectionObject = {
   color: `rgb(var(--color-map-collection-object))`,
   weight: 1,
-  fillOpacity: 0.25
+  fillOpacity: 'var(--color-map-shape-opacity)'
 }
diff --git a/src/components/Map/shapes/TypeMaterial.js b/src/components/Map/shapes/TypeMaterial.js
index f218764..49b0d5b 100644
--- a/src/components/Map/shapes/TypeMaterial.js
+++ b/src/components/Map/shapes/TypeMaterial.js
@@ -1,5 +1,5 @@
 export const TypeMaterial = {
   color: `rgb(var(--color-map-type-material))`,
   weight: 1,
-  fillOpacity: 0.25
+  fillOpacity: 'var(--color-map-shape-opacity)'
 }