From bad1f435f303461708ed6507719134190e7376b8 Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Fri, 19 Jul 2024 16:40:33 +0545
Subject: [PATCH] fix(frontend): reduce task overlay opacity (#1682)

* fix(themeSlice): task area overlay opacity reduce

* fix(indexCss): fix layerSwitcher radio, label alignment
---
 src/frontend/src/index.css                  | 11 ++++++++
 src/frontend/src/store/slices/ThemeSlice.ts | 28 ++++++++++-----------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index e2a4665eeb..067a7d4d57 100755
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -198,6 +198,17 @@ button {
   animation: move 2s linear infinite;
 }
 
+.layer-switcher .panel .layer-switcher-base-group .layer {
+  display: flex;
+  align-items: center;
+}
+.layer-switcher li input {
+  left: 0 !important;
+}
+.layer-switcher li label {
+  padding-left: 1.5em !important;
+}
+
 @-webkit-keyframes pulse {
   0% {
     -webkit-box-shadow: 0 0 0 0 rgb(244, 22, 22, 0.8);
diff --git a/src/frontend/src/store/slices/ThemeSlice.ts b/src/frontend/src/store/slices/ThemeSlice.ts
index 4d309460af..961a44bc86 100755
--- a/src/frontend/src/store/slices/ThemeSlice.ts
+++ b/src/frontend/src/store/slices/ThemeSlice.ts
@@ -51,26 +51,26 @@ const initialState: themeStateType = {
       },
       mapFeatureColors: {
         //blue
-        ready: 'rgba(255,255,255, 0.5)',
-        ready_rgb: 'rgba(255,255,255, 0.5)',
-        locked_for_mapping: 'rgba(0, 128, 153, 0.5)',
-        locked_for_mapping_rgb: 'rgba(0, 128, 153, 0.5)',
+        ready: 'rgba(255,255,255, 0.3)',
+        ready_rgb: 'rgba(255,255,255, 0.3)',
+        locked_for_mapping: 'rgba(0, 128, 153, 0.3)',
+        locked_for_mapping_rgb: 'rgba(0, 128, 153, 0.3)',
         mapped: 'rgba(173, 230, 239, 0.8)',
         mapped_rgb: 'rgba(173, 230, 239, 0.8)',
-        locked_for_validation: 'rgb(252,236,164,0.5)',
-        locked_for_validation_rgb: 'rgb(252,236,164,0.5)',
+        locked_for_validation: 'rgb(252,236,164,0.3)',
+        locked_for_validation_rgb: 'rgb(252,236,164,0.3)',
         //green
-        validated: 'rgba(64, 172, 140, 0.5)',
-        validated_rgb: 'rgba(64, 172, 140, 0.5)',
+        validated: 'rgba(64, 172, 140, 0.3)',
+        validated_rgb: 'rgba(64, 172, 140, 0.3)',
         //yellow
         // invalidated: '#ffff00',
-        invalidated: 'rgb(215,63,62,0.5)',
-        invalidated_rgb: 'rgb(215,63,62,0.5)',
+        invalidated: 'rgb(215,63,62,0.3)',
+        invalidated_rgb: 'rgb(215,63,62,0.3)',
         //brown
-        bad: 'rgba(216, 218, 228, 0.5)',
-        bad_rgb: 'rgba(216, 218, 228, 0.5)',
-        split: 'rgb(112, 67, 67,0.5)',
-        split_rgb: 'rgb(112, 67, 67,0.5)',
+        bad: 'rgba(216, 218, 228, 0.3)',
+        bad_rgb: 'rgba(216, 218, 228, 0.3)',
+        split: 'rgb(112, 67, 67,0.3)',
+        split_rgb: 'rgb(112, 67, 67,0.3)',
       },
     },
     statusTextTheme: {