From 7c3c5eb5e04d69a28eec96bd2e26e037377b7846 Mon Sep 17 00:00:00 2001
From: Mandy <hitangman@qq.com>
Date: Fri, 14 Jun 2024 11:33:48 +0800
Subject: [PATCH] Adm-935 [frontend] adjust some small style for charting
 responsibility 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                            | 34 +++++++++++++++++++
 .../src/containers/MetricsStepper/style.tsx   | 12 -------
 .../containers/ReportButtonGroup/style.tsx    |  6 ----
 .../ReportStep/ChartAndTitleWrapper/style.tsx |  2 +-
 frontend/src/containers/ReportStep/style.tsx  |  2 +-
 5 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index ba358ad251..1f0b77840b 100644
--- a/frontend/README.md
+++ b/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.
diff --git a/frontend/src/containers/MetricsStepper/style.tsx b/frontend/src/containers/MetricsStepper/style.tsx
index 343d5a6641..e8915270b9 100644
--- a/frontend/src/containers/MetricsStepper/style.tsx
+++ b/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',
   },
 });
 
diff --git a/frontend/src/containers/ReportButtonGroup/style.tsx b/frontend/src/containers/ReportButtonGroup/style.tsx
index fda7769c73..deaaac9cd2 100644
--- a/frontend/src/containers/ReportButtonGroup/style.tsx
+++ b/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',
-  },
 });
diff --git a/frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx b/frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx
index a9474105da..25e6f65c09 100644
--- a/frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx
+++ b/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',
diff --git a/frontend/src/containers/ReportStep/style.tsx b/frontend/src/containers/ReportStep/style.tsx
index 37656badd3..3014b93dc6 100644
--- a/frontend/src/containers/ReportStep/style.tsx
+++ b/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',