From 3b49dcacd809a8f80c333eccf3232906b6fb4ebd Mon Sep 17 00:00:00 2001
From: Fionn <fionnsperath@outlook.de>
Date: Thu, 4 May 2023 20:51:33 +0200
Subject: [PATCH] improve modal table

---
 frontend/src/App.tsx | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 807e4b8..c6ac1c4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -63,17 +63,32 @@ function App() {
             <thead>
               <tr>
                 <th>#</th>
+                <th>Region</th>
+                <th>Fixes</th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
-              {regions.length ? regions.map((region, idx) => <tr key={idx}>
-                <td>{idx + 1}</td>
-                <td>{region.identifier}</td>
-                <td>{region.fixes.length} Fixes</td>
-                <td><Button variant='primary' type='button' onClick={() => setSelectedRegion(region.identifier)}>Select</Button></td>
-              </tr>) : <>
-                  <tr><td className='p-2 text-center' colSpan={5}>- no regions defined -</td></tr>
-              </>}
+              {regions.length ? regions.map((region, idx) => <>
+                <tr key={idx}>
+                  <td>{idx + 1}</td>
+                  <td>{region.identifier}</td>
+                  <td>{region.fixes.length} Fixes</td>
+                  <td>
+                    <Button
+                      variant={selectedRegion == region.identifier ? 'success' : 'primary'}
+                      type='button'
+                      onClick={() => setSelectedRegion(region.identifier)}
+                    >
+                      Select
+                    </Button>
+                  </td>
+                </tr>
+              </>) : (<>
+                <tr>
+                  <td className='p-2 text-center' colSpan={4}>- no regions defined -</td>
+                </tr>
+              </>)}
             </tbody>
           </Table>
         </Modal.Body>