From 429edb6cd6eefca55ea4c43f976447680241d347 Mon Sep 17 00:00:00 2001
From: cade <git@cade.me>
Date: Mon, 28 Aug 2023 13:34:38 -0700
Subject: [PATCH] various design tweaks

---
 app/(account)/_components/avatar.tsx          |  1 -
 .../filterable-input-link-list.tsx            | 14 ++--
 .../[subjectId]/_components/event-card.tsx    |  3 +-
 .../missions/[missionId]/sessions/page.tsx    |  4 +-
 .../[subjectId]/timeline/@eventTypes/page.tsx | 64 ++++++++++---------
 .../_components/timeline-event-card.tsx       | 12 ++--
 .../[subjectId]/timeline/@missions/page.tsx   | 18 +++---
 app/(account)/subjects/page.tsx               |  4 +-
 app/(account)/templates/page.tsx              |  2 +-
 9 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/app/(account)/_components/avatar.tsx b/app/(account)/_components/avatar.tsx
index bccc0d3c..3a637f24 100644
--- a/app/(account)/_components/avatar.tsx
+++ b/app/(account)/_components/avatar.tsx
@@ -37,7 +37,6 @@ const Avatar = ({ className, file, name, size = 'md' }: AvatarProps) => {
           loader={generateImageLoader({ aspectRatio: '1:1' })}
           sizes={sizes[size].imgSizes}
           src={src}
-          title={name}
         />
       ) : (
         <span aria-hidden>{Array.from(name)[0]}</span>
diff --git a/app/(account)/inputs/_components/filterable-input-link-list.tsx b/app/(account)/inputs/_components/filterable-input-link-list.tsx
index bfd0790b..4c74e3b7 100644
--- a/app/(account)/inputs/_components/filterable-input-link-list.tsx
+++ b/app/(account)/inputs/_components/filterable-input-link-list.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Avatar from '@/(account)/_components/avatar';
+import INPUT_LABELS from '@/(account)/_constants/constant-input-labels';
 import usePrevious from '@/(account)/_hooks/use-previous';
 import { ListInputsData } from '@/(account)/_server/list-inputs';
 import forceArray from '@/(account)/_utilities/force-array';
@@ -78,18 +79,23 @@ const FilterableInputLinkList = ({ inputs }: FilterableInputLinkListProps) => {
           return (
             <li className="flex items-stretch hover:bg-alpha-1" key={input.id}>
               <Button
-                className="m-0 flex w-full gap-4 px-4 py-3 pr-0 leading-snug [overflow-wrap:anywhere]"
+                className="m-0 w-full gap-6 px-4 py-3 pr-0 leading-snug [overflow-wrap:anywhere]"
                 href={`/inputs/${input.id}`}
                 variant="link"
               >
+                <div>
+                  {input.label}
+                  <div className="smallcaps pb-0.5 pt-1">
+                    {INPUT_LABELS[input.type]}
+                  </div>
+                </div>
                 {!!avatars.length && (
-                  <div className="-my-0.5 flex flex-wrap gap-1">
+                  <div className="-my-0.5 ml-auto flex shrink-0 gap-1.5">
                     {avatars.map(({ id, image_uri, name }) => (
-                      <Avatar file={image_uri} key={id} name={name} size="sm" />
+                      <Avatar file={image_uri} key={id} name={name} size="xs" />
                     ))}
                   </div>
                 )}
-                {input.label}
               </Button>
               <InputListItemMenu inputId={input.id} />
             </li>
diff --git a/app/(account)/subjects/[subjectId]/_components/event-card.tsx b/app/(account)/subjects/[subjectId]/_components/event-card.tsx
index 66d8b32f..bfefcf62 100644
--- a/app/(account)/subjects/[subjectId]/_components/event-card.tsx
+++ b/app/(account)/subjects/[subjectId]/_components/event-card.tsx
@@ -71,8 +71,7 @@ const EventCard = ({
       )}
       <EventForm
         className={twMerge(
-          'px-4 py-8 sm:px-8',
-          !!mission && 'bg-alpha-reverse-1',
+          'bg-alpha-reverse-1 px-4 py-8 sm:px-8',
           !showModule && !showDescription && !event && 'sm:rounded-t',
           !event && 'sm:rounded-b',
         )}
diff --git a/app/(account)/subjects/[subjectId]/missions/[missionId]/sessions/page.tsx b/app/(account)/subjects/[subjectId]/missions/[missionId]/sessions/page.tsx
index e7c39862..ea5f23e3 100644
--- a/app/(account)/subjects/[subjectId]/missions/[missionId]/sessions/page.tsx
+++ b/app/(account)/subjects/[subjectId]/missions/[missionId]/sessions/page.tsx
@@ -109,7 +109,7 @@ const Page = async ({ params: { missionId, subjectId } }: PageProps) => {
               return (
                 <li key={session.id}>
                   <Button
-                    className="m-0 flex w-full gap-4 px-4 py-3 leading-snug [overflow-wrap:anywhere] hover:bg-alpha-1"
+                    className="m-0 w-full gap-6 px-4 py-3 leading-snug [overflow-wrap:anywhere] hover:bg-alpha-1"
                     href={
                       isTeamMember
                         ? `/subjects/${subjectId}/missions/${missionId}/sessions/${session.id}/edit`
@@ -126,7 +126,7 @@ const Page = async ({ params: { missionId, subjectId } }: PageProps) => {
                           {session.title}
                         </span>
                       )}
-                      <div className="smallcaps pb-1 pt-1 text-fg-4">
+                      <div className="smallcaps pb-0.5 pt-1">
                         {session.draft ? (
                           'Draft'
                         ) : new Date(session.scheduled_for ?? '') >
diff --git a/app/(account)/subjects/[subjectId]/timeline/@eventTypes/page.tsx b/app/(account)/subjects/[subjectId]/timeline/@eventTypes/page.tsx
index ba643697..f737c89b 100644
--- a/app/(account)/subjects/[subjectId]/timeline/@eventTypes/page.tsx
+++ b/app/(account)/subjects/[subjectId]/timeline/@eventTypes/page.tsx
@@ -26,39 +26,41 @@ const Page = async ({ params: { subjectId } }: PageProps) => {
 
   return (
     <div className="px-4">
-      <ul
-        className={twMerge(
-          'rounded border border-alpha-1 bg-bg-2 py-1',
-          isTeamMember && 'rounded-b-none border-b-0',
-        )}
-      >
-        {eventTypes.map((eventType) => (
-          <li
-            className="flex items-stretch hover:bg-alpha-1"
-            key={eventType.id}
-          >
-            <Button
-              className={twMerge(
-                'm-0 flex w-full gap-4 px-4 py-3 leading-snug [overflow-wrap:anywhere]',
-                isTeamMember && 'pr-0',
-              )}
-              href={`/subjects/${subjectId}/event-types/${eventType.id}`}
-              variant="link"
+      {!!eventTypes.length && (
+        <ul
+          className={twMerge(
+            'rounded border border-alpha-1 bg-bg-2 py-1',
+            isTeamMember && 'rounded-b-none border-b-0',
+          )}
+        >
+          {eventTypes.map((eventType) => (
+            <li
+              className="flex items-stretch hover:bg-alpha-1"
+              key={eventType.id}
             >
-              {eventType.name}
-              {!isTeamMember && (
-                <ArrowRightIcon className="ml-auto w-5 shrink-0" />
+              <Button
+                className={twMerge(
+                  'm-0 flex w-full gap-4 px-4 py-3 leading-snug [overflow-wrap:anywhere]',
+                  isTeamMember && 'pr-0',
+                )}
+                href={`/subjects/${subjectId}/event-types/${eventType.id}`}
+                variant="link"
+              >
+                {eventType.name}
+                {!isTeamMember && (
+                  <ArrowRightIcon className="ml-auto w-5 shrink-0" />
+                )}
+              </Button>
+              {isTeamMember && (
+                <EventTypeLinkListItemMenu
+                  eventTypeId={eventType.id}
+                  subjectId={subjectId}
+                />
               )}
-            </Button>
-            {isTeamMember && (
-              <EventTypeLinkListItemMenu
-                eventTypeId={eventType.id}
-                subjectId={subjectId}
-              />
-            )}
-          </li>
-        ))}
-      </ul>
+            </li>
+          ))}
+        </ul>
+      )}
       {isTeamMember && (
         <div className="flex items-center gap-4">
           <Button
diff --git a/app/(account)/subjects/[subjectId]/timeline/@events/_components/timeline-event-card.tsx b/app/(account)/subjects/[subjectId]/timeline/@events/_components/timeline-event-card.tsx
index 34a35f17..fc0db892 100644
--- a/app/(account)/subjects/[subjectId]/timeline/@events/_components/timeline-event-card.tsx
+++ b/app/(account)/subjects/[subjectId]/timeline/@events/_components/timeline-event-card.tsx
@@ -32,7 +32,7 @@ const TimelineEventCard = ({
   const sessionNumber = lastEventType.session?.order + 1;
 
   return (
-    <article className="rounded border border-alpha-1 bg-bg-2 py-1">
+    <article className="rounded border border-alpha-1 bg-bg-2 pt-1">
       <Button
         className="m-0 mb-1 w-full gap-6 p-0 px-4 py-3 leading-snug hover:bg-alpha-1"
         href={
@@ -99,7 +99,7 @@ const TimelineEventCard = ({
                 </div>
               )}
               {!!inputs.length && (
-                <div className="py-2">
+                <div className="-my-1.5 pb-4 pt-3">
                   <table className="w-full table-fixed">
                     <tbody>
                       {Object.entries(
@@ -130,10 +130,8 @@ const TimelineEventCard = ({
                         ),
                       ).map(([id, { label, type, values }]: any) => (
                         <tr key={id}>
-                          <td className="truncate px-4 py-1 align-top text-fg-4">
-                            {label}
-                          </td>
-                          <td className="truncate p-0 py-1 pr-4 align-top">
+                          <td className="truncate px-4 text-fg-4">{label}</td>
+                          <td className="truncate pr-4">
                             {formatInputValue[type as InputTypes](values)}
                           </td>
                         </tr>
@@ -143,7 +141,7 @@ const TimelineEventCard = ({
                 </div>
               )}
               {!!comments.length && (
-                <div className="space-y-4 p-4">
+                <div className="space-y-4 px-4 pb-4 pt-3">
                   <EventComments
                     comments={comments}
                     isTeamMember={isTeamMember}
diff --git a/app/(account)/subjects/[subjectId]/timeline/@missions/page.tsx b/app/(account)/subjects/[subjectId]/timeline/@missions/page.tsx
index 3fe34ef7..5318a207 100644
--- a/app/(account)/subjects/[subjectId]/timeline/@missions/page.tsx
+++ b/app/(account)/subjects/[subjectId]/timeline/@missions/page.tsx
@@ -72,14 +72,16 @@ const Page = async ({ params: { subjectId } }: PageProps) => {
 
   return (
     <div className="px-4">
-      <ul
-        className={twMerge(
-          'm-0 rounded border border-alpha-1 bg-bg-2 py-1',
-          isTeamMember && 'rounded-b-none border-b-0',
-        )}
-      >
-        {listItems}
-      </ul>
+      {!!listItems.length && (
+        <ul
+          className={twMerge(
+            'm-0 rounded border border-alpha-1 bg-bg-2 py-1',
+            isTeamMember && 'rounded-b-none border-b-0',
+          )}
+        >
+          {listItems}
+        </ul>
+      )}
       {isTeamMember && (
         <div className="flex items-center gap-4">
           <Button
diff --git a/app/(account)/subjects/page.tsx b/app/(account)/subjects/page.tsx
index b08d0893..aeb50cad 100644
--- a/app/(account)/subjects/page.tsx
+++ b/app/(account)/subjects/page.tsx
@@ -60,7 +60,7 @@ const Page = async () => {
                   key={subject.id}
                 >
                   <Button
-                    className="m-0 flex w-full gap-4 px-4 py-3 pr-0 leading-snug [overflow-wrap:anywhere]"
+                    className="m-0 w-full gap-4 px-4 py-3 pr-0 leading-snug [overflow-wrap:anywhere]"
                     href={`/subjects/${subject.id}/timeline`}
                     variant="link"
                   >
@@ -83,7 +83,7 @@ const Page = async () => {
               {clientSubjects.map((subject) => (
                 <li key={subject.id}>
                   <Button
-                    className="m-0 flex w-full gap-4 px-4 py-3 leading-snug [overflow-wrap:anywhere] hover:bg-alpha-1"
+                    className="m-0 w-full gap-6 px-4 py-3 leading-snug [overflow-wrap:anywhere] hover:bg-alpha-1"
                     href={`/subjects/${subject.id}/timeline`}
                     variant="link"
                   >
diff --git a/app/(account)/templates/page.tsx b/app/(account)/templates/page.tsx
index 5a3d90a0..60b247af 100644
--- a/app/(account)/templates/page.tsx
+++ b/app/(account)/templates/page.tsx
@@ -30,7 +30,7 @@ const Page = async () => {
               key={template.id}
             >
               <Button
-                className="m-0 flex w-full gap-4 px-4 py-3 pr-0 leading-snug [overflow-wrap:anywhere]"
+                className="m-0 w-full gap-6 px-4 py-3 pr-0 leading-snug [overflow-wrap:anywhere]"
                 href={`/templates/${template.id}`}
                 variant="link"
               >