mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-18 22:01:22 +00:00
798 lines
17 KiB
TypeScript
798 lines
17 KiB
TypeScript
import { Typography, Box, TextField } from '@mui/material';
|
|
import { styled } from '@mui/system';
|
|
|
|
export const InstanceContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
backgroundColor: 'var(--color-instance)',
|
|
height: '59px',
|
|
flexShrink: 0,
|
|
justifyContent: 'space-between',
|
|
}));
|
|
|
|
export const MailContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
height: 'calc(100vh - 78px)',
|
|
overflow: 'hidden',
|
|
}));
|
|
|
|
export const MailBody = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
width: '100%',
|
|
height: 'calc(100% - 59px)',
|
|
}));
|
|
|
|
export const MailBodyInner = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '50%',
|
|
height: '100%',
|
|
}));
|
|
|
|
export const MailBodyInnerHeader = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
width: '100%',
|
|
height: '25px',
|
|
marginTop: '50px',
|
|
marginBottom: '35px',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: '11px',
|
|
}));
|
|
|
|
export const MailBodyInnerScroll = styled(Box)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto !important;
|
|
transition: background-color 0.3s;
|
|
height: calc(100% - 110px);
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: transparent; /* Initially transparent */
|
|
transition: background-color 0.3s; /* Transition for background color */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: transparent; /* Initially transparent */
|
|
border-radius: 3px; /* Scrollbar thumb radius */
|
|
transition: background-color 0.3s; /* Transition for thumb color */
|
|
}
|
|
|
|
&:hover {
|
|
&::-webkit-scrollbar {
|
|
background-color: #494747; /* Scrollbar background color on hover */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #ffffff3d; /* Scrollbar thumb color on hover */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background-color: #ffffff3d; /* Color when hovering over the thumb */
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const ComposeContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
width: '150px',
|
|
alignItems: 'center',
|
|
gap: '7px',
|
|
height: '100%',
|
|
cursor: 'pointer',
|
|
transition: '0.2s background-color',
|
|
justifyContent: 'center',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(67, 68, 72, 1)',
|
|
},
|
|
}));
|
|
|
|
export const ComposeContainerBlank = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
width: '150px',
|
|
alignItems: 'center',
|
|
gap: '7px',
|
|
height: '100%',
|
|
}));
|
|
|
|
export const ComposeP = styled(Typography)(({ theme }) => ({
|
|
fontSize: '15px',
|
|
fontWeight: 500,
|
|
}));
|
|
|
|
export const ComposeIcon = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
cursor: 'pointer',
|
|
});
|
|
|
|
export const ArrowDownIcon = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
cursor: 'pointer',
|
|
});
|
|
|
|
export const MailIconImg = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
});
|
|
|
|
export const MailMessageRowInfoImg = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
});
|
|
|
|
export const SelectInstanceContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '17px',
|
|
}));
|
|
|
|
export const SelectInstanceContainerInner = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '3px',
|
|
cursor: 'pointer',
|
|
padding: '8px',
|
|
transition: 'all 0.2s',
|
|
'&:hover': {
|
|
borderRadius: '8px',
|
|
background: '#434448',
|
|
},
|
|
}));
|
|
|
|
export const SelectInstanceContainerFilterInner = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '3px',
|
|
cursor: 'pointer',
|
|
padding: '8px',
|
|
transition: 'all 0.2s',
|
|
}));
|
|
|
|
export const InstanceLabel = styled(Typography)(({ theme }) => ({
|
|
fontSize: '16px',
|
|
fontWeight: 500,
|
|
color: '#FFFFFF33',
|
|
}));
|
|
|
|
export const InstanceP = styled(Typography)(({ theme }) => ({
|
|
fontSize: '16px',
|
|
fontWeight: 500,
|
|
}));
|
|
|
|
export const MailMessageRowContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
cursor: 'pointer',
|
|
justifyContent: 'space-between',
|
|
borderRadius: '56px 5px 10px 56px',
|
|
paddingRight: '15px',
|
|
transition: 'background 0.2s',
|
|
gap: '10px',
|
|
'&:hover': {
|
|
background: '#434448',
|
|
},
|
|
}));
|
|
|
|
export const MailMessageRowProfile = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
cursor: 'pointer',
|
|
justifyContent: 'flex-start',
|
|
gap: '10px',
|
|
width: '50%',
|
|
overflow: 'hidden',
|
|
}));
|
|
|
|
export const MailMessageRowInfo = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
cursor: 'pointer',
|
|
justifyContent: 'flex-start',
|
|
gap: '7px',
|
|
width: '50%',
|
|
}));
|
|
|
|
export const MailMessageRowInfoStatusNotDecrypted = styled(Typography)(
|
|
({ theme }) => ({
|
|
fontSize: '16px',
|
|
fontWeight: 900,
|
|
textTransform: 'uppercase',
|
|
paddingTop: '2px',
|
|
})
|
|
);
|
|
|
|
export const MailMessageRowInfoStatusRead = styled(Typography)(({ theme }) => ({
|
|
fontSize: '16px',
|
|
fontWeight: 300,
|
|
}));
|
|
|
|
export const MessageExtraInfo = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '2px',
|
|
overflow: 'hidden',
|
|
}));
|
|
|
|
export const MessageExtraName = styled(Typography)(({ theme }) => ({
|
|
fontSize: '16px',
|
|
fontWeight: 900,
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
}));
|
|
|
|
export const MessageExtraDate = styled(Typography)(({ theme }) => ({
|
|
fontSize: '15px',
|
|
fontWeight: 500,
|
|
}));
|
|
|
|
export const MessagesContainer = styled(Box)(({ theme }) => ({
|
|
width: '460px',
|
|
maxWidth: '90%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '12px',
|
|
}));
|
|
|
|
export const InstanceListParent = styled(Box)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-height: 246px;
|
|
max-height: 325px;
|
|
width: 425px;
|
|
padding: 10px 0px 7px 0px;
|
|
background-color: var(--color-instance-popover-bg);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
`;
|
|
|
|
export const InstanceListHeader = styled(Box)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
background-color: var(--color-instance-popover-bg);
|
|
`;
|
|
|
|
export const InstanceFooter = styled(Box)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
`;
|
|
|
|
export const InstanceListContainer = styled(Box)`
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
|
|
overflow: auto !important;
|
|
transition: background-color 0.3s;
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: transparent; /* Initially transparent */
|
|
transition: background-color 0.3s; /* Transition for background color */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: transparent; /* Initially transparent */
|
|
border-radius: 3px; /* Scrollbar thumb radius */
|
|
transition: background-color 0.3s; /* Transition for thumb color */
|
|
}
|
|
|
|
&:hover {
|
|
&::-webkit-scrollbar {
|
|
background-color: #494747; /* Scrollbar background color on hover */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #ffffff3d; /* Scrollbar thumb color on hover */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background-color: #ffffff3d; /* Color when hovering over the thumb */
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const InstanceListContainerRowLabelContainer = styled(Box)(
|
|
({ theme }) => ({
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '10px',
|
|
height: '50px',
|
|
})
|
|
);
|
|
|
|
export const InstanceListContainerRow = styled(Box)(({ theme }) => ({
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '10px',
|
|
height: '50px',
|
|
cursor: 'pointer',
|
|
transition: '0.2s background',
|
|
'&:hover': {
|
|
background: 'rgba(67, 68, 72, 1)',
|
|
},
|
|
flexShrink: 0,
|
|
}));
|
|
|
|
export const InstanceListContainerRowCheck = styled(Box)(({ theme }) => ({
|
|
width: '47px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}));
|
|
|
|
export const InstanceListContainerRowMain = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
width: '100%',
|
|
alignItems: 'center',
|
|
paddingRight: '30px',
|
|
overflow: 'hidden',
|
|
}));
|
|
|
|
export const CloseParent = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '20px',
|
|
}));
|
|
|
|
export const InstanceListContainerRowMainP = styled(Typography)(
|
|
({ theme }) => ({
|
|
fontWeight: 500,
|
|
fontSize: '16px',
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
})
|
|
);
|
|
|
|
export const InstanceListContainerRowCheckIcon = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
});
|
|
export const InstanceListContainerRowGroupIcon = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
});
|
|
export const TypeInAliasTextfield = styled(TextField)({
|
|
width: '340px', // Adjust the width as needed
|
|
borderRadius: '5px',
|
|
backgroundColor: 'rgba(30, 30, 32, 1)',
|
|
border: 'none',
|
|
outline: 'none',
|
|
input: {
|
|
fontSize: 16,
|
|
color: 'white',
|
|
'&::placeholder': {
|
|
fontSize: 16,
|
|
color: 'rgba(255, 255, 255, 0.2)',
|
|
},
|
|
border: 'none',
|
|
outline: 'none',
|
|
padding: '10px',
|
|
},
|
|
'& .MuiOutlinedInput-root': {
|
|
'& fieldset': {
|
|
border: 'none',
|
|
},
|
|
'&:hover fieldset': {
|
|
border: 'none',
|
|
},
|
|
'&.Mui-focused fieldset': {
|
|
border: 'none',
|
|
},
|
|
},
|
|
'& .MuiInput-underline:before': {
|
|
borderBottom: 'none',
|
|
},
|
|
'& .MuiInput-underline:hover:not(.Mui-disabled):before': {
|
|
borderBottom: 'none',
|
|
},
|
|
'& .MuiInput-underline:after': {
|
|
borderBottom: 'none',
|
|
},
|
|
});
|
|
|
|
export const NewMessageCloseImg = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
cursor: 'pointer',
|
|
});
|
|
export const NewMessageHeaderP = styled(Typography)(({ theme }) => ({
|
|
fontSize: '18px',
|
|
fontWeight: 600,
|
|
}));
|
|
|
|
export const NewMessageInputRow = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
borderBottom: '3px solid rgba(237, 239, 241, 1)',
|
|
width: '100%',
|
|
paddingBottom: '6px',
|
|
}));
|
|
export const NewMessageInputLabelP = styled(Typography)`
|
|
color: rgba(84, 84, 84, 0.7);
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 120%; /* 24px */
|
|
letter-spacing: 0.15px;
|
|
`;
|
|
export const AliasLabelP = styled(Typography)`
|
|
color: rgba(84, 84, 84, 0.7);
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 120%; /* 24px */
|
|
letter-spacing: 0.15px;
|
|
transition: color 0.2s;
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: rgba(43, 43, 43, 1);
|
|
}
|
|
`;
|
|
export const NewMessageAliasContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '12px',
|
|
}));
|
|
export const AttachmentContainer = styled(Box)(({ theme }) => ({
|
|
height: '36px',
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}));
|
|
|
|
export const NewMessageAttachmentImg = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
cursor: 'pointer',
|
|
padding: '10px',
|
|
border: '1px dashed #646464',
|
|
});
|
|
|
|
export const NewMessageSendButton = styled(Box)`
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.9);
|
|
display: inline-flex;
|
|
padding: 8px 16px 8px 12px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: fit-content;
|
|
transition: all 0.2s;
|
|
color: black;
|
|
min-width: 120px;
|
|
gap: 8px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: rgba(41, 41, 43, 1);
|
|
color: white;
|
|
svg path {
|
|
fill: white; // Fill color changes to white on hover
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const NewMessageSendP = styled(Typography)`
|
|
font-family: Roboto;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 120%; /* 19.2px */
|
|
letter-spacing: -0.16px;
|
|
`;
|
|
|
|
export const ShowMessageNameP = styled(Typography)`
|
|
font-family: Roboto;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
line-height: 19px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
`;
|
|
export const ShowMessageTimeP = styled(Typography)`
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-family: Roboto;
|
|
font-size: 15px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
`;
|
|
export const ShowMessageSubjectP = styled(Typography)`
|
|
font-family: Roboto;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 19px;
|
|
letter-spacing: 0.0075em;
|
|
text-align: left;
|
|
`;
|
|
|
|
export const ShowMessageButton = styled(Box)`
|
|
display: inline-flex;
|
|
padding: 8px 16px 8px 16px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
width: fit-content;
|
|
transition: all 0.2s;
|
|
color: white;
|
|
background-color: rgba(41, 41, 43, 1)
|
|
min-width: 120px;
|
|
gap: 8px;
|
|
border-radius: 4px;
|
|
border: 0.5px solid rgba(255, 255, 255, 0.70);
|
|
font-family: Roboto;
|
|
|
|
min-width: 120px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
border-radius: 4px;
|
|
border: 0.5px solid rgba(255, 255, 255, 0.70);
|
|
background: #434448;
|
|
}
|
|
`;
|
|
export const ShowMessageReturnButton = styled(Box)`
|
|
display: inline-flex;
|
|
padding: 8px 16px 8px 16px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
width: fit-content;
|
|
transition: all 0.2s;
|
|
color: white;
|
|
background-color: rgba(41, 41, 43, 1)
|
|
min-width: 120px;
|
|
gap: 8px;
|
|
border-radius: 4px;
|
|
font-family: Roboto;
|
|
|
|
min-width: 120px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
border-radius: 4px;
|
|
background: #434448;
|
|
}
|
|
`;
|
|
|
|
export const ShowMessageButtonP = styled(Typography)`
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 120%; /* 19.2px */
|
|
letter-spacing: -0.16px;
|
|
color: white;
|
|
`;
|
|
|
|
export const ShowMessageButtonImg = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
cursor: 'pointer',
|
|
});
|
|
|
|
export const MailAttachmentImg = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
});
|
|
|
|
export const AliasAvatarImg = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
});
|
|
|
|
export const MoreImg = styled('img')({
|
|
width: 'auto',
|
|
height: 'auto',
|
|
userSelect: 'none',
|
|
objectFit: 'contain',
|
|
transition: '0.2s all',
|
|
'&:hover': {
|
|
transform: 'scale(1.3)',
|
|
},
|
|
});
|
|
|
|
export const MoreP = styled(Typography)`
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
|
/* Attachments */
|
|
font-family: Roboto;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 120%; /* 19.2px */
|
|
letter-spacing: -0.16px;
|
|
white-space: nowrap;
|
|
`;
|
|
|
|
export const ThreadContainerFullWidth = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
alignItems: 'center',
|
|
}));
|
|
|
|
export const ThreadContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
maxWidth: '95%',
|
|
}));
|
|
|
|
export const GroupNameP = styled(Typography)`
|
|
color: #fff;
|
|
font-size: 25px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 120%; /* 30px */
|
|
letter-spacing: 0.188px;
|
|
`;
|
|
|
|
export const AllThreadP = styled(Typography)`
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 120%; /* 24px */
|
|
letter-spacing: 0.15px;
|
|
`;
|
|
|
|
export const SingleThreadParent = styled(Box)`
|
|
border-radius: 35px 4px 4px 35px;
|
|
position: relative;
|
|
background: #434448;
|
|
display: flex;
|
|
padding: 13px;
|
|
cursor: pointer;
|
|
margin-bottom: 5px;
|
|
height: 76px;
|
|
align-items: center;
|
|
transition: 0.2s all;
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
`;
|
|
|
|
export const SingleTheadMessageParent = styled(Box)`
|
|
border-radius: 35px 4px 4px 35px;
|
|
background: #434448;
|
|
display: flex;
|
|
padding: 13px;
|
|
cursor: pointer;
|
|
margin-bottom: 5px;
|
|
height: 76px;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const ThreadInfoColumn = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '170px',
|
|
gap: '2px',
|
|
marginLeft: '10px',
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
}));
|
|
|
|
export const ThreadInfoColumnNameP = styled(Typography)`
|
|
color: #fff;
|
|
font-family: Roboto;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: normal;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
`;
|
|
|
|
export const ThreadInfoColumnbyP = styled('span')`
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: Roboto;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
`;
|
|
|
|
export const ThreadInfoColumnTime = styled(Typography)`
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: Roboto;
|
|
font-size: 15px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
`;
|
|
|
|
export const ThreadSingleTitle = styled(Typography)`
|
|
color: #fff;
|
|
font-family: Roboto;
|
|
font-size: 23px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
white-space: wrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
`;
|
|
|
|
export const ThreadSingleLastMessageP = styled(Typography)`
|
|
color: #fff;
|
|
font-family: Roboto;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
`;
|
|
|
|
export const ThreadSingleLastMessageSpanP = styled('span')`
|
|
color: #fff;
|
|
font-family: Roboto;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
`;
|
|
|
|
export const GroupContainer = styled(Box)`
|
|
position: relative;
|
|
overflow: auto;
|
|
width: 100%;
|
|
`;
|
|
|
|
export const CloseContainer = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
width: '50px',
|
|
overflow: 'hidden',
|
|
alignItems: 'center',
|
|
cursor: 'pointer',
|
|
transition: '0.2s background-color',
|
|
justifyContent: 'center',
|
|
position: 'absolute',
|
|
top: '0px',
|
|
right: '0px',
|
|
height: '50px',
|
|
borderRadius: '0px 12px 0px 0px',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(162, 31, 31, 1)',
|
|
},
|
|
}));
|