feat: 🔧 A few style fixes (#168)

cloud-native-nordics · Sep 27, 2024 · 977fd9a · 977fd9a
1 parent e721f57
commit 977fd9a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/pages/schedule/schedule/schedule.jsx b/src/components/pages/schedule/schedule/schedule.jsx
@@ -40,6 +40,10 @@ const Schedule = ({ location }) => {
     return `${parsed.getDate()}.${parsed.getMonth() + 1}.${parsed.getFullYear()}`;
   };
 
+  const formatSlotStart = (slotStart) => {
+    return slotStart.substring(0, slotStart.lastIndexOf(':'))
+  };
+
   useEffect(() => {
     if (schedule.length > 0 && selectedDate === undefined) {
       setSelectedDate(schedule[0].date);
@@ -98,7 +102,7 @@ const Schedule = ({ location }) => {
               >
                 <div className="flex items-center justify-center sm:justify-start sm:px-5 sm:pt-5">
                   <time className="mb-auto mt-7 text-[15px] font-semibold leading-none tracking-tight text-primary-1 opacity-60 md:mt-5 md:text-sm sm:my-0">
-                    {slotStart}
+                    {formatSlotStart(slotStart)}
                   </time>
                   {/*isKeynote && (
                     <span className="ml-4 hidden rounded-full bg-red px-2 py-1.5 text-xs font-semibold leading-none tracking-tighter text-white sm:inline-flex">
@@ -134,7 +138,7 @@ const Schedule = ({ location }) => {
                           {session.title}
                         </span>
                       )}
-                      {session.isPlenumSession && (!!!session.isServiceSession) && (
+                      {session.isPlenumSession && (!!!session.isServiceSession) && calcDuration(session.startsAt, session.endsAt) > 10 &&  (
                         <span className="rounded-full bg-red px-2 py-2 text-xs font-semibold leading-none tracking-tighter text-white sm:hidden">
                           Keynote
                         </span>

diff --git a/src/components/shared/modal/modal.jsx b/src/components/shared/modal/modal.jsx
@@ -50,6 +50,11 @@ const Modal = ({ isVisible, modalData, onModalHide, isPresentationShow }) => {
     [onModalHide]
   );
 
+  const formatStartDate = (date) => {
+    const parsed = new Date(Date.parse(date));
+    return `${parsed.getHours()}:${parsed.getMinutes() < 10 ? '0' : ''}${parsed.getMinutes()}`;
+  };
+
   useEffect(() => {
     window.addEventListener('keydown', handleWindowKeyDown);
     return () => window.removeEventListener('keydown', handleWindowKeyDown);
@@ -99,18 +104,19 @@ const Modal = ({ isVisible, modalData, onModalHide, isPresentationShow }) => {
               <>
                 <div className="flex items-center">
                   <time className="text-sm font-semibold leading-none tracking-tight text-primary-1 opacity-60">
-                    {startsAt}
+                    {formatStartDate(startsAt)}
                   </time>
                   <span className="relative ml-8 rounded-full bg-rasin text-white px-2 py-1.5 text-[13px] font-semibold leading-none tracking-tighter text-primary-1 before:absolute before:top-0 before:bottom-0 before:-left-4 before:my-auto before:h-1 before:w-1 before:rounded-full before:bg-primary-3">
                     {calcDuration(startsAt, endsAt)} min
                   </span>
                   <span className="relative ml-2 rounded-full bg-gray-7 text-white px-2 py-1.5 text-[13px] font-semibold leading-none tracking-tighter text-primary-1">
                     {room}
                   </span>
+                  <div className='before:absolute before:top-0 before:bottom-0 before:-left-4 before:my-auto before:h-1 before:w-1 before:rounded-full before:bg-primary-3'>
                   {speakers.length > 0 &&
                     speakers.map(({ id: speakerId, fullName, profilePicture }, index) => (
                       <Link
-                        className="relative ml-8 inline-flex items-center gap-x-2 text-left text-lg font-semibold leading-normal text-primary-5 transition-colors duration-200 before:absolute before:top-0 before:bottom-0 before:-left-4 before:my-auto before:h-1 before:w-1 before:rounded-full before:bg-primary-3 hover:text-blue-1"
+                        className="relative ml-8 inline-flex items-center gap-x-2 text-left text-lg font-semibold leading-normal text-primary-5 transition-colors duration-200 hover:text-blue-1"
                         to="/#speaker"
                         state={{ speakerId: speakerId || id }}
                         key={index}
@@ -127,6 +133,7 @@ const Modal = ({ isVisible, modalData, onModalHide, isPresentationShow }) => {
                         </p>
                       </Link>
                     ))}
+                    </div>
                 </div>
                 <h2 className="mt-7 text-2xl font-semibold leading-tight tracking-[-0.01em] text-primary-1 sm:text-lg">
                   {title}