diff --git a/ts/components/basic/PillContainer.tsx b/ts/components/basic/PillContainer.tsx index 70287f2c2..2e8ec5442 100644 --- a/ts/components/basic/PillContainer.tsx +++ b/ts/components/basic/PillContainer.tsx @@ -33,10 +33,10 @@ const StyledPillContainer = styled.div` const StyledPillContainerHoverable = styled.div` background: none; - + position: relative; flex-direction: 'row'; - + width: 50%; white-space: nowrap; text-overflow: ellipsis; @@ -45,7 +45,6 @@ const StyledPillContainerHoverable = styled.div` margin: ${props => props.margin || ''}; `; - const StyledPillInner = styled.div` background: green; background: none; @@ -81,4 +80,4 @@ export const PillTooltipWrapper = (props: PillContainerProps) => { export const PillContainerHoverable = (props: PillContainerProps) => { return {props.children}; -}; \ No newline at end of file +}; diff --git a/ts/components/session/SessionJoinableDefaultRooms.tsx b/ts/components/session/SessionJoinableDefaultRooms.tsx index c89243c87..b7190fc6b 100644 --- a/ts/components/session/SessionJoinableDefaultRooms.tsx +++ b/ts/components/session/SessionJoinableDefaultRooms.tsx @@ -12,7 +12,7 @@ import { Flex } from '../basic/Flex'; import { PillContainerHoverable, PillTooltipWrapper } from '../basic/PillContainer'; import { H3 } from '../basic/Text'; import { SessionSpinner } from './SessionSpinner'; -import styled, { DefaultTheme, useTheme } from "styled-components"; +import styled, { DefaultTheme, useTheme } from 'styled-components'; // tslint:disable: no-void-expression export type JoinableRoomProps = { @@ -108,43 +108,39 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => { const handleMouseEnter = () => { setIsHovering(true); - setDelayHandler(setTimeout(() => { - setHoverDelayReached(true); - }, 750)) - } + setDelayHandler( + setTimeout(() => { + setHoverDelayReached(true); + }, 750) + ); + }; const handleMouseLeave = () => { setIsHovering(false); setHoverDelayReached(false); if (delayHandler) { clearTimeout(delayHandler); } - } + }; const showTooltip = hoverDelayReached && isHovering; return ( - - { - props.onClick(props.completeUrl); - }} - margin="5px" - padding="5px" - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - > - - - - - - {showTooltip && - - {props.name} - - } - - + + { + props.onClick(props.completeUrl); + }} + margin="5px" + padding="5px" + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} + > + + + + + {showTooltip && {props.name}} + ); };