From 625794f0767582b7480278bc9a566318c0c4a85f Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Mon, 16 Sep 2024 16:32:30 -0400 Subject: [PATCH 1/7] fix header font and layout --- .../src/pages/HomePage/TestimonialsSection.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx index f9b58f5d90..30043d0d73 100644 --- a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx +++ b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx @@ -17,6 +17,17 @@ import AttestantBlock from "@/page-components/TestimonialDisplay/AttestantBlock" const MARKETING_IMAGE_IDX = _.shuffle([1, 2, 3, 4, 5, 6]) +const HeaderContainer = styled(Container)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + alignItems: "center", + gap: "8px", + paddingBottom: "60px", + [theme.breakpoints.down("md")]: { + paddingBottom: "28px", + }, +})) + const Section = styled.section(({ theme }) => ({ backgroundColor: theme.custom.colors.mitRed, color: theme.custom.colors.white, @@ -296,15 +307,15 @@ const SlickCarousel = () => { const TestimonialsSection: React.FC = () => { return (
- + From Our Community - + Millions of learners are reaching their goals with MIT's non-degree learning resources. Here's what they're saying. - +
) From 59699dca562705354f566f38e78805433b19186a Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Mon, 16 Sep 2024 16:37:10 -0400 Subject: [PATCH 2/7] fix attestant name and title section fonts --- .../TestimonialDisplay/AttestantBlock.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx b/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx index 9033a150cb..16e4849ec5 100644 --- a/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx +++ b/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx @@ -85,7 +85,7 @@ const AttestantNameBlock = styled.div((props) => { const AttestantName = styled.div((props) => { return [ { - ...theme.typography.subtitle1, + ...theme.typography.h5, whiteSpace: "nowrap", color: props.color === "light" @@ -96,6 +96,18 @@ const AttestantName = styled.div((props) => { ] }) +const AttestantTitle = styled.div((props) => { + return [ + { + ...theme.typography.body1, + color: + props.color === "light" + ? theme.custom.colors.lightGray2 + : theme.custom.colors.silverGrayDark, + }, + ] +}) + const AttestantBlock: React.FC = ({ attestation, variant = "start", @@ -115,7 +127,9 @@ const AttestantBlock: React.FC = ({ {attestation?.attestant_name} - {attestation.title} + + {attestation.title} + ) From 610180ec1d78646ccd7064b85de3970e3c399d1c Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Mon, 16 Sep 2024 16:56:17 -0400 Subject: [PATCH 3/7] set attestant name and title mobile font sizes --- .../page-components/TestimonialDisplay/AttestantBlock.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx b/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx index 16e4849ec5..4fa0cc5b6c 100644 --- a/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx +++ b/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx @@ -92,6 +92,9 @@ const AttestantName = styled.div((props) => { ? theme.custom.colors.white : theme.custom.colors.darkGray2, lineHeight: "125%", + [theme.breakpoints.down("sm")]: { + ...theme.typography.subtitle1, + }, }, ] }) @@ -104,6 +107,9 @@ const AttestantTitle = styled.div((props) => { props.color === "light" ? theme.custom.colors.lightGray2 : theme.custom.colors.silverGrayDark, + [theme.breakpoints.down("sm")]: { + ...theme.typography.body2, + }, }, ] }) From d0506e9f6e12b280dbd77954821ec977640745fc Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Tue, 17 Sep 2024 11:39:52 -0400 Subject: [PATCH 4/7] silence the hamsters --- frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx index 30043d0d73..912ee7ac62 100644 --- a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx +++ b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx @@ -307,7 +307,7 @@ const SlickCarousel = () => { const TestimonialsSection: React.FC = () => { return (
- + From Our Community From 3f67c1b31dac00dab738f2f924e9205eeed1f534 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Tue, 17 Sep 2024 11:47:10 -0400 Subject: [PATCH 5/7] responsive typography for homepage testimonial section sub header --- frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx index 912ee7ac62..0bdf0c9b13 100644 --- a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx +++ b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx @@ -308,7 +308,7 @@ const TestimonialsSection: React.FC = () => { return (
- + From Our Community From 1f4151c589d2e486e3752412cbaf8db719a3244c Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Tue, 17 Sep 2024 13:36:50 -0400 Subject: [PATCH 6/7] change variant to represent standard vs condensed size, use condensed on unit pages --- .../TestimonialDisplay/AttestantBlock.tsx | 59 ++++++++++++------- .../TestimonialDisplay/TestimonialDisplay.tsx | 12 +++- .../pages/ChannelPage/UnitChannelTemplate.tsx | 2 +- .../pages/HomePage/TestimonialsSection.tsx | 4 +- 4 files changed, 53 insertions(+), 24 deletions(-) diff --git a/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx b/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx index 4fa0cc5b6c..30b4d1086d 100644 --- a/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx +++ b/frontends/mit-learn/src/page-components/TestimonialDisplay/AttestantBlock.tsx @@ -5,14 +5,16 @@ import { RiAccountCircleFill } from "@remixicon/react" import { TruncateText, styled, theme } from "ol-components" import type { Attestation } from "api/v0" -type AttestantBlockVariant = "start" | "end" +type AttestantAvatarPosition = "start" | "end" type AttestantBlockColor = "light" | "dark" type AttestantAvatarStyle = "homepage" | "unit" +type AttestantBlockVariant = "standard" | "condensed" type AttestantBlockChildProps = { - variant?: AttestantBlockVariant + avatarPosition?: AttestantAvatarPosition + avatarStyle?: AttestantAvatarStyle color?: AttestantBlockColor - avatar?: AttestantAvatarStyle + variant?: AttestantBlockVariant } type AttestantBlockProps = AttestantBlockChildProps & { @@ -26,20 +28,20 @@ const StyledRiAccountCircleFill = styled(RiAccountCircleFill)({ const AttestantBlockContainer = styled.cite( (props) => { - const flexDir = props.variant === "end" ? "row-reverse" : "row" + const flexDir = props.avatarPosition === "end" ? "row-reverse" : "row" return [ { display: "flex", flexShrink: 0, flexDirection: flexDir, - width: props.variant === "end" ? "100%" : "300px", - marginLeft: props.variant === "end" ? "0px" : "24px", + 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.variant === "end" ? "0px" : "24px", + marginTop: props.avatarPosition === "end" ? "0px" : "24px", marginLeft: "0px", }, }, @@ -50,8 +52,8 @@ const AttestantBlockContainer = styled.cite( const AttestantAvatar = styled.div((props) => { return [ { - marginRight: props.variant === "end" ? "0px" : "12px", - marginLeft: props.variant === "end" ? "14px" : "0px", + marginRight: props.avatarPosition === "end" ? "0px" : "12px", + marginLeft: props.avatarPosition === "end" ? "14px" : "0px", img: { objectFit: "cover", borderRadius: "50%", @@ -62,7 +64,7 @@ const AttestantAvatar = styled.div((props) => { "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.avatar === "homepage" ? "none" : "block", + display: props.avatarStyle === "homepage" ? "none" : "block", }, }, ] @@ -73,7 +75,7 @@ const AttestantNameBlock = styled.div((props) => { { flexGrow: "1", width: "auto", - textAlign: props.variant === "end" ? "end" : "start", + textAlign: props.avatarPosition === "end" ? "end" : "start", color: props.color === "light" ? theme.custom.colors.lightGray2 @@ -83,9 +85,13 @@ const AttestantNameBlock = styled.div((props) => { }) const AttestantName = styled.div((props) => { + const desktopFont = + props.variant === "standard" + ? theme.typography.h5 + : theme.typography.subtitle1 return [ { - ...theme.typography.h5, + ...desktopFont, whiteSpace: "nowrap", color: props.color === "light" @@ -100,9 +106,13 @@ const AttestantName = styled.div((props) => { }) const AttestantTitle = styled.div((props) => { + const desktopFont = + props.variant === "standard" + ? theme.typography.body1 + : theme.typography.body3 return [ { - ...theme.typography.body1, + ...desktopFont, color: props.color === "light" ? theme.custom.colors.lightGray2 @@ -116,24 +126,33 @@ const AttestantTitle = styled.div((props) => { const AttestantBlock: React.FC = ({ attestation, - variant = "start", + avatarPosition = "start", + avatarStyle: avatar = "unit", color = "light", - avatar = "unit", + variant = "standard", }) => { return ( - - + + {attestation.avatar_medium ? ( ) : ( )} - - + + {attestation?.attestant_name} - + {attestation.title} diff --git a/frontends/mit-learn/src/page-components/TestimonialDisplay/TestimonialDisplay.tsx b/frontends/mit-learn/src/page-components/TestimonialDisplay/TestimonialDisplay.tsx index bfb17703df..d7cd8c8609 100644 --- a/frontends/mit-learn/src/page-components/TestimonialDisplay/TestimonialDisplay.tsx +++ b/frontends/mit-learn/src/page-components/TestimonialDisplay/TestimonialDisplay.tsx @@ -16,10 +16,12 @@ import type { Attestation } from "api/v0" type TestimonialDisplayProps = { channels?: number[] offerors?: string[] + variant?: "standard" | "condensed" } type InternalTestimonialDisplayProps = { attestation: Attestation + variant?: "standard" | "condensed" } const TestimonialTruncateText = styled(TruncateText)({ @@ -110,6 +112,7 @@ const NoButtonsContainer = styled(ButtonsContainer)({ const InteriorTestimonialDisplay: React.FC = ({ attestation, + variant = "standard", }) => { return ( @@ -119,7 +122,11 @@ const InteriorTestimonialDisplay: React.FC = ({ {attestation?.quote.length >= 350 ? "..." : null} - + ) } @@ -127,6 +134,7 @@ const InteriorTestimonialDisplay: React.FC = ({ const TestimonialDisplay: React.FC = ({ channels, offerors, + variant = "standard", }) => { const { data } = useTestimonialList({ channels: channels, @@ -165,6 +173,7 @@ const TestimonialDisplay: React.FC = ({ ))} @@ -192,6 +201,7 @@ const TestimonialDisplay: React.FC = ({ diff --git a/frontends/mit-learn/src/pages/ChannelPage/UnitChannelTemplate.tsx b/frontends/mit-learn/src/pages/ChannelPage/UnitChannelTemplate.tsx index eeb699533b..3b42d65cbf 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/UnitChannelTemplate.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/UnitChannelTemplate.tsx @@ -193,7 +193,7 @@ const UnitChannelTemplate: React.FC = ({
What Learners Say - +
{children} diff --git a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx index 0bdf0c9b13..723821838d 100644 --- a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx +++ b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx @@ -273,9 +273,9 @@ const SlickCarousel = () => { From 50add0b23aad03a3dab0ec7e07980c946efd9527 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Tue, 17 Sep 2024 16:43:35 -0400 Subject: [PATCH 7/7] text align center --- frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx index 723821838d..4cd56ba530 100644 --- a/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx +++ b/frontends/mit-learn/src/pages/HomePage/TestimonialsSection.tsx @@ -21,6 +21,7 @@ const HeaderContainer = styled(Container)(({ theme }) => ({ display: "flex", flexDirection: "column", alignItems: "center", + textAlign: "center", gap: "8px", paddingBottom: "60px", [theme.breakpoints.down("md")]: {