From b536c0e7425510b7f8cf88b8571da5342fadaf24 Mon Sep 17 00:00:00 2001
From: Michael Romashov <mromashov@icloud.com>
Date: Tue, 19 Mar 2024 22:42:50 -0400
Subject: [PATCH] various UI/UX fixes

---
 src/app/(home)/HomepageCards.tsx            | 24 ++++++++-------------
 src/app/(home)/page.tsx                     |  8 +++----
 src/app/events/[id]/ShiftRequestButton.tsx  |  2 +-
 src/app/events/[id]/edit/editEventSchema.ts |  2 +-
 src/app/events/[id]/page.tsx                |  4 +++-
 src/app/events/new/newEventSchema.ts        |  2 +-
 src/app/roster/[cid]/ProfileTables.tsx      |  1 +
 src/components/Card.tsx                     |  4 ++--
 src/utils/dataTableStyle.ts                 |  4 ++--
 9 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/app/(home)/HomepageCards.tsx b/src/app/(home)/HomepageCards.tsx
index c54231c..c6d5390 100644
--- a/src/app/(home)/HomepageCards.tsx
+++ b/src/app/(home)/HomepageCards.tsx
@@ -5,9 +5,7 @@ import Link from 'next/link';
 import { format } from 'date-fns-tz';
 import { LuArrowRight, LuCalendar, LuClock } from 'react-icons/lu';
 import { AnnouncementModal } from '@/components/AnnouncementModal';
-import { Badge } from '@/components/Badge';
 import { Card } from '@/components/Card';
-import { ProfilePicture } from '@/components/ProfilePicture';
 import { ClientPortal } from '@/components/ClientPortal';
 import { type Announcement } from '@/types/announcements';
 import { type BasicEvent } from '@/types/events';
