Web:Client:Refactoring for Calendar.

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js

@@ -10,23 +10,15 @@ import { ReactSVG } from "react-svg";
 const StyledCalendarComponent = styled.div`
   position: relative;
 
-  .calendar {
-    position: absolute;
-    right: 0;
-    /* ${(props) =>
-      props.isMobile &&
-      css`
-        position: fixed;
-        bottom: 0;
-        inset-inline-start: 0;
-      `} */
+  .icon-calendar {
+    padding-right: 2px;
   }
 `;
 
 const StyledCalendar = styled(Calendar)`
   position: absolute;
-  top: 150px;
-  right: 30px;
+  top: 134px;
+  right: 16px;
 
   ${(props) =>
     props.isMobile &&
@@ -74,7 +66,11 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => {
   return (
     <StyledCalendarComponent>
       <div ref={calendarButtonRef}>
-        <ReactSVG src={IconCalendar} onClick={toggleCalendar} />
+        <ReactSVG
+          className="icon-calendar"
+          src={IconCalendar}
+          onClick={toggleCalendar}
+        />
       </div>
 
       {isOpen && (

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js

@@ -86,6 +86,7 @@ const RoomsItemHeader = ({
             size={16}
           />
         )}
+        {/* TODO: Add a condition so that there is a vdr room when the correct room type is returned from the backend for Calendar */}
         {openHistory && (
           <CalendarComponent
             setCalendarDay={setCalendarDay}

packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js

@@ -67,11 +67,14 @@ const History = ({
   useEffect(() => {
     if (!calendarDay) return;
 
-    const historyListNode = document.getElementById("history-list-info-panel");
+    const heightTitleRoom = 80;
+    const heightDayWeek = 40;
 
+    const historyListNode = document.getElementById("history-list-info-panel");
     if (!historyListNode) return;
 
     const scroll = historyListNode.closest(".scroller");
+    if (!scroll) return;
 
     let dateCoincidingWithCalendarDay = null;
 
@@ -91,13 +94,12 @@ const History = ({
       const dayNode = historyListNode.getElementsByClassName(
         dateCoincidingWithCalendarDay
       );
-
       if (!dayNode[0]) return;
 
-      //TODO:const 120
-      const y = dayNode[0].offsetTop - 120;
+      const y = dayNode[0].offsetTop - heightTitleRoom - heightDayWeek;
       scroll.scrollTo(0, y);
       setCalendarDay(null);
+
       return;
     }
 
@@ -116,7 +118,7 @@ const History = ({
 
         //Looking for the nearest new date
         if (date < calendarDayModified) {
-          //if there are no nearby new entries in the post history, then scroll to the last one
+          //If there are no nearby new entries in the post history, then scroll to the last one
           if (indexItem === 0) {
             nearestNewerDate = feed.json.ModifiedDate;
             return false;
@@ -130,15 +132,14 @@ const History = ({
       return true;
     });
 
-    if (nearestNewerDate) {
-      const dayNode = historyListNode.getElementsByClassName(nearestNewerDate);
+    if (!nearestNewerDate) return;
 
-      if (!dayNode[0]) return;
-      //TODO:const 120
-      const y = dayNode[0].offsetTop - 120;
-      scroll.scrollTo(0, y);
-      setCalendarDay(null);
-    }
+    const dayNode = historyListNode.getElementsByClassName(nearestNewerDate);
+    if (!dayNode[0]) return;
+
+    const y = dayNode[0].offsetTop - heightTitleRoom - heightDayWeek;
+    scroll.scrollTo(0, y);
+    setCalendarDay(null);
   }, [calendarDay]);
 
   useEffect(() => {