fix: use background-color: transparent; for overlap indicators (#699)

This commit is contained in:
Alex Christoffer Rasmussen
2024-01-09 16:42:50 +01:00
committed by GitHub
parent 92cefa1331
commit 9611722a6d
2 changed files with 22 additions and 27 deletions
@@ -207,7 +207,7 @@ $skip-opacity: 0.1;
gap: 0.5rem; gap: 0.5rem;
.indicator { .indicator {
background-color: $gray-1250; background-color: transparent;
margin: 0.4rem; margin: 0.4rem;
margin-right: 0; margin-right: 0;
border-radius: 0.7rem; border-radius: 0.7rem;
@@ -217,15 +217,11 @@ $skip-opacity: 0.1;
.indicator.delay { .indicator.delay {
background-color: $ontime-delay; background-color: $ontime-delay;
} }
.indicator.overlap { .indicator.nextDay,
background-color: $gray-600; .indicator.overlap,
}
.indicator.spacing { .indicator.spacing {
background-color: $gray-600; background-color: $gray-600;
} }
.indicator.nextDay {
background-color: $gray-600;
}
} }
.eventStatus { .eventStatus {
@@ -137,29 +137,28 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
</Tooltip> </Tooltip>
) : ( ) : (
<span className={style.indicators}> <span className={style.indicators}>
<Tooltip {delayTime && (
label={ <Tooltip
delayTime && ( label={
<div> <div>
{delayTime} {delayTime} <br />
<br />
New Time: {newTime} New Time: {newTime}
</div> </div>
) }
} >
> <div className={`${style.indicator} ${style.delay}`} />
<div className={`${style.indicator} ${delayTime ? style.delay : ''}`} /> </Tooltip>
</Tooltip> )}
<Tooltip label={overlapTime}> {overlapTime && (
<div <Tooltip label={overlapTime}>
className={`${style.indicator} ${ <div className={`${style.indicator} ${overlap > 0 ? style.overlap : style.spacing}`} />
overlap > 0 ? style.overlap : overlap < 0 && overlapTime !== null ? style.spacing : '' </Tooltip>
}`} )}
/> {timeStart > timeEnd && (
</Tooltip> <Tooltip label='Start time is later than end'>
<Tooltip label='Start time is later than end'> <div className={`${style.indicator} ${style.nextDay}`} />
<div className={`${style.indicator} ${timeStart > timeEnd ? style.nextDay : ''}`} /> </Tooltip>
</Tooltip> )}
</span> </span>
)} )}
<EventBlockPlayback <EventBlockPlayback