Sort styles

src/components/Group/Forum/Mail-styles.ts

@@ -4,64 +4,60 @@ import { styled } from '@mui/system';
 export const MailContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  width: '100%',
   height: 'calc(100vh - 78px)',
   overflow: 'hidden',
+  width: '100%',
 }));
 
 export const MailBody = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'row',
-  width: '100%',
   height: 'calc(100% - 59px)',
+  width: '100%',
 }));
 
 export const MailBodyInner = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  width: '50%',
   height: '100%',
+  width: '50%',
 }));
 
 export const MailBodyInnerHeader = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '100%',
-  height: '25px',
-  marginTop: '50px',
-  marginBottom: '35px',
-  justifyContent: 'center',
   alignItems: 'center',
+  display: 'flex',
   gap: '11px',
+  height: '25px',
+  justifyContent: 'center',
+  marginBottom: '35px',
+  marginTop: '50px',
+  width: '100%',
 }));
 
 export const MailBodyInnerScroll = styled(Box)`
   display: flex;
   flex-direction: column;
+  height: calc(100% - 110px);
   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 */
     }
@@ -69,25 +65,25 @@ export const MailBodyInnerScroll = styled(Box)`
 `;
 
 export const ComposeContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '150px',
   alignItems: 'center',
+  cursor: 'pointer',
+  display: 'flex',
   gap: '7px',
   height: '100%',
-  cursor: 'pointer',
-  transition: '0.2s background-color',
   justifyContent: 'center',
+  transition: '0.2s background-color',
+  width: '150px',
   '&:hover': {
     backgroundColor: theme.palette.action.hover,
   },
 }));
 
 export const ComposeContainerBlank = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '150px',
   alignItems: 'center',
+  display: 'flex',
   gap: '7px',
   height: '100%',
+  width: '150px',
 }));
 
 export const ComposeP = styled(Typography)(({ theme }) => ({
@@ -96,54 +92,54 @@ export const ComposeP = styled(Typography)(({ theme }) => ({
 }));
 
 export const ComposeIcon = styled('img')({
-  width: 'auto',
-  height: 'auto',
-  userSelect: 'none',
-  objectFit: 'contain',
   cursor: 'pointer',
+  height: 'auto',
+  objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const ArrowDownIcon = styled('img')({
-  width: 'auto',
-  height: 'auto',
-  userSelect: 'none',
-  objectFit: 'contain',
   cursor: 'pointer',
+  height: 'auto',
+  objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const MailIconImg = styled('img')({
-  width: 'auto',
   height: 'auto',
-  userSelect: 'none',
   objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const MailMessageRowInfoImg = styled('img')({
-  width: 'auto',
   height: 'auto',
-  userSelect: 'none',
   objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const SelectInstanceContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
   alignItems: 'center',
+  display: 'flex',
   gap: '17px',
 }));
 
 export const SelectInstanceContainerFilterInner = styled(Box)(({ theme }) => ({
-  display: 'flex',
   alignItems: 'center',
-  gap: '3px',
   cursor: 'pointer',
+  display: 'flex',
+  gap: '3px',
   padding: '8px',
   transition: 'all 0.2s',
 }));
 
 export const InstanceLabel = styled(Typography)(({ theme }) => ({
+  color: '#FFFFFF33',
   fontSize: '16px',
   fontWeight: 500,
-  color: '#FFFFFF33',
 }));
 
 export const InstanceP = styled(Typography)(({ theme }) => ({
@@ -152,14 +148,15 @@ export const InstanceP = styled(Typography)(({ theme }) => ({
 }));
 
 export const InstanceListParent = styled(Typography)(({ theme }) => ({
+  border: '1px solid rgba(0, 0, 0, 0.1)',
   display: 'flex',
   flexDirection: 'column',
-  width: '425px', // only one width now
-  minHeight: '246px',
   maxHeight: '325px',
+  minHeight: '246px',
   padding: '10px 0px 7px 0px',
-  border: '1px solid rgba(0, 0, 0, 0.1)',
+  width: '425px', // only one width now
 }));
+
 export const InstanceListHeader = styled(Typography)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -169,40 +166,35 @@ export const InstanceListHeader = styled(Typography)(({ theme }) => ({
 export const InstanceFooter = styled(Box)`
   display: flex;
   flex-direction: column;
-  width: 100%;
   flex-shrink: 0;
+  width: 100%;
 `;
 
 export const InstanceListContainer = styled(Box)`
-  width: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-
   overflow: auto !important;
   transition: background-color 0.3s;
+  width: 100%;
   &::-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 */
     }
