changed refresh button

src/components/exchange/schedule/ExchangeSchedule.tsx

@@ -1,10 +1,14 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, ReactNode } from "react";
 import { ClassDescriptor, SlotInfo } from "../../../@types";
 import ScheduleContext from "../../../contexts/ScheduleContext";
 import { Schedule } from "../../planner";
 import ConflictsContext from "../../../contexts/ConflictsContext";
 
-const ExchangeSchedule = () => {
+type ExchangeScheduleProps = {
+  refresh?: ReactNode;
+}
+
+const ExchangeSchedule = ({refresh}: ExchangeScheduleProps) => {
   const { exchangeSchedule } = useContext(ScheduleContext);
   const [slots, setSlots] = useState<SlotInfo[]>([]);
   const [classes, setClasses] = useState<ClassDescriptor[]>([]);
@@ -59,6 +63,7 @@ const ExchangeSchedule = () => {
   return <Schedule
       classes={classes}
       slots={slots}
+      refresh={refresh}
     />;
 }
 

src/components/exchange/schedule/RefreshScheduleButton.tsx

@@ -16,7 +16,7 @@ export default function RefreshScheduleButton({
   return (
     <Button
       variant="icon"
-      className="h-4 p-4 bg-lightish text-black dark:bg-darkish dark:text-white"
+      className="bg-lightish text-black dark:bg-darkish dark:text-white"
       onClick={() => {
         forceRefreshStudentSchedule();
       }}

src/components/planner/Schedule.tsx

@@ -21,12 +21,14 @@ const hourValues = Array.from({ length: maxHour - minHour + 1 }, (_, i) => minHo
 
 type Props = {
   classes: Array<ClassDescriptor>,
-  slots: Array<SlotInfo>
+  slots: Array<SlotInfo>,
+  refresh?: React.ReactNode
 }
 
 const Schedule = ({
   classes,
-  slots
+  slots,
+  refresh
 }: Props) => {
   const scheduleRef = useRef(null);
 
@@ -140,6 +142,7 @@ const Schedule = ({
           <div className="flex gap-x-4">
             <ScheduleTypes types={slotTypes} hiddenLessonsTypes={hiddenLessonsTypes} setHiddenLessonsTypes={setHiddenLessonsTypes} />
             <div className="flex flex-row gap-x-2">
+              {refresh}
               <ToggleScheduleGrid showGridHook={[showGrid, setShowGrid]} />
               <PrintSchedule component={scheduleRef} optionName={currentOptionName} />
             </div>

src/pages/Exchange.tsx

@@ -123,18 +123,20 @@ const ExchangePage = () => {
               </Alert>
             </>
           )}
-          {!loadingSchedule &&
-            <div className="relative bottom-2">
-              <div className="absolute hidden md:block">
-                <RefreshScheduleButton
-                  forceRefreshStudentSchedule={forceRefreshStudentSchedule}
-                  loadingSchedule={loadingSchedule}
-                  isRefreshingStudentSchedule={isRefreshingStudentSchedule}
-                />
-              </div>
-            </div>
-          }
-          <ExchangeSchedule />
+
+          <ExchangeSchedule 
+            refresh = {!loadingSchedule &&(
+
+                <div className="hidden md:block">
+                  <RefreshScheduleButton
+                    forceRefreshStudentSchedule={forceRefreshStudentSchedule}
+                    loadingSchedule={loadingSchedule}
+                    isRefreshingStudentSchedule={isRefreshingStudentSchedule}
+                  />
+                </div>
+              )
+            }
+          />
         </div>
       </div>