Add icons to action menu options

sfbrigade · Oct 22, 2024 · 5bcd020 · 5bcd020
1 parent 0b779df
commit 5bcd020
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/client/src/pages/patients/Patients.jsx b/client/src/pages/patients/Patients.jsx
@@ -14,7 +14,13 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { StatusCodes } from 'http-status-codes';
-import { IconDotsVertical, IconSearch } from '@tabler/icons-react';
+import {
+  IconDotsVertical,
+  IconSearch,
+  IconUser,
+  IconQrcode,
+  IconTrash,
+} from '@tabler/icons-react';
 import { Link } from 'react-router-dom';
 
 import classes from './Patients.module.css';
@@ -124,13 +130,35 @@ export default function Patients() {
                     </Menu.Target>
                     <Menu.Dropdown>
                       <Menu.Item
+                        leftSection={
+                          <IconUser
+                            style={{ width: rem(18), height: rem(18) }}
+                          />
+                        }
                         component={Link}
                         to={`/patients/${patient.id}`}
                       >
                         View/Edit
                       </Menu.Item>
-                      <Menu.Item>Reprint QR Code</Menu.Item>
-                      <Menu.Item color="red">Delete</Menu.Item>
+                      <Menu.Item
+                        leftSection={
+                          <IconQrcode
+                            style={{ width: rem(18), height: rem(18) }}
+                          />
+                        }
+                      >
+                        Reprint QR Code
+                      </Menu.Item>
+                      <Menu.Item
+                        leftSection={
+                          <IconTrash
+                            style={{ width: rem(18), height: rem(18) }}
+                          />
+                        }
+                        color="red"
+                      >
+                        Delete
+                      </Menu.Item>
                     </Menu.Dropdown>
                   </Menu>
                 </Table.Td>

diff --git a/client/src/pages/patients/Patients.module.css b/client/src/pages/patients/Patients.module.css
@@ -1,5 +1,5 @@
 .table {
-  border-radius: 12px;
+  border-radius: 8px;
   overflow: hidden;
 }