@@ -22,17 +20,13 @@ export const AnnouncementCard: React.FC<AnnouncementCardProps> = ({ announcement
     return (
         <>
             <Card interactive onClick={() => setShowModal(true)}>
-                <div className="mb-3 flex w-full gap-5">
-                    <h4 className="w-full shrink truncate text-xl font-bold">
+                <div className="flex w-full items-center">
+                    <p className="inline-block w-32 whitespace-pre text-gray-400">
+                        {format(new Date(announcement.posted), 'MMM d, y')}
+                    </p>
+                    <h4 className="w-full shrink truncate text-lg font-medium">
                         {announcement.title}
                     </h4>
-                    <Badge className="ml-auto">{format(new Date(announcement.posted), 'MMM d, y')}</Badge>
-                </div>
-                <div className="flex items-center gap-2">
-                    <ProfilePicture user={announcement.author} size={40} />
-                    <span className="font-medium">
-                        {announcement.author.first_name} {announcement.author.last_name}
-                    </span>
                 </div>
             </Card>
             <ClientPortal>
@@ -55,17 +49,17 @@ export const EventCard: React.FC<EventCardProps> = ({ event }) => (
         <Card interactive>
             <div className="grid grid-cols-2">
                 <div>
-                    <h4 className="text-ellipsis whitespace-nowrap text-xl font-bold">{event.name}</h4>
-                    <h5 className="mb-5 text-ellipsis whitespace-nowrap text-lg font-medium text-slate-400">
+                    <h4 className="text-ellipsis whitespace-nowrap text-lg font-medium">{event.name}</h4>
+                    <h5 className="mb-5 text-ellipsis whitespace-nowrap text-slate-400">
                         Presented by {event.host}
                     </h5>
                     <div className="mb-3 flex items-center gap-3">
                         <LuCalendar size={23} />
-                        <span className="font-medium">{format(new Date(event.start), 'MMM d, y')}</span>
+                        {format(new Date(event.start), 'MMM d, y')}
                     </div>
                     <div className="flex items-center gap-3">
                         <LuClock size={23} />
-                        <span className="flex items-center gap-1.5 font-medium">
+                        <span className="flex items-center gap-1.5">
                             {format(new Date(event.start), 'HH:mm zzz')}
                             <LuArrowRight />
                             {format(new Date(event.end), 'HH:mm zzz')}
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 0aae8fd..f12a4b2 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -96,7 +96,7 @@ const Home: NextPage = async () => {
                     <div className="ml-auto min-w-[50%]">
                         <h2 className="mb-5 text-3xl font-medium">Who's Online?</h2>
                         <div className="flex flex-col gap-3">
-                            {onlineConnections.length === 0 && <p>Nobody is online.</p>}
+                            {onlineConnections.length === 0 && <p>Nobody 😢</p>}
                             {onlineConnections.map((connection) => (
                                 <div key={connection.id} className="flex items-center gap-3">
                                     <Badge>{connection.callsign}</Badge>
@@ -111,8 +111,7 @@ const Home: NextPage = async () => {
 
                 <div className="mb-16 grid grid-cols-2 gap-10">
                     <div>
-                        <h2 className="text-3xl font-medium">Announcements</h2>
-                        <h3 className="mb-5 font-medium text-slate-400">What's happening at Houston?</h3>
+                        <h2 className="mb-5 text-3xl font-medium">Announcements</h2>
                         <div className="flex flex-col gap-5">
                             {recentAnnouncements.map((announcement) => (
                                 <AnnouncementCard key={announcement.id} announcement={announcement} />
@@ -120,8 +119,7 @@ const Home: NextPage = async () => {
                         </div>
                     </div>
                     <div>
-                        <h2 className="text-3xl font-medium">Events</h2>
-                        <h3 className="mb-5 font-medium text-slate-400">Are y'all busy?</h3>
+                        <h2 className="mb-5 text-3xl font-medium">Events</h2>
                         <div className="flex flex-col gap-5">
                             {upcomingEvents.length === 0 && <p>There are no published events, check back later.</p>}
                             {upcomingEvents.map((event) => (
diff --git a/src/app/events/[id]/ShiftRequestButton.tsx b/src/app/events/[id]/ShiftRequestButton.tsx
index a881dce..e5be5db 100644
--- a/src/app/events/[id]/ShiftRequestButton.tsx
+++ b/src/app/events/[id]/ShiftRequestButton.tsx
@@ -25,7 +25,7 @@ export const ShiftRequestButton: React.FC<ShiftRequestButtonProps> = ({ shift, r
     }, [shift, requested]);
 
     return (
-        <button className="h-full w-full text-center" onClick={toggleRequest} type="button">
+        <button className="size-full text-center" onClick={toggleRequest} type="button">
             {requested ? 'Unrequest' : 'Request'}
         </button>
     );
diff --git a/src/app/events/[id]/edit/editEventSchema.ts b/src/app/events/[id]/edit/editEventSchema.ts
index 795d963..fc7fa32 100644
--- a/src/app/events/[id]/edit/editEventSchema.ts
+++ b/src/app/events/[id]/edit/editEventSchema.ts
@@ -5,7 +5,7 @@ import { z } from 'zod';
 export const editEventSchema = z.object({
     name: z.string().min(1, 'Required'),
     host: z.string().min(1, 'Required'),
-    banner: z.string(),
+    banner: z.string().optional(),
     description: z.string(),
 
     start: z.date(),
diff --git a/src/app/events/[id]/page.tsx b/src/app/events/[id]/page.tsx
index fc99800..fcf7aaf 100644
--- a/src/app/events/[id]/page.tsx
+++ b/src/app/events/[id]/page.tsx
@@ -97,7 +97,9 @@ const ViewEvent: NextPage<EventParams> = async ({ params }) => {
                             </div>
                         )}
                     </div>
-                    <img src={event.banner} alt={event.name} />
+                    {event.banner && (
+                        <img src={event.banner} alt={event.name} />
+                    )}
                 </div>
                 <div className="grid grid-cols-3 gap-5">
                     <EventPositions
diff --git a/src/app/events/new/newEventSchema.ts b/src/app/events/new/newEventSchema.ts
index bb41b56..360ff56 100644
--- a/src/app/events/new/newEventSchema.ts
+++ b/src/app/events/new/newEventSchema.ts
@@ -5,7 +5,7 @@ import { z } from 'zod';
 export const newEventSchema = z.object({
     name: z.string().min(1, 'Required'),
     host: z.string().min(1, 'Required'),
-    banner: z.string(),
+    banner: z.string().optional(),
     description: z.string(),
 
     preset: z.object({
diff --git a/src/app/roster/[cid]/ProfileTables.tsx b/src/app/roster/[cid]/ProfileTables.tsx
index 98751dc..cb9dd2a 100644
--- a/src/app/roster/[cid]/ProfileTables.tsx
+++ b/src/app/roster/[cid]/ProfileTables.tsx
@@ -23,6 +23,7 @@ export const ConnectionsTable: React.FC<ConnectionsTable> = ({ data }) => (
         defaultSortFieldId={1}
         defaultSortAsc={false}
         sortIcon={<LuChevronDown />}
+        customStyles={dataTableStyle}
         columns={[
             {
                 name: 'Date',
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 18fbe32..59ba405 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -8,8 +8,8 @@ interface CardProps extends HTMLProps<HTMLDivElement> {
 export const Card: React.FC<CardProps> = ({ className, interactive, children, ...props }) => (
     <div
         className={classNames(
-            'rounded-md bg-white p-5 shadow transition-all duration-500 ease-out',
-            { 'cursor-pointer hover:-translate-y-2 hover:opacity-90 hover:shadow-lg': interactive },
+            'rounded-md bg-white px-5 py-4 shadow transition-all duration-500 ease-out overflow-clip',
+            { 'cursor-pointer hover:-translate-y-1 hover:opacity-90 hover:shadow-lg': interactive },
             className,
         )}
         {...props}
diff --git a/src/utils/dataTableStyle.ts b/src/utils/dataTableStyle.ts
index de7d82f..a70dfcc 100644
--- a/src/utils/dataTableStyle.ts
+++ b/src/utils/dataTableStyle.ts
@@ -12,13 +12,13 @@ export const dataTableStyle = {
                 backgroundColor: '#e5e5e5!important',
                 outline: 'none!important',
             },
-            'fontSize': '1rem',
+            'fontSize': '0.9rem',
         },
     },
     headRow: {
         style: {
             backgroundColor: 'transparent',
-            fontSize: '1rem',
+            fontSize: '0.9rem',
         },
     },
     headCells: {