@@ -211,150 +203,156 @@ export const InstanceListContainer = styled(Box)`
 
 export const InstanceListContainerRowLabelContainer = styled(Box)(
   ({ theme }) => ({
-    width: '100%',
-    display: 'flex',
     alignItems: 'center',
+    display: 'flex',
     gap: '10px',
     height: '50px',
+    width: '100%',
   })
 );
 
 export const InstanceListContainerRow = styled(Box)(({ theme }) => ({
-  width: '100%',
-  display: 'flex',
   alignItems: 'center',
+  cursor: 'pointer',
+  display: 'flex',
+  flexShrink: 0,
   gap: '10px',
   height: '50px',
-  cursor: 'pointer',
   transition: '0.2s background',
+  width: '100%',
   '&:hover': {
     background: theme.palette.action.hover,
   },
-  flexShrink: 0,
 }));
 
 export const InstanceListContainerRowCheck = styled(Box)(({ theme }) => ({
-  width: '47px',
-  display: 'flex',
   alignItems: 'center',
+  display: 'flex',
   justifyContent: 'center',
+  width: '47px',
 }));
 
 export const InstanceListContainerRowMain = styled(Box)(({ theme }) => ({
+  alignItems: 'center',
   display: 'flex',
   justifyContent: 'space-between',
-  width: '100%',
-  alignItems: 'center',
-  paddingRight: '30px',
   overflow: 'hidden',
+  paddingRight: '30px',
+  width: '100%',
 }));
 
 export const CloseParent = styled(Box)(({ theme }) => ({
-  display: 'flex',
   alignItems: 'center',
+  display: 'flex',
   gap: '20px',
 }));
 
 export const InstanceListContainerRowMainP = styled(Typography)(
   ({ theme }) => ({
-    fontWeight: 500,
     fontSize: '16px',
-    textOverflow: 'ellipsis',
+    fontWeight: 500,
     overflow: 'hidden',
+    textOverflow: 'ellipsis',
   })
 );
 
 export const InstanceListContainerRowCheckIcon = styled('img')({
-  width: 'auto',
   height: 'auto',
-  userSelect: 'none',
   objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
+
 export const InstanceListContainerRowGroupIcon = styled('img')({
-  width: 'auto',
   height: 'auto',
-  userSelect: 'none',
   objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const NewMessageCloseImg = styled('img')({
-  width: 'auto',
-  height: 'auto',
-  userSelect: 'none',
-  objectFit: 'contain',
   cursor: 'pointer',
+  height: 'auto',
+  objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
+
 export const NewMessageHeaderP = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
   fontSize: '18px',
   fontWeight: 600,
-  color: theme.palette.text.primary,
 }));
 
 export const NewMessageInputRow = styled(Box)(({ theme }) => ({
-  display: 'flex',
   alignItems: 'center',
-  justifyContent: 'space-between',
   borderBottom: '3px solid rgba(237, 239, 241, 1)',
-  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
   paddingBottom: '6px',
+  width: '100%',
 }));
+
 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;
+  line-height: 120%; /* 24px */
 `;
+
 export const AliasLabelP = styled(Typography)`
   color: rgba(84, 84, 84, 0.7);
+  cursor: pointer;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 120%; /* 24px */
   letter-spacing: 0.15px;
+  line-height: 120%; /* 24px */
   transition: color 0.2s;
-  cursor: pointer;
   &:hover {
     color: rgba(43, 43, 43, 1);
   }
 `;
+
 export const NewMessageAliasContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
   alignItems: 'center',
+  display: 'flex',
   gap: '12px',
 }));
