- improved UI for sessions page

src/components/HistoryList/AlertItem.tsx

@@ -10,6 +10,8 @@ import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
 import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type AlertItemProps = {
   item: SightingType;
@@ -53,9 +55,12 @@ const AlertItem = ({ item }: AlertItemProps) => {
     dispatch({ type: "REMOVE", payload: item });
   };
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex flex-col w-full relative">
       <div className="border border-gray-600 rounded-lg items-center py-1">
         <InfoBar obj={item} />
+        <button onClick={() => handleDelete(item)} className="absolute right-2 top-1">
+          <FontAwesomeIcon icon={faTrash} size="xl" />
+        </button>
         <div className="flex flex-row p-4  w-full mx-auto justify-between" onClick={handleClick}>
           {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
           {isNPEDHitA && <img src={NPED_CAT_A} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
@@ -64,7 +69,9 @@ const AlertItem = ({ item }: AlertItemProps) => {
           <div className={`border p-1 hidden md:block`}>
             <img src={item?.plateUrlColour} height={48} width={200} alt="colour patch" />
           </div>
-          <NumberPlate vrm={item.vrm} motion={motionAway} />
+          <div className="h-20">
+            <NumberPlate vrm={item.vrm} motion={motionAway} />
+          </div>
         </div>
         <SightingModal
           isSightingModalOpen={isModalOpen}