From c7fcddcfc556a2bfd310b4d0b5b16913a0a24b1c Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Sat, 29 Aug 2020 14:27:57 +0200
Subject: [PATCH] better modal breakpoint
---
src/core/components/CustomModal.tsx | 10 +++++-----
src/core/components/ProfileModal.tsx | 2 +-
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/core/components/CustomModal.tsx b/src/core/components/CustomModal.tsx
index c8f9b12..e6e0119 100644
--- a/src/core/components/CustomModal.tsx
+++ b/src/core/components/CustomModal.tsx
@@ -8,21 +8,21 @@ interface ICustomModalProps {
isOpen: boolean;
setIsOpen: Dispatcher<boolean>;
children: React.ReactNode;
- customStyle: { backgroundColor?: string; padding?: string };
+ customStyle: { backgroundColor?: string; padding?: string; width?: string };
}
const useStyles = makeStyles((theme) => ({
- modal: {
+ modal: (customStyle: ICustomModalProps['customStyle']) => ({
backgroundColor: 'transparent',
margin: '7% auto',
padding: 'none',
border: 'none',
- width: '85%',
- [theme.breakpoints.down('sm')]: {
+ width: customStyle.width || '85%',
+ [theme.breakpoints.down(700)]: {
margin: '3% auto',
width: '95%',
},
- },
+ }),
modalContent: (customStyle: ICustomModalProps['customStyle']) => ({
...{
backgroundColor: customStyle.backgroundColor || 'theme.palette.background.paper',
diff --git a/src/core/components/ProfileModal.tsx b/src/core/components/ProfileModal.tsx
index 26edd64..8d442d6 100644
--- a/src/core/components/ProfileModal.tsx
+++ b/src/core/components/ProfileModal.tsx
@@ -14,7 +14,7 @@ export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
<CustomModal
isOpen={isOpen}
setIsOpen={setIsOpen}
- customStyle={{ backgroundColor: 'white', padding: '10px' }}
+ customStyle={{ backgroundColor: 'white', padding: '10px', width: '650px' }}
>
{placeHolder}
</CustomModal>
--
GitLab