fix: css alignment of calendar component on the home page (#3276)

Co-authored-by: Akshat Nema <[email protected]>%0ACo-authored-by: Viacheslav Turovskyi <[email protected]>%0ACo-authored-by: akshatnema <[email protected]>
asyncapi · Nov 30, 2024 · eb9a128 · eb9a128
1 parent 391482d
commit eb9a128
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
@@ -28,10 +28,16 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
 
   const CALENDAR_URL =
     'https://calendar.google.com/calendar/embed?src=c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com&ctz=UTC';
-  const eventsExist = eventsData.length > 0;
+  const currentDate = new Date();
+  const eventsExist = eventsData?.filter((event: IEvent) => moment(event.date).isAfter(currentDate)).length > 0;
 
   return (
-    <div className={twMerge('overflow-hidden rounded-md border border-gray-200 bg-white p-4', className)}>
+    <div
+      className={twMerge(
+        'overflow-hidden rounded-md border border-gray-200 bg-white p-4 h-full flex flex-col gap-2',
+        className
+      )}
+    >
       <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}>
         {t('calendar.title')}
       </Heading>
@@ -43,7 +49,7 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
                 <span className='flex-1 self-center text-center'>{moment(event.date).format('D')}</span>
               </div>
               <div className='grow text-left sm:mt-0 sm:pl-6'>
-                <h2 className='title-font text-xl font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
+                <h2 className='title-font font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
                 <p className='text-gray-600'>
                   {moment(event.date).local().format('LLLL')} UTC
                   {moment(event.date).local().format('Z')}
@@ -53,13 +59,12 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
           </li>
         ))}
       </ul>
-      {eventsExist ? (
-        <div className='pt-4' data-testid='Calendar-button'>
+      <div className='h-full content-center'>
+        {!eventsExist && <div className='font-bold text-gray-700 lg:pb-8'>{t('calendar.noMeetingsMessage')}</div>}
+        <div className='sm:pt-0 md:pt-2 lg:pb-8 lg:pt-0' data-testid='Calendar-button'>
           <GoogleCalendarButton href={CALENDAR_URL} text={t('calendar.viewCalendarBtn')} />
         </div>
-      ) : (
-        <div className='mt-2 text-gray-700'>{t('calendar.noMeetingsMessage')}</div>
-      )}
+      </div>
     </div>
   );
 }
diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx
@@ -108,7 +108,7 @@ export default function HomePage() {
 
               <div className='mt-12 lg:flex lg:flex-row-reverse'>
                 <section className='mt-10 lg:mt-0 lg:flex-1'>
-                  <Calendar size={2} className='float-left' />
+                  <Calendar size={2} />
                 </section>
                 <section className='lg:mr-12 lg:max-w-xl lg:text-left'>
                   <div className='mt-5 lg:mr-12'>

diff --git a/public/locales/de/common.json b/public/locales/de/common.json
@@ -23,6 +23,6 @@
     "calendar": {
         "title": "Kommende Veranstaltungen",
         "viewCalendarBtn": "Kalender ansehen",
-        "noMettingsMessage": "In den nächsten Tagen sind keine Sitzungen geplant."
+        "noMeetingsMessage": "In den nächsten Tagen sind keine Sitzungen geplant. Sie können bevorstehende Veranstaltungen überprüfen, indem Sie auf die Schaltfläche unten klicken."    
     }
 }
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -23,6 +23,6 @@
     "calendar": {
         "title": "Upcoming events",
         "viewCalendarBtn": "View Calendar",
-        "noMettingsMessage": "There are no meetings scheduled for next few days."
+        "noMeetingsMessage": "There are no meetings scheduled for next few days. You can check upcoming events by clicking the button below."
     }
-}
+}
diff --git a/tests/build-tools.test.js b/tests/build-tools.test.js
@@ -26,7 +26,7 @@ jest.mock('../scripts/tools/tags-color', () => ({
 }));
 
 describe('buildTools', () => {
-    const testDir = path.join(os.tmpdir(), 'test_config');
+    const testDir = path.join(String(os.tmpdir()), 'test_config');
     const toolsPath = resolve(testDir, 'tools.json');
     const tagsPath = resolve(testDir, 'all-tags.json');
     const automatedToolsPath = resolve(testDir, 'tools-automated.json');