Mobile UI update for Emotion page

hkbus · Feb 27, 2024 · 0b38d1f · 0b38d1f
1 parent 5b5ef42
commit 0b38d1f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/components/emotion/CheckIn.tsx b/src/components/emotion/CheckIn.tsx
@@ -48,7 +48,7 @@ const CheckIn = ({ onFinish }: CheckInProps) => {
   return (
     <Box sx={rootSx}>
       <Box sx={questionContainerSx}>
-        <Typography variant="h6" alignSelf="flex-start" textAlign="start">
+        <Typography variant="body1" alignSelf="flex-start" textAlign="start">
           1. {t("How happy were you in the past 24 hours?")}
         </Typography>
         <ToggleButtonGroup
@@ -59,13 +59,13 @@ const CheckIn = ({ onFinish }: CheckInProps) => {
         >
           {CheckInOptions.happiness.map((v, idx) => (
             <ToggleButton value={v} key={`happiness-${idx}`}>
-              <Typography variant="h4">{v}</Typography>
+              <Typography variant="h6">{v}</Typography>
             </ToggleButton>
           ))}
         </ToggleButtonGroup>
       </Box>
       <Box sx={questionContainerSx}>
-        <Typography variant="h6" alignSelf="flex-start" textAlign="start">
+        <Typography variant="body1" alignSelf="flex-start" textAlign="start">
           2.{" "}
           {t(
             "What environment made you feel most profound in the past 24 hours?"
@@ -90,7 +90,7 @@ const CheckIn = ({ onFinish }: CheckInProps) => {
         </ToggleButtonGroup>
       </Box>
       <Box sx={questionContainerSx}>
-        <Typography variant="h6" alignSelf="flex-start" textAlign="start">
+        <Typography variant="body1" alignSelf="flex-start" textAlign="start">
           3. {t("What are you most grateful for in the past 24 hours?")}
         </Typography>
         <ToggleButtonGroup
@@ -132,7 +132,7 @@ const rootSx: SxProps<Theme> = {
   alignItems: "center",
   flex: 1,
   gap: 4,
-  pt: 2,
+  p: 2,
 };
 
 const questionContainerSx: SxProps<Theme> = {

diff --git a/src/components/emotion/EmotionChart.tsx b/src/components/emotion/EmotionChart.tsx
@@ -30,7 +30,7 @@ const EmotionChart = () => {
 
   return (
     <Box sx={rootSx}>
-      <Typography variant="h5">{t("In the past 4 weeks, ...")}</Typography>
+      <Typography variant="body1">{t("In the past 4 weeks, ...")}</Typography>
       <Plot
         data={[
           {
@@ -45,7 +45,7 @@ const EmotionChart = () => {
           },
         ]}
         layout={{
-          width: 440,
+          width: 380,
           height: 340,
           title: t("How happy were you?"),
           annotations: [
@@ -62,6 +62,7 @@ const EmotionChart = () => {
             },
           ],
         }}
+        config={{ displayModeBar: false }}
       />
       <Plot
         data={[
@@ -77,7 +78,7 @@ const EmotionChart = () => {
           },
         ]}
         layout={{
-          width: 440,
+          width: 380,
           height: 340,
           title: t("What environment made you feel most profound?"),
           annotations: [
@@ -96,6 +97,7 @@ const EmotionChart = () => {
             },
           ],
         }}
+        config={{ displayModeBar: false }}
       />
       <Plot
         data={[
@@ -111,7 +113,7 @@ const EmotionChart = () => {
           },
         ]}
         layout={{
-          width: 440,
+          width: 380,
           height: 340,
           title: t("What are you most grateful for?"),
           annotations: [
@@ -132,6 +134,7 @@ const EmotionChart = () => {
             },
           ],
         }}
+        config={{ displayModeBar: false }}
       />
     </Box>
   );
@@ -145,5 +148,5 @@ const rootSx: SxProps<Theme> = {
   alignItems: "start",
   flex: 1,
   gap: 4,
-  pt: 2,
+  p: 2,
 };