Prettier tooltips

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, Fragment } from 'react';
+import { useState, useEffect, useRef, Fragment } from 'react';
 import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -8,6 +8,7 @@ import { useSettingsStore } from 'stores';
 import { Legend, Center } from 'components';
 import {
 	Wrapper,
+	ScrollWrapper,
 	Container,
 	Date,
 	Times,
@@ -19,6 +20,7 @@ import {
 	TooltipTitle,
 	TooltipDate,
 	TooltipContent,
+  TooltipPerson,
 	TimeLabels,
 	TimeLabel,
 	TimeSpace,
@@ -47,6 +49,8 @@ const AvailabilityViewer = ({
   const [tempFocus, setTempFocus] = useState(null);
   const [focusCount, setFocusCount] = useState(null);
 
+  const wrapper = useRef();
+
   useEffect(() => {
     setFilteredPeople(people.map(p => p.name));
     setTouched(people.length <= 1);
@@ -92,7 +96,8 @@ const AvailabilityViewer = ({
         )}
       </StyledMain>
 
-  		<Wrapper>
+  		<Wrapper ref={wrapper}>
+    		<ScrollWrapper>
     			<Container>
     				<TimeLabels>
     					{!!timeLabels.length && timeLabels.map((label, i) =>
@@ -134,13 +139,14 @@ const AvailabilityViewer = ({
     												minPeople={tempFocus !== null ? 0 : Math.min(min, filteredPeople.length)}
     												onMouseEnter={(e) => {
     													const cellBox = e.currentTarget.getBoundingClientRect();
+    													const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 };
                               const timeText = timeFormat === '12h' ? 'h:mma' : 'HH:mm';
     													setTooltip({
-  														x: Math.round(cellBox.x + cellBox.width/2),
-  														y: Math.round(cellBox.y + cellBox.height)+6,
+    														x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
+    														y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,
     														available: `${peopleHere.length} / ${people.length} available`,
     														date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
-  														people: peopleHere.join(', '),
+    														people: peopleHere,
     													});
     												}}
     												onMouseLeave={() => {
@@ -165,9 +171,19 @@ const AvailabilityViewer = ({
     				>
     					<TooltipTitle>{tooltip.available}</TooltipTitle>
     					<TooltipDate>{tooltip.date}</TooltipDate>
-  					<TooltipContent>{tooltip.people}</TooltipContent>
+              {!!filteredPeople.length && (
+      					<TooltipContent>
+                  {tooltip.people.map(person =>
+                    <TooltipPerson key={person}>{person}</TooltipPerson>
+                  )}
+                  {filteredPeople.filter(p => !tooltip.people.includes(p)).map(person =>
+                    <TooltipPerson key={person} disabled>{person}</TooltipPerson>
+                  )}
+                </TooltipContent>
+              )}
     				</Tooltip>
     			)}
+        </ScrollWrapper>
   		</Wrapper>
     </>
 	);

crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts

@@ -1,8 +1,13 @@
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
-	overflow-x: auto;
+	overflow-y: visible;
 	margin: 20px 0;
+  position: relative;
+`;
+
+export const ScrollWrapper = styled.div`
+  overflow-x: auto;
 `;
 
 export const Container = styled.div`
@@ -62,8 +67,8 @@ export const Time = styled.div`
 	`}
 
 	background-image: linear-gradient(
-		${props => `${props.theme.primary}${Math.round(((props.peopleCount)/(props.maxPeople))*255).toString(16)}`},
-		${props => `${props.theme.primary}${Math.round(((props.peopleCount)/(props.maxPeople))*255).toString(16)}`}
+		${props => `${props.theme.primary}${Math.round((props.peopleCount/props.maxPeople)*255).toString(16)}`},
+		${props => `${props.theme.primary}${Math.round((props.peopleCount/props.maxPeople)*255).toString(16)}`}
 	);
 `;
 
@@ -73,7 +78,7 @@ export const Spacer = styled.div`
 `;
 
 export const Tooltip = styled.div`
-	position: fixed;
+	position: absolute;
 	top: ${props => props.y}px;
 	left: ${props => props.x}px;
 	transform: translateX(-50%);
@@ -83,6 +88,7 @@ export const Tooltip = styled.div`
 	background-color: ${props => props.theme.background}DD;
 	max-width: 200px;
 	pointer-events: none;
+  z-index: 100;
 `;
 
 export const TooltipTitle = styled.span`
@@ -94,13 +100,26 @@ export const TooltipTitle = styled.span`
 export const TooltipDate = styled.span`
 	font-size: 13px;
 	display: block;
-	opacity: .7;
-	font-weight: 700;
+	opacity: .8;
+	font-weight: 600;
 `;
 
-export const TooltipContent = styled.span`
+export const TooltipContent = styled.div`
 	font-size: 13px;
-	display: block;
+  padding: 4px 0;
+`;
+
+export const TooltipPerson = styled.span`
+  display: inline-block;
+  margin: 2px;
+  padding: 1px 4px;
+  border: 1px solid ${props => props.theme.primary};
+  border-radius: 3px;
+
+  ${props => props.disabled && `
+    opacity: .5;
+    border-color: ${props.theme.text}
+  `}
 `;
 
 export const TimeLabels = styled.div`