enhance: update frontend layout of header and proposal cards

uzh-bf · Oct 25, 2023 · 04b72dc · 04b72dc
1 parent 02768fb
commit 04b72dc
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 82 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,27 +1,46 @@
-import { Button, H1 } from '@uzh-bf/design-system'
+import { faQuestion } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Button } from '@uzh-bf/design-system'
 import { signIn, signOut, useSession } from 'next-auth/react'
+import { UserRole } from 'src/lib/constants'
+import NewProposalButton from './NewProposalButton'
 
 export default function Header() {
   const { data: session } = useSession()
 
+  const isSupervisor = session?.user?.role === UserRole.SUPERVISOR
+
   return (
-    <header className="">
-      <div className="flex flex-col p-4 text-gray-600 bg-gray-200 md:justify-between md:flex-row">
-        <H1 className={{ root: 'text-3xl' }}>DBF Thesis Market</H1>
-        <div className="md:flex md:items-center">
-          {session?.user ? (
-            <>
-              <div className="text-sm md:pr-2">
-                Signed in as {session.user.email} ({session.user.role})
-              </div>
-              <Button onClick={() => signOut()}>Sign out</Button>
-            </>
-          ) : (
-            <>
-              <Button onClick={() => signIn()}>DBF Supervisor Log-in</Button>
-            </>
-          )}
-        </div>
+    <header className="bg-slate-100 flex flex-col p-4 text-gray-600 md:justify-between md:flex-row">
+      <div>
+        <NewProposalButton isSupervisor={isSupervisor} />
+      </div>
+      <div className="flex flex-col md:flex-row md:items-center gap-2">
+        {session?.user && (
+          <div className="text-sm md:pr-2">
+            Signed in as {session.user.email} ({session.user.role})
+          </div>
+        )}
+        <a
+          href={
+            isSupervisor
+              ? 'https://www.bf.uzh.ch/de/intranet/phd/thesis-supervision.html'
+              : 'https://www.bf.uzh.ch/en/studies/thesis.html'
+          }
+          target="_blank"
+        >
+          <Button>
+            <Button.Icon>
+              <FontAwesomeIcon icon={faQuestion} />
+            </Button.Icon>
+            <Button.Label>FAQ / Documentation</Button.Label>
+          </Button>
+        </a>
+        {session?.user ? (
+          <Button onClick={() => signOut()}>Sign out</Button>
+        ) : (
+          <Button onClick={() => signIn()}>DBF Supervisor Log-in</Button>
+        )}
       </div>
     </header>
   )

diff --git a/src/components/NewProposalButton.tsx b/src/components/NewProposalButton.tsx
@@ -1,3 +1,5 @@
+import { faAdd } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@uzh-bf/design-system'
 import Link from 'next/link'
 
@@ -18,7 +20,12 @@ export default function NewProposalButton({
             : (process.env.NEXT_PUBLIC_FORMS_URL_SUBMIT as string)
         }
       >
-        <Button>New Proposal</Button>
+        <Button>
+          <Button.Icon>
+            <FontAwesomeIcon icon={faAdd} />
+          </Button.Icon>
+          <Button.Label>New Proposal</Button.Label>
+        </Button>
       </Link>
     </div>
   )

diff --git a/src/components/ProposalCard.tsx b/src/components/ProposalCard.tsx
@@ -27,7 +27,7 @@ export default function ProposalCard({
       key={proposal.id}
       className={{
         root: twMerge(
-          'flex flex-col justify-between w-full md:w-64 p-2 text-sm',
+          'flex flex-row md:flex-col justify-between w-full md:w-64 p-2 text-right md:text-center text-sm',
           (proposal.isOwnProposal || proposal.isSupervisedProposal) &&
             'border-orange-300',
           hasFeedback && 'bg-slate-100 border-slate-200'

diff --git a/src/components/StudentProposals.tsx b/src/components/StudentProposals.tsx
@@ -3,7 +3,6 @@ import { RefObject } from 'react'
 import ProposalCard from './ProposalCard'
 
 interface StudentProposalsProps {
-  isSupervisor: boolean
   data: any
   groupedStudentProposals: any
   selectedProposal: string | null
@@ -13,57 +12,52 @@ interface StudentProposalsProps {
 }
 
 export default function StudentProposals({
-  isSupervisor,
   data,
   groupedStudentProposals,
   selectedProposal,
   setSelectedProposal,
   setDisplayMode,
   buttonRef,
 }: StudentProposalsProps) {
-  if (isSupervisor) {
-    return (
-      <div>
-        <H2>Student Proposals</H2>
-        <div className="text-base">
-          {data?.filter((proposal: any) => proposal.typeKey === 'STUDENT')
-            .length === 0 && <div>No student proposals available...</div>}
+  return (
+    <div>
+      <H2>Student Proposals</H2>
+      <div className="text-base">
+        {data?.filter((proposal: any) => proposal.typeKey === 'STUDENT')
+          .length === 0 && <div>No student proposals available...</div>}
 
-          {[
-            'Banking and Insurance',
-            'Corporate Finance',
-            'Financial Economics',
-            'Quantitative Finance',
-            'Sustainable Finance',
-          ]
-            .filter(
-              (topicArea) => groupedStudentProposals?.[topicArea]?.length > 0
-            )
-            .map((topicArea) => (
-              <div key={topicArea}>
-                <H3>{topicArea}</H3>
-                <div className="flex flex-row flex-wrap grid-cols-3 gap-2">
-                  {groupedStudentProposals?.[topicArea].map((proposal: any) => (
-                    <ProposalCard
-                      key={proposal.id}
-                      proposal={proposal}
-                      isActive={selectedProposal === proposal.id}
-                      onClick={() => {
-                        setSelectedProposal(proposal.id),
-                          setDisplayMode('details')
-                        buttonRef?.current?.scrollIntoView({
-                          behavior: 'smooth',
-                        })
-                      }}
-                    />
-                  ))}
-                </div>
+        {[
+          'Banking and Insurance',
+          'Corporate Finance',
+          'Financial Economics',
+          'Quantitative Finance',
+          'Sustainable Finance',
+        ]
+          .filter(
+            (topicArea) => groupedStudentProposals?.[topicArea]?.length > 0
+          )
+          .map((topicArea) => (
+            <div key={topicArea}>
+              <H3 className={{ root: 'mt-2' }}>{topicArea}</H3>
+              <div className="flex flex-row flex-wrap grid-cols-3 gap-2">
+                {groupedStudentProposals?.[topicArea].map((proposal: any) => (
+                  <ProposalCard
+                    key={proposal.id}
+                    proposal={proposal}
+                    isActive={selectedProposal === proposal.id}
+                    onClick={() => {
+                      setSelectedProposal(proposal.id),
+                        setDisplayMode('details')
+                      buttonRef?.current?.scrollIntoView({
+                        behavior: 'smooth',
+                      })
+                    }}
+                  />
+                ))}
               </div>
-            ))}
-        </div>
+            </div>
+          ))}
       </div>
-    )
-  } else {
-    return null
-  }
+    </div>
+  )
 }
diff --git a/src/components/SupervisorProposals.tsx b/src/components/SupervisorProposals.tsx
@@ -21,7 +21,9 @@ export default function SupervisorProposals({
 }: SupervisorProposalsProps) {
   return (
     <div>
-      {isSupervisor && <H2>Supervisor Proposals</H2>}
+      {isSupervisor && (
+        <H2 className={{ root: 'mt-2' }}>Supervisor Proposals</H2>
+      )}
       <div className="flex flex-row flex-wrap grid-cols-3 gap-2">
         {data?.filter((proposal: any) => proposal.typeKey === 'SUPERVISOR')
           .length === 0 && <div>No supervisor proposals available...</div>}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -4,7 +4,6 @@ import { useRouter } from 'next/router'
 import * as R from 'ramda'
 import { useMemo, useRef, useState } from 'react'
 import Header from 'src/components/Header'
-import NewProposalButton from 'src/components/NewProposalButton'
 import ProposalApplication from 'src/components/ProposalApplication'
 import ProposalFeedback from 'src/components/ProposalFeedback'
 import ProposalMeta from 'src/components/ProposalMeta'
@@ -43,12 +42,6 @@ export default function Index() {
   }, [data])
 
   const proposalDetails = useMemo(() => {
-    if (
-      (!selectedProposal && displayMode === 'createStudent') ||
-      displayMode === 'createSupervisor'
-    )
-      return null
-
     if (!selectedProposal) return setSelectedProposal(data?.[0]?.id as string)
 
     return data?.find((p) => p.id === selectedProposal)
@@ -68,16 +61,17 @@ export default function Index() {
 
       <div className="grid grid-cols-1 gap-2 m-4 md:grid-cols-2">
         <div className="flex-initial pb-4 space-y-4 md:flex-1">
-          <NewProposalButton isSupervisor={isSupervisor} />
-          <StudentProposals
-            isSupervisor={isSupervisor}
-            data={data}
-            groupedStudentProposals={groupedStudentProposals}
-            selectedProposal={selectedProposal}
-            setSelectedProposal={setSelectedProposal}
-            setDisplayMode={setDisplayMode}
-            buttonRef={buttonRef}
-          />
+          {isSupervisor && (
+            <StudentProposals
+              data={data}
+              groupedStudentProposals={groupedStudentProposals}
+              selectedProposal={selectedProposal}
+              setSelectedProposal={setSelectedProposal}
+              setDisplayMode={setDisplayMode}
+              buttonRef={buttonRef}
+            />
+          )}
+
           <SupervisorProposals
             isSupervisor={isSupervisor}
             data={data}