UI updates for the main screen #99

* changed color of alt tabs to be consistent with the theme
* increased size of font of all text
* reduced width of table for cleaner look

Author: eeen17

src/ui/pages/siglead/ManageSigLeads.page.tsx

@@ -1,4 +1,14 @@
-import { Title, Box, TextInput, Textarea, Switch, Select, Button, Loader } from '@mantine/core';
+import {
+  Title,
+  Box,
+  TextInput,
+  Textarea,
+  Switch,
+  Select,
+  Button,
+  Loader,
+  Container,
+} from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
 import { useForm, zodResolver } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
@@ -11,7 +21,7 @@ import { getRunEnvironmentConfig } from '@ui/config';
 import { useApi } from '@ui/util/api';
 import { OrganizationList as orgList } from '@common/orgs';
 import { AppRoles } from '@common/roles';
-import { ScreenComponent, SigTable } from './SigScreenComponents';
+import { ScreenComponent } from './SigScreenComponents';
 
 export function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -156,9 +166,11 @@ export const ManageSigLeadsPage: React.FC = () => {
 
   return (
     <AuthGuard resourceDef={{ service: 'core', validRoles: [AppRoles.IAM_ADMIN] }}>
-      <Title order={2}>SigLead Management System</Title>
-      <ScreenComponent />
-      {/* <SigTable /> */}
+      <Container>
+        <Title order={2}>SigLead Management System</Title>
+        <ScreenComponent />
+        {/* <SigTable /> */}
+      </Container>
     </AuthGuard>
   );
 };

src/ui/pages/siglead/SigScreenComponents.tsx

@@ -1,50 +1,39 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { z } from 'zod';
 import { OrganizationList } from '@common/orgs';
 import { NavLink, Paper } from '@mantine/core';
-import { AuthGuard } from '@ui/components/AuthGuard';
-import { AppRoles } from '@common/roles';
 import { IconUsersGroup } from '@tabler/icons-react';
 import { useLocation } from 'react-router-dom';
 
-// use personn icon
-// import { IconPlus, IconTrash } from '@tabler/icons-react';
-
-// const OrganizationListEnum = z.enum(OrganizationList);
-
-// const renderTableRow = (org: string) => {
-//     const count = 50;
-//     return(
-//         <Transition mounted={true} transition="fade" duration={400} timingFunction="ease">
-//         {(styles) => (
-//           <tr style={{ ...styles, display: 'table-row' }}>
-//             <Table.Td>{org}</Table.Td>
-//             <Table.Td>{count}</Table.Td>
-//           </tr>
-//         )}
-//       </Transition>
-//     )
-// }
-
 const renderSigLink = (org: string, index: number) => {
+  const color = 'light-dark(var(--mantine-color-black), var(--mantine-color-white))';
+  const size = '18px';
   return (
     <NavLink
       href={`${useLocation().pathname}/${org}`}
+      active={index % 2 === 0}
       label={org}
+      color="var(--mantine-color-blue-light)"
       variant="filled"
-      active={index % 2 === 0}
-      // color="blue"
-      // style={{
-      //   // color: "lightgray",
-      //   backgroundColor: "DodgerBlue",
-      //   opacity: 0.5
-      // }}
       rightSection={
-        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            color: `${color}`,
+            fontSize: `${size}`,
+          }}
+        >
           <span>MemberCount[{index}]</span>
           <IconUsersGroup />
         </div>
       }
+      styles={{
+        label: {
+          color: `${color}`,
+          fontSize: `${size}`,
+        },
+      }}
     />
   );
 };
@@ -60,10 +49,10 @@ export const ScreenComponent: React.FC = () => {
           justifyContent: 'space-between',
           alignItems: 'center',
           fontWeight: 'bold',
-          // backgroundColor: "#f8f9fa",
           borderRadius: '8px',
           padding: '10px 16px',
           marginBottom: '8px',
+          fontSize: '22px',
         }}
       >
         <span>Organization</span>
@@ -73,80 +62,3 @@ export const ScreenComponent: React.FC = () => {
     </>
   );
 };
-
-import { Table } from '@mantine/core';
-
-export const SigTable = () => {
-  const location = useLocation();
-  return (
-    <Table highlightOnHover>
-      {/* Headers */}
-      <thead>
-        <tr>
-          <th>Organization</th>
-          <th>Member Count</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        {OrganizationList.map((org, index) => (
-          <tr key={index}>
-            {/* Organization Column */}
-            <td>
-              <NavLink
-                href={`${location.pathname}/${org}`}
-                label={org}
-                variant="filled"
-                active={index % 2 === 0}
-              />
-            </td>
-
-            {/* Member Count Column */}
-            <td style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <span>MemberCount[{index}]</span>
-              <IconUsersGroup />
-            </td>
-          </tr>
-        ))}
-      </tbody>
-      {/* <tbody>
-        {OrganizationList.map((org, index) => (
-          <tr key={index}>
-            <td>{renderSigLink(org, index)}</td>
-          </tr>
-        ))}
-      </tbody> */}
-    </Table>
-  );
-};
-
-// const navLinks = [
-//   { label: "Home", icon: <IconHome size={16} />, path: "/" },
-//   { label: "Profile", icon: <IconUser size={16} />, path: "/profile" },
-//   { label: "Settings", icon: <IconSettings size={16} />, path: "/settings" },
-// ];
-
-// export const NavLinkTable = () => {
-//   return (
-//     <Table highlightOnHover>
-//       <thead>
-//         <tr>
-//           <th>Navigation</th>
-//         </tr>
-//       </thead>
-//       <tbody>
-//         {navLinks.map((link, index) => (
-//           <tr key={index}>
-//             <td>
-//               <NavLink
-//                 label={link.label}
-//                 component={Link} // Integrates with React Router
-//                 to={link.path}
-//               />
-//             </td>
-//           </tr>
-//         ))}
-//       </tbody>
-//     </Table>
-//   );
-// }