From e3ae5e3c76efc87024faed88e522995167ad58b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Thu, 4 Apr 2024 15:28:05 +0200
Subject: [PATCH 1/2] fix resolutions

---
 .../src/components/organisms/Hero.tsx         | 28 +++++++++++++------
 .../src/components/organisms/HomeCards.tsx    |  2 +-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx
index 6ef7aa1b9..739c80b3f 100644
--- a/govtool/frontend/src/components/organisms/Hero.tsx
+++ b/govtool/frontend/src/components/organisms/Hero.tsx
@@ -32,7 +32,19 @@ export const Hero = () => {
       flexDirection="row"
       overflow="visible"
       position="relative"
-      px={screenWidth < 640 ? 3 : screenWidth < 1512 ? 10 : 14}
+      px={
+        screenWidth < 640
+          ? 3
+          : screenWidth < 1512
+          ? 9.375
+          : screenWidth < 1728
+          ? 14
+          : screenWidth < 1920
+          ? 27.375
+          : screenWidth < 2560
+          ? 39.375
+          : 49.25
+      }
     >
       <Box alignItems="center" flex={1} height="min-content">
         <Typography
@@ -82,13 +94,13 @@ export const Hero = () => {
         flex={1}
         position="absolute"
         right={
-          screenWidth >= 1728
-            ? IMAGE_SIZE / 8
-            : screenWidth >= 1512
-            ? -(IMAGE_SIZE / 12)
-            : screenWidth >= 860
-            ? -(IMAGE_SIZE / 8)
-            : -(IMAGE_SIZE / 4)
+          screenWidth <= 860
+            ? -(IMAGE_SIZE / 4)
+            : screenWidth <= 1440
+            ? -(IMAGE_SIZE / 15)
+            : screenWidth <= 1728
+            ? screenWidth / 20
+            : screenWidth / 11
         }
         top={-80}
         zIndex={-1}
diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
index 8ea58947c..d3316679c 100644
--- 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={

From 0d5449187fc844212435ec7c10ecc10ff590ad25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 5 Apr 2024 10:20:01 +0200
Subject: [PATCH 2/2] replace ternary operator with if statement

---
 .../src/components/organisms/Hero.tsx         | 49 ++++++++-----------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx
index 739c80b3f..e870a5ae9 100644
--- 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,19 +45,7 @@ export const Hero = () => {
       flexDirection="row"
       overflow="visible"
       position="relative"
-      px={
-        screenWidth < 640
-          ? 3
-          : screenWidth < 1512
-          ? 9.375
-          : screenWidth < 1728
-          ? 14
-          : screenWidth < 1920
-          ? 27.375
-          : screenWidth < 2560
-          ? 39.375
-          : 49.25
-      }
+      px={paddingHorizontal}
     >
       <Box alignItems="center" flex={1} height="min-content">
         <Typography
@@ -93,15 +94,7 @@ export const Hero = () => {
       <Box
         flex={1}
         position="absolute"
-        right={
-          screenWidth <= 860
-            ? -(IMAGE_SIZE / 4)
-            : screenWidth <= 1440
-            ? -(IMAGE_SIZE / 15)
-            : screenWidth <= 1728
-            ? screenWidth / 20
-            : screenWidth / 11
-        }
+        right={imageRightMargin}
         top={-80}
         zIndex={-1}
       >