page heading

app/opportunities/[opportunity_id]/applications/page.tsx

@@ -104,11 +104,7 @@ export default async function ApplicationsPage({ params }: Props) {
 
   return (
     <div className="flex h-screen flex-col gap-8 overflow-hidden py-8">
-      <PageHeading
-        title={opportunity?.title ?? ""}
-        description="Invite applicants to be interviewed"
-        breadcrumbs={breadcrumbs}
-      >
+      <PageHeading title={opportunity?.title ?? ""} breadcrumbs={breadcrumbs}>
         <ExportButton getExportData={getExportData} />
       </PageHeading>
 

app/opportunities/[opportunity_id]/review/[review_id]/page.tsx

@@ -45,13 +45,12 @@ export default async function Review({ params }: ReviewProps) {
   const breadcrumbs = mapPathnameToBreadcrumbs(headerList);
 
   return (
-    <div className="flex h-screen flex-col gap-4 py-8">
-      <PageBreadcrumbs breadcrumbs={breadcrumbs} />
+    <div className="flex h-screen flex-col py-8">
+      <PageBreadcrumbs breadcrumbs={breadcrumbs} className="mb-1" />
       <ReviewForm
         questions={questions}
         application={review.application}
         review={review}
-        opportunityTitle={opportunity?.title}
       />
     </div>
   );

app/opportunities/[opportunity_id]/review/[review_id]/reviewForm.tsx

@@ -24,14 +24,12 @@ interface ReviewFormProps {
   application: Application;
   review: Review;
   questions: Question[];
-  opportunityTitle: string | undefined;
 }
 
 export const ReviewForm = ({
   application,
   questions,
   review,
-  opportunityTitle,
 }: ReviewFormProps) => {
   const applicationFields = (application.content as Tally).data.fields;
 
@@ -85,9 +83,9 @@ export const ReviewForm = ({
       {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
       <div className="flex min-h-0 flex-col gap-8">
         <div className="flex justify-between">
-          <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+          <h2 className="scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0">
             Review application
-          </h1>
+          </h2>
 
           <div className="flex gap-2">
             <div>

app/opportunities/[opportunity_id]/review/page.tsx

@@ -67,12 +67,8 @@ export default async function ReviewPage({ params }: ReviewPageProps) {
   const breadcrumbs = mapPathnameToBreadcrumbs(headerList);
 
   return (
-    <div className="space-y-8 p-8">
-      <PageHeading
-        title="Reviews"
-        description="See and edit your reviews"
-        breadcrumbs={breadcrumbs}
-      >
+    <div className="flex flex-col gap-8 py-8">
+      <PageHeading title="Reviews" breadcrumbs={breadcrumbs}>
         <Button asChild>
           <Link href="review/new">
             <FileCheck className="mr-2" />

components/ui/page-breadcrumbs.tsx

@@ -12,9 +12,10 @@ type PageBreadcrumb = { href: string; label: string };
 
 export interface Props {
   breadcrumbs: PageBreadcrumb[];
+  className?: string;
 }
 
-export const PageBreadcrumbs = ({ breadcrumbs }: Props) => {
+export const PageBreadcrumbs = ({ breadcrumbs, className }: Props) => {
   const capitalizeFirstChar = (str: string) => {
     if (!str) return str;
     return isNaN(Number(str.charAt(0)))
@@ -23,7 +24,7 @@ export const PageBreadcrumbs = ({ breadcrumbs }: Props) => {
   };
 
   return (
-    <Breadcrumb>
+    <Breadcrumb className={className}>
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/">Home</BreadcrumbLink>

components/ui/page-heading.tsx

@@ -17,16 +17,16 @@ export const PageHeading = ({
   children,
 }: Props) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-1">
       <PageBreadcrumbs breadcrumbs={breadcrumbs} />
 
-      <div className="flex w-full flex-col justify-between gap-4 md:flex-row">
+      <div className="flex w-full flex-col justify-between gap-2 md:flex-row">
         <div className="flex w-full flex-col gap-3 truncate">
-          <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+          <h2 className="scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0">
             {title}
-          </h1>
+          </h2>
           {description && (
-            <p className="text-muted-foreground">{description}</p>
+            <p className="text-sm text-muted-foreground">{description}</p>
           )}
         </div>
         {children}

lib/hooks/use-hook.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export function useMediaQuery(query: string) {
+  const [value, setValue] = React.useState(false);
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches);
+    }
+
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+
+  return value;
+}

tsconfig.json

@@ -18,9 +18,9 @@
       "@styles/*": ["./styles/*"],
       "@components/*": ["./components/*"],
       "@services/*": ["./services/*"],
-      "@lib/*": ["./lib/*"],
       "@providers/*": ["./providers/*"],
-      "@hooks/*": ["./hooks/*"],
+      "@lib/*": ["./lib/*"],
+      "@hooks/*": ["./lib/hooks/*"],
       "@config/*": ["./config/*"]
     },