Adm-935 [frontend] adjust some small style for charting responsibilit…

…y according to DC feedback (#1485)

* ADM-935: [frontend] change button font size in mobile

* ADM-935: [frontend] fix retry button style in mobile

* ADM-935: [frontend] fix trend icon margin in mobile

* ADM-935: [frontend] update readme about responsiblity

* ADM-935: [frontend] format readme

frontend/README.md

@@ -78,3 +78,37 @@ test.cy.ts:
 
 
 ```
+
+## Page Responsibility
+
+We need consider responsibility in our page. We consider three main breakpoints in out system, 390, 1280 and 1920.
+Our minimum page size is 390, so that if the screen size is smaller than 390, the page will scroll Horizontally.
+When the screen size is smaller than 1280, it shows the mobile view.
+When the screen size is 1280 or larger than 1280, it shows the desktop view.
+When the screen size is larger than 1920, the content size will no longer chang with the screen size, that means it will keep the same size with it in 1920.
+
+the breakpoints are set in theme.js file.
+
+```
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 390,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+    keys: ['xs', 'sm', 'md', 'lg', 'xl'],
+  },
+```
+
+how we use it:
+
+```
+  [theme.breakpoints.down('lg')]: {
+    order: 2,
+    margin: '1.25rem 0 0',
+  },
+```
+
+you can search material ui responsibility to find more information.

frontend/src/containers/MetricsStepper/style.tsx

@@ -67,18 +67,12 @@ export const SaveButton = styled(Button)({
   ...basicButtonStyle,
   width: '5.4rem',
   color: theme.main.backgroundColor,
-  [theme.breakpoints.down('lg')]: {
-    fontSize: '0.8rem',
-  },
 });
 
 export const BackButton = styled(Button)({
   ...basicButtonStyle,
   width: '5.6rem',
   color: theme.main.backgroundColor,
-  [theme.breakpoints.down('lg')]: {
-    fontSize: '0.8rem',
-  },
 });
 
 export const NextButton = styled(Button)({
@@ -93,12 +87,6 @@ export const NextButton = styled(Button)({
   },
   '&:hover': {
     backgroundColor: theme.main.backgroundColor,
-    [theme.breakpoints.down('lg')]: {
-      fontSize: '0.8rem',
-    },
-  },
-  [theme.breakpoints.down('lg')]: {
-    fontSize: '0.8rem',
   },
 });
 

frontend/src/containers/ReportButtonGroup/style.tsx

@@ -43,15 +43,9 @@ export const StyledExportButton = styled(Button)({
     ...basicButtonStyle,
     backgroundColor: theme.main.backgroundColor,
     color: theme.main.color,
-    [theme.breakpoints.down('lg')]: {
-      fontSize: '0.8rem',
-    },
   },
   '&:disabled': {
     backgroundColor: theme.main.button.disabled.backgroundColor,
     color: theme.main.button.disabled.color,
   },
-  [theme.breakpoints.down('lg')]: {
-    fontSize: '0.8rem',
-  },
 });

frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx

@@ -36,7 +36,7 @@ export const TrendContainer = styled('div')(({ color }: { color: string }) => ({
   display: 'flex',
   alignItems: 'center',
   color: color,
-  marginLeft: '0.5rem',
+  margin: '0 0.5rem',
   fontSize: '1.125rem',
   '&:hover': {
     cursor: 'pointer',

frontend/src/containers/ReportStep/style.tsx

@@ -35,7 +35,7 @@ export const StyledCalendarWrapper = styled('div')((props: { justCalendar: boole
   [theme.breakpoints.down('lg')]: {
     flex: '0',
     order: 1,
-    justifyContent: 'flex-start',
+    flexDirection: 'row-reverse',
     alignSelf: 'auto',
     margin: props.justCalendar ? '0' : '1.25rem 0 0 ',
     position: 'relative',