56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
import styled from 'styled-components'
|
|
import { colours, ui } from '../../assets/theme'
|
|
import CrossSvg from '../Svg/Cross'
|
|
import { Label } from '../Text'
|
|
|
|
export const ChatFrame = styled.div`
|
|
/* border: 2px solid ${colours.white}; */
|
|
/* padding: 20px; */
|
|
`
|
|
|
|
export const ChatWrapper = styled.div`
|
|
position: fixed;
|
|
z-index: 10;
|
|
bottom: -5px;
|
|
right: 0;
|
|
backdrop-filter: blur(20px);
|
|
background-color: ${colours.midnight}40;
|
|
/* padding: 20px; */
|
|
border-radius: ${ui.borderRadius}px;
|
|
`
|
|
|
|
export const ChatHeader = styled.div`
|
|
position: absolute;
|
|
bottom: ${props => (props.chatIsOpen ? 'initial' : 0)};
|
|
top: ${props => (props.chatIsOpen ? '4px' : 'initial')};
|
|
/* cursor: ${props => (props.dragging ? 'grabbing' : 'grab')}; */
|
|
border-radius: ${ui.borderRadius}px 0 0 0;
|
|
|
|
|
|
height: 32px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
width: ${props => (props.chatIsOpen ? '100%' : 'fit-content')};
|
|
|
|
justify-content: space-between;
|
|
padding: 0px 0px 3px 0px;
|
|
right: 0;
|
|
box-sizing: content-box;
|
|
border: ${props =>
|
|
props.chatIsOpen ? 'none' : `1px solid ${colours.white}`};
|
|
border-bottom: ${props =>
|
|
props.chatIsOpen ? `1px solid ${colours.white}75` : 'none'};
|
|
border-right: none;
|
|
|
|
label {
|
|
margin-left: 12px;
|
|
margin-right: ${props => (props.chatIsOpen ? '0' : '12px')}
|
|
}
|
|
`
|
|
|
|
export const CloseBox = styled(CrossSvg)`
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
`
|