UI fixes

app/[organization]/[event]/(eventHome)/components/HompageLogoAndBanner.tsx

@@ -8,13 +8,13 @@ const HomePageLogoAndBanner = ({ event }: { event: IEvent }) => {
     <div className="relative w-full">
       <div className="relative">
         <Image src={'/events/' + banner} alt="Event Cover" width={1500} height={500} className="w-full object-cover h-36 md:h-52 lg:h-96" />
-        <Image
+        {/* <Image
           src={'/events/' + logo}
           alt="Event Logo"
           width={128}
           height={128}
-          className="absolute bottom-0 translate-y-1/2 translate-x-3 lg:translate-x-1/2 w-24 h-24 lg:w-32 lg:h-32 object-cover p-2 border-2 border-accent bg-white"
-        />
+          className="absolute bottom-0 translate-y-1/2 translate-x-3 lg:translate-x-1/2 w-24 h-24 lg:w-32 lg:h-32 object-cover bg-white"
+        /> */}
       </div>
     </div>
   )

app/[organization]/[event]/(eventHome)/page.tsx

@@ -29,16 +29,27 @@ const EventHome = async ({ params }: { params: Params }) => {
   if (!hasData({ event })) return notFound()
 
   return (
-    <div className="flex flex-col w-full overflow-scroll">
+    <div className="flex flex-col w-full overflow-scroll h-full gap-4 ">
       <HomePageLogoAndBanner event={event.toJson()} />
-      <div className="flex-col mt-16 flex max-w-4xl mx-auto p-4 space-y-4 ">
-        <h1 className="font-bold text-xl">{event.name}</h1>
-        <p>{event.description}</p>
-        <div className="flex flex-row flex-wrap justify-center items-center p-4">
-          <StageModalButton stages={stages} />
-          <Button link={`/${params.organization}/${params.event}/schedule`}>Schedule</Button>
-          <Button link={`/${params.organization}/${params.event}/speakers`}>Speakers</Button>
-          <Button link={`/${params.organization}/${params.event}/archive`}>Archive</Button>
+      <div className="p-4">
+        <div className="flex-col mt-0 flex max-w-4xl mx-auto space-y-4 shadow bg-white p-4 rounded m-4 box-content">
+          <div className=" flex-col flex space-y-2 md:flex-row items-center">
+            <h1 className="font-bold text-xl py-2">{event.name}</h1>
+            <Link
+              className="bg-accent font-bold h-8 border-2 hover:text-accent hover:bg-white animate-bounce text-white border-accent px-2 mx-2 rounded"
+              href={
+                'https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NmFqZGU4dmVxcGgzanNxYjlzYjV1MXB0MGEgY19mZDE2YjdhZTIxZDA2NWI4OTUxYTU0MzM3NDQ1MTQ3MjEyYWI1OThhMjAzNzFlZjEzMjBjZWQ5ZWUzOWNhNTc0QGc&tmsrc=c_fd16b7ae21d065b8951a54337445147212ab598a20371ef1320ced9ee39ca574%40group.calendar.google.com'
+              }>
+              add this event to your calendar
+            </Link>
+          </div>
+          <p>{event.description}</p>
+          <div className="flex flex-row flex-wrap justify-center items-center p-4">
+            <StageModalButton stages={stages} />
+            <Button link={`/${params.organization}/${params.event}/schedule`}>Schedule</Button>
+            <Button link={`/${params.organization}/${params.event}/speakers`}>Speakers</Button>
+            {/* <Button link={`/${params.organization}/${params.event}/archive`}>Archive</Button> */}
+          </div>
         </div>
       </div>
     </div>

app/[organization]/[event]/(eventHome)/schedule/components/DateSelect.tsx

@@ -12,10 +12,8 @@ const DateSelect = ({ dates }: { dates: number[] }) => {
     setDate(numericValue)
   }
 
-  if (dates.length < 2) return null
-
   return (
-    <div className="flex flex-row space-x-4 justify-center p-2 md:p-4 box-border">
+    <div className=" flex flex-row space-x-4 justify-center w-full">
       {isMobile ? (
         <select className="text-xl cursor-pointer font-bold w-full" value={date ? date : ''} onChange={(e) => handleDateChange(e.target.value)}>
           {dates.map((dateNum) => (
@@ -27,10 +25,12 @@ const DateSelect = ({ dates }: { dates: number[] }) => {
       ) : (
         dates.map((dateNum, index) => (
           <div
-            className={`p-4 text-center text-xl font-bold ${date !== dateNum ? 'text-black cursor-pointer' : 'text-accent'}`}
+            className={`ml-auto w-[calc(100%-6rem)] p-4 text-center text-xl font-bold ${
+              date !== dateNum ? 'text-black cursor-pointer' : 'text-accent'
+            }`}
             onClick={() => setDate(dateNum)}
             key={index}>
-            {new Date(dateNum).toLocaleDateString()}
+            {new Date(dateNum).toDateString().slice(0, 10)}
           </div>
         ))
       )}

app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCard.tsx

@@ -24,7 +24,7 @@ const ScheduleCard = ({ session, showTime = false, speakers = false }: { session
         )}
         <p className="flex overflow-hidden text-ellipsis text-main-text text-sm font-medium uppercase">{session.name}</p>
         {speakers && (
-          <div className="flex mt-auto py-1 items-center flex-row">
+          <div className="flex mt-auto py-1 items-center flex-row space-x-2">
             {session.speakers.map((speaker) => (
               <SpeakerPhoto size="sm" key={speaker.id} speaker={speaker} />
             ))}

app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCardModal.tsx

@@ -33,10 +33,11 @@ const ScheduleCardModal = ({ session }: { session: ISession }) => {
         </div>
       )}
       <h1 className="text-lg text-main-text font-bold text-center">{session.name}</h1>
-      <div className="flex flex-row justify-center items-center space-x-3 p-2">
+      <div className="flex flex-col justify-center items-center text-center  p-2">
         <span className="text-secondary-text">
           {new Date(session.start).toTimeString().slice(0, 5)} - {new Date(session.end).toTimeString().slice(0, 5)}
         </span>
+        <span className="text-secondary-text">{new Date(session.start).toDateString()}</span>
       </div>
       <p className="py-4">{session.description}</p>
       <SpeakerIconList speakers={session.speakers} />

app/[organization]/[event]/(eventHome)/schedule/page.tsx

@@ -29,7 +29,7 @@ const EventPage = async ({ params }: Params) => {
     return (
       <ScheduleContextProvider event={event.toJson()} stages={stages} days={dates}>
         <div className="w-full h-full relative md:overflow-scroll">
-          <div className="sticky top-0 z-10 flex flex-row flex-wrap md:flex-col bg-base justify-center">
+          <div className="shadow text-center sticky top-0 z-10 flex flex-row flex-wrap md:flex-col bg-base justify-center">
             <DateSelect dates={dates} />
             <StageSelect stages={stages} />
           </div>

app/[organization]/[event]/(eventHome)/speakers/components/SpeakerPhoto.tsx

@@ -10,7 +10,7 @@ const SpeakerPhoto = ({ speaker, size }: { speaker: ISpeaker; size?: 'sm' | 'md'
   const avatar = speaker.photo ? speaker.photo : CreateBlockie(speaker.name)
   let sizeString
   if (size === 'sm') {
-    sizeString = 'h-8 w-8'
+    sizeString = 'h-8 w-8 '
   } else if (size === 'md') {
     sizeString = 'h-12 w-12'
   } else {
@@ -19,7 +19,7 @@ const SpeakerPhoto = ({ speaker, size }: { speaker: ISpeaker; size?: 'sm' | 'md'
 
   return (
     <div className={` relative ${sizeString}`}>
-      <Image src={speaker.photo ? speaker.photo : CreateBlockie(speaker.name)} alt={speaker.name} fill placeholder="empty" />
+      <Image className="" src={speaker.photo ? speaker.photo : CreateBlockie(speaker.name)} alt={speaker.name} fill placeholder="empty" />
     </div>
   )
 }

app/[organization]/[event]/(eventHome)/utils.ts

@@ -11,7 +11,7 @@ export const CELL_HEIGHT = 6
 
 export const sessionsSchedulePosition = (sessions: ISession[]) => {
   if (sessions.length === 0) {
-    return 0 // or some other default value
+    return 0
   }
 
   const min = Math.min(

app/[organization]/[event]/stage/[stage]/components/StageLayout.tsx

@@ -39,14 +39,8 @@ export default function StageLayout() {
             <ShareButton />
           </ActionsComponent>
           <Player streamId={stage.streamSettings.streamId} playerName={stage.name} />
-          <div className="hidden lg:flex w-full lg:mt-4 h-full">
-            <SessionInfoBox session={currentSession} />
-          </div>
         </div>
-        <div className="flex w-full lg:mt-4 p-4 lg:hidden">
-          <SessionInfoBox session={currentSession} />
-        </div>
-        <div className="relative flex flex-col w-full p-4 pt-0 lg:p-0 lg:px-2 lg:h-full lg:w-[30%] lg:mt-0">
+        <div className="relative flex flex-col w-full pt-0 lg:p-0 lg:px-2 lg:h-full lg:w-[30%] lg:mt-0">
           <PluginBar
             bottomOffset={bottomOffset}
             tabs={[

components/Layout/Navbar.tsx

@@ -4,8 +4,7 @@ import { usePathname } from 'next/navigation'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { ModalContext } from '../context/ModalContext'
-import { CameraIcon, Bars2Icon, XMarkIcon } from '@heroicons/react/24/outline'
-import Image from 'next/image'
+import { CameraIcon, Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import { LoadingContext } from '../context/LoadingContext'
 import { IEvent } from '@/server/model/event'
 import StageModal from '@/app/[organization]/[event]/stage/[stage]/components/StageModal'
@@ -18,6 +17,26 @@ export interface Page {
   icon: JSX.Element
 }
 
+const NavBarButton = ({
+  isNavVisible,
+  setIsNavVisible,
+}: {
+  isNavVisible: boolean
+  setIsNavVisible: React.Dispatch<React.SetStateAction<boolean>>
+}) => (
+  <button onClick={() => setIsNavVisible(!isNavVisible)} className="lg:hidden md:p-4 absolute top-0 right-0 z-50 mr-32 py-3">
+    {!isNavVisible ? (
+      <div className="border-2 rounded border-accent text-white bg-accent">
+        <Bars3Icon className="w-8 h-8" />
+      </div>
+    ) : (
+      <div className="border-2 border-accent rounded text-white bg-accent">
+        <XMarkIcon className="w-8 h-8" />
+      </div>
+    )}
+  </button>
+)
+
 export default function Navbar({
   event,
   pages,
@@ -35,7 +54,7 @@ export default function Navbar({
 }) {
   const pathname = usePathname()
   const { openModal, closeModal } = useContext(ModalContext)
-  const { setLogo, logo } = useContext(TopNavbarContext)
+  const { setLogo, logo, setHomePath } = useContext(TopNavbarContext)
   const { setIsLoading } = useContext(LoadingContext)
   const [isNavVisible, setIsNavVisible] = useState(false) // New state
   const router = useRouter()
@@ -44,6 +63,7 @@ export default function Navbar({
     if (isNavVisible) {
       setIsNavVisible(false)
     }
+    setHomePath(`/${event.organizationId}/${event.id}`)
   }, [pathname])
 
   const handleClick = (stageHref: string) => {
@@ -58,21 +78,12 @@ export default function Navbar({
   if (archiveMode) {
     return <></>
   }
+
   return (
     <div>
-      <button onClick={() => setIsNavVisible(!isNavVisible)} className="lg:hidden md:p-4 absolute top-0 ml-20 h-16">
-        {!isNavVisible ? (
-          <div className="border-2 rounded border-accent text-accent">
-            <Bars2Icon className="w-8 h-8" />
-          </div>
-        ) : (
-          <div className="border-2 border-accent rounded text-accent">
-            <XMarkIcon className="w-8 h-8" />
-          </div>
-        )}
-      </button>
+      <NavBarButton isNavVisible={isNavVisible} setIsNavVisible={setIsNavVisible} />
       <header
-        className={`shadow-sm z-40 bg-base border-r border-primary fixed top-16 lg:top-[76px] left-0 w-[4.7rem] h-screen ${
+        className={`shadow-sm z-40 bg-base border-r border-primary fixed top-16 lg:top-[70px] left-0 w-[5rem] h-screen ${
           isNavVisible ? 'block' : 'hidden'
         } lg:block`}>
         <div className="flex flex-col items-center justify-between ">

components/Layout/NavbarTop.tsx

@@ -11,12 +11,12 @@ import { TopNavbarContext } from '../context/TopNavbarContext'
 export default function Navbar() {
   const pathname = usePathname()
   // const isAdminPage = pathname.includes('/admin')
-  const { logo, components } = useContext(TopNavbarContext)
+  const { logo, components, homePath } = useContext(TopNavbarContext)
   return (
     <ColorComponent accentColor={colors.accent}>
       <header className="sticky z-50 flex flex-row bg-base border-b border-primary w-full ml-auto  p-4 py-2 top-0 h-16 lg:h-20">
         <div className=" flex items-center w-20">
-          <Link href="/" className="">
+          <Link href={homePath ? homePath : '/'} className="">
             <span className="sr-only">Logo</span>
             <Image
               src={logo}

components/context/TopNavbarContext.tsx

@@ -7,15 +7,20 @@ export const TopNavbarContext = createContext<{
   setLogo: React.Dispatch<React.SetStateAction<string>>
   components: React.ReactNode[]
   setComponents: React.Dispatch<React.SetStateAction<React.ReactNode[]>>
+  homePath?: string
+  setHomePath: React.Dispatch<React.SetStateAction<string>>
 }>({
   logo: '',
   setLogo: () => {},
   components: [],
   setComponents: () => {},
+  homePath: '',
+  setHomePath: () => {},
 })
 
 export const TopNavbarContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [logo, setLogo] = useState('')
+  const [homePath, setHomePath] = useState('')
 
   useEffect(() => {
     // if (logo === '') {
@@ -25,5 +30,5 @@ export const TopNavbarContextProvider = ({ children }: { children: React.ReactNo
 
   const [components, setComponents] = useState<React.ReactNode[]>([])
 
-  return <TopNavbarContext.Provider value={{ logo, setLogo, components, setComponents }}>{children}</TopNavbarContext.Provider>
+  return <TopNavbarContext.Provider value={{ logo, setLogo, components, setComponents, homePath, setHomePath }}>{children}</TopNavbarContext.Provider>
 }

components/sessions/SessionInfoBox.tsx

@@ -4,12 +4,13 @@ import ComponetCard from '../misc/ComponentCard'
 
 const SessionInfoBox = ({ session, showDate }: { session: ISession; showDate?: boolean }) => {
   if (!session) return null
-
+  const { name: title, description } = session
   return (
-    <div className="w-full shadow">
-      <ComponetCard title={session.name} date={showDate ? new Date(session.start) : undefined}>
-        <p className="text-main-text md:text-lg text-justify">{session.description}</p>
-      </ComponetCard>
+    <div className={`p-2 px-4 rounded  w-full shadow bg-base ${!description && ''}`}>
+      <div className="flex flex-col">
+        <div className="w-full text-left text-md lg:text-lg font-medium text-main-text ">{title}</div>
+        {description && <p>{description}</p>}
+      </div>
     </div>
   )
 }

tailwind.config.js

@@ -9,7 +9,7 @@ module.exports = {
       },
       colors: {
         base: '#ffffff',
-        background: '#f5f5f5',
+        background: '#f4f4f4',
         primary: '#f5f6fa',
         accent: 'var(--colors-accent)',
         'main-text': '#2b2b2b',

utils/time.tsx

@@ -34,6 +34,6 @@ export const secondsToHHMM = (seconds: number) => {
 
   const hoursStr = hours.toString().padStart(2, '0')
   const minutesStr = minutes.toString().padStart(2, '0')
-
-  return `${hoursStr}:${minutesStr}`
+  const ampm = hours >= 12 ? 'pm' : 'am'
+  return `${hoursStr}:${minutesStr} ${ampm}`
 }