From 0308afc809de5ea271b88eea64033e9bb028ea1f Mon Sep 17 00:00:00 2001
From: Vojta Holik <vojta@egghead.io>
Date: Thu, 21 Dec 2023 16:20:35 +0100
Subject: [PATCH] style: layout updates

---
 apps/course-builder-web/src/app/layout.tsx    |  2 +-
 .../src/app/tips/[slug]/edit/page.tsx         |  2 +-
 .../src/app/tips/[slug]/page.tsx              | 52 ++++++++++++-------
 .../src/app/tips/_components/codemirror.tsx   |  4 +-
 .../app/tips/_components/edit-tip-form.tsx    | 24 +++++----
 .../src/app/tips/_components/tip-player.tsx   | 11 +++-
 apps/course-builder-web/src/app/tips/page.tsx | 10 ++--
 .../src/components/navigation.tsx             |  2 +-
 .../src/components/navigation/links.tsx       |  5 +-
 .../src/components/navigation/user.tsx        |  2 +-
 .../course-builder-web/src/styles/globals.css |  4 ++
 11 files changed, 78 insertions(+), 40 deletions(-)

diff --git a/apps/course-builder-web/src/app/layout.tsx b/apps/course-builder-web/src/app/layout.tsx
index 5d95a5d55..53db21666 100644
--- a/apps/course-builder-web/src/app/layout.tsx
+++ b/apps/course-builder-web/src/app/layout.tsx
@@ -36,7 +36,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
             <Party />
             <div key="1" className="flex min-h-screen w-full flex-col">
               <Navigation />
