subject links, module collapse, design updates

xvvvyz · Jul 7, 2024 · e73771c · e73771c
1 parent f1f855c
commit e73771c
Show file tree

Hide file tree

Showing 71 changed files with 1,298 additions and 1,108 deletions.
diff --git a/app/(pages)/(with-nav)/inputs/layout.tsx b/app/(pages)/(with-nav)/inputs/layout.tsx
@@ -1,4 +1,5 @@
 import Button from '@/_components/button';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { ReactNode } from 'react';
 
 interface LayoutProps {
@@ -10,7 +11,8 @@ const Layout = ({ children }: LayoutProps) => (
     <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
       <h1 className="text-2xl">Inputs</h1>
       <Button href="/inputs/create" scroll={false} size="sm">
-        Create input
+        <PlusIcon className="w-5" />
+        New input
       </Button>
     </div>
     {children}

diff --git a/app/(pages)/(with-nav)/subjects/(list)/@archived/page.tsx b/app/(pages)/(with-nav)/subjects/(list)/@archived/page.tsx
@@ -1,5 +1,5 @@
+import CollapsibleArchive from '@/_components/collapsible-archive';
 import SubjectList from '@/_components/subject-list';
-import CollapsibleArchive from '@/_queries/collapsible-archive';
 import countArchivedSubjects from '@/_queries/count-archived-subjects';
 
 const Page = async () => {

diff --git a/app/(pages)/(with-nav)/subjects/(list)/layout.tsx b/app/(pages)/(with-nav)/subjects/(list)/layout.tsx
@@ -1,4 +1,5 @@
 import Button from '@/_components/button';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { ReactNode } from 'react';
 
 interface LayoutProps {
@@ -11,7 +12,8 @@ const Layout = async ({ archived, children }: LayoutProps) => (
     <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
       <h1 className="text-2xl">Subjects</h1>
       <Button href="/subjects/create" scroll={false} size="sm">
-        Create subject
+        <PlusIcon className="w-5" />
+        New subject
       </Button>
     </div>
     <div className="space-y-4">

diff --git a/app/(pages)/(with-nav)/templates/layout.tsx b/app/(pages)/(with-nav)/templates/layout.tsx
@@ -1,4 +1,5 @@
 import Button from '@/_components/button';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { ReactNode } from 'react';
 
 interface LayoutProps {
@@ -10,7 +11,8 @@ const Layout = ({ children }: LayoutProps) => (
     <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
       <h1 className="text-2xl">Templates</h1>
       <Button href="/templates/create" scroll={false} size="sm">
-        Create template
+        <PlusIcon className="w-5" />
+        New template
       </Button>
     </div>
     {children}

diff --git a/app/(pages)/@modal/(lg)/subjects/[subjectId]/insights/[insightId]/edit/page.tsx b/app/(pages)/@modal/(lg)/subjects/[subjectId]/insights/[insightId]/edit/page.tsx
@@ -26,7 +26,7 @@ const Page = async ({ params: { insightId, subjectId } }: PageProps) => {
 
   return (
     <>
-      <PageModalHeader title="Create insight" />
+      <PageModalHeader title="New insight" />
       <InsightForm events={events} insight={insight} subjectId={subjectId} />
     </>
   );

diff --git a/app/(pages)/@modal/(lg)/subjects/[subjectId]/insights/create/page.tsx b/app/(pages)/@modal/(lg)/subjects/[subjectId]/insights/create/page.tsx
@@ -11,7 +11,7 @@ interface PageProps {
 }
 
 export const metadata = {
-  title: formatTitle(['Subjects', 'Insights', 'Create']),
+  title: formatTitle(['Subjects', 'Insights', 'New']),
 };
 
 const Page = async ({ params: { subjectId } }: PageProps) => {
@@ -24,7 +24,7 @@ const Page = async ({ params: { subjectId } }: PageProps) => {
 
   return (
     <>
-      <PageModalHeader title="Create insight" />
+      <PageModalHeader title="New insight" />
       <InsightForm events={events} subjectId={subjectId} />
     </>
   );

diff --git a/app/(pages)/@modal/(md)/account/layout.tsx b/app/(pages)/@modal/(md)/account/layout.tsx
@@ -9,7 +9,7 @@ interface LayoutProps {
 const Layout = async ({ children }: LayoutProps) => (
   <>
     <PageModalHeader title="Account settings" />
-    <div className="!border-t-0 px-4 pb-8 sm:px-8">
+    <div className="px-4 pb-8 sm:px-8">
       <div className="grid w-full grid-cols-3 divide-x divide-alpha-3 rounded border border-alpha-3">
         <Button
           activeClassName="text-fg-2 bg-alpha-1"

diff --git a/app/(pages)/@modal/(md)/inputs/create/from-input/[inputId]/page.tsx b/app/(pages)/@modal/(md)/inputs/create/from-input/[inputId]/page.tsx
@@ -10,7 +10,7 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Inputs', 'Create']) };
+export const metadata = { title: formatTitle(['Inputs', 'New']) };
 
 const Page = async ({ params: { inputId } }: PageProps) => {
   const [{ data: subjects }, { data: input }] = await Promise.all([
@@ -22,7 +22,7 @@ const Page = async ({ params: { inputId } }: PageProps) => {
 
   return (
     <>
-      <PageModalHeader title="Create input" />
+      <PageModalHeader title="New input" />
       <InputForm input={input} isDuplicate subjects={subjects} />
     </>
   );

diff --git a/app/(pages)/@modal/(md)/inputs/create/page.tsx b/app/(pages)/@modal/(md)/inputs/create/page.tsx
@@ -3,15 +3,15 @@ import PageModalHeader from '@/_components/page-modal-header';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
 import formatTitle from '@/_utilities/format-title';
 
-export const metadata = { title: formatTitle(['Inputs', 'Create']) };
+export const metadata = { title: formatTitle(['Inputs', 'New']) };
 
 const Page = async () => {
   const { data: subjects } = await listSubjectsByTeamId();
   if (!subjects) return null;
 
   return (
     <>
-      <PageModalHeader title="Create input" />
+      <PageModalHeader title="New input" />
       <InputForm subjects={subjects} />
     </>
   );

diff --git a/app/(pages)/@modal/(md)/share/[subjectId]/training-plans/[missionId]/sessions/loading.tsx b/app/(pages)/@modal/(md)/share/[subjectId]/training-plans/[missionId]/sessions/loading.tsx
@@ -1,3 +1,5 @@
-import SessionsLoading from '@/_components/sessions-loading';
+import PageModalLoading from '@/_components/page-modal-loading';
 
-export default SessionsLoading;
+const Loading = PageModalLoading;
+
+export default Loading;
diff --git a/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/[eventTypeId]/edit/page.tsx b/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/[eventTypeId]/edit/page.tsx
@@ -4,7 +4,6 @@ import getEventTypeWithInputs from '@/_queries/get-event-type-with-inputs';
 import getSubject from '@/_queries/get-subject';
 import listInputsBySubjectId from '@/_queries/list-inputs-by-subject-id';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import listTemplatesWithData from '@/_queries/list-templates-with-data';
 import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
@@ -23,23 +22,15 @@ const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
     { data: subject },
     { data: eventType },
     { data: availableInputs },
-    { data: availableTemplates },
     { data: subjects },
   ] = await Promise.all([
     getSubject(subjectId),
     getEventTypeWithInputs(eventTypeId),
     listInputsBySubjectId(subjectId),
-    listTemplatesWithData(),
     listSubjectsByTeamId(),
   ]);
 
-  if (
-    !subject ||
-    !eventType ||
-    !availableInputs ||
-    !availableTemplates ||
-    !subjects
-  ) {
+  if (!subject || !eventType || !availableInputs || !subjects) {
     return null;
   }
 
@@ -48,7 +39,6 @@ const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
       <PageModalHeader title={eventType.name as string} />
       <EventTypeForm
         availableInputs={availableInputs}
-        availableTemplates={availableTemplates}
         eventType={eventType}
         subjects={subjects}
         subjectId={subjectId}

diff --git a/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/create/page.tsx b/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/create/page.tsx
@@ -13,7 +13,7 @@ interface PageProps {
 }
 
 export const metadata = {
-  title: formatTitle(['Subjects', 'Event types', 'Create']),
+  title: formatTitle(['Subjects', 'Event types', 'New']),
 };
 
 const Page = async ({ params: { subjectId } }: PageProps) => {
@@ -35,10 +35,9 @@ const Page = async ({ params: { subjectId } }: PageProps) => {
 
   return (
     <>
-      <PageModalHeader title="Create event type" />
+      <PageModalHeader title="New event type" />
       <EventTypeForm
         availableInputs={availableInputs}
-        availableTemplates={availableTemplates}
         subjects={subjects}
         subjectId={subjectId}
       />

diff --git a/...tId]/training-plans/[missionId]/sessions/create/[order]/from-session/[sessionId]/page.tsx b/...tId]/training-plans/[missionId]/sessions/create/[order]/from-session/[sessionId]/page.tsx
@@ -21,7 +21,7 @@ interface PageProps {
 }
 
 export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Sessions', 'Create']),
+  title: formatTitle(['Subjects', 'Training plans', 'Sessions', 'New']),
 };
 
 const Page = async ({

diff --git a/...dal/(md)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/page.tsx b/...dal/(md)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/page.tsx
@@ -19,7 +19,7 @@ interface PageProps {
 }
 
 export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Sessions', 'Create']),
+  title: formatTitle(['Subjects', 'Training plans', 'Sessions', 'New']),
 };
 
 const Page = async ({ params: { missionId, order, subjectId } }: PageProps) => {

diff --git a/app/(pages)/@modal/(md)/subjects/[subjectId]/training-plans/create/page.tsx b/app/(pages)/@modal/(md)/subjects/[subjectId]/training-plans/create/page.tsx
@@ -10,7 +10,7 @@ interface PageProps {
 }
 
 export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Create']),
+  title: formatTitle(['Subjects', 'Training plans', 'New']),
 };
 
 const Page = async ({ params: { subjectId } }: PageProps) => {
@@ -19,7 +19,7 @@ const Page = async ({ params: { subjectId } }: PageProps) => {
 
   return (
     <>
-      <PageModalHeader title="Create training plan" />
+      <PageModalHeader title="New training plan" />
       <MissionForm subjectId={subjectId} />
     </>
   );

diff --git a/app/(pages)/@modal/(md)/subjects/create/page.tsx b/app/(pages)/@modal/(md)/subjects/create/page.tsx
@@ -2,11 +2,11 @@ import PageModalHeader from '@/_components/page-modal-header';
 import SubjectForm from '@/_components/subject-form';
 import formatTitle from '@/_utilities/format-title';
 
-export const metadata = { title: formatTitle(['Subjects', 'Create']) };
+export const metadata = { title: formatTitle(['Subjects', 'New']) };
 
 const Page = () => (
   <>
-    <PageModalHeader title="Create subject" />
+    <PageModalHeader title="New subject" />
     <SubjectForm />
   </>
 );

diff --git a/app/(pages)/@modal/(md)/templates/create/from-event-type/[eventTypeId]/page.tsx b/app/(pages)/@modal/(md)/templates/create/from-event-type/[eventTypeId]/page.tsx
@@ -11,7 +11,7 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Templates', 'Create']) };
+export const metadata = { title: formatTitle(['Templates', 'New']) };
 
 const Page = async ({ params: { eventTypeId } }: PageProps) => {
   const [{ data: eventType }, { data: availableInputs }, { data: subjects }] =
@@ -25,7 +25,7 @@ const Page = async ({ params: { eventTypeId } }: PageProps) => {
 
   return (
     <>
-      <PageModalHeader title="Create template" />
+      <PageModalHeader title="New template" />
       <TemplateForm
         availableInputs={availableInputs}
         disableCache

diff --git a/app/(pages)/@modal/(md)/templates/create/page.tsx b/app/(pages)/@modal/(md)/templates/create/page.tsx
@@ -4,7 +4,7 @@ import listInputs from '@/_queries/list-inputs';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
 import formatTitle from '@/_utilities/format-title';
 
-export const metadata = { title: formatTitle(['Templates', 'Create']) };
+export const metadata = { title: formatTitle(['Templates', 'New']) };
 
 const Page = async () => {
   const [{ data: availableInputs }, { data: subjects }] = await Promise.all([
@@ -16,7 +16,7 @@ const Page = async () => {
 
   return (
     <>
-      <PageModalHeader title="Create template" />
+      <PageModalHeader title="New template" />
       <TemplateForm availableInputs={availableInputs} subjects={subjects} />
     </>
   );

diff --git a/app/_components/account-email-form.tsx b/app/_components/account-email-form.tsx
@@ -28,7 +28,6 @@ const AccountEmailForm = ({ user }: AccountEmailFormProps) => {
 
   return (
     <form
-      className="divide-y divide-alpha-1"
       onSubmit={form.handleSubmit((values) =>
         startTransition(async () => {
           const supabase = createBrowserSupabaseClient();
@@ -48,7 +47,7 @@ const AccountEmailForm = ({ user }: AccountEmailFormProps) => {
         }),
       )}
     >
-      <div className="px-4 py-8 sm:px-8">
+      <div className="px-4 pb-8 pt-6 sm:px-8">
         <Input
           label="Email address"
           required

diff --git a/app/_components/account-password-form.tsx b/app/_components/account-password-form.tsx
@@ -23,7 +23,6 @@ const AccountPasswordForm = () => {
 
   return (
     <form
-      className="divide-y divide-alpha-1"
       onSubmit={form.handleSubmit((values) =>
         startTransition(async () => {
           const supabase = createBrowserSupabaseClient();
@@ -45,7 +44,7 @@ const AccountPasswordForm = () => {
         }),
       )}
     >
-      <div className="px-4 py-8 sm:px-8">
+      <div className="px-4 pb-8 pt-6 sm:px-8">
         <Input
           label="New password"
           minLength={6}

diff --git a/app/_components/account-profile-form.tsx b/app/_components/account-profile-form.tsx
@@ -35,7 +35,6 @@ const AccountProfileForm = ({ user }: AccountProfileFormProps) => {
 
   return (
     <form
-      className="divide-y divide-alpha-1"
       onSubmit={form.handleSubmit((values) =>
         startTransition(async () => {
           const supabase = createBrowserSupabaseClient();
@@ -72,7 +71,7 @@ const AccountProfileForm = ({ user }: AccountProfileFormProps) => {
         }),
       )}
     >
-      <div className="flex flex-col gap-6 px-4 py-8 sm:px-8">
+      <div className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8">
         <div className="flex gap-6">
           <Input label="First name" required {...form.register('firstName')} />
           <Input label="Last name" required {...form.register('lastName')} />

diff --git a/app/_components/alert.tsx b/app/_components/alert.tsx
@@ -38,7 +38,7 @@ const Alert = ({
       <div className="fixed inset-0 z-20 bg-alpha-reverse-1 backdrop-blur-sm" />
       <div className="fixed inset-0 z-30 overflow-y-auto p-4">
         <div className="flex min-h-full items-center justify-center">
-          <DialogPanel className="w-full max-w-xs rounded border border-alpha-1 bg-bg-2 p-8 text-center shadow-lg">
+          <DialogPanel className="w-full max-w-xs rounded border border-alpha-1 bg-bg-2 p-8 text-center drop-shadow">
             <DialogTitle className="text-2xl">{title}</DialogTitle>
             {description && (
               <Description className="mt-2 text-fg-4">

diff --git a/app/_components/calendar.tsx b/app/_components/calendar.tsx
@@ -17,7 +17,7 @@ const Calendar = ({
     classNames={{
       caption: 'flex justify-center pt-1 relative items-center',
       cell: 'p-0 group',
-      day: 'h-9 w-9 rounded-sm transition-colors hover:bg-alpha-2 border border-transparent focus:ring-1 focus:ring-accent-2 focus:outline-none font-normal',
+      day: 'h-9 w-9 rounded-sm font-mono transition-colors hover:bg-alpha-2 border border-transparent focus:ring-1 focus:ring-accent-2 focus:outline-none font-normal',
       day_disabled: 'disabled',
       day_hidden: 'invisible',
       day_outside: 'text-fg-4',

diff --git a/app/_components/checkbox.tsx b/app/_components/checkbox.tsx
@@ -45,7 +45,11 @@ const Checkbox = forwardRef(
           <CheckIcon className="invisible h-5 w-5" />
         </span>
       </label>
-      {tooltip && <Tip className="-mr-[0.15rem]">{tooltip}</Tip>}
+      {tooltip && (
+        <Tip className="-mr-[0.2rem]" side="left">
+          {tooltip}
+        </Tip>
+      )}
     </div>
   ),
 );

diff --git a/app/_queries/collapsible-archive.tsx → app/_components/collapsible-archive.tsx b/app/_queries/collapsible-archive.tsx → app/_components/collapsible-archive.tsx