[#462] [#463] fix cards width and fonts for RWDs

IntersectMBO · Mar 14, 2024 · 5d15dc9 · 5d15dc9
1 parent 318d29d
commit 5d15dc9
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 40 deletions.
diff --git a/govtool/frontend/src/components/atoms/Typography.tsx b/govtool/frontend/src/components/atoms/Typography.tsx
@@ -8,7 +8,7 @@ export const Typography = ({
 }: TypographyProps) => {
   const fontSize = {
     headline1: 100,
-    headline2: 50,
+    headline2: 57,
     headline3: 36,
     headline4: 32,
     headline5: 28,
@@ -21,7 +21,7 @@ export const Typography = ({
 
   const fontWeight = {
     headline1: 600,
-    headline2: 600,
+    headline2: 700,
     headline3: 400,
     headline4: 600,
     headline5: 500,

diff --git a/govtool/frontend/src/components/molecules/ActionCard.tsx b/govtool/frontend/src/components/molecules/ActionCard.tsx
@@ -33,7 +33,7 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
     secondButtonLabel,
     title,
   } = props;
-  const { isMobile, screenWidth } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
 
   const {
     palette: { boxShadow2 },
@@ -52,23 +52,14 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
     >
       <Box display="flex" flexDirection="column" flex={1}>
         {imageURL ? (
-          <img
-            src={imageURL}
-            width={imageWidth}
-            height={imageHeight}
-            style={{
-              alignSelf: screenWidth < 640 ? "center" : "start",
-            }}
-          />
+          <img height={imageHeight} src={imageURL} width={imageWidth} />
         ) : null}
         {title ? (
           <Typography
-            fontWeight={isMobile ? 600 : 500}
             sx={{
-              mt: screenWidth < 640 ? 4 : 2.5,
-              textAlign: screenWidth < 640 ? "center" : "left",
+              mt: 2.5,
             }}
-            variant={isMobile ? "title2" : "headline5"}
+            variant={"headline5"}
           >
             {title}
           </Typography>
@@ -79,9 +70,8 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
             sx={{
               mb: 4.25,
               mt: 1.75,
-              textAlign: screenWidth < 640 ? "center" : "left",
             }}
-            variant={isMobile ? "body2" : "body1"}
+            variant={"body1"}
           >
             {description}
           </Typography>
@@ -103,11 +93,11 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
           data-testid={dataTestIdSecondButton}
           onClick={secondButtonAction}
           sx={{
-            visibility: secondButtonLabel ? "visible" : "hidden",
+            display: !secondButtonLabel && screenWidth < 768 ? "none" : "block",
             ml: screenWidth < 640 ? 0 : 2,
             mt: screenWidth < 640 ? 2 : 0,
+            visibility: secondButtonLabel ? "visible" : "hidden",
             width: screenWidth < 640 ? "100%" : "auto",
-            display: !secondButtonLabel && screenWidth < 768 ? "none" : "block",
           }}
           variant="outlined"
         >

diff --git a/...nd/src/components/organisms/CreateGovernanceActionSteps/ReviewCreatedGovernanceAction.tsx b/...nd/src/components/organisms/CreateGovernanceActionSteps/ReviewCreatedGovernanceAction.tsx
@@ -58,7 +58,7 @@ export const ReviewCreatedGovernanceAction = ({
               {label}
             </Typography>
             <Typography
-              sx={{ mt: 0.5, overflow: "hidden", textOverflow: "ellipsis" }}
+              sx={{ mt: 0.5, wordBreak: "break-word" }}
               variant="body2"
             >
               {value as string}

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -33,7 +33,7 @@ export const DashboardCards = () => {
   const navigate = useNavigate();
   const { currentDelegation, isCurrentDelegationLoading } =
     useGetAdaHolderCurrentDelegationQuery(stakeKey);
-  const { isMobile, screenWidth } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const [isRetirementLoading, setIsRetirementLoading] =
     useState<boolean>(false);
@@ -187,13 +187,12 @@ export const DashboardCards = () => {
   );
 
   const onClickGovernanceActionCardActionButton = useCallback(() => {
-    if(govActionTransaction.transactionHash) {
-      navigate(PATHS.dashboardGovernanceActions)
-      return
+    if (govActionTransaction.transactionHash) {
+      navigate(PATHS.dashboardGovernanceActions);
+      return;
     }
-    navigate(PATHS.createGovernanceAction)
-
-  }, [govActionTransaction.transactionHash, navigate])
+    navigate(PATHS.createGovernanceAction);
+  }, [govActionTransaction.transactionHash, navigate]);
 
   const displayedDelegationId = useMemo(() => {
     const restrictedNames = [
@@ -333,11 +332,12 @@ export const DashboardCards = () => {
         display: "grid",
         gridTemplateColumns:
           screenWidth < 1280
-            ? "1fr"
-            : screenWidth > 1728
-            ? "repeat(3, minmax(300px, 572px))"
-            : "repeat(2, minmax(300px, 572px))",
-        px: isMobile ? 2 : 5,
+            ? "repeat(1, minmax(300px, 530px))"
+            : screenWidth >= 1728
+            ? "repeat(3, minmax(300px, 570px))"
+            : "repeat(2, minmax(300px, 530px))",
+        justifyContent: screenWidth < 1024 ? "center" : "flex-start",
+        px: screenWidth < 640 ? 2 : 5,
         py: 3,
         rowGap: 3,
       }}
@@ -538,9 +538,9 @@ export const DashboardCards = () => {
         firstButtonAction={onClickGovernanceActionCardActionButton}
         firstButtonLabel={t(
           `dashboard.proposeGovernanceAction.${
-             govActionTransaction.transactionHash ? "view" : "propose" 
+            govActionTransaction.transactionHash ? "view" : "propose"
           }`
-          )}
+        )}
         inProgress={!!govActionTransaction.transactionHash}
         secondButtonLabel={t("learnMore")}
         secondButtonAction={() =>

diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx
@@ -38,7 +38,7 @@ export const Hero = () => {
         <Typography
           variant={screenWidth < 860 ? "headline2" : "headline1"}
           sx={{ whiteSpace: "pre-line" }}
-          {...(screenWidth < 375 && { fontSize: 45 })}
+          {...(screenWidth < 430 && { fontSize: 50 })}
         >
           {t("hero.headline")}
         </Typography>

diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
@@ -53,9 +53,13 @@ export const HomeCards = () => {
 
   return (
     <Box
-      columnGap={5}
+      columnGap={4.625}
       display="grid"
-      gridTemplateColumns={screenWidth >= 1920 ? "1fr 1fr" : "1fr"}
+      gridTemplateColumns={
+        screenWidth < 2560
+          ? "repeat(1, minmax(300px, 866px))"
+          : "repeat(2, minmax(300px, 866px))"
+      }
       justifyItems="center"
       mb={screenWidth < 640 ? 10 : 17}
       mt={screenWidth < 640 ? 10 : 14.5}
@@ -68,7 +72,7 @@ export const HomeCards = () => {
           ? 10
           : 34
       }
-      rowGap={5}
+      rowGap={4.625}
     >
       {/* DELEGATE CARD */}
       <ActionCard

diff --git a/govtool/frontend/src/components/organisms/TopNav.tsx b/govtool/frontend/src/components/organisms/TopNav.tsx
@@ -6,9 +6,8 @@ import MenuIcon from "@mui/icons-material/Menu";
 import { Button, Link } from "@atoms";
 import { ICONS, IMAGES, PATHS, NAV_ITEMS } from "@consts";
 import { useCardano, useModal } from "@context";
-import { useScreenDimension } from "@hooks";
+import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
-import { useTranslation } from "@hooks";
 
 import { DrawerMobile } from "./DrawerMobile";
 
@@ -55,6 +54,7 @@ export const TopNav = ({ isConnectButton = true }) => {
               : "transparent",
           borderBottom: isMobile ? 1 : 0,
           borderColor: "lightblue",
+          borderRadius: 0,
           boxShadow: 0,
           justifyContent: "center",
           flex: 1,