Testimonial spacing to allow 2 line attestation title (#2344)

* Testimonial spacing to allow 2 line attestation title

* Opener adjustment. Line clamp on mobile

Author: jonkafton

frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx

@@ -124,14 +124,9 @@ const TestimonialCardQuote = styled.div({
   backgroundColor: theme.custom.colors.white,
   color: theme.custom.colors.black,
   padding: "0 32px 32px",
-  flexDirection: "column",
-  justifyContent: "space-between",
-  alignItems: "flex-start",
-  flex: "1 0 0",
   alignSelf: "stretch",
   alignContent: "center",
   borderRadius: "8px",
-  display: "flex",
   [theme.breakpoints.down("md")]: {
     width: "100%",
     height: "161px",
@@ -145,24 +140,23 @@ const TestimonialCardQuote = styled.div({
     flexGrow: "1",
     ...theme.typography.subtitle1,
   },
+})
 
-  "div.testimonial-quote-opener": {
-    color: theme.custom.colors.mitRed,
-    fontStyle: "normal",
-    fontWeight: theme.typography.fontWeightBold,
-    height: pxToRem(60),
-    width: "100%",
-    fontSize: pxToRem(60),
-    lineHeight: pxToRem(120),
-    [theme.breakpoints.down("md")]: {
-      fontSize: pxToRem(60),
-      fontWeight: theme.typography.fontWeightLight,
-      height: pxToRem(20),
-      lineHeight: "normal",
-      transform: "translateY(-8px)",
-    },
+const TestimonialQuoteOpener = styled.div(({ theme }) => ({
+  color: theme.custom.colors.mitRed,
+  fontStyle: "normal",
+  fontWeight: theme.typography.fontWeightBold,
+  height: pxToRem(56),
+  width: "100%",
+  fontSize: pxToRem(60),
+  lineHeight: pxToRem(108),
+  [theme.breakpoints.down("md")]: {
+    fontWeight: theme.typography.fontWeightLight,
+    height: pxToRem(20),
+    lineHeight: pxToRem(64),
+    transform: "translateY(-8px)",
   },
-})
+}))
 
 const TestimonialFadeLeft = styled.div({
   position: "absolute",
@@ -209,25 +203,28 @@ const ButtonsContainer = styled.div({
 const TestimonialTruncateText = styled(TruncateText)({
   margin: "0px",
   textOverflow: "none",
+  overflow: "hidden",
   ...theme.typography.h4,
   fontSize: pxToRem(20), // This is a unicorn font size per the Figma design - it's not used anywhere else.
   lineHeight: pxToRem(26),
   height: "182px",
   alignContent: "center",
+  marginBottom: "0.75rem",
   [theme.breakpoints.down("md")]: {
     WebkitLineClamp: 7,
     ["@supports (-webkit-line-clamp: 7)"]: {
       WebkitLineClamp: 7,
     },
   },
   [theme.breakpoints.down("sm")]: {
-    height: "224px",
+    height: "208px",
     flexShrink: "0",
     ...theme.typography.subtitle1,
-    WebkitLineClamp: 11,
-    ["@supports (-webkit-line-clamp: 11)"]: {
-      WebkitLineClamp: 11,
+    WebkitLineClamp: 10,
+    ["@supports (-webkit-line-clamp: 10)"]: {
+      WebkitLineClamp: 10,
     },
+    marginBottom: 0,
   },
 })
 
@@ -287,9 +284,9 @@ const SlickCarousel = () => {
                 />
               </TestimonialCardImage>
               <TestimonialCardQuote>
-                <div className="testimonial-quote-opener" aria-hidden>
+                <TestimonialQuoteOpener aria-hidden>
                   &ldquo;
-                </div>
+                </TestimonialQuoteOpener>
                 <TestimonialTruncateText as="blockquote" lineClamp={7}>
                   {resource.quote.slice(0, 350)}
                   {resource.quote.length >= 350 ? "..." : ""}

frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx

@@ -26,102 +26,90 @@ const StyledRiAccountCircleFill = styled(RiAccountCircleFill)({
 })
 
 const AttestantBlockContainer = styled.cite<AttestantBlockChildProps>(
-  (props) => {
-    const flexDir = props.avatarPosition === "end" ? "row-reverse" : "row"
-
-    return [
-      {
-        display: "flex",
-        flexShrink: 0,
-        flexDirection: flexDir,
-        width: props.avatarPosition === "end" ? "100%" : "300px",
-        marginLeft: props.avatarPosition === "end" ? "0px" : "24px",
-        ...theme.typography.body3,
-        [theme.breakpoints.down("sm")]: {
-          width: "100%",
-          height: "56px",
-          marginTop: props.avatarPosition === "end" ? "0px" : "24px",
-          marginLeft: "0px",
-        },
-      },
-    ]
-  },
+  ({ avatarPosition }) => ({
+    display: "flex",
+    flexShrink: 0,
+    flexDirection: avatarPosition === "end" ? "row-reverse" : "row",
+    width: avatarPosition === "end" ? "100%" : "300px",
+    marginLeft: avatarPosition === "end" ? "0px" : "24px",
+    ...theme.typography.body3,
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+      height: "56px",
+      marginTop: avatarPosition === "end" ? "4px" : "24px",
+      marginLeft: "0px",
+    },
+  }),
 )
 
-const AttestantAvatar = styled.div<AttestantBlockChildProps>((props) => {
-  return [
-    {
-      marginRight: props.avatarPosition === "end" ? "0px" : "12px",
-      marginLeft: props.avatarPosition === "end" ? "14px" : "0px",
-      img: {
-        objectFit: "cover",
-        borderRadius: "50%",
-        background: theme.custom.colors.white,
-        width: "40px",
-        height: "40px",
-        boxShadow:
-          "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 2px 4px 0px rgba(37, 38, 43, 0.10)",
-      },
-      [theme.breakpoints.down("sm")]: {
-        display: props.avatarStyle === "homepage" ? "none" : "block",
-      },
+const AttestantAvatar = styled.div<AttestantBlockChildProps>(
+  ({ avatarPosition, avatarStyle }) => ({
+    marginRight: avatarPosition === "end" ? "0px" : "12px",
+    marginLeft: avatarPosition === "end" ? "14px" : "0px",
+    display: "flex",
+    alignItems: "center",
+    img: {
+      objectFit: "cover",
+      borderRadius: "50%",
+      background: theme.custom.colors.white,
+      width: "40px",
+      height: "40px",
+      boxShadow:
+        "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 2px 4px 0px rgba(37, 38, 43, 0.10)",
     },
-  ]
-})
-
-const AttestantNameBlock = styled.div<AttestantBlockChildProps>((props) => {
-  return [
-    {
-      flexGrow: "1",
-      width: "auto",
-      textAlign: props.avatarPosition === "end" ? "end" : "start",
-      color:
-        props.color === "light"
-          ? theme.custom.colors.lightGray2
-          : theme.custom.colors.silverGrayDark,
+    [theme.breakpoints.down("sm")]: {
+      display: avatarStyle === "homepage" ? "none" : "block",
     },
-  ]
-})
+  }),
+)
+
+const AttestantNameBlock = styled.div<AttestantBlockChildProps>(
+  ({ avatarPosition, color }) => ({
+    flexGrow: "1",
+    width: "auto",
+    textAlign: avatarPosition === "end" ? "end" : "start",
+    color:
+      color === "light"
+        ? theme.custom.colors.lightGray2
+        : theme.custom.colors.silverGrayDark,
+  }),
+)
 
-const AttestantName = styled.div<AttestantBlockChildProps>((props) => {
-  const desktopFont =
-    props.variant === "standard"
-      ? theme.typography.h5
-      : theme.typography.subtitle1
-  return [
-    {
+const AttestantName = styled.div<AttestantBlockChildProps>(
+  ({ variant, color }) => {
+    const desktopFont =
+      variant === "standard" ? theme.typography.h5 : theme.typography.subtitle1
+    return {
       ...desktopFont,
       whiteSpace: "nowrap",
       color:
-        props.color === "light"
+        color === "light"
           ? theme.custom.colors.white
           : theme.custom.colors.darkGray2,
       lineHeight: "125%",
       [theme.breakpoints.down("sm")]: {
         ...theme.typography.subtitle1,
       },
-    },
-  ]
-})
+    }
+  },
+)
 
-const AttestantTitle = styled.div<AttestantBlockChildProps>((props) => {
-  const desktopFont =
-    props.variant === "standard"
-      ? theme.typography.body1
-      : theme.typography.body3
-  return [
-    {
+const AttestantTitle = styled.div<AttestantBlockChildProps>(
+  ({ variant, color }) => {
+    const desktopFont =
+      variant === "standard" ? theme.typography.body1 : theme.typography.body3
+    return {
       ...desktopFont,
       color:
-        props.color === "light"
+        color === "light"
           ? theme.custom.colors.lightGray2
           : theme.custom.colors.silverGrayDark,
       [theme.breakpoints.down("sm")]: {
         ...theme.typography.body2,
       },
-    },
-  ]
-})
+    }
+  },
+)
 
 const AttestantBlock: React.FC<AttestantBlockProps> = ({
   attestation,