From 8081e20b96a4485c0ece969ab14647e309ee331c Mon Sep 17 00:00:00 2001
From: Youssef Khedher <khedher.youssef@hotmail.fr>
Date: Thu, 31 Mar 2022 11:14:13 +0100
Subject: [PATCH] fix: toast in mobile view (#831)

* fix: toast in mobile view

* fix: feature settings mobile view

* fix: feedback in mobile

* fix: add space for ts expect error

* fix: change breakpoint to xs instead of sm
---
 frontend/src/{common.styles.js => common.styles.ts}      | 9 ++++++++-
 .../common/CheckmarkBadge/CheckMarkBadge.styles.ts       | 4 ++++
 .../component/common/ToastRenderer/Toast/Toast.styles.ts | 4 ++--
 .../src/component/feature/FeatureForm/FeatureForm.tsx    | 2 +-
 .../FeatureSettings/FeatureSettings.styles.ts            | 3 +++
 .../component/feedback/FeedbackNPS/FeedbackNPS.styles.ts | 2 --
 6 files changed, 18 insertions(+), 6 deletions(-)
 rename frontend/src/{common.styles.js => common.styles.ts} (93%)

diff --git a/frontend/src/common.styles.js b/frontend/src/common.styles.ts
similarity index 93%
rename from frontend/src/common.styles.js
rename to frontend/src/common.styles.ts
index 4b79b87270..74fb10bdd5 100644
--- a/frontend/src/common.styles.js
+++ b/frontend/src/common.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const useCommonStyles = makeStyles(theme => ({
     contentSpacingY: {
@@ -24,12 +24,14 @@ export const useCommonStyles = makeStyles(theme => ({
     },
     divider: {
         margin: '1rem 0',
+        // @ts-expect-error
         backgroundColor: theme.palette.division.main,
         height: '3px',
         width: '100%',
     },
     largeDivider: {
         margin: '2rem 0',
+        // @ts-expect-error
         backgroundColor: theme.palette.division.main,
         height: '3px',
         width: '100%',
@@ -112,6 +114,11 @@ export const useCommonStyles = makeStyles(theme => ({
         right: '40px',
         top: '40px',
         transform: 'translateY(-400px)',
+        [theme.breakpoints.down('xs')]: {
+            right: 20,
+            left: 10,
+            top: 40,
+        },
     },
     fadeInTopEnter: {
         transform: 'translateY(100px)',
diff --git a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts
index ad4171e27c..252d7e4482 100644
--- a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts
+++ b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts
@@ -9,6 +9,10 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
+        [theme.breakpoints.down('xs')]: {
+            width: '50px',
+            height: '50px',
+        },
     },
     check: {
         color: '#fff',
diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts b/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts
index 1f3872631f..f4c8e620fe 100644
--- a/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts
+++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts
@@ -2,11 +2,11 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     container: {
-        width: '450px',
+        maxWidth: '450px',
         background: '#fff',
         boxShadow: '2px 2px 4px rgba(0,0,0,0.4)',
         zIndex: 500,
-        margin: '0 auto',
+        margin: '0 0.8rem',
         borderRadius: '12.5px',
         padding: '2rem',
     },
diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
index d7a0fd6d54..e51f3426b5 100644
--- a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
+++ b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
@@ -140,7 +140,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                     data-test={CF_DESC_ID}
                     onChange={e => setDescription(e.target.value)}
                 />
-                <FormControl>
+                <FormControl className={styles.input}>
                     <Typography
                         variant="subtitle1"
                         className={styles.roleSubtitle}
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts
index af4bc62775..6c98fb1c26 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts
@@ -11,6 +11,9 @@ export const useStyles = makeStyles(theme => ({
         width: '20%',
         borderRight: `1px solid ${theme.palette.grey[300]}`,
         padding: '1rem 0',
+        [theme.breakpoints.down('sm')]: {
+            width: '35%',
+        },
     },
     listItem: {
         padding: '0.75rem 2rem',
diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts
index c77541b2c1..354146029a 100644
--- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts
+++ b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts
@@ -8,8 +8,6 @@ export const useStyles = makeStyles(theme => ({
         boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)',
         padding: '1.5rem',
         maxWidth: '400px',
-        width: '400px',
-        height: '200px',
     },
     animateContainer: {
         zIndex: 9999,