From 30d2020982530baf489eff649c915aea6e5eb967 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 13:02:11 -0400 Subject: [PATCH 01/15] adding success variant --- .../src/components/Button/Button.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/frontends/ol-components/src/components/Button/Button.tsx b/frontends/ol-components/src/components/Button/Button.tsx index ac88f0db5d..641e264f18 100644 --- a/frontends/ol-components/src/components/Button/Button.tsx +++ b/frontends/ol-components/src/components/Button/Button.tsx @@ -12,6 +12,7 @@ type ButtonVariant = | "text" | "noBorder" | "inverted" + | "success" type ButtonSize = "small" | "medium" | "large" type ButtonEdge = "circular" | "rounded" | "none" @@ -127,6 +128,27 @@ const ButtonStyled = styled.button((props) => { borderColor: "currentcolor", borderStyle: "solid", }, + variant === "success" && { + backgroundColor: colors.darkGreen, + color: colors.white, + border: "none", + /* Shadow/04dp */ + boxShadow: + "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 3px 8px 0px rgba(37, 38, 43, 0.12)", + ":hover:not(:disabled)": { + backgroundColor: colors.darkGreen, + boxShadow: "none", + }, + ":disabled": { + backgroundColor: colors.silverGray, + boxShadow: "none", + }, + }, + hasBorder && { + backgroundColor: "transparent", + borderColor: "currentcolor", + borderStyle: "solid", + }, variant === "secondary" && { color: colors.red, ":hover:not(:disabled)": { From d5ad9ead51c0802c292b5347d55bb6c0f72a4708 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 13:29:55 -0400 Subject: [PATCH 02/15] adding working version --- .../FollowPopover/FollowPopover.test.tsx | 23 +++ .../FollowPopover/FollowPopover.tsx | 136 ++++++++++++++++++ .../SearchSubscriptionToggle.tsx | 66 ++++----- 3 files changed, 190 insertions(+), 35 deletions(-) create mode 100644 frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx create mode 100644 frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx new file mode 100644 index 0000000000..dc58a9c1be --- /dev/null +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx @@ -0,0 +1,23 @@ +import React from "react" +import { FollowPopover } from "./FollowPopover" +import { renderWithProviders, screen, within } from "@/test-utils" +import invariant from "tiny-invariant" +import * as urls from "@/common/urls" + +test("FollowPopover shows link to sign up", async () => { + renderWithProviders( + , + { + url: "/some-path?dog=woof", + }, + ) + const dialog = screen.getByRole("dialog") + const link = within(dialog).getByRole("link") + invariant(link instanceof HTMLAnchorElement) + expect(link.href).toMatch( + urls.login({ + pathname: "/some-path", + search: "?dog=woof", + }), + ) +}) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx new file mode 100644 index 0000000000..18e7eb7fe1 --- /dev/null +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -0,0 +1,136 @@ +import React, { useMemo } from "react" +import { Popover, Typography, styled, ButtonLink, Button } from "ol-components" +import type { PopoverProps } from "ol-components" +import { getSearchParamMap } from "@/common/utils" +import * as urls from "@/common/urls" +import { useLocation } from "react-router" +import { useUserMe } from "api/hooks/user" +import { SourceTypeEnum } from "api" +import { + useSearchSubscriptionCreate, + useSearchSubscriptionDelete, + useSearchSubscriptionList, +} from "api/hooks/searchSubscription" + +const StyledPopover = styled(Popover)({ + width: "300px", + maxWidth: "100vw", +}) +const HeaderText = styled(Typography)(({ theme }) => ({ + color: theme.custom.colors.darkGray2, + marginBottom: "8px", +})) +const BodyText = styled(Typography)(({ theme }) => ({ + color: theme.custom.colors.silverGrayDark, + marginBottom: "16px", +})) + +const Footer = styled.div({ + display: "flex", + justifyContent: "end", +}) + +interface FollowPopoverProps extends PopoverProps { + itemName?: string + searchParams: URLSearchParams + sourceType: SourceTypeEnum +} + +const FollowPopover: React.FC = ({ + itemName, + searchParams, + sourceType, + ...props +}) => { + const { data: user } = useUserMe() + const subscribeParams: Record = useMemo(() => { + return { source_type: sourceType, ...getSearchParamMap(searchParams) } + }, [searchParams, sourceType]) + + const loc = useLocation() + const subscriptionDelete = useSearchSubscriptionDelete() + const subscriptionCreate = useSearchSubscriptionCreate() + const subscriptionList = useSearchSubscriptionList(subscribeParams, { + enabled: !!user?.is_authenticated, + }) + const unsubscribe = subscriptionDelete.mutate + const subscriptionId = subscriptionList.data?.[0]?.id + + const isSubscribed = !!subscriptionId + const handleFollowAction = async (): Promise => { + if (!isSubscribed) { + await subscriptionCreate.mutateAsync({ + PercolateQuerySubscriptionRequestRequest: subscribeParams, + }) + } else { + unsubscribe(subscriptionId) + } + props.onClose() + } + + if (user?.is_authenticated && subscriptionList.isLoading) return null + if (!user) return null + if (!user?.is_authenticated) { + return ( + + + Join {APP_SETTINGS.SITE_NAME} for free. + + + As a member, get personalized recommendations, curate learning lists, + and follow your areas of interest. + +
+ + Sign Up + +
+ + ) + } + + if (isSubscribed) { + return ( + <> + + + You are following {itemName} + + + Unfollow to stop getting emails for new X courses + +
+ + +
+ + + ) + } + return ( + <> + + Follow {itemName}? + + You will get an email when new courses are available + +
+ + +
+ + + ) +} + +export { FollowPopover } +export type { FollowPopoverProps } diff --git a/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx b/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx index b80f87e884..fad5002758 100644 --- a/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx +++ b/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx @@ -1,16 +1,15 @@ -import React, { useState, useMemo } from "react" +import React, { useMemo } from "react" import { getSearchParamMap } from "@/common/utils" import { useSearchSubscriptionCreate, - useSearchSubscriptionDelete, useSearchSubscriptionList, } from "api/hooks/searchSubscription" -import { Button, SimpleMenu, styled } from "ol-components" -import type { SimpleMenuItem } from "ol-components" -import { RiArrowDownSLine, RiMailLine } from "@remixicon/react" +import { Button, styled } from "ol-components" + +import { RiMailLine } from "@remixicon/react" import { useUserMe } from "api/hooks/user" import { SourceTypeEnum } from "api" -import { SignupPopover } from "../SignupPopover/SignupPopover" +import { FollowPopover } from "../FollowPopover/FollowPopover" const StyledButton = styled(Button)({ minWidth: "130px", @@ -23,6 +22,7 @@ type SearchSubscriptionToggleProps = { } const SearchSubscriptionToggle: React.FC = ({ + itemName, searchParams, sourceType, }) => { @@ -33,35 +33,17 @@ const SearchSubscriptionToggle: React.FC = ({ }, [searchParams, sourceType]) const { data: user } = useUserMe() - const subscriptionDelete = useSearchSubscriptionDelete() + const subscriptionCreate = useSearchSubscriptionCreate() const subscriptionList = useSearchSubscriptionList(subscribeParams, { enabled: !!user?.is_authenticated, }) - const unsubscribe = subscriptionDelete.mutate const subscriptionId = subscriptionList.data?.[0]?.id const isSubscribed = !!subscriptionId - const unsubscribeItems: SimpleMenuItem[] = useMemo(() => { - if (!subscriptionId) return [] - return [ - { - key: "unsubscribe", - label: "Unfollow", - onClick: () => unsubscribe(subscriptionId), - }, - ] - }, [unsubscribe, subscriptionId]) - const onFollowClick = async (event: React.MouseEvent) => { - if (user?.is_authenticated) { - await subscriptionCreate.mutateAsync({ - PercolateQuerySubscriptionRequestRequest: subscribeParams, - }) - } else { - setButtonEl(event.currentTarget) - } + setButtonEl(event.currentTarget) } if (user?.is_authenticated && subscriptionList.isLoading) return null @@ -69,14 +51,22 @@ const SearchSubscriptionToggle: React.FC = ({ if (isSubscribed) { return ( - }> - Following - - } - items={unsubscribeItems} - /> + <> + } + > + Following + + setButtonEl(null)} + /> + ) } @@ -90,7 +80,13 @@ const SearchSubscriptionToggle: React.FC = ({ > Follow - setButtonEl(null)} /> + setButtonEl(null)} + /> ) } From 9633f48bf7bc6933f0bc08b975c05a8229f361dd Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 13:30:48 -0400 Subject: [PATCH 03/15] adding working version --- .../SearchSubscriptionToggle/SearchSubscriptionToggle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx b/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx index fad5002758..503b1f4cc4 100644 --- a/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx +++ b/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react" +import React, { useState, useMemo } from "react" import { getSearchParamMap } from "@/common/utils" import { useSearchSubscriptionCreate, From 2740056f72d98912bcec727dc189d3edec801fc7 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 13:36:51 -0400 Subject: [PATCH 04/15] fixing text and adding margin to buttons --- .../FollowPopover/FollowPopover.tsx | 32 +++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index 18e7eb7fe1..d51320e86d 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -30,6 +30,16 @@ const Footer = styled.div({ justifyContent: "end", }) +const ButtonsContainer = styled.div(({ theme }) => ({ + display: "flex", + justifyContent: "right", + margin: "4px auto 0", + gap: "16px", + [theme.breakpoints.down("sm")]: { + marginTop: "16px", + }, +})) + interface FollowPopoverProps extends PopoverProps { itemName?: string searchParams: URLSearchParams @@ -102,13 +112,15 @@ const FollowPopover: React.FC = ({ You are following {itemName} - Unfollow to stop getting emails for new X courses + Unfollow to stop getting emails for new {itemName} courses
- - + + + +
@@ -122,10 +134,12 @@ const FollowPopover: React.FC = ({ You will get an email when new courses are available
- - + + + +
From f6aff52a2e5c0d76a3c8c3c6501ee8cbaa0a97f4 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 13:45:49 -0400 Subject: [PATCH 05/15] lint fixes --- .../src/page-components/FollowPopover/FollowPopover.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index d51320e86d..743cdde472 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -40,7 +40,8 @@ const ButtonsContainer = styled.div(({ theme }) => ({ }, })) -interface FollowPopoverProps extends PopoverProps { +interface FollowPopoverProps + extends Pick { itemName?: string searchParams: URLSearchParams sourceType: SourceTypeEnum From b08c003a3b20c370219b85f6800417336b0e55d2 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 14:21:22 -0400 Subject: [PATCH 06/15] lint fix --- .../page-components/FollowPopover/FollowPopover.test.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx index dc58a9c1be..6c16103fec 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx @@ -3,10 +3,16 @@ import { FollowPopover } from "./FollowPopover" import { renderWithProviders, screen, within } from "@/test-utils" import invariant from "tiny-invariant" import * as urls from "@/common/urls" +import { SourceTypeEnum } from "api" test("FollowPopover shows link to sign up", async () => { renderWithProviders( - , + , { url: "/some-path?dog=woof", }, From 4ad3c0d5437207a18af7d44ea5e4701e428ca333 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 15:08:58 -0400 Subject: [PATCH 07/15] fixing test cases --- .../page-components/FollowPopover/FollowPopover.tsx | 10 ++++++++-- .../SearchSubscriptionToggle.test.tsx | 7 +++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index 743cdde472..75bc865a0b 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -117,7 +117,11 @@ const FollowPopover: React.FC = ({
- @@ -139,7 +143,9 @@ const FollowPopover: React.FC = ({ - +
diff --git a/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.test.tsx b/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.test.tsx index c3116e8a82..844e36e2eb 100644 --- a/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.test.tsx +++ b/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.test.tsx @@ -79,6 +79,8 @@ test.each(Object.values(SourceTypeEnum))( }) await user.click(subscribeButton) + const followButton = screen.getByTestId("action-follow") + await user.click(followButton) expect(makeRequest).toHaveBeenCalledWith("post", subscribeUrl, { source_type: sourceType, offered_by: ["ocw"], @@ -111,11 +113,8 @@ test.each(Object.values(SourceTypeEnum))( }) await user.click(subscribedButton) + const unsubscribeButton = screen.getByTestId("action-unfollow") - const menu = screen.getByRole("menu") - const unsubscribeButton = within(menu).getByRole("menuitem", { - name: "Unfollow", - }) await user.click(unsubscribeButton) expect(makeRequest).toHaveBeenCalledWith( From 9080e34f86ce048cc53532621184ac506abdde0c Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 15:10:39 -0400 Subject: [PATCH 08/15] closing popup before posting data --- .../src/page-components/FollowPopover/FollowPopover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index 75bc865a0b..1395118566 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -69,6 +69,7 @@ const FollowPopover: React.FC = ({ const isSubscribed = !!subscriptionId const handleFollowAction = async (): Promise => { + props.onClose() if (!isSubscribed) { await subscriptionCreate.mutateAsync({ PercolateQuerySubscriptionRequestRequest: subscribeParams, @@ -76,7 +77,6 @@ const FollowPopover: React.FC = ({ } else { unsubscribe(subscriptionId) } - props.onClose() } if (user?.is_authenticated && subscriptionList.isLoading) return null From 890820bd143e2fb4ce9c5a9cae1231230eb59268 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 15:22:06 -0400 Subject: [PATCH 09/15] removing redundancy --- .../FollowPopover/FollowPopover.tsx | 73 +++++-------------- 1 file changed, 20 insertions(+), 53 deletions(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index 1395118566..672577c87a 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -1,9 +1,10 @@ import React, { useMemo } from "react" -import { Popover, Typography, styled, ButtonLink, Button } from "ol-components" +import { Popover, Typography, styled, Button } from "ol-components" import type { PopoverProps } from "ol-components" import { getSearchParamMap } from "@/common/utils" -import * as urls from "@/common/urls" -import { useLocation } from "react-router" + +import { SignupPopover } from "../SignupPopover/SignupPopover" + import { useUserMe } from "api/hooks/user" import { SourceTypeEnum } from "api" import { @@ -28,17 +29,8 @@ const BodyText = styled(Typography)(({ theme }) => ({ const Footer = styled.div({ display: "flex", justifyContent: "end", -}) - -const ButtonsContainer = styled.div(({ theme }) => ({ - display: "flex", - justifyContent: "right", - margin: "4px auto 0", gap: "16px", - [theme.breakpoints.down("sm")]: { - marginTop: "16px", - }, -})) +}) interface FollowPopoverProps extends Pick { @@ -58,7 +50,6 @@ const FollowPopover: React.FC = ({ return { source_type: sourceType, ...getSearchParamMap(searchParams) } }, [searchParams, sourceType]) - const loc = useLocation() const subscriptionDelete = useSearchSubscriptionDelete() const subscriptionCreate = useSearchSubscriptionCreate() const subscriptionList = useSearchSubscriptionList(subscribeParams, { @@ -82,27 +73,7 @@ const FollowPopover: React.FC = ({ if (user?.is_authenticated && subscriptionList.isLoading) return null if (!user) return null if (!user?.is_authenticated) { - return ( - - - Join {APP_SETTINGS.SITE_NAME} for free. - - - As a member, get personalized recommendations, curate learning lists, - and follow your areas of interest. - -
- - Sign Up - -
- - ) + return } if (isSubscribed) { @@ -116,16 +87,14 @@ const FollowPopover: React.FC = ({ Unfollow to stop getting emails for new {itemName} courses
- - - - + +
@@ -139,14 +108,12 @@ const FollowPopover: React.FC = ({ You will get an email when new courses are available
- - - - + +
From 046a9fe15a7359994ff3f3bd6d62769ab90b9ed7 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 15:23:18 -0400 Subject: [PATCH 10/15] removing redundancy --- .../FollowPopover/FollowPopover.tsx | 60 +++++++++---------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index 672577c87a..d36519a516 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -78,45 +78,41 @@ const FollowPopover: React.FC = ({ if (isSubscribed) { return ( - <> - - - You are following {itemName} - - - Unfollow to stop getting emails for new {itemName} courses - -
- - -
- - - ) - } - return ( - <> - Follow {itemName}? + + You are following {itemName} + - You will get an email when new courses are available + Unfollow to stop getting emails for new {itemName} courses
- - +
- + ) + } + return ( + + Follow {itemName}? + + You will get an email when new courses are available + +
+ + +
+ ) } From 59ef68767962444ce89af1c7c7123ae96649a33d Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Fri, 20 Sep 2024 15:34:03 -0400 Subject: [PATCH 11/15] removing empty test --- .../FollowPopover/FollowPopover.test.tsx | 29 ------------------- 1 file changed, 29 deletions(-) delete mode 100644 frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx deleted file mode 100644 index 6c16103fec..0000000000 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.test.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react" -import { FollowPopover } from "./FollowPopover" -import { renderWithProviders, screen, within } from "@/test-utils" -import invariant from "tiny-invariant" -import * as urls from "@/common/urls" -import { SourceTypeEnum } from "api" - -test("FollowPopover shows link to sign up", async () => { - renderWithProviders( - , - { - url: "/some-path?dog=woof", - }, - ) - const dialog = screen.getByRole("dialog") - const link = within(dialog).getByRole("link") - invariant(link instanceof HTMLAnchorElement) - expect(link.href).toMatch( - urls.login({ - pathname: "/some-path", - search: "?dog=woof", - }), - ) -}) From 1a1061962bc31270f2ba7ba14e2c9c55cf9edc67 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 23 Sep 2024 11:11:48 -0400 Subject: [PATCH 12/15] updating styles --- .../FollowPopover/FollowPopover.tsx | 21 +++++++++++-------- .../src/components/Popover/Popover.tsx | 1 + 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index d36519a516..8a2c6a2ea3 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -32,6 +32,9 @@ const Footer = styled.div({ gap: "16px", }) +const StyledButton = styled(Button)({ + borderRadius: "4px", +}) interface FollowPopoverProps extends Pick { itemName?: string @@ -83,17 +86,17 @@ const FollowPopover: React.FC = ({ You are following {itemName} - Unfollow to stop getting emails for new {itemName} courses + Unfollow to stop getting emails for new {itemName} courses.
- - + + props.onClose()}>Close
) @@ -102,15 +105,15 @@ const FollowPopover: React.FC = ({ Follow {itemName}? - You will get an email when new courses are available + You will get an email when new courses are available.
- - +
) diff --git a/frontends/ol-components/src/components/Popover/Popover.tsx b/frontends/ol-components/src/components/Popover/Popover.tsx index 48a332c227..39e96ff8af 100644 --- a/frontends/ol-components/src/components/Popover/Popover.tsx +++ b/frontends/ol-components/src/components/Popover/Popover.tsx @@ -128,6 +128,7 @@ const Arrow = styled("div")({ const Content = styled.div(({ theme }) => ({ padding: "16px", backgroundColor: theme.custom.colors.white, + borderRadius: "8px", boxShadow: "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 6px 24px 0px rgba(37, 38, 43, 0.24)", })) From 4017b3b3c0a56b97fe84786286e9d7f0440c0ed6 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 23 Sep 2024 11:16:05 -0400 Subject: [PATCH 13/15] updating styles --- .../FollowPopover/FollowPopover.tsx | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index 8a2c6a2ea3..d74153eebd 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -32,9 +32,6 @@ const Footer = styled.div({ gap: "16px", }) -const StyledButton = styled(Button)({ - borderRadius: "4px", -}) interface FollowPopoverProps extends Pick { itemName?: string @@ -81,7 +78,7 @@ const FollowPopover: React.FC = ({ if (isSubscribed) { return ( - + You are following {itemName} @@ -89,14 +86,17 @@ const FollowPopover: React.FC = ({ Unfollow to stop getting emails for new {itemName} courses.
- Unfollow - - props.onClose()}>Close + +
) @@ -108,12 +108,20 @@ const FollowPopover: React.FC = ({ You will get an email when new courses are available.
- props.onClose()}> + +
) From 4a43329ff1da9f5e46a16345e7bb583fa46fd1d6 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 23 Sep 2024 11:34:49 -0400 Subject: [PATCH 14/15] changes to match design --- .../FollowPopover/FollowPopover.tsx | 15 ++++++++++++++- .../SignupPopover/SignupPopover.tsx | 2 ++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx index d74153eebd..67ad9a9041 100644 --- a/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx +++ b/frontends/mit-learn/src/page-components/FollowPopover/FollowPopover.tsx @@ -20,8 +20,10 @@ const StyledPopover = styled(Popover)({ const HeaderText = styled(Typography)(({ theme }) => ({ color: theme.custom.colors.darkGray2, marginBottom: "8px", + ...theme.typography.subtitle2, })) const BodyText = styled(Typography)(({ theme }) => ({ + ...theme.typography.body2, color: theme.custom.colors.silverGrayDark, marginBottom: "16px", })) @@ -87,6 +89,8 @@ const FollowPopover: React.FC = ({
-
@@ -109,6 +118,8 @@ const FollowPopover: React.FC = ({