/** @format */ import styled from 'styled-components'; import CallIcon from '@mui/icons-material/Dialpad'; import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition'; const DefaultWidjetStyle = styled.div` margin: 0; padding: 0; box-sizing: border-box; height: 70px; min-width: 180px; max-width: 200px; border-radius: 13px; background-color: #164e63e6; cursor: pointer; color: white; z-index: 999; position: fixed; ${({ position }) => boxDialerWidjetPosition.defaultWidjet[position].block} display: grid; align-items: center; grid-template-columns: 1fr 30px; grid-template-rows: 1fr 10px; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; .left { display: flex; flex-direction: column; align-items: center; } .right { } .title { font-size: 22px; font-weight: 600; } .bottom { height: 100%; grid-column: 1/3; grid-row: 2/3; } .status { border-radius: 10px; padding: 0 5px; margin: 0 5px; background-color: ${({ status = '' }) => status === 'pending' ? 'orange' : status === 'connected' ? '#a0c13d' : '#ccc'}; color: ${({ status }) => status === 'pending' ? '#fff' : status === 'connected' ? '#333' : '#ccc'}; } `; DefaultWidjetStyle.StatusLine = styled.div` height: 100%; background-color: ${({ backColor }) => backColor}; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; background-color: ${({ status = '' }) => status === 'pending' ? 'orange' : status === 'connected' ? '#a0c13d' : '#ccc'}; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px 0 0; color: green; .verison { font-size: 10px; font-weight: bold; float: right; } `; const DialPadIcon = styled(CallIcon)` font-size: 26px; `; export { DialPadIcon }; export default DefaultWidjetStyle;