Merge pull request #625 from IntersectMBO/fix/532-home-page-on-2560-a…

…nd-1920-resolutions fix/532-home-page-on-2560-and-1920-resolutions
IntersectMBO · Apr 5, 2024 · aff3fa2 · aff3fa2
2 parents c410b35 + 0d54491
commit aff3fa2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
 import { Box, Link } from "@mui/material";
@@ -17,11 +17,24 @@ export const Hero = () => {
   const { t } = useTranslation();
   const IMAGE_SIZE = screenWidth < 640 ? 300 : screenWidth < 860 ? 400 : 600;
 
-  const onClickVotingPower = useCallback(
-    () =>
-      openInNewTab("https://docs.sanchogov.tools/faqs/what-is-voting-power"),
-    [],
-  );
+  const paddingHorizontal = useMemo(() => {
+    if (screenWidth < 640) return 3;
+    if (screenWidth < 1512) return 9.375;
+    if (screenWidth < 1728) return 14;
+    if (screenWidth < 1920) return 27.375;
+    if (screenWidth < 2560) return 39.375;
+    return 49.25;
+  }, [screenWidth]);
+
+  const imageRightMargin = useMemo(() => {
+    if (screenWidth <= 860) return -(IMAGE_SIZE / 4);
+    if (screenWidth <= 1440) return -(IMAGE_SIZE / 15);
+    if (screenWidth <= 1728) return screenWidth / 20;
+    return screenWidth / 11;
+  }, [screenWidth]);
+
+  const onClickVotingPower = () =>
+    openInNewTab("https://docs.sanchogov.tools/faqs/what-is-voting-power");
 
   return (
     <Box
@@ -32,7 +45,7 @@ export const Hero = () => {
       flexDirection="row"
       overflow="visible"
       position="relative"
-      px={screenWidth < 640 ? 3 : screenWidth < 1512 ? 10 : 14}
+      px={paddingHorizontal}
     >
       <Box alignItems="center" flex={1} height="min-content">
         <Typography
@@ -81,15 +94,7 @@ export const Hero = () => {
       <Box
         flex={1}
         position="absolute"
-        right={
-          screenWidth >= 1728
-            ? IMAGE_SIZE / 8
-            : screenWidth >= 1512
-            ? -(IMAGE_SIZE / 12)
-            : screenWidth >= 860
-            ? -(IMAGE_SIZE / 8)
-            : -(IMAGE_SIZE / 4)
-        }
+        right={imageRightMargin}
         top={-80}
         zIndex={-1}
       >

diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
@@ -60,7 +60,7 @@ export const HomeCards = () => {
           ? "repeat(1, minmax(300px, 866px))"
           : "repeat(2, minmax(300px, 866px))"
       }
-      justifyItems="center"
+      justifyContent="center"
       mb={screenWidth < 640 ? 10 : 17}
       mt={screenWidth < 640 ? 10 : 14.5}
       px={