Skip to content

Commit dc495c6

Browse files
StpriyasharmaStpriyasharma
committed
requested changes
1 parent 58848dc commit dc495c6

File tree

20 files changed

+121
-193
lines changed

20 files changed

+121
-193
lines changed

‎packages/react/src/views/AttachmentPreview/AttachmentPreview.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@ const AttachmentPreview = () => {
6666
}
6767
};
6868
return (
69-
<Modal onClose={toggle} css={styles.modal}>
69+
<Modal onClose={toggle}>
7070
<Modal.Header>
71-
<Modal.Title css={styles.modalTitle}>
71+
<Modal.Title>
7272
<Icon
7373
name="attachment"
7474
size="1.25rem"
@@ -93,6 +93,9 @@ const AttachmentPreview = () => {
9393
<Box
9494
css={css`
9595
margin: 30px;
96+
@media (max-width: 768px) {
97+
margin: 25px;
98+
}
9699
`}
97100
>
98101
<Box css={styles.inputContainer}>
@@ -160,6 +163,9 @@ const AttachmentPreview = () => {
160163
<Modal.Footer
161164
css={css`
162165
margin-top: 1.5rem;
166+
@media (max-width: 768px) {
167+
margin-top: 0rem;
168+
}
163169
`}
164170
>
165171
<Button type="secondary" onClick={toggle}>

‎packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,6 @@ const getAttachmentPreviewStyles = () => {
1414
width: 100%;
1515
`,
1616

17-
modal: {
18-
'@media(max-width: 480px)': {
19-
maxWidth: '70%',
20-
maxHeight: '60%',
21-
},
22-
'@media(max-width: 600px)': {
23-
maxWidth: '60%',
24-
},
25-
'@media(max-width: 768px)': {
26-
maxWidth: '65%',
27-
},
28-
},
29-
30-
modalTitle: css`
31-
@media (max-width: 320px) {
32-
font-size: 20px;
33-
}
34-
`,
35-
3617
modalContent: css`
3718
overflow-y: auto;
3819
overflow-x: hidden;

‎packages/react/src/views/AttachmentPreview/PreviewType/audio.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,24 @@ function PreviewAudio({ previewURL }) {
1010
width: 100%;
1111
1212
@media (max-width: 320px) {
13-
max-width: 270px;
13+
max-width: 250px;
1414
margin: 0 auto;
1515
}
1616
17-
@media (max-width: 768px) {
18-
max-width: 300px;
17+
@media (max-width: 420px) {
18+
max-width: 280px;
1919
margin: 0 auto;
2020
}
21+
@media (min-width: 481px) and (max-width: 600px) {
22+
width: ;
23+
}
2124
2225
audio {
2326
width: 100%;
2427
max-width: 100%;
28+
@media (max-width: 600px) {
29+
max-width: 80%;
30+
}
2531
}
2632
`}
2733
>

‎packages/react/src/views/ChatBody/ChatBody.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ const ChatBody = ({
316316
</Box>
317317
)}
318318
{isModalOpen && (
319-
<Modal css={styles.modal}>
319+
<Modal>
320320
<Modal.Header>
321321
<Modal.Title>Announcement</Modal.Title>
322322
<Modal.Close onClick={toggleModal} />

‎packages/react/src/views/ChatBody/ChatBody.styles.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,6 @@ export const getChatbodyStyles = (theme, mode) => {
3232
text-overflow: ellipsis;
3333
white-space: nowrap;
3434
`,
35-
modal: {
36-
'@media(max-width:768px)': {
37-
maxWidth: '75%',
38-
},
39-
},
4035
};
4136

4237
return styles;

‎packages/react/src/views/ChatInput/ChatInput.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -571,9 +571,14 @@ const ChatInput = ({ scrollToBottom }) => {
571571
)}
572572
</Box>
573573
{isMsgLong && (
574-
<Modal css={styles.modal} onClose={() => setIsMsgLong(false)}>
574+
<Modal
575+
css={css`
576+
padding: 1em;
577+
`}
578+
onClose={() => setIsMsgLong(false)}
579+
>
575580
<Modal.Header>
576-
<Modal.Title css={styles.modalTitle}>
581+
<Modal.Title>
577582
<Icon name="report" size="1.25rem" />
578583
Message Too Long!
579584
</Modal.Title>

‎packages/react/src/views/ChatInput/ChatInput.styles.js

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -67,24 +67,6 @@ export const getChatInputStyles = (theme) => {
6767
max-height: 300px;
6868
overflow: scroll;
6969
`,
70-
71-
modal: {
72-
'@media(max-width: 600px)': {
73-
maxWidth: '70%',
74-
},
75-
'@media(max-width: 480px)': {
76-
maxWidth: '80%',
77-
},
78-
},
79-
80-
modalTitle: css`
81-
@media (max-width: 602px) {
82-
font-size: 20px;
83-
}
84-
@media (max-width: 320px) {
85-
font-size: 16px;
86-
}
87-
`,
8870
};
8971

9072
return styles;
@@ -175,19 +157,6 @@ export const getInsertLinkModalStyles = (theme) => {
175157
border: ${`1.5px solid ${theme.colors.ring}`};
176158
}
177159
`,
178-
modal: {
179-
'@media(max-width: 320px)': {
180-
maxWidth: '80%',
181-
},
182-
'@media(max-width: 600px)': {
183-
maxHeight: '70%',
184-
maxWidth: '70%',
185-
},
186-
'@media(max-width: 768px)': {
187-
maxWidth: '65%',
188-
},
189-
},
190-
191160
modalHeader: css`
192161
padding: 0 0.5rem;
193162
`,
@@ -200,24 +169,6 @@ export const getInsertLinkModalStyles = (theme) => {
200169

201170
modalFooter: css`
202171
padding: 0.75rem 1rem;
203-
display: flex;
204-
justify-content: flex-end;
205-
align-items: center;
206-
207-
@media (max-width: 320px) {
208-
padding: 0.5rem;
209-
flex-direction: column;
210-
gap: 0.5rem;
211-
}
212-
213-
button {
214-
margin-left: 0.5rem;
215-
216-
@media (max-width: 320px) {
217-
margin-left: 0;
218-
width: 100%;
219-
}
220-
}
221172
`,
222173
};
223174

‎packages/react/src/views/ChatInput/InsertLinkToolBox.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const InsertLinkToolBox = ({
2020
};
2121

2222
return (
23-
<Modal css={styles.modal}>
23+
<Modal>
2424
<Modal.Header css={styles.modalHeader}>
2525
<Modal.Title>Add link</Modal.Title>
2626
<Modal.Close onClick={onClose} />

‎packages/react/src/views/EmojiPicker/EmojiPicker.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,6 @@ const CustomEmojiPicker = ({
1111
position: absolute;
1212
top: 0;
1313
right: 0;
14-
@media (max-width: 602px) {
15-
right: -3rem;
16-
}
1714
`,
1815
wrapperId = 'emoji-popup',
1916
onClose = () => {},
@@ -28,7 +25,16 @@ const CustomEmojiPicker = ({
2825

2926
return (
3027
<Popup
31-
positionStyles={positionStyles}
28+
positionStyles={css`
29+
${positionStyles}
30+
@media (max-width: 500px) {
31+
position: fixed;
32+
bottom: 0;
33+
left: 0;
34+
right: 0;
35+
top: auto;
36+
}
37+
`}
3238
wrapperId={wrapperId}
3339
onClose={onClose}
3440
height="auto"
@@ -37,7 +43,7 @@ const CustomEmojiPicker = ({
3743
<Box css={styles.emojiPicker}>
3844
<EmojiPicker
3945
height={400}
40-
width={350}
46+
width="100%"
4147
onEmojiClick={handleEmojiClick}
4248
previewConfig={previewConfig}
4349
searchDisabled={false}

‎packages/react/src/views/EmojiPicker/EmojiPicker.styles.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ const getEmojiPickerStyles = ({ theme, mode }) => {
1515
--epr-category-label-bg-color: ${theme.colors.background};
1616
--epr-category-icon-active-color: ${theme.colors.secondary};
1717
--epr-emoji-size: 25px;
18+
@media(max-width:500px){
19+
--epr-emoji-size: 30px;
20+
}
1821
--epr-category-navigation-button-size: 20px;
1922
--epr-emoji-gap: 10px;
2023
@@ -60,12 +63,7 @@ const getEmojiPickerStyles = ({ theme, mode }) => {
6063
--epr-preview-z-index: 6;
6164
--epr-search-input-bg-color: ${calculatedColors};
6265
63-
@media (max-width: 480px) {
64-
max-width: 300px;
65-
}
66-
@media (max-width: 370px) {
67-
max-width: 250px;
68-
}
66+
}
6967
/* Use these properties of color if needed ->
7068
7169
--epr-shadow: 'theme-color';

‎packages/react/src/views/FileMessage/FileMessage.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,9 @@ const FileMessage = ({ fileMessage }) => {
117117
</Box>
118118

119119
{fileToDelete && Object.keys(fileToDelete).length > 0 && (
120-
<Modal onClose={handleOnClose} css={styles.modal}>
120+
<Modal onClose={handleOnClose}>
121121
<Modal.Header>
122-
<Modal.Title css={styles.modalTitle}>
122+
<Modal.Title>
123123
<Icon
124124
name="trash"
125125
size="1.25rem"

‎packages/react/src/views/FileMessage/Files.styles.js

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -120,27 +120,6 @@ export const fileDisplayStyles = {
120120
}
121121
`,
122122

123-
modal: {
124-
'@media(max-width: 320px)': {
125-
maxWidth: '70%',
126-
},
127-
'@media(max-width: 480px)': {
128-
maxWidth: '70%',
129-
},
130-
'@media(max-width: 600px)': {
131-
maxWidth: '85%',
132-
},
133-
'@media(max-width: 768px)': {
134-
maxWidth: '75%',
135-
},
136-
},
137-
138-
modalTitle: css`
139-
@media (max-width: 320px) {
140-
font-size: 20px;
141-
}
142-
`,
143-
144123
centeredColumnStyles: css`
145124
display: flex;
146125
flex-direction: column;

‎packages/react/src/views/LoginForm/LoginForm.styles.js

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,6 @@ const styles = {
3535
position: absolute;
3636
right: 1em;
3737
`,
38-
39-
modal: {
40-
'@media(max-width: 600px)': {
41-
maxWidth: '70%',
42-
},
43-
'@media(max-width: 870px)': {
44-
maxWidth: '75%',
45-
},
46-
},
47-
modalTitle: css`
48-
@media (max-width: 602px) {
49-
font-size: 20px;
50-
}
51-
`,
5238
};
5339

5440
export default styles;

‎packages/react/src/views/Message/BubbleVariant/Bubble.styles.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,9 @@ export const getBubbleStylesMe = (theme) => {
167167
.ec-message-body:hover & {
168168
left: auto;
169169
right: calc(100% - 20px);
170+
@media (max-width: 500px) {
171+
right: 0;
172+
}
170173
}
171174
`,
172175

‎packages/react/src/views/Message/Message.styles.js

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -273,43 +273,13 @@ export const getMessageToolboxStyles = (theme) => {
273273
gap: 0.25rem;
274274
padding: 0.25rem;
275275
border-radius: ${theme.radius};
276-
@media (max-width: 602px) {
277-
margin-right: -2rem;
278-
}
279-
@media (max-width: 360px) {
280-
margin-right: -4rem;
281-
}
282276
`,
283277

284278
emojiPickerStyles: css`
285279
position: absolute;
286280
bottom: 100%;
287281
right: 1.5rem;
288282
`,
289-
290-
modal: {
291-
'@media(max-width: 320px)': {
292-
maxWidth: '80%',
293-
},
294-
'@media(max-width: 480px)': {
295-
maxWidth: '80%',
296-
},
297-
'@media(max-width: 600px)': {
298-
maxWidth: '70%',
299-
},
300-
'@media(max-width: 768px)': {
301-
maxWidth: '75%',
302-
},
303-
},
304-
305-
modalTitle: css`
306-
@media (max-width: 480px) {
307-
font-size: 20px;
308-
}
309-
@media (max-width: 360px) {
310-
font-size: 16px;
311-
}
312-
`,
313283
};
314284

315285
return styles;

‎packages/react/src/views/Message/MessageToolbox.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -255,9 +255,9 @@ export const MessageToolbox = ({
255255
</Box>
256256

257257
{showDeleteModal && (
258-
<Modal onClose={handleOnClose} css={styles.modal}>
258+
<Modal onClose={handleOnClose}>
259259
<Modal.Header>
260-
<Modal.Title css={styles.modalTitle}>
260+
<Modal.Title>
261261
<Icon
262262
name="trash"
263263
size="1.25rem"

0 commit comments

Comments
 (0)