diff --git a/frontend/plan/components/map/MapCourseItem.tsx b/frontend/plan/components/map/MapCourseItem.tsx index f74a3d62..46adfaa3 100644 --- a/frontend/plan/components/map/MapCourseItem.tsx +++ b/frontend/plan/components/map/MapCourseItem.tsx @@ -6,8 +6,8 @@ const CourseCartItem = styled.div<{ $isMobile: boolean }>` transition: 250ms ease background; cursor: pointer; user-select: none; - - flex-direction: row; + display: flex; + align-items: center; padding: 0.8rem; border-bottom: 1px solid #e5e8eb; grid-template-columns: 20% 50% 15% 15%; @@ -28,6 +28,15 @@ const CourseCartItem = styled.div<{ $isMobile: boolean }>` const CourseDetailsContainer = styled.div``; +const Dot = styled.span<{ $color: string }>` + height: 5px; + width: 5px; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + background-color: ${({ $color }) => $color}; +`; + interface CourseDetailsProps { id: string; start: number; @@ -91,8 +100,7 @@ const CourseDetails = ({ interface CartSectionProps { id: string; - lat?: number; - lng?: number; + color: string; start: number; end: number; room: string; @@ -102,8 +110,7 @@ interface CartSectionProps { function MapCourseItem({ id, - lat, - lng, + color, start, end, room, @@ -121,6 +128,7 @@ function MapCourseItem({ focusSection(`${split[0]}-${split[1]}`); }} > + ; focusSection: (id: string) => void; @@ -120,34 +125,34 @@ function MapTab({ meetingsByDay, focusSection }: MabTapProps) { zoom={15} /> - {meeetingsForDay.map( - ( - { - id, - latitude, - longitude, - start, - end, - room, - overlap, - }: Meeting, - i: number - ) => { - return ( - - ); - } - )} + + {meeetingsForDay.map( + ( + { + id, + color, + start, + end, + room, + overlap, + }: Meeting, + i: number + ) => { + return ( + + ); + } + )} + )} diff --git a/frontend/plan/components/schedule/Block.tsx b/frontend/plan/components/schedule/Block.tsx index d928659c..8f423c3d 100644 --- a/frontend/plan/components/schedule/Block.tsx +++ b/frontend/plan/components/schedule/Block.tsx @@ -120,26 +120,28 @@ export default function Block(props: BlockProps) { }; return ( - - - {!isMobile && !readOnly && ( - { - remove(); - e.stopPropagation(); - }} - /> - )} - {false && !coreqFulfilled && } + {color && ( + + + {!isMobile && !readOnly && ( + { + remove(); + e.stopPropagation(); + }} + /> + )} + {false && !coreqFulfilled && } - {id.replace(/-/g, " ")} - - + {id.replace(/-/g, " ")} + + + )} ); }