Merge pull request #497 from IntersectMBO/feat-change-position-of-Ver…

…sion-history-button-and-fix-sign-up-modal feat: Changed No Revisions text, Fixed Footer Position, Displayed full desc if user hovers MembersCard
IntersectMBO · Dec 12, 2024 · 4ec7380 · 4ec7380
2 parents bff3cd6 + 7e11f52
commit 4ec7380
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 31 deletions.
diff --git a/frontend/messages/de.json b/frontend/messages/de.json
@@ -281,15 +281,15 @@
     },
     "constitutionMetadata": {
       "title": "No revisions available",
-      "description": "There are currently no revisions available. Please check back later for updates"
+      "description": "There is only 1 version available. Once there are multiple versions of the constitution, you will be able to compare two versions"
     },
     "governanceAction": {
       "title": "No governance actions available",
       "description": "There are currently no governance actions. Please check back later for updates"
     },
     "versionHistory": {
       "title": "No revisions available",
-      "description": "There are currently no revisions available. Please check back later for updates"
+      "description": "There is only 1 version available. Once there are multiple versions of the constitution, you will be able to compare two versions"
     }
   },
   "Snackbar": {

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -281,15 +281,15 @@
     },
     "constitutionMetadata": {
       "title": "No revisions available",
-      "description": "There are currently no revisions available. Please check back later for updates"
+      "description": "There is only 1 version available. Once there are multiple versions of the constitution, you will be able to compare two versions"
     },
     "governanceAction": {
       "title": "No governance actions available",
       "description": "There are currently no governance actions. Please check back later for updates"
     },
     "versionHistory": {
       "title": "No revisions available",
-      "description": "There are currently no revisions available. Please check back later for updates"
+      "description": "There is only 1 version available. Once there are multiple versions of the constitution, you will be able to compare two versions"
     }
   },
   "Snackbar": {

diff --git a/frontend/src/components/organisms/MembersCard/MembersCard.tsx b/frontend/src/components/organisms/MembersCard/MembersCard.tsx
@@ -12,13 +12,14 @@ export const MembersCard = ({
   name,
   description,
   profile_photo_url,
-  created_at
+  created_at,
 }: Pick<
   UserListItem,
   "name" | "id" | "description" | "created_at" | "profile_photo_url"
 >) => {
   const t = useTranslations("Members");
 
+  const shouldClampText = description?.length > 234;
   return (
     <Box
       display="flex"
@@ -32,30 +33,55 @@ export const MembersCard = ({
         padding: 3,
         paddingBottom: 4,
         maxWidth: "450px",
-        height: "386px"
+        height: "425px",
+        position: "relative",
+        overflow: "hidden",
+        "&:hover .members-photo": {
+          display: shouldClampText && "none",
+        },
+        "&:hover p": {
+          WebkitLineClamp: shouldClampText && "unset",
+          overflow: shouldClampText && "visible",
+        },
       }}
     >
-      <Box>
-        <Box textAlign="center" data-testid="members-photo" pb={3}>
-          <UserAvatar width={100} height={100} src={profile_photo_url} />
-        </Box>
-        <Box textAlign="center" data-testid="members-name" pb={3}>
-          <Typography variant="headline5">{name} </Typography>
+      <Box
+        textAlign="center"
+        pb={4}
+        className="members-photo"
+        data-testid="members-photo"
+      >
+        <UserAvatar width={100} height={100} src={profile_photo_url} />
+      </Box>
+
+      <Box
+        textAlign="center"
+        data-testid="members-name"
+        pb={shouldClampText ? 1 : 3}
+      >
+        <Typography
+          variant="headline5"
+          sx={{
+            paddingBottom: "8px",
+          }}
+        >
+          {name}
+        </Typography>
 
-          <Typography
-            fontWeight={400}
-            variant="body1"
-            sx={{
-              display: "-webkit-box", // Required for line clamping
-              WebkitBoxOrient: "vertical", // Required for line clamping
-              overflow: "hidden", // Hides overflowed text
-              textOverflow: "ellipsis", // Adds ellipsis for overflowed text
-              WebkitLineClamp: 5 // Limits text to a maximum of 5 lines
-            }}
-          >
-            {description}
-          </Typography>
-        </Box>
+        <Typography
+          fontWeight={400}
+          variant="body1"
+          sx={{
+            display: "-webkit-box", // Required for line clamping
+            WebkitBoxOrient: "vertical", // Required for line clamping
+            overflow: "hidden", // Hides overflowed text
+            textOverflow: "ellipsis", // Adds ellipsis for overflowed text
+            WebkitLineClamp: 5, // Limits text to a maximum of 5 lines
+            transition: "all 0.3s ease",
+          }}
+        >
+          {description}
+        </Typography>
       </Box>
 
       <Box
@@ -73,7 +99,7 @@ export const MembersCard = ({
           {t("card.joined")} {formatDisplayDate(created_at)}
         </Typography>
 
-        {/** 
+        {/**
          * temporarily hidden
          * TODO: uncomment and handle button click
          * <Button

diff --git a/frontend/src/components/organisms/NotFound.tsx b/frontend/src/components/organisms/NotFound.tsx
@@ -8,7 +8,7 @@ import { customPalette } from "@/constants";
 export function NotFound({
   title,
   description,
-  height = "70vh",
+  height = "82vh",
   sx,
 }: {
   title: string;
@@ -23,7 +23,7 @@ export function NotFound({
       display="flex"
       justifyContent="center"
       alignItems="center"
-      sx={{ height }}
+      sx={{ height, backgroundColor: customPalette.neutralWhite }}
     >
       <Box
         sx={{
@@ -35,10 +35,18 @@ export function NotFound({
         px={3}
         py={5}
       >
-        <Typography fontWeight={600} variant="title2" data-testid="not-found-title-text">
+        <Typography
+          fontWeight={600}
+          variant="title2"
+          data-testid="not-found-title-text"
+        >
           {t(title)}
         </Typography>
-        <Typography fontWeight={400} variant="body1" data-testid="not-found-description-text">
+        <Typography
+          fontWeight={400}
+          variant="body1"
+          data-testid="not-found-description-text"
+        >
           {t(description)}
         </Typography>
       </Box>