[#350] change styles for home page RWD

IntersectMBO · Mar 1, 2024 · a34e630 · a34e630
1 parent 63fc880
commit a34e630
Show file tree

Hide file tree

Showing 7 changed files with 249 additions and 234 deletions.
diff --git a/govtool/frontend/src/components/molecules/ActionCard.tsx b/govtool/frontend/src/components/molecules/ActionCard.tsx
@@ -34,20 +34,21 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
     title,
   } = props;
   const { isMobile, screenWidth } = useScreenDimension();
-  const MOBILE_AND_WIDE_CONDITION = isMobile || screenWidth >= 1920;
 
   const {
     palette: { boxShadow2 },
   } = theme;
 
   return (
     <Box
-      p={4.25}
+      borderRadius={3}
       display="flex"
       flexDirection="column"
       flexGrow={1}
+      maxWidth={798}
+      p={4.25}
       sx={{ boxShadow: `5px 5px 15px 5px ${boxShadow2}` }}
-      borderRadius={3}
+      width="-webkit-fill-available"
     >
       <Box display="flex" flexDirection="column" flex={1}>
         {imageURL ? (
@@ -56,16 +57,16 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
             width={imageWidth}
             height={imageHeight}
             style={{
-              alignSelf: MOBILE_AND_WIDE_CONDITION ? "center" : "start",
+              alignSelf: screenWidth < 640 ? "center" : "start",
             }}
           />
         ) : null}
         {title ? (
           <Typography
             fontWeight={isMobile ? 600 : 500}
             sx={{
-              mt: MOBILE_AND_WIDE_CONDITION ? 4 : 2.5,
-              textAlign: MOBILE_AND_WIDE_CONDITION ? "center" : "left",
+              mt: screenWidth < 640 ? 4 : 2.5,
+              textAlign: screenWidth < 640 ? "center" : "left",
             }}
             variant={isMobile ? "title2" : "headline5"}
           >
@@ -78,24 +79,21 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
             sx={{
               mb: 4.25,
               mt: 1.75,
-              textAlign: MOBILE_AND_WIDE_CONDITION ? "center" : "left",
+              textAlign: screenWidth < 640 ? "center" : "left",
             }}
             variant={isMobile ? "body2" : "body1"}
           >
             {description}
           </Typography>
         ) : null}
       </Box>
-      <Box
-        display="flex"
-        flexDirection={MOBILE_AND_WIDE_CONDITION ? "column" : "row"}
-      >
+      <Box display="flex" flexDirection={screenWidth < 640 ? "column" : "row"}>
         {firstButtonLabel ? (
           <Button
             data-testid={dataTestIdFirstButton}
             onClick={firstButtonAction}
             sx={{
-              width: MOBILE_AND_WIDE_CONDITION ? "100%" : "auto",
+              width: screenWidth < 640 ? "100%" : "auto",
             }}
           >
             {firstButtonLabel}
@@ -106,9 +104,9 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
           onClick={secondButtonAction}
           sx={{
             visibility: secondButtonLabel ? "visible" : "hidden",
-            ml: MOBILE_AND_WIDE_CONDITION ? 0 : 2,
-            mt: MOBILE_AND_WIDE_CONDITION ? 2 : 0,
-            width: MOBILE_AND_WIDE_CONDITION ? "100%" : "auto",
+            ml: screenWidth < 640 ? 0 : 2,
+            mt: screenWidth < 640 ? 2 : 0,
+            width: screenWidth < 640 ? "100%" : "auto",
             display: !secondButtonLabel && screenWidth < 768 ? "none" : "block",
           }}
           variant="outlined"

diff --git a/govtool/frontend/src/components/organisms/DrawerMobile.tsx b/govtool/frontend/src/components/organisms/DrawerMobile.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { Box, Grid, IconButton, SwipeableDrawer } from "@mui/material";
 
-import { Background, Button, Link } from "../atoms";
+import { Background, Button, Link, Typography } from "@atoms";
 import { ICONS, IMAGES, NAV_ITEMS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { useModal } from "@context";
@@ -25,6 +25,9 @@ export const DrawerMobile = ({
   const { openModal } = useModal();
   const { t } = useTranslation();
 
+  const onClickHelp = () =>
+    openInNewTab("https://docs.sanchogov.tools/support/get-help-in-discord");
+
   return (
     <SwipeableDrawer
       anchor="right"
@@ -33,13 +36,21 @@ export const DrawerMobile = ({
       open={isDrawerOpen}
     >
       <Background>
-        <Box px={DRAWER_PADDING}>
+        <Box
+          sx={{
+            display: "flex",
+            flex: 1,
+            flexDirection: "column",
+            px: DRAWER_PADDING,
+          }}
+        >
           <Box
-            display="flex"
-            flex={1}
-            justifyContent="space-between"
-            py={3}
-            width={screenWidth - CALCULATED_DRAWER_PADDING}
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              py: 3,
+              width: screenWidth - CALCULATED_DRAWER_PADDING,
+            }}
           >
             <img height={25} src={IMAGES.appLogo} />
             <IconButton
@@ -65,21 +76,32 @@ export const DrawerMobile = ({
               {t("wallet.connectYourWalletButton")}
             </Button>
           ) : null}
-          <Grid container direction="column" mt={6} rowGap={4}>
-            {NAV_ITEMS.map((navItem) => (
-              <Grid item key={navItem.label}>
-                <Link
-                  {...navItem}
-                  isConnectWallet={isConnectButton}
-                  onClick={() => {
-                    if (navItem.newTabLink) openInNewTab(navItem.newTabLink);
-                    setIsDrawerOpen(false);
-                  }}
-                  size="big"
-                />
-              </Grid>
-            ))}
-          </Grid>
+          <Box sx={{ display: "flex", flex: 1, flexDirection: "column" }}>
+            <Grid container direction="column" mt={6} rowGap={4}>
+              {NAV_ITEMS.map((navItem) => (
+                <Grid item key={navItem.label}>
+                  <Link
+                    {...navItem}
+                    isConnectWallet={isConnectButton}
+                    onClick={() => {
+                      if (navItem.newTabLink) openInNewTab(navItem.newTabLink);
+                      setIsDrawerOpen(false);
+                    }}
+                    size="big"
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          </Box>
+        </Box>
+        <Box
+          onClick={onClickHelp}
+          sx={{ alignItems: "center", display: "flex", p: DRAWER_PADDING }}
+        >
+          <img height={20} src={ICONS.helpIcon} width={20} />
+          <Typography fontWeight={500} sx={{ ml: 1.5 }}>
+            {t("menu.help")}
+          </Typography>
         </Box>
       </Background>
     </SwipeableDrawer>

diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx
@@ -13,18 +13,9 @@ export const Hero = () => {
   const { isEnabled } = useCardano();
   const { openModal } = useModal();
   const navigate = useNavigate();
-  const { isMobile, screenWidth, pagePadding } = useScreenDimension();
+  const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
-  const IMAGE_SIZE =
-    screenWidth < 768
-      ? 140
-      : screenWidth < 1024
-      ? 400
-      : screenWidth < 1440
-      ? 500
-      : screenWidth < 1920
-      ? 600
-      : 720;
+  const IMAGE_SIZE = screenWidth < 640 ? 300 : screenWidth < 860 ? 400 : 600;
 
   const onClickVotingPower = useCallback(
     () =>
@@ -37,15 +28,15 @@ export const Hero = () => {
       alignItems="center"
       display="flex"
       flex={1}
+      marginTop={16}
       flexDirection="row"
-      height={screenWidth < 1024 ? "70vh" : "75vh"}
       overflow="visible"
       position="relative"
-      px={pagePadding}
+      px={screenWidth < 640 ? 3 : screenWidth < 1512 ? 10 : 14}
     >
       <Box alignItems="center" flex={1} height="min-content">
         <Typography
-          variant={screenWidth < 1024 ? "headline2" : "headline1"}
+          variant={screenWidth < 860 ? "headline2" : "headline1"}
           sx={{ whiteSpace: "pre-line" }}
           {...(screenWidth < 375 && { fontSize: 45 })}
         >
@@ -56,16 +47,12 @@ export const Hero = () => {
           sx={{
             maxWidth: 630,
             my: 4,
-            ...(isMobile ? {} : { whiteSpace: "pre-line" }),
+            whiteSpace: "pre-line",
           }}
-          variant={isMobile ? "body2" : "title2"}
+          variant={"title2"}
         >
           <Trans
-            i18nKey={
-              screenWidth < 1024
-                ? "hero.description.mobile"
-                : "hero.description.wide"
-            }
+            i18nKey="hero.description"
             components={[
               <Link
                 data-testid="voting-power-link"
@@ -94,8 +81,16 @@ export const Hero = () => {
       <Box
         flex={1}
         position="absolute"
-        right={isMobile ? -30 : screenWidth < 1920 ? -50 : 50}
-        top={screenWidth < 1024 ? 0 : undefined}
+        right={
+          screenWidth >= 1728
+            ? IMAGE_SIZE / 8
+            : screenWidth >= 1512
+            ? -(IMAGE_SIZE / 12)
+            : screenWidth >= 860
+            ? -(IMAGE_SIZE / 8)
+            : -(IMAGE_SIZE / 4)
+        }
+        top={-80}
         zIndex={-1}
       >
         <img src={IMAGES.heroImage} width={IMAGE_SIZE} height={IMAGE_SIZE} />