updated sessions view

Author: manuelgeek

components/sessions/SessionDetails.tsx

@@ -21,7 +21,7 @@ export const SessionDetails = ({ session }: { session: Session }) => {
         <div className="pt-4 md:pt-6">
           {session.session_image && (
             <img
-              className="rounded-lg h-auto md:h-56"
+              className="rounded-lg h-auto"
               src={session.session_image}
               alt="session"
             />
@@ -45,11 +45,11 @@ export const SessionDetails = ({ session }: { session: Session }) => {
             </span>
           ))}
         </h4>
-        <p className=" text-xl md:text-2xl mt-1 font-bold">{session.title}</p>
+        <p className="text-xl md:text-2xl mt-1 font-bold">{session.title}</p>
         <h6 className="text-primary dark:text-white-dark font-bold mt-4 md:mt-10 w-full">
           Session Description:
         </h6>
-        <p className="p gray mt-2">{session.description}</p>
+        <p className="p gray mt-2 break-words">{session.description}</p>
 
         <div className="w-full justify-center md:justify-start flex flex-col mt-4 md:mt-10 mb-4 lg:mb-16">
           <StarIcon isStar={false} session={session} />

components/sessions/SessionGridCard.tsx

@@ -36,7 +36,9 @@ export const SessionGridCard = ({
                         {schedule.is_serviceSession ? (
                           <img
                             className="object-cover md:object-cover"
-                            src={schedule.session_image ?? '/images/all.png'}
+                            src={
+                              schedule.session_image ?? '/images/all-new.png'
+                            }
                             alt={schedule.title}
                           />
                         ) : (
@@ -48,7 +50,9 @@ export const SessionGridCard = ({
                             <a>
                               <img
                                 className="object-cover md:object-cover"
-                                src={schedule.session_image ?? 'images/all.png'}
+                                src={
+                                  schedule.session_image ?? 'images/all-new.png'
+                                }
                                 alt={schedule.title}
                               />
                             </a>
@@ -125,7 +129,7 @@ export const SessionGridCard = ({
                 }
               </div>
             ) : (
-              <NoSessions />
+              <NoSessions key={key} />
             ))
         )}
       </div>

components/sessions/SessionListCard.tsx

@@ -102,7 +102,7 @@ const SessionListCard = ({
                 }
               </div>
             ) : (
-              <NoSessions />
+              <NoSessions key={key} />
             ))
         )}
       </div>

components/sessions/SessionToggles.tsx

@@ -21,17 +21,17 @@ export const SessionToggles: NextPage<SessionPageProps> = ({
 
   return (
     <div className="space-x-4 md:space-x-8 w-full md:w-1/3 flex justify-end items-center">
-      <button type="button" onClick={() => onChangeViewType(false)}>
+      <button type="button" onClick={() => onChangeViewType(true)}>
         <i
-          className={`fa fa-th-list text-2xl ${
-            isGridView ? 'text-white dark:text-white-dark' : 'text-secondary'
+          className={`fa fa-th text-2xl ${
+            !isGridView ? 'text-white dark:text-white-dark' : 'text-secondary'
           }`}
         />
       </button>
-      <button type="button" onClick={() => onChangeViewType(true)}>
+      <button type="button" onClick={() => onChangeViewType(false)}>
         <i
-          className={`fa fa-th text-2xl ${
-            !isGridView ? 'text-white dark:text-white-dark' : 'text-secondary'
+          className={`fa fa-th-list text-2xl ${
+            isGridView ? 'text-white dark:text-white-dark' : 'text-secondary'
           }`}
         />
       </button>

hooks/useSession.ts

@@ -9,7 +9,7 @@ const MY_SESSIONS = 'droidcon_my_sessions'
 
 export const useSession = ({ allSchedules }: { allSchedules: Schedule[] }) => {
   const [showFilterSession, setShowFilterSession] = useState(false)
-  const [isGridView, setIsGridView] = useState(false)
+  const [isGridView, setIsGridView] = useState(true)
   const [activeTab, setActiveTab] = useState(0)
   const [showMySessions, setShowMysessions] = useState(false)
   const [loading, setLoading] = useState(false)