fix(frontend): reduce task overlay opacity (#1682)

* fix(themeSlice): task area overlay opacity reduce * fix(indexCss): fix layerSwitcher radio, label alignment
hotosm · Jul 19, 2024 · bad1f43 · bad1f43
1 parent 7af4c73
commit bad1f43
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git 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
@@ -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: {