small ui fixes

src/Components/Map/Subcomponents/FilterControl.tsx

@@ -3,6 +3,11 @@ import { useFilterTags, useRemoveFilterTag, useSetSearchPhrase } from '../hooks/
 
 
 
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+
+
 export const FilterControl = () => {
     const filterTags = useFilterTags();
     const removeFilterTag = useRemoveFilterTag();
@@ -16,7 +21,7 @@ export const FilterControl = () => {
                         <div key={tag.id} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mr-2 tw-mb-2' style={{ backgroundColor: tag.color }}>
                             <div className="tw-card-actions tw-justify-end">
                                 <label className="tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600" onClick={() => (removeFilterTag(tag.id))}>✕</label>
-                            </div><b>#{tag.id}</b>
+                            </div><b>#{capitalizeFirstLetter(tag.id)}</b>
                         </div>
                     )
                 }

src/Components/Map/Subcomponents/ItemFormPopup.tsx

@@ -63,7 +63,7 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
                 await props.layer.api?.updateItem!({...formItem, id: props.item.id});
                 success = true;
             } catch (error) {
-                toast.error(error.toString);
+                toast.error(error.toString());
             }
             if(success) {
                 updateItem({...props.item, ...formItem});
@@ -79,7 +79,7 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
                 await props.layer.api?.createItem!({...formItem, id: crypto.randomUUID()});
                 success = true;
             } catch (error) {
-                toast.error(error.toString);
+                toast.error(error.toString());
             }
             if(success) {
                 addItem({...formItem, id: crypto.randomUUID(), layer: props.layer});

src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -4,6 +4,7 @@ import { useMap } from "react-leaflet";
 import { ItemFormPopupProps } from "../ItemFormPopup";
 import { LatLng } from "leaflet";
 import { Item } from "../../../../types";
+import { toast } from "react-toastify";
 
 
 
@@ -17,13 +18,21 @@ export function HeaderView({ item, setItemFormPopup }: {
 
   const map = useMap();
 
-  const removeItemFromMap = (event: React.MouseEvent<HTMLElement>) => {
+  const removeItemFromMap = async (event: React.MouseEvent<HTMLElement>) => {
     setLoading(true);
-    item.layer.api?.deleteItem!(item.id)
+    let success = false;
-      .then(() => removeItem(item))
+    try {
-      .then(() => map.closePopup())
+        await item.layer.api?.deleteItem!(item.id)
-      .then(()=>setLoading(false))
+        success = true;
-      .catch(err => console.log(err));
+    } catch (error) {
+        toast.error(error.toString());
+    }
+    if(success) {
+      removeItem(item);
+        toast.success("Item deleted");
+    } 
+    setLoading(false);
+    map.closePopup();
 
     event.stopPropagation();
   }
@@ -43,7 +52,7 @@ export function HeaderView({ item, setItemFormPopup }: {
       <div className='tw-col-span-1'>
         {item.layer.api &&
           <div className="tw-dropdown tw-dropdown-bottom">
-            <label tabIndex={0} className="tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-4">
+            <label tabIndex={0} className="tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6">
               <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
                 <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
               </svg>

src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx

@@ -3,7 +3,7 @@ import { Item } from '../../../../types'
 
 export const StartEndView = ({item} : {item?:Item}) => {
   return (
-    <div className="tw-flex tw-flex-row tw-mb-4 tw-mt-2">
+    <div className="tw-flex tw-flex-row tw-mb-4">
     <div className="tw-basis-2/5 tw-flex tw-flex-row">
       <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-4 tw-w-4 tw-mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />

src/Components/Map/UtopiaMap.tsx

@@ -1,7 +1,7 @@
 import { TileLayer, MapContainer, useMapEvents } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import * as React from "react";
-import { Tag, ItemsApi, LayerProps, UtopiaMapProps } from "../../types"
+import { LayerProps, UtopiaMapProps } from "../../types"
 import "./UtopiaMap.css"
 import { LatLng } from "leaflet";
 import MarkerClusterGroup from 'react-leaflet-cluster'