Update UI (#181)

deschutesdesigngroupllc · Sep 18, 2024 · 0b7f099 · 0b7f099
1 parent 07bcc4a
commit 0b7f099
Show file tree

Hide file tree

Showing 18 changed files with 8,046 additions and 14,966 deletions.
diff --git a/next.config.js b/next.config.js
@@ -6,6 +6,7 @@ const nextConfig = {
     domains: [
       'perscom-development.s3.amazonaws.com',
       'perscom-staging.s3.amazonaws.com',
+      'perscom-demo.s3.amazonaws.com',
       'perscom.s3.amazonaws.com',
       'ui-avatars.com',
       'localhost'

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/(auth)/forms/[id]/page.js b/src/app/(auth)/forms/[id]/page.js
@@ -1,7 +1,5 @@
-import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import { Alert } from '../../../../components/alert';
 import { Form } from '../../../../components/form';
-import { Link } from '../../../../components/link';
 import Client from '../../../../lib/client';
 import { RequestError } from '../../../../lib/request-error';
 
@@ -23,15 +21,5 @@ export default async function Page(props) {
     }
   }
 
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row items-center justify-start space-x-1 active:text-blue-600">
-        <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
-        <Link href={'/forms'} className="text-xs">
-          Back to Forms
-        </Link>
-      </div>
-      <Form form={form.data} {...props} />
-    </div>
-  );
+  return <Form form={form.data} {...props} />;
 }
diff --git a/src/app/(auth)/roster/_components/unit.js b/src/app/(auth)/roster/_components/unit.js
@@ -12,8 +12,8 @@ export function Unit({ unit }) {
       <TableHead>
         <TableHeadCell
           data-testid={name}
-          colSpan="6"
-          className="group-first/head:last:rounded-tl-none group-first/head:last:rounded-tr-none"
+          colSpan="5"
+          className="text-center group-first/head:last:rounded-tl-none group-first/head:last:rounded-tr-none"
         >
           {name}
         </TableHeadCell>
@@ -29,49 +29,61 @@ export function Unit({ unit }) {
 
             return (
               <TableRow key={user.id} data-testid={name}>
-                <TableCell className="w-1/6 whitespace-normal !py-3 sm:whitespace-nowrap">
-                  <div className="flex items-center">
+                <TableCell className="w-1/2 whitespace-normal !py-3 sm:whitespace-nowrap">
+                  <div className="flex items-center text-xs">
                     {rank && (
-                      <div className="flex w-6 flex-shrink-0 items-center sm:w-8">
+                      <div className="flex w-8 flex-shrink-0 items-center">
                         {image_url ? (
                           <div className="relative h-8 w-8">
                             <Image src={image_url} alt={rank_name} fill objectFit="contain" />
                           </div>
                         ) : (
-                          <div className="text-xs font-bold">{abbreviation}</div>
+                          <div className="text-xs">{abbreviation}</div>
                         )}
                       </div>
                     )}
-                    <div className="ml-4 flex flex-col">
+                    <div className="flex-1">
                       <Link
                         href={`/users/${user_id}`}
-                        className="text-xs text-gray-950 dark:text-white dark:hover:text-gray-300"
+                        className="text-nowrap text-xs font-bold text-gray-950 dark:text-white dark:hover:text-gray-300"
                       >
                         {name}
                       </Link>
-                      <div className="text-xs text-gray-700 dark:text-gray-400 md:hidden">
-                        {position_name}
+                      <div className="flex flex-row items-center space-x-0.5 sm:space-x-1">
+                        {specialty_name && (
+                          <div className="text-nowrap font-medium text-gray-700">
+                            {specialty_name}
+                          </div>
+                        )}
+                        {position_name && (
+                          <>
+                            <div className="block">
+                              <svg
+                                viewBox="0 0 2 2"
+                                className="mx-2 inline h-0.5 w-0.5 fill-current"
+                                aria-hidden="true"
+                              >
+                                <circle cx="1" cy="1" r="1" />
+                              </svg>
+                            </div>
+                            <div className="text-nowrap text-gray-500">{position_name}</div>
+                          </>
+                        )}
                       </div>
                     </div>
                   </div>
                 </TableCell>
-                <TableCell className="hidden w-1/6 whitespace-normal !py-3 text-xs md:table-cell lg:whitespace-nowrap">
-                  {position_name}
-                </TableCell>
-                <TableCell className="hidden w-1/6 whitespace-normal !py-3 text-xs md:table-cell lg:whitespace-nowrap">
-                  {specialty_name}
-                </TableCell>
-                <TableCell className="w-1/12 whitespace-nowrap !py-3 text-right md:text-center">
-                  <>{status && <Status text={status.name} color={status.color} />}</>
-                </TableCell>
-                <TableCell className="hidden w-1/12 !py-3 text-center lg:table-cell">
-                  <>
-                    {online ? (
-                      <Status text={'Online'} color={'#16a34a'} />
-                    ) : (
-                      <Status text={'Offline'} color={'#0284c7'} />
-                    )}
-                  </>
+                <TableCell className="table-cell w-1/2 !py-3 text-center">
+                  <div className="flex flex-row justify-end space-x-2">
+                    {status && <Status text={status.name} color={status.color} />}
+                    <div className="hidden sm:block">
+                      {online ? (
+                        <Status text={'Online'} color={'#16a34a'} />
+                      ) : (
+                        <Status text={'Offline'} color={'#0284c7'} />
+                      )}
+                    </div>
+                  </div>
                 </TableCell>
               </TableRow>
             );

diff --git a/src/app/(auth)/users/[id]/page.js b/src/app/(auth)/users/[id]/page.js
@@ -1,6 +1,4 @@
-import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import { Alert } from '../../../../components/alert';
-import { Link } from '../../../../components/link';
 import Client from '../../../../lib/client';
 import { RequestError } from '../../../../lib/request-error';
 import { Profile } from '../_components/profile';
@@ -51,15 +49,5 @@ export default async function Page({ params }) {
     }
   }
 
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row items-center justify-start space-x-1 active:text-blue-600">
-        <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
-        <Link href={'/roster'} className="text-xs">
-          Back to Roster
-        </Link>
-      </div>
-      <Profile user={user.data} />
-    </div>
-  );
+  return <Profile user={user.data} />;
 }
