fix: design, map fitting

src/components/Map/Map.tsx

 import type React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useStore, useFilteredPoiData } from '../../hooks';
 import ReactMapGl, { Marker, useMap, AttributionControl } from 'react-map-gl';
 import { useHistory } from 'react-router-dom';
 import MapLayerControl from './MapLayerControl';
+import { calcBoundsFromCoordinates } from '../../util/geo';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
 interface Props {
@@ -33,9 +34,18 @@ const Map: React.FC<Props> = ({ mapboxToken }) => {
   const { data: filteredData } = useFilteredPoiData();
   const DEFAULT_CENTER: [number, number] = [9.986701, 53.550359];
   const { fcmap } = useMap();
+  const [bounds, setBounds] = useState<[[number, number], [number, number]]>();
+
+  useEffect(() => {
+    const newBounds = calcBoundsFromCoordinates(data?.map((poi) => [poi.lng, poi.lat]) || [DEFAULT_CENTER]);
+    setBounds(newBounds);
+  }, [JSON.stringify(data)]);
 
   useEffect(() => {
     if (selectedPoi) fcmap?.easeTo({ center: [selectedPoi.lng, selectedPoi.lat], zoom: 14, duration: 1500 });
+    else {
+      bounds && fcmap?.fitBounds(bounds, { padding: 50, maxZoom: 16 });
+    }
   }, [selectedPoi]);
 
   return (

src/components/Map/MapLayerControl.tsx

@@ -18,7 +18,7 @@ const MapLayerControl: React.FC = () => {
   };
 
   return (
-    <div className="fcmap-border-2 fcmap-border-black fcmap-w-52 fcmap-border-opacity-20 fcmap-rounded-lg fcmap-absolute fcmap-right-0 fcmap-bottom-0 fcmap-mb-4 fcmap-mr-4 fcmap-bg-white fcmap-p-4 fcmap-z-10">
+    <div className="fcmap-border fcmap-border-grey-900 fcmap-w-52 fcmap-absolute fcmap-right-0 fcmap-bottom-0 fcmap-mb-4 fcmap-mr-4 fcmap-bg-white fcmap-p-4 fcmap-z-10">
       <div className={`fcmap-flex fcmap-justify-between fcmap-cursor-pointer ${isOpen ? 'fcmap-mb-2' : ''}`} onClick={() => setIsOpen(!isOpen)}>
         <h3 className="fcmap-text-base fcmap-font-semibold fcmap-text-gray-900">Kategorien:</h3>
         <DownIcon

src/components/Sidebar/ListElement.tsx

@@ -14,9 +14,9 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
     value && (
       <div
         {...restProps}
-        className={`fcmap-border-2 fcmap-border-black fcmap-border-opacity-20 ${
-          hovered ? 'fcmap-border-opacity-40' : 'hover:fcmap-border-opacity-40'
-        } fcmap-cursor-pointer fcmap-rounded-lg fcmap-mx-4 fcmap-my-2`}
+        className={`fcmap-border fcmap-border-grey-900 fcmap-border-opacity-40 ${
+          hovered ? 'fcmap-border-opacity-100' : ''
+        } fcmap-cursor-pointer fcmap-mx-4 fcmap-my-2`}
       >
         <div className="fcmap-p-3">
           <h2 className="fcmap-tracking-widest fcmap-text-xs fcmap-uppercase fcmap-title-font fcmap-font-medium fcmap-text-gray-400 fcmap-mb-1">

src/components/Sidebar/SidebarContainer.tsx

@@ -6,7 +6,7 @@ interface Props {
 const SidebarContainer: React.FC<Props> = ({ className, children }) => {
   return (
     <aside
-      className={`sidebar fcmap-box-border fcmap-flex fcmap-flex-col fcmap-border-t-2 md:fcmap-border-r-2 md:fcmap-border-t-0 fcmap-border-black fcmap-border-opacity-20 ${
+      className={`sidebar fcmap-box-border fcmap-flex fcmap-flex-col fcmap-border-t-2 md:fcmap-border-r md:fcmap-border-t-0 fcmap-border-grey-900 ${
         className ?? ''
       }`}
     >

src/util/geo.ts

+const getSWCoordinates = (coordinatesCollection: [number, number][]): [number, number] => {
+  const lowestLng = Math.min(...coordinatesCollection.map((coordinates) => coordinates[0]));
+  const lowestLat = Math.min(...coordinatesCollection.map((coordinates) => coordinates[1]));
+
+  return [lowestLng, lowestLat];
+};
+
+const getNECoordinates = (coordinatesCollection: [number, number][]): [number, number] => {
+  const highestLng = Math.max(...coordinatesCollection.map((coordinates) => coordinates[0]));
+  const highestLat = Math.max(...coordinatesCollection.map((coordinates) => coordinates[1]));
+
+  return [highestLng, highestLat];
+};
+
+export const calcBoundsFromCoordinates = (
+  coordinatesCollection: [number, number][],
+): [[number, number], [number, number]] => {
+  return [getSWCoordinates(coordinatesCollection), getNECoordinates(coordinatesCollection)];
+};

tailwind.config.js

@@ -12,6 +12,16 @@ module.exports = {
         'fabcity-red': '#ee2f45',
         'fabcity-green': '#08aa64',
         'fabcity-blue': '#19459c',
+        grey: {
+          50: "#FDFDFC",
+          100: "#F0F1F1",
+          200: "#E4E4E5",
+          400: "#A4A7AC",
+          500: "#8A8E96",
+          600: "#71767F",
+          700: "#4B515D",
+          900: "#0B1324",
+        },
       },
     },
   },