/** @format */ import styled from 'styled-components'; import CallIcon from '@mui/icons-material/Dialpad'; import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'; const WidjetBlock = styled.div` margin: 0; padding: 0; box-sizing: border-box; position: fixed; bottom: 30px; left: 50px; border-radius: 13px; background-color: #164e63e6; cursor: pointer; color: white; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 70px; min-width: 180px; max-width: 200px; z-index: 999; `; WidjetBlock.AccauntInfo = styled.div` height: 100%; display: grid; grid-template-columns: 1fr 30px; grid-template-rows: 1fr 10px; align-items: center; .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'}; } `; WidjetBlock.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; `; const ModalPhoneDropDowm = styled.div` width: 230px; position: absolute; bottom: 80px; transition: 0.2s; z-index: 99999999999999; transform: translate(${({ hidden }) => (hidden ? '-200%' : '-50%')}, 0%); left: 50%; background-color: #c9d5d9; border-radius: 20px; padding: 15px; display: grid; grid-template-rows: 40px 1fr; grid-gap: 15px; cursor: default; `; ModalPhoneDropDowm.InputArea = styled.div` position: relative; `; ModalPhoneDropDowm.ButtonArea = styled.div` display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 8px; `; const NumberButton = styled.div` background-color: #5e5e5e; color: #fff; font-weight: bold; display: flex; justify-content: center; align-items: center; border-radius: 7px; font-size: 22px; cursor: pointer; height: 33px; background-color: ${({ status, type }) => type === 'call_button' && status === 'pending' ? 'orange' : status === 'connected' && '#a0c13d'}; `; NumberButton.Icon = styled.div` font-size: 20px; `; const Input = styled.input` position: absolute; width: 100%; height: 100%; border-radius: 3px; background-color: #fff; border: 0 !important; padding: 0px 35px 0 10px; font-size: 22px; color: #000; :focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; padding: 0 10px; font-size: 24px; outline: 0 none; } position: relative; display: inline-block; margin: 0; outline: none; border: 0; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ &[type='number'] { -moz-appearance: textfield; } `; Input.BackSpaceIcon = styled(KeyboardBackspaceIcon)` color: black; position: absolute; top: 5px; right: 5px; cursor: pointer; top: 50%; transform: translate(0, -50%); `; const Select = styled.select` width: 100%; height: 100%; :focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; padding: 0 10px; font-size: 24px; outline: 0 none; } position: relative; display: inline-block; margin: 0; outline: none; border: 0; background-color: #5e5e5e; color: #fff; font-size: 18px; border-radius: 7px; padding: 5px; `; export { DialPadIcon, ModalPhoneDropDowm, NumberButton, Input, Select }; export default WidjetBlock;