+
 export const AttachmentContainer = styled(Box)(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
   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',
+  cursor: 'pointer',
+  height: 'auto',
+  objectFit: 'contain',
+  padding: '10px',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const NewMessageSendButton = styled(Box)(({ theme }) => ({
-  borderRadius: '4px',
-  border: `1px solid ${theme.palette.border.main}`, // you can replace with theme.palette.divider or whatever you want later
-  display: 'inline-flex',
-  padding: '8px 16px 8px 12px',
-  justifyContent: 'center',
   alignItems: 'center',
-  width: 'fit-content',
+  border: `1px solid ${theme.palette.border.main}`, // you can replace with theme.palette.divider or whatever you want later
-  transition: 'all 0.2s',
+  borderRadius: '4px',
   color: theme.palette.text.primary, // replace later with theme.palette.text.primary if needed
-  minWidth: '120px',
-  position: 'relative',
-  gap: '8px',
   cursor: 'pointer',
+  display: 'inline-flex',
+  gap: '8px',
+  justifyContent: 'center',
+  minWidth: '120px',
+  padding: '8px 16px 8px 12px',
+  position: 'relative',
+  transition: 'all 0.2s',
+  width: 'fit-content',
   '&:hover': {
     backgroundColor: theme.palette.action.hover, // replace with theme value if needed
   },
@@ -365,45 +363,45 @@ export const NewMessageSendP = styled(Typography)`
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 120%; /* 19.2px */
   letter-spacing: -0.16px;
+  line-height: 120%; /* 19.2px */
 `;
 
 export const ShowMessageNameP = styled(Typography)`
   font-family: Roboto;
   font-size: 16px;
   font-weight: 900;
-  line-height: 19px;
   letter-spacing: 0em;
-  text-align: left;
+  line-height: 19px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const ShowMessageSubjectP = styled(Typography)`
   font-family: Roboto;
   font-size: 16px;
   font-weight: 500;
-  line-height: 19px;
   letter-spacing: 0.0075em;
+  line-height: 19px;
   text-align: left;
 `;
 
 export const ShowMessageButton = styled(Box)(({ theme }) => ({
-  display: 'inline-flex',
-  padding: '8px 16px',
   alignItems: 'center',
-  justifyContent: 'center',
-  width: 'fit-content',
-  transition: 'all 0.2s',
-  color: theme.palette.text.primary, // you'll replace with theme value
-  minWidth: '120px',
-  gap: '8px',
-  borderRadius: '4px',
   border: theme.palette.border.main, // you'll replace
-  fontFamily: 'Roboto',
+  borderRadius: '4px',
+  color: theme.palette.text.primary, // you'll replace with theme value
   cursor: 'pointer',
+  display: 'inline-flex',
+  fontFamily: 'Roboto',
+  gap: '8px',
+  justifyContent: 'center',
+  minWidth: '120px',
+  padding: '8px 16px',
+  transition: 'all 0.2s',
+  width: 'fit-content',
   '&:hover': {
     background: theme.palette.action.hover, // you'll replace
     borderRadius: '4px',
@@ -411,18 +409,18 @@ export const ShowMessageButton = styled(Box)(({ theme }) => ({
 }));
 
 export const ShowMessageReturnButton = styled(Box)(({ theme }) => ({
-  display: 'inline-flex',
-  padding: '8px 16px',
   alignItems: 'center',
-  justifyContent: 'center',
-  width: 'fit-content',
-  transition: 'all 0.2s',
-  color: theme.palette.text.primary, // you'll replace with theme value
-  minWidth: '120px',
-  gap: '8px',
   borderRadius: '4px',
-  fontFamily: 'Roboto',
+  color: theme.palette.text.primary, // you'll replace with theme value
   cursor: 'pointer',
+  display: 'inline-flex',
+  fontFamily: 'Roboto',
+  gap: '8px',
+  justifyContent: 'center',
+  minWidth: '120px',
+  padding: '8px 16px',
+  transition: 'all 0.2s',
+  width: 'fit-content',
   '&:hover': {
     background: theme.palette.action.hover, // you'll replace
     borderRadius: '4px',
@@ -430,33 +428,33 @@ export const ShowMessageReturnButton = styled(Box)(({ theme }) => ({
 }));
 
 export const ShowMessageButtonImg = styled('img')({
-  width: 'auto',
-  height: 'auto',
-  userSelect: 'none',
-  objectFit: 'contain',
   cursor: 'pointer',
+  height: 'auto',
+  objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const MailAttachmentImg = styled('img')({
-  width: 'auto',
   height: 'auto',
-  userSelect: 'none',
   objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const AliasAvatarImg = styled('img')({
-  width: 'auto',
   height: 'auto',
-  userSelect: 'none',
   objectFit: 'contain',
+  userSelect: 'none',
+  width: 'auto',
 });
 
 export const MoreImg = styled('img')({
-  width: 'auto',
   height: 'auto',
-  userSelect: 'none',
   objectFit: 'contain',
   transition: '0.2s all',
+  userSelect: 'none',
+  width: 'auto',
   '&:hover': {
     transform: 'scale(1.3)',
   },
@@ -468,76 +466,76 @@ export const MoreP = styled(Typography)(({ theme }) => ({
   fontSize: '16px',
   fontStyle: 'normal',
   fontWeight: 400,
-  lineHeight: '120%', // 19.2px
   letterSpacing: '-0.16px',
+  lineHeight: '120%', // 19.2px
   whiteSpace: 'nowrap',
 }));
 
 export const ThreadContainerFullWidth = styled(Box)(({ theme }) => ({
+  alignItems: 'center',
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
-  alignItems: 'center',
 }));
 
 export const ThreadContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  width: '100%',
   maxWidth: '95%',
+  width: '100%',
 }));
 
 export const GroupNameP = styled(Typography)`
   font-size: 25px;
   font-style: normal;
   font-weight: 700;
-  line-height: 120%; /* 30px */
   letter-spacing: 0.188px;
+  line-height: 120%; /* 30px */
 `;
 
 export const AllThreadP = styled(Typography)`
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
-  line-height: 120%; /* 24px */
   letter-spacing: 0.15px;
+  line-height: 120%; /* 24px */
 `;
 
 export const SingleThreadParent = styled(Box)(({ theme }) => ({
-  borderRadius: '35px 4px 4px 35px',
-  position: 'relative',
-  display: 'flex',
-  padding: '13px',
-  cursor: 'pointer',
-  marginBottom: '5px',
-  height: '76px',
   alignItems: 'center',
-  transition: '0.2s all',
   backgroundColor: theme.palette.background.paper, // or remove if you want no background by default
+  borderRadius: '35px 4px 4px 35px',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '76px',
+  marginBottom: '5px',
+  padding: '13px',
+  position: 'relative',
+  transition: '0.2s all',
   '&:hover': {
     backgroundColor: theme.palette.action.hover,
   },
 }));
 
 export const SingleTheadMessageParent = styled(Box)(({ theme }) => ({
-  borderRadius: '35px 4px 4px 35px',
-  background: theme.palette.background.paper,
-  display: 'flex',
-  padding: '13px',
-  cursor: 'pointer',
-  marginBottom: '5px',
-  height: '76px',
   alignItems: 'center',
+  background: theme.palette.background.paper,
+  borderRadius: '35px 4px 4px 35px',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '76px',
+  marginBottom: '5px',
+  padding: '13px',
 }));
 
 export const ThreadInfoColumn = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  width: '170px',
   gap: '2px',
-  marginLeft: '10px',
   height: '100%',
   justifyContent: 'center',
+  marginLeft: '10px',
+  width: '170px',
 }));
 
 export const ThreadInfoColumnNameP = styled(Typography)`
@@ -546,9 +544,9 @@ export const ThreadInfoColumnNameP = styled(Typography)`
   font-style: normal;
   font-weight: 900;
   line-height: normal;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const ThreadInfoColumnbyP = styled('span')(({ theme }) => ({
@@ -575,9 +573,9 @@ export const ThreadSingleTitle = styled(Typography)`
   font-style: normal;
   font-weight: 700;
   line-height: normal;
-  white-space: wrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: wrap;
 `;
 
 export const ThreadSingleLastMessageP = styled(Typography)`
@@ -597,24 +595,24 @@ export const ThreadSingleLastMessageSpanP = styled('span')`
 `;
 
 export const GroupContainer = styled(Box)`
-  position: relative;
   overflow: auto;
+  position: relative;
   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',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '50px',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  position: 'absolute',
+  right: '0px',
+  top: '0px',
+  transition: '0.2s background-color',
+  width: '50px',
   '&:hover': {
     backgroundColor: theme.palette.action.hover,
   },

src/components/Group/Forum/ShowMessageWithoutModal.tsx

@@ -100,30 +100,30 @@ export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
                   return (
                     <Box
                       sx={{
+                        alignItems: 'center',
                         display: expandAttachments
                           ? 'flex'
                           : !expandAttachments && isFirst
                             ? 'flex'
                             : 'none',
-                        alignItems: 'center',
                         justifyContent: 'flex-start',
                         width: '100%',
                       }}
                     >
                       <Box
                         sx={{
-                          display: 'flex',
                           alignItems: 'center',
-                          gap: '5px',
                           cursor: 'pointer',
+                          display: 'flex',
+                          gap: '5px',
                           width: 'auto',
                         }}
                       >
                         {message?.attachments?.length > 1 && isFirst && (
                           <Box
                             sx={{
-                              display: 'flex',
                               alignItems: 'center',
+                              display: 'flex',
                               gap: '5px',
                             }}
                             onClick={() => {
@@ -161,18 +161,18 @@ export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
           <>
             <Box
               sx={{
-                width: '100%',
-                opacity: 0.7,
-                borderRadius: '8px',
                 border: '1px solid gray',
+                borderRadius: '8px',
                 boxSizing: 'border-box',
+                opacity: 0.7,
                 padding: '5px',
+                width: '100%',
               }}
             >
               <Box
                 sx={{
-                  display: 'flex',
                   alignItems: 'flex-start',
+                  display: 'flex',
                   gap: '10px',
                 }}
               >
@@ -200,6 +200,7 @@ export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
 
               <MessageDisplay htmlContent={message?.reply?.textContentV2} />
             </Box>
+
             <Spacer height="20px" />
           </>
         )}
@@ -215,9 +216,9 @@ export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
         )}
         <Box
           sx={{
-            width: '100%',
             display: 'flex',
             justifyContent: 'flex-end',
+            width: '100%',
           }}
         >
           <IconButton onClick={() => openNewPostWithQuote(message)}>