-              <main>
+              <main className="flex min-h-[calc(100vh-var(--nav-height))] flex-col">
                 <NextSSRPlugin
                   /**
                    * The `extractRouterConfig` will extract **only** the route configs from the
diff --git a/apps/course-builder-web/src/app/tips/[slug]/edit/page.tsx b/apps/course-builder-web/src/app/tips/[slug]/edit/page.tsx
index b28c9f0e1..68f531655 100644
--- a/apps/course-builder-web/src/app/tips/[slug]/edit/page.tsx
+++ b/apps/course-builder-web/src/app/tips/[slug]/edit/page.tsx
@@ -10,7 +10,7 @@ export default async function TipEditPage({params}: {params: {slug: string}}) {
   const tip = await getTip(params.slug)
 
   return tip && ability.can('upload', 'Media') ? (
-    <div className="relative mx-auto h-full w-full flex-grow items-center justify-center border-b">
+    <div className="relative mx-auto flex h-full w-full flex-grow flex-col items-center justify-center">
       <EditTipForm key={tip.slug} tip={tip} />
     </div>
   ) : null
diff --git a/apps/course-builder-web/src/app/tips/[slug]/page.tsx b/apps/course-builder-web/src/app/tips/[slug]/page.tsx
index 5366aa11b..3b440fa07 100644
--- a/apps/course-builder-web/src/app/tips/[slug]/page.tsx
+++ b/apps/course-builder-web/src/app/tips/[slug]/page.tsx
@@ -1,5 +1,11 @@
 import Link from 'next/link'
-import {CardTitle, CardHeader, CardContent, Card} from '@coursebuilder/ui'
+import {
+  CardTitle,
+  CardHeader,
+  CardContent,
+  Card,
+  Button,
+} from '@coursebuilder/ui'
 import {TipPlayer} from '@/app/tips/_components/tip-player'
 import * as React from 'react'
 import {getServerAuthSession} from '@/server/auth'
@@ -13,23 +19,33 @@ export default async function TipPage({params}: {params: {slug: string}}) {
   const tip = await getTip(params.slug)
 
   return (
-    <div className="flex flex-col">
-      <Card key={tip._id}>
-        <CardHeader>
-          <CardTitle>{tip.title}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {tip.summary}
-          <TipPlayer
-            videoResourceId={tip.videoResourceId}
-            muxPlaybackId={tip.muxPlaybackId}
-          />
-          <ReactMarkdown>{tip.body}</ReactMarkdown>
-          {ability.can('edit', 'Tip') ? (
-            <Link href={`/tips/${tip.slug || tip._id}/edit`}>edit</Link>
-          ) : null}
-        </CardContent>
-      </Card>
+    <div>
+      {ability.can('edit', 'Tip') ? (
+        <div className="flex h-9 w-full items-center justify-between bg-muted px-1">
+          <div />
+          <Button asChild className="h-7">
+            <Link href={`/tips/${tip.slug || tip._id}/edit`}>Edit</Link>
+          </Button>
+        </div>
+      ) : null}
+      <header>
+        <TipPlayer
+          videoResourceId={tip.videoResourceId}
+          muxPlaybackId={tip.muxPlaybackId}
+          className="relative flex h-full max-h-[calc(100vh-var(--nav-height))] w-full items-center justify-center"
+        />
+      </header>
+      <article className="grid grid-cols-5 p-5 sm:p-10">
+        <div className="col-span-3">
+          <h1 className="text-3xl font-bold">{tip.title}</h1>
+        </div>
+        <div className="col-span-2">
+          <ReactMarkdown className="prose dark:prose-invert">
+            {tip.body}
+          </ReactMarkdown>
+          <ReactMarkdown>{tip.summary}</ReactMarkdown>
+        </div>
+      </article>
     </div>
   )
 }
diff --git a/apps/course-builder-web/src/app/tips/_components/codemirror.tsx b/apps/course-builder-web/src/app/tips/_components/codemirror.tsx
index fddc0d85b..80c1d6dd3 100644
--- a/apps/course-builder-web/src/app/tips/_components/codemirror.tsx
+++ b/apps/course-builder-web/src/app/tips/_components/codemirror.tsx
@@ -11,7 +11,7 @@ export const CodemirrorEditor = ({roomName}: {roomName: string}) => {
   const {codemirrorElementRef} = useCodemirror({roomName})
 
   return (
-    <div className="h-full flex-shrink-0 border-y">
+    <div className="h-full flex-shrink-0 border-t">
       <div ref={codemirrorElementRef}></div>
     </div>
   )
@@ -25,6 +25,7 @@ const CourseBuilderEditorTheme = {
   '.cm-content': {
     padding: '2rem 0',
     fontSize: '14px',
+    fontFamily: 'var(--font-mono)',
   },
   '.cm-line': {
     padding: '0 2rem',
@@ -51,6 +52,7 @@ const CourseBuilderEditorTheme = {
 const styles: Extension[] = [
   EditorView.theme(CourseBuilderEditorTheme),
   EditorView.lineWrapping,
+  EditorView.domEventHandlers({}),
 ]
 
 /**
diff --git a/apps/course-builder-web/src/app/tips/_components/edit-tip-form.tsx b/apps/course-builder-web/src/app/tips/_components/edit-tip-form.tsx
index 8402e039a..1fc49df96 100644
--- a/apps/course-builder-web/src/app/tips/_components/edit-tip-form.tsx
+++ b/apps/course-builder-web/src/app/tips/_components/edit-tip-form.tsx
@@ -59,23 +59,29 @@ export function EditTipForm({tip}: {tip: Tip}) {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex w-full items-center justify-between bg-gray-100 p-2">
+      <form
+        className="flex h-full flex-grow flex-col"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <div className="flex h-9 w-full items-center justify-between bg-muted px-1">
           <Button className="px-0" asChild variant="link">
-            <Link href={`/tips/${tip.slug}`}>← Tip</Link>
+            <Link href={`/tips/${tip.slug}`} className="aspect-square">
+              ←
+            </Link>
           </Button>
           <Button
             type="submit"
             variant="default"
             size="sm"
+            className="h-7"
             disabled={updateTipStatus === 'loading'}
           >
-            Save Tip
+            Save
           </Button>
         </div>
-        <div className="flex h-full border-t">
+        <div className="flex h-full flex-grow border-t">
           <div className="grid grid-cols-12">
-            <div className="col-span-3 flex h-full flex-col space-y-5 border-r p-5">
+            <div className="col-span-3 flex h-full flex-col border-r">
               <TipPlayer
                 videoResourceId={tip.videoResourceId}
                 muxPlaybackId={tip.muxPlaybackId}
@@ -84,7 +90,7 @@ export function EditTipForm({tip}: {tip: Tip}) {
                 control={form.control}
                 name="title"
                 render={({field}) => (
-                  <FormItem>
+                  <FormItem className="p-5">
                     <FormLabel className="text-lg font-bold">Title</FormLabel>
                     <FormDescription>
                       A title should summarize the tip and explain what it is
@@ -101,7 +107,7 @@ export function EditTipForm({tip}: {tip: Tip}) {
                 control={form.control}
                 name="body"
                 render={({field}) => (
-                  <FormItem className="h-full pt-5">
+                  <FormItem className="pt-5">
                     <FormLabel className="px-5 text-lg font-bold">
                       Content
                     </FormLabel>
@@ -126,7 +132,7 @@ export function EditTipForm({tip}: {tip: Tip}) {
               )}
             </div>
           </div>
-          <div className="border-l bg-gray-100">
+          <div className="border-l bg-muted">
             <div className="flex flex-col gap-1 p-1">
               <TooltipProvider delayDuration={0}>
                 {Array.from(TOOLBAR).map((item) => (
diff --git a/apps/course-builder-web/src/app/tips/_components/tip-player.tsx b/apps/course-builder-web/src/app/tips/_components/tip-player.tsx
index 6d5646915..bcdb94ccc 100644
--- a/apps/course-builder-web/src/app/tips/_components/tip-player.tsx
+++ b/apps/course-builder-web/src/app/tips/_components/tip-player.tsx
@@ -4,13 +4,16 @@ import {type MuxPlayerProps} from '@mux/mux-player-react'
 import MuxPlayer from '@mux/mux-player-react/lazy'
 import * as React from 'react'
 import {api} from '@/trpc/react'
+import {cn} from '@coursebuilder/ui/utils/cn'
 
 export function TipPlayer({
   videoResourceId,
   muxPlaybackId,
+  className,
 }: {
   videoResourceId: string
   muxPlaybackId?: string
+  className?: string
 }) {
   const {data: videoResource} = api.videoResources.getById.useQuery({
     videoResourceId,
@@ -32,5 +35,11 @@ export function TipPlayer({
       ? videoResource?.muxPlaybackId
       : undefined)
 
-  return <MuxPlayer playbackId={playbackId} {...playerProps} />
+  return (
+    <MuxPlayer
+      playbackId={playbackId}
+      className={cn(className)}
+      {...playerProps}
+    />
+  )
 }
diff --git a/apps/course-builder-web/src/app/tips/page.tsx b/apps/course-builder-web/src/app/tips/page.tsx
index 7b3853a17..9b2c928ab 100644
--- a/apps/course-builder-web/src/app/tips/page.tsx
+++ b/apps/course-builder-web/src/app/tips/page.tsx
@@ -12,10 +12,8 @@ export default async function TipsListPage() {
   const tipsModule = await getTipsModule()
 
   return (
-    <div className="mx-auto flex w-full max-w-screen-sm flex-col py-5">
-      <h1 className="pb-3 text-lg font-bold">Create Tip</h1>
-      {ability.can('upload', 'Media') ? <CreateTip /> : null}
-      <div className="mt-8 flex flex-col space-y-3">
+    <div className="grid h-full flex-grow grid-cols-5 gap-3 bg-muted p-5">
+      <div className="col-span-3 flex h-full flex-grow flex-col space-y-2">
         <h2 className="text-lg font-bold">Published Tips</h2>
         {tipsModule.tips.map((tip) => (
           <Card key={tip._id}>
@@ -31,6 +29,10 @@ export default async function TipsListPage() {
           </Card>
         ))}
       </div>
+      <div className="col-span-2 h-full flex-grow">
+        <h1 className="pb-2 text-lg font-bold">Create Tip</h1>
+        {ability.can('upload', 'Media') ? <CreateTip /> : null}
+      </div>
     </div>
   )
 }
diff --git a/apps/course-builder-web/src/components/navigation.tsx b/apps/course-builder-web/src/components/navigation.tsx
index 833c7ddfa..c0ed1b666 100644
--- a/apps/course-builder-web/src/components/navigation.tsx
+++ b/apps/course-builder-web/src/components/navigation.tsx
@@ -21,7 +21,7 @@ const Navigation: React.FC<NavigationProps> = async ({
     <>
       <div
         className={cn(
-          'left-0 z-50 flex w-full flex-col items-center justify-center border-b border-foreground/5 bg-white/95 shadow shadow-gray-300/20 backdrop-blur-md print:hidden',
+          `relative z-50 flex h-[var(--nav-height)] w-full flex-col items-center justify-center border-b bg-background print:hidden`,
           navigationContainerClassName,
         )}
       >
diff --git a/apps/course-builder-web/src/components/navigation/links.tsx b/apps/course-builder-web/src/components/navigation/links.tsx
index 855e3fb68..d5cc46a65 100644
--- a/apps/course-builder-web/src/components/navigation/links.tsx
+++ b/apps/course-builder-web/src/components/navigation/links.tsx
@@ -53,7 +53,7 @@ export function Links({className}: {className?: string}) {
     <motion.nav
       aria-label="top"
       className={cn(
-        'relative mx-auto flex h-14 w-full items-center justify-between px-3 text-sm',
+        'relative mx-auto flex w-full items-center justify-between px-3 text-sm',
         className,
       )}
     >
@@ -69,7 +69,7 @@ export function Links({className}: {className?: string}) {
             redirect('/brand')
           }}
         >
-          <Logo />
+          Course Builder
         </Link>
         <div className="hidden items-center justify-start gap-2 font-medium md:flex lg:pl-2">
           {navigationLinks.map(({label, href, icon}) => {
@@ -91,7 +91,6 @@ export function Links({className}: {className?: string}) {
       <div className="flex items-center justify-end">
         <Login className="hidden md:flex" />
         <User className="hidden md:flex" />
-
         <NavToggle isMenuOpened={menuOpen} setMenuOpened={setMenuOpen} />
       </div>
       <AnimatePresence>
diff --git a/apps/course-builder-web/src/components/navigation/user.tsx b/apps/course-builder-web/src/components/navigation/user.tsx
index 3727a23a6..0fea7e911 100644
--- a/apps/course-builder-web/src/components/navigation/user.tsx
+++ b/apps/course-builder-web/src/components/navigation/user.tsx
@@ -42,7 +42,7 @@ export const User: React.FC<{className?: string}> = ({className}) => {
               default="mp"
             />
             <div className="flex flex-col pl-0.5">
-              <span className="inline-flex gap-0.5 text-sm font-bold leading-tight">
+              <span className="inline-flex items-center gap-0.5 text-sm font-bold leading-tight">
                 <span className="truncate sm:max-w-[8rem] lg:max-w-[11rem] xl:max-w-none">
                   {sessionData?.user?.name?.split(' ')[0]}
                 </span>{' '}
diff --git a/apps/course-builder-web/src/styles/globals.css b/apps/course-builder-web/src/styles/globals.css
index e34a58872..79d34637f 100644
--- a/apps/course-builder-web/src/styles/globals.css
+++ b/apps/course-builder-web/src/styles/globals.css
@@ -4,6 +4,10 @@
 
 @layer base {
   :root {
+    --nav-height: 3.5rem;
+
+    /* shadcnui */
+
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;