Merge pull request #51 ui/ux-muiltitab

Multitab UI/UX changes

Author: JannikBrack

multi_tab/src/components/Layers/ParkLayer.tsx

@@ -33,9 +33,9 @@ export default function ParkLayer({
                         }}
                         options={{
                             paint: {
-                                "fill-color": "#176A17",
+                                "fill-color": "#388E3C",
                                 "fill-outline-color": '#000',
-                                "fill-opacity": 0.5,
+                                "fill-opacity": 0.8,
                             },
                         }}
                         labelProp={"name"}

multi_tab/src/components/Layers/RestaurantLayer.tsx

@@ -34,7 +34,7 @@ export default function RestaurantLayer({
                         }}
                         options={{
                             paint: {
-                                "circle-color": "#ffbf00",
+                                "circle-color": "#CF003D",
                                 "circle-opacity": 0.75,
                                 "circle-stroke-color": '#000',
                                 "circle-stroke-width": 1,

multi_tab/src/components/UI_Components/DataTable.jsx

@@ -88,7 +88,7 @@ const DataTable = (props) => {
                                 hover={!(prop["@id"] === props.selected)}
                                 onClick={() => selecting(prop["@id"], `${prop.amenity}.json`)}
                                 key={prop["@id"]}
-                                sx={{ background: prop["@id"] === props.selected ? "#b1b1ff" : "#fff" }}
+                                sx={{ background: prop["@id"] === props.selected ? "#B3E6FA" : "#fff" }}
                             >
                                 {keyList?.map((key) => (
                                     <TableCell key={key} sx={{ maxWidth: "150px" }}>

multi_tab/src/components/UI_Components/MlHighlightFeature.tsx

@@ -49,12 +49,12 @@ const MlHighlightFeature = (props: MlHighlightFeatureProps) => {
     const [paint, setPaint] = useState<any>();
     const [layerType, setLayerType] = useState<MlGeoJsonLayerProps['type']>('circle');
 
-    const defaultColor = '#40e0d0';
+    const defaultColor = '#CCD22A';
 
     const variant = {
         dark: {color: '#555555', opacity: 0.5},
-        outline: {color: defaultColor, lineColor: '#40e0d0', lineWidth: 6, opacity: 1},
-        hell: {color: '#40e0d0', opacity: 1},
+        outline: {color: defaultColor, lineColor: '#CCD22A', lineWidth: 6, opacity: 1},
+        hell: {color: '#CCD22A', opacity: 0.8},
     };
 
     function getHighlightedFeature(feature: Feature) {