more styling

components/LatestList.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { ILatest } from '../interfaces/ILatest'
-import Button from './Button'
 
 export default function LatestList({
   latest,
@@ -19,19 +18,29 @@ export default function LatestList({
     const subject = item.subject
     const hrefId = `#item-${item.id}`
     return (
-      <li key={item.id}>
-        <a href={hrefId} onClick={() => onSelect(item)}>
-          <div>{subject}</div>
-          <div>{created.toLocaleDateString()}</div>
-        </a>
-        <Button onClick={() => onRemove(item)}>Remove</Button>
+      <li key={item.id} className="flex flex-col">
+        <hr className="border-gray-200 mt-3 mb-4" />
+        <div className="flex flex-row items-center">
+          <a href={hrefId} onClick={() => onSelect(item)}>
+            <div className="text-base">{subject}</div>
+            <div className="text-sm">{created.toLocaleString()}</div>
+          </a>
+          <a
+            className="m-2 text-gray-400 hover:text-gray-600 cursor-pointer"
+            onClick={() => onRemove(item)}
+            href="#"
+            title="Löschen"
+          >
+            ❌
+          </a>
+        </div>
       </li>
     )
   })
 
   return (
     <div>
-      <h4>Vergangene Briefe:</h4>
+      <h4 className="text-lg mb-4">Vergangene Briefe:</h4>
       <ul>{latestElements}</ul>
     </div>
   )