diff --git a/src/app/(auth)/users/_components/additional-fields.js b/src/app/(auth)/users/_components/additional-fields.js
@@ -8,7 +8,7 @@ export function AdditionalFields({ user }) {
   return (
     <>
       {fields && !!fields.length && (
-        <Card className="p-6">
+        <Card className="p-4 sm:p-6">
           <h5 className="text-xl font-bold text-gray-950 dark:text-white">
             Additional Information
           </h5>

diff --git a/src/app/(auth)/users/_components/assignment.js b/src/app/(auth)/users/_components/assignment.js
@@ -32,7 +32,7 @@ export function Assignment({ user }) {
     .fromNow(true);
 
   return (
-    <Card className="p-6">
+    <Card className="p-4 sm:p-6">
       <h5 className="text-xl font-bold text-gray-950 dark:text-white">Assignment</h5>
       <Tabs style="underline">
         <TabItem key="primary-assignment" title="Primary Assignment">
@@ -131,20 +131,6 @@ export function Assignment({ user }) {
                 noRowsPerPage: true
               }}
               emptyMessage="There are no secondary assignments to display."
-              customStyles={{
-                headCells: {
-                  style: {
-                    color: 'rgb(255 255 255 / var(--tw-text-opacity))'
-                  }
-                },
-                cells: {
-                  style: {
-                    color: 'rgb(161 161 170 / var(--tw-text-opacity))',
-                    marginTop: '0.5rem',
-                    marginBottom: '0.5rem'
-                  }
-                }
-              }}
             />
           </div>
         </TabItem>

diff --git a/src/app/(auth)/users/_components/demographics.js b/src/app/(auth)/users/_components/demographics.js
@@ -21,7 +21,7 @@ export function Demographics({ user }) {
   const lastSeenAt = dayjs(last_seen_at).tz(searchParams.get('timezone') ?? 'UTC');
 
   return (
-    <Card className="w-full justify-start p-6 md:w-2/3">
+    <Card className="w-full justify-start p-4 sm:p-6 md:w-2/3">
       <div className="flex items-center justify-between">
         <h5 className="text-xl font-bold tracking-tight text-gray-950 dark:text-white">
           Demographics

diff --git a/src/app/(auth)/users/_components/information.js b/src/app/(auth)/users/_components/information.js
@@ -12,7 +12,7 @@ export function Information({ user }) {
   const profile_photo = profile_photo_url ?? rank_image_url ?? null;
 
   return (
-    <Card className="w-full justify-start p-6 md:w-1/3">
+    <Card className="w-full justify-start p-4 sm:p-6 md:w-1/3">
       <div className="flex items-center justify-between">
         <h5 className="text-xl font-bold text-gray-950 dark:text-white">Personnel Profile</h5>
         {status && <Status text={status_name} color={status_color} />}

diff --git a/src/app/(auth)/users/_components/records.js b/src/app/(auth)/users/_components/records.js
@@ -313,7 +313,7 @@ export function Records({ user }) {
   ];
 
   return (
-    <Card className="p-6">
+    <Card className="p-4 sm:p-6">
       <h5 className="text-xl font-bold text-gray-950 dark:text-white">Records</h5>
       <Tabs style="underline">
         {tabs.map((tab, index) => (
@@ -333,20 +333,6 @@ export function Records({ user }) {
                   noRowsPerPage: true
                 }}
                 emptyMessage={tabs[index].emptyMessage}
-                customStyles={{
-                  headCells: {
-                    style: {
-                      color: 'rgb(255 255 255/ var(--tw-text-opacity))'
-                    }
-                  },
-                  cells: {
-                    style: {
-                      color: 'rgb(161 161 170 / var(--tw-text-opacity))',
-                      marginTop: '0.5rem',
-                      marginBottom: '0.5rem'
-                    }
-                  }
-                }}
                 sortFunction={(rows, selector, direction) => {
                   return rows.sort((rowA, rowB) => {
                     const aField = new Date(selector(rowA));

diff --git a/src/app/page.js b/src/app/page.js
@@ -10,11 +10,11 @@ export default function Page() {
 
   return (
     <div className="flex flex-col items-center justify-center bg-gray-50 px-4 py-20 dark:bg-[#09090B] sm:px-20">
-      <Logo className="h-16 sm:h-28" />
-      <Card className="mt-10 w-full p-6 sm:max-w-3xl">
+      <Logo className="h-12 sm:h-16 sm:h-28" />
+      <Card className="mt-10 w-full p-4 sm:max-w-3xl sm:p-6">
         <div className="flex flex-col space-y-6">
           <div className="col-span-full text-center">
-            <div className="text-2xl font-bold tracking-tight text-gray-950 dark:text-white">
+            <div className="text-xl font-bold tracking-tight text-gray-950 dark:text-white sm:text-2xl">
               The Official PERSCOM Widget
             </div>
             <div className="mt-1 text-sm dark:text-gray-400">

diff --git a/src/components/datatable.js b/src/components/datatable.js
@@ -25,5 +25,7 @@ function DataTableLoading() {
 }
 
 function DataTableEmpty({ emptyMessage }) {
-  return <div className="py-4 text-sm text-gray-500 sm:py-8">{emptyMessage}</div>;
+  return (
+    <div className="py-4 text-xs text-gray-700 dark:text-gray-400 sm:py-8">{emptyMessage}</div>
+  );
 }
diff --git a/src/components/field.js b/src/components/field.js
@@ -21,6 +21,7 @@ export function Field({ field }) {
           required={field.required}
           readOnly={field.readonly}
           onChange={(checked) => handleToggle(field.key, checked)}
+          sizing="sm"
         />
       );
     case 'color':
@@ -33,7 +34,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         />
       );
     case 'country':
@@ -44,7 +46,8 @@ export function Field({ field }) {
           name={field.key}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         >
           <option disabled={true} value="">
             Choose an option
@@ -69,7 +72,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         />
       );
     case 'datetime-local':
@@ -82,7 +86,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         />
       );
     case 'email':
@@ -95,7 +100,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         />
       );
     case 'file':
@@ -107,6 +113,7 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
+          sizing="sm"
         />
       );
     case 'number':
@@ -119,7 +126,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         />
       );
     case 'password':
@@ -133,7 +141,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         />
       );
     case 'code':
@@ -146,8 +155,9 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
           rows={4}
+          sizing="sm"
         />
       );
     case 'select': {
@@ -164,7 +174,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         >
           <option disabled={true} value="">
             Choose an option
@@ -192,7 +203,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         >
           <option disabled={true} value="">
             Choose an option
@@ -216,7 +228,8 @@ export function Field({ field }) {
           placeholder={field.placeholder}
           required={field.required}
           readOnly={field.readonly}
-          helperText={field.help}
+          helperText={<div className="text-xs">{field.help}</div>}
+          sizing="sm"
         />
       );
   }