From 46eeb3740a23eacc367cfdda65982cbea8faef4c Mon Sep 17 00:00:00 2001 From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com> Date: Fri, 25 Aug 2023 10:39:51 -0400 Subject: [PATCH 1/3] chore: fix isEdit prop drilling and various routes (#871) * chore: fix isEdit prop drilling and various routes * fix: no need for payment ID's * fix: better represent draft state --- src/components/Button/DashboardButton.tsx | 7 ++-- src/components/Button/DashboardIconButton.tsx | 15 -------- .../Campaigns/CampaignDateRange.tsx | 6 ++- src/components/Navigation/DraftMenu.tsx | 8 ++-- src/components/Navigation/Navbar.tsx | 6 +-- src/components/Steps/ActionButtons.tsx | 4 +- src/components/Steps/StepDrawer.tsx | 2 +- src/form/FormikHelpers.tsx | 37 ++++++------------- src/user/library/index.ts | 2 +- src/user/views/adsManager/types/index.ts | 3 +- .../advanced/components/adSet/AdSetFields.tsx | 11 ++---- .../advanced/components/adSet/NewAdSet.tsx | 12 ++++-- .../components/campaign/BudgetSettings.tsx | 6 +-- .../components/campaign/CampaignSettings.tsx | 13 +++---- .../campaign/fields/BudgetField.tsx | 32 ++++++++-------- .../campaign/fields/PaymentMethodField.tsx | 14 ++----- .../completionForm/CompletionForm.tsx | 13 +++---- .../advanced/components/form/EditCampaign.tsx | 2 +- .../advanced/components/form/NewCampaign.tsx | 2 +- .../components/form/components/BaseForm.tsx | 19 +++------- .../form/components/PaymentButton.tsx | 10 ++--- .../review/components/ReviewContainer.tsx | 7 ++-- 22 files changed, 90 insertions(+), 141 deletions(-) delete mode 100644 src/components/Button/DashboardIconButton.tsx diff --git a/src/components/Button/DashboardButton.tsx b/src/components/Button/DashboardButton.tsx index 946480d4..7a7220de 100644 --- a/src/components/Button/DashboardButton.tsx +++ b/src/components/Button/DashboardButton.tsx @@ -1,15 +1,14 @@ import { Button } from "@mui/material"; import ArrowBack from "@mui/icons-material/ArrowBack"; -import { useHistory } from "react-router-dom"; +import { Link as RouterLink } from "react-router-dom"; export function DashboardButton() { - const history = useHistory(); - return ( diff --git a/src/components/Button/DashboardIconButton.tsx b/src/components/Button/DashboardIconButton.tsx deleted file mode 100644 index 7a17145d..00000000 --- a/src/components/Button/DashboardIconButton.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { IconButton, Tooltip } from "@mui/material"; -import ArrowBack from "@mui/icons-material/ArrowBack"; -import { useHistory } from "react-router-dom"; - -export function DashboardIconButton() { - const history = useHistory(); - - return ( - - history.push("/user/main")}> - - - - ); -} diff --git a/src/components/Campaigns/CampaignDateRange.tsx b/src/components/Campaigns/CampaignDateRange.tsx index 18562fee..76deb961 100644 --- a/src/components/Campaigns/CampaignDateRange.tsx +++ b/src/components/Campaigns/CampaignDateRange.tsx @@ -6,8 +6,10 @@ import { useField } from "formik"; import { useState } from "react"; import { getDefaultTimezone, TimeZonePicker } from "../TimeZonePicker"; import { TimezoneAwareDatePicker } from "../TimeZonePicker/TimezoneAwareDatePicker"; +import { useIsEdit } from "form/FormikHelpers"; -export const CampaignDateRange = ({ isEdit }: { isEdit: boolean }) => { +export const CampaignDateRange = () => { + const { isDraft } = useIsEdit(); const [tz, setTz] = useState(getDefaultTimezone()); const [, startMeta, startHelper] = useField("startAt"); const [, endMeta, endHelper] = useField("endAt"); @@ -25,7 +27,7 @@ export const CampaignDateRange = ({ isEdit }: { isEdit: boolean }) => { startHelper.setValue(formatISO(dt)); startHelper.setTouched(true); }} - disabled={isEdit} + disabled={!isDraft} /> diff --git a/src/components/Navigation/DraftMenu.tsx b/src/components/Navigation/DraftMenu.tsx index 929f64ac..0a4d7736 100644 --- a/src/components/Navigation/DraftMenu.tsx +++ b/src/components/Navigation/DraftMenu.tsx @@ -1,13 +1,12 @@ import { useContext, useState, MouseEvent } from "react"; -import { useHistory } from "react-router-dom"; +import { Link as RouterLink } from "react-router-dom"; import { Badge, Button, Menu, MenuItem } from "@mui/material"; import { DraftContext } from "state/context"; export function DraftMenu() { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); - const history = useHistory(); const { drafts } = useContext(DraftContext); const handleClick = (event: MouseEvent) => { @@ -46,10 +45,9 @@ export function DraftMenu() { {drafts.map((d, idx) => ( { - history.push( - `/user/main/adsmanager/advanced/new/${d.draftId}/settings`, - ); setAnchorEl(null); }} sx={{ pt: 1, pb: 1, minWidth: "250px" }} diff --git a/src/components/Navigation/Navbar.tsx b/src/components/Navigation/Navbar.tsx index b068b030..b6172e7e 100644 --- a/src/components/Navigation/Navbar.tsx +++ b/src/components/Navigation/Navbar.tsx @@ -1,4 +1,4 @@ -import { useHistory, useRouteMatch } from "react-router-dom"; +import { useRouteMatch, Link as RouterLink } from "react-router-dom"; import { AppBar, Button, Divider, Stack, Toolbar } from "@mui/material"; @@ -11,7 +11,6 @@ import { useSignOut } from "auth/hooks/mutations/useSignOut"; export function Navbar() { const { signOut } = useSignOut(); const { advertiser } = useAdvertiser(); - const history = useHistory(); const { url } = useRouteMatch(); const isNewCampaignPage = url.includes("/user/main/adsmanager/advanced"); const isCompletePage = url.includes("/user/main/complete/new"); @@ -39,7 +38,8 @@ export function Navbar() {
{advertiser.selfServiceCreate && ( From b1c8205f426757841052d86d40f7847f58ca81aa Mon Sep 17 00:00:00 2001 From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com> Date: Tue, 29 Aug 2023 10:54:52 -0400 Subject: [PATCH 2/3] fix: scroll table (#874) * fix: scroll table * fix: remove created * fix: sort by start --- src/components/Drawer/MiniSideBar.tsx | 6 +++--- src/components/Switch/OnOff.tsx | 2 +- src/user/campaignList/CampaignList.tsx | 16 +++++++--------- src/user/views/user/CampaignView.tsx | 2 +- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/Drawer/MiniSideBar.tsx b/src/components/Drawer/MiniSideBar.tsx index 01335fc1..ac761567 100644 --- a/src/components/Drawer/MiniSideBar.tsx +++ b/src/components/Drawer/MiniSideBar.tsx @@ -30,7 +30,7 @@ type RouteOption = { onClick?: (event: MouseEvent) => void; }; -const drawerWidth = 120; +const drawerWidth = 100; export default function MiniSideBar({ children }: PropsWithChildren) { const dashboardRoutes: RouteOption[] = [ { @@ -151,8 +151,8 @@ const ItemBox = (props: RouteOption) => { borderRadius: "0px", gap: "3px", visibility: props.disabled ? "hidden" : "visible", - paddingLeft: "5px", - paddingRight: "5px", + paddingLeft: "3px", + paddingRight: "3px", }} selected={match.url.includes(props.href)} onClick={props.onClick} diff --git a/src/components/Switch/OnOff.tsx b/src/components/Switch/OnOff.tsx index 04fe7024..321d71ba 100644 --- a/src/components/Switch/OnOff.tsx +++ b/src/components/Switch/OnOff.tsx @@ -40,7 +40,7 @@ export function OnOff({ state, loading, end, onChange, type, source }: Props) { disabled={loading} /> ) : ( - - + - )} diff --git a/src/user/campaignList/CampaignList.tsx b/src/user/campaignList/CampaignList.tsx index d78f3307..01e3c81f 100644 --- a/src/user/campaignList/CampaignList.tsx +++ b/src/user/campaignList/CampaignList.tsx @@ -34,6 +34,7 @@ export function CampaignList({ selectedCampaigns, onCampaignSelect, }: Props) { + let initialSort = 9; const [engagementData, setEngagementData] = useState>(); @@ -60,7 +61,7 @@ export function CampaignList({ ...r, advertiserId: advertiser?.id ?? "", }), - sx: { width: "1px" }, + sx: { width: "1px", p: 0 }, sortable: false, }, { @@ -86,7 +87,7 @@ export function CampaignList({ extendedRenderer: (r) => ( ), - sx: { width: "10px" }, + sx: { width: "1px", p: 0 }, }, { title: "Budget", @@ -134,15 +135,10 @@ export function CampaignList({ renderer: StandardRenderers.date, align: "right", }, - { - title: "Created", - value: (c) => c.createdAt, - renderer: StandardRenderers.date, - align: "right", - }, ]; if (advertiser?.selfServiceCreate && advertiser.selfServiceEdit) { + initialSort += 1; columns.unshift({ title: "", value: (c) => c.id, @@ -155,13 +151,14 @@ export function CampaignList({ /> ), align: "center", + sx: { width: "1px" }, }); } return ( @@ -182,6 +179,7 @@ const CampaignCheckBox = (props: CheckBoxProps) => { props.onCampaignSelect(props.campaign.id, e.target.checked) diff --git a/src/user/views/user/CampaignView.tsx b/src/user/views/user/CampaignView.tsx index 9fea3d5d..a075ae76 100644 --- a/src/user/views/user/CampaignView.tsx +++ b/src/user/views/user/CampaignView.tsx @@ -68,7 +68,7 @@ export function CampaignView() { } sx={{ flexGrow: 1, - mr: 2, + overflowX: "auto", }} additionalAction={} > From 04d7c7b0dd1600ca675750a70ac80021d650b04c Mon Sep 17 00:00:00 2001 From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com> Date: Tue, 29 Aug 2023 11:18:13 -0400 Subject: [PATCH 3/3] feat: mobile styling for landing and registration pages (#872) * feat: mobile styling for landing and registration pages * feat: new assets (possibly temporary) * fix: assets * fix: remove assets * fix: cleanup types * fix: better padding * fix: login link * fix: remove isMobile in places where it is not needed * fix: responsive font sizes * fix: clean up undefined --- all_sizes_frame.svg | 43 ++++++++++++ powerful_format_frame.svg | 37 +++++++++++ privacy_focused_frame.svg | 51 ++++++++++++++ src/auth/hooks/mutations/useGetLink.ts | 6 ++ src/auth/registration/AddressField.tsx | 7 +- .../registration/AdvertiserRegistered.tsx | 6 +- src/auth/registration/MarginedDivider.tsx | 9 +++ src/auth/registration/NameField.tsx | 5 +- src/auth/registration/Register.tsx | 6 +- src/auth/views/LandingPage.tsx | 25 ++++--- src/auth/views/MagicLink.tsx | 12 ++-- src/auth/views/MobileAdsBenefits.tsx | 66 +++++++++++++++++++ src/auth/views/components/AuthContainer.tsx | 23 ++----- src/components/AppBar/LandingPageAppBar.tsx | 53 ++++++++++----- src/components/Card/PaddedCardContainer.tsx | 2 +- src/hooks/useIsMobile.ts | 6 ++ src/theme.tsx | 6 +- 17 files changed, 300 insertions(+), 63 deletions(-) create mode 100644 all_sizes_frame.svg create mode 100644 powerful_format_frame.svg create mode 100644 privacy_focused_frame.svg create mode 100644 src/auth/registration/MarginedDivider.tsx create mode 100644 src/auth/views/MobileAdsBenefits.tsx create mode 100644 src/hooks/useIsMobile.ts diff --git a/all_sizes_frame.svg b/all_sizes_frame.svg new file mode 100644 index 00000000..054ee9ea --- /dev/null +++ b/all_sizes_frame.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/powerful_format_frame.svg b/powerful_format_frame.svg new file mode 100644 index 00000000..fcc9b62f --- /dev/null +++ b/powerful_format_frame.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/privacy_focused_frame.svg b/privacy_focused_frame.svg new file mode 100644 index 00000000..72a362a4 --- /dev/null +++ b/privacy_focused_frame.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/auth/hooks/mutations/useGetLink.ts b/src/auth/hooks/mutations/useGetLink.ts index 46039b7f..3e043260 100644 --- a/src/auth/hooks/mutations/useGetLink.ts +++ b/src/auth/hooks/mutations/useGetLink.ts @@ -11,6 +11,12 @@ export function useGetLink({ onError, onSuccess }: Options = {}) { const [error, setError] = useState(); const requestLink = useCallback(async (email: string) => { + if (email.trim() === "") { + setError("Please enter an email."); + return; + } + + setError(undefined); setLoading(true); await getLink({ email }) .then(() => { diff --git a/src/auth/registration/AddressField.tsx b/src/auth/registration/AddressField.tsx index 6bea8c2b..a128996f 100644 --- a/src/auth/registration/AddressField.tsx +++ b/src/auth/registration/AddressField.tsx @@ -1,6 +1,7 @@ -import { Box, Divider, Stack, Typography } from "@mui/material"; +import { Box, Stack, Typography } from "@mui/material"; import { FormikTextField } from "form/FormikHelpers"; import { CountryPicker } from "components/Country/CountryPicker"; +import { MarginedDivider } from "auth/registration/MarginedDivider"; export function AddressField() { return ( @@ -10,7 +11,7 @@ export function AddressField() { finished here, your account setup is complete. - + - + In the meantime, check out our{" "} - + advertiser resources . If you have any questions, please reach out to{" "} diff --git a/src/auth/registration/MarginedDivider.tsx b/src/auth/registration/MarginedDivider.tsx new file mode 100644 index 00000000..522f46b7 --- /dev/null +++ b/src/auth/registration/MarginedDivider.tsx @@ -0,0 +1,9 @@ +import { Divider } from "@mui/material"; + +export function MarginedDivider() { + return ( + + ); +} diff --git a/src/auth/registration/NameField.tsx b/src/auth/registration/NameField.tsx index b500af85..bce9d986 100644 --- a/src/auth/registration/NameField.tsx +++ b/src/auth/registration/NameField.tsx @@ -1,5 +1,6 @@ -import { Box, Divider, Typography } from "@mui/material"; +import { Box, Typography } from "@mui/material"; import { FormikTextField } from "form/FormikHelpers"; +import { MarginedDivider } from "auth/registration/MarginedDivider"; export function NameField() { return ( @@ -9,7 +10,7 @@ export function NameField() { setup with your account. First, we’ll need your info. - + }, - { label: "Your business’s information", component: }, + { label: "Your business's information", component: }, ]; return ( - - + + {steps[activeStep].label} diff --git a/src/auth/views/LandingPage.tsx b/src/auth/views/LandingPage.tsx index 5a9850e6..67c6a8a1 100644 --- a/src/auth/views/LandingPage.tsx +++ b/src/auth/views/LandingPage.tsx @@ -1,9 +1,11 @@ import { Background } from "components/Background/Background"; import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar"; -import { Box, Button, Link, Stack, Typography } from "@mui/material"; +import { Box, Button, Link, Stack, Toolbar, Typography } from "@mui/material"; import goals from "../../../images.svg"; import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated"; import { Link as RouterLink } from "react-router-dom"; +import { useIsMobile } from "hooks/useIsMobile"; +import { MobileAdsBenefits } from "auth/views/MobileAdsBenefits"; const GradientText = { backgroundImage: @@ -14,19 +16,21 @@ const GradientText = { export function LandingPage() { const isAuthenticated = useIsAuthenticated(); + const isMobile = useIsMobile(); return ( + - - - + + + Privacy-forward {" "} advertising made simple @@ -42,17 +46,16 @@ export function LandingPage() { variant="contained" component={RouterLink} sx={{ - maxWidth: "165px", - height: "60px", - padding: "18px 24px 18px 24px", + maxWidth: { md: "165px" }, + maxHeight: { xs: "40px", md: "60px" }, + padding: { xs: 2, md: "18px 24px 18px 24px" }, mb: 1, }} - size="large" to={isAuthenticated ? "/user/main" : "/register"} > {isAuthenticated ? "Dashboard" : "Get Started"} - {!isAuthenticated && ( + {!isMobile && !isAuthenticated && ( Already have an account? )} + + {isMobile && } - + {!isMobile && } ); diff --git a/src/auth/views/MagicLink.tsx b/src/auth/views/MagicLink.tsx index c8cabdb3..784d7ae5 100644 --- a/src/auth/views/MagicLink.tsx +++ b/src/auth/views/MagicLink.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; -import { Link, Stack, TextField, Typography } from "@mui/material"; +import { Link, TextField, Typography } from "@mui/material"; import { Link as RouterLink } from "react-router-dom"; import { useGetLink } from "auth/hooks/mutations/useGetLink"; import { LoadingButton } from "@mui/lab"; @@ -26,20 +26,18 @@ export function MagicLink() { Click on the secure login link in the email to access your Brave Ads account. - - - Don’t see the email? Check your spam folder or - + + Don’t see the email? Check your spam folder or{" "} { setRequested(false); }} > try again. - + ); } diff --git a/src/auth/views/MobileAdsBenefits.tsx b/src/auth/views/MobileAdsBenefits.tsx new file mode 100644 index 00000000..8c1763fc --- /dev/null +++ b/src/auth/views/MobileAdsBenefits.tsx @@ -0,0 +1,66 @@ +import { Card, CardMedia, List, ListItem, Typography } from "@mui/material"; + +import allSizes from "../../../all_sizes_frame.svg"; +import powerfulFormats from "../../../powerful_format_frame.svg"; +import privacyFocused from "../../../privacy_focused_frame.svg"; + +export function MobileAdsBenefits() { + return ( + + + + + + + + + + + + ); +} + +const ItemCard = (props: { + primary: string; + secondary: string; + image: string; +}) => { + return ( + + + + {props.primary} + + + {props.secondary} + + + ); +}; diff --git a/src/auth/views/components/AuthContainer.tsx b/src/auth/views/components/AuthContainer.tsx index 07167df9..e865e50d 100644 --- a/src/auth/views/components/AuthContainer.tsx +++ b/src/auth/views/components/AuthContainer.tsx @@ -1,7 +1,8 @@ -import { Box, Card, CardContent } from "@mui/material"; +import { Box } from "@mui/material"; import { Background } from "components/Background/Background"; import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar"; import { ReactNode } from "react"; +import { PaddedCardContainer } from "components/Card/PaddedCardContainer"; interface Props { children?: ReactNode; @@ -13,25 +14,9 @@ export function AuthContainer({ children, belowCard, aboveCard }: Props) { return ( - + {aboveCard} - - - {children} - - + {children} {belowCard} diff --git a/src/components/AppBar/LandingPageAppBar.tsx b/src/components/AppBar/LandingPageAppBar.tsx index 99436d56..f5a8abfe 100644 --- a/src/components/AppBar/LandingPageAppBar.tsx +++ b/src/components/AppBar/LandingPageAppBar.tsx @@ -2,7 +2,6 @@ import { AppBar, Box, Button, - CssBaseline, Divider, Link, LinkProps, @@ -15,20 +14,23 @@ import { Link as RouterLink, useRouteMatch } from "react-router-dom"; import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated"; import { useSignOut } from "auth/hooks/mutations/useSignOut"; import { SupportMenu } from "components/Drawer/MiniSideBar"; +import { useIsMobile } from "hooks/useIsMobile"; export function LandingPageAppBar() { const match = useRouteMatch(); const isAuthenticated = useIsAuthenticated(); + const isMobile = useIsMobile(); const links = [ { - component: isAuthenticated ? null : ( - - - Get started - - - ), + component: + isMobile || isAuthenticated ? null : ( + + + Get started + + + ), }, { component: ( @@ -48,26 +50,47 @@ export function LandingPageAppBar() { return ( - - - + + - Ads + Ads - + + {links.map((l) => l.component)} + {isMobile && !match.url.includes("auth") && ( + + Log in + + )}
- {!match.url.includes("auth") && ( + {!isMobile && !match.url.includes("auth") && ( )} diff --git a/src/components/Card/PaddedCardContainer.tsx b/src/components/Card/PaddedCardContainer.tsx index 811943ac..715b825d 100644 --- a/src/components/Card/PaddedCardContainer.tsx +++ b/src/components/Card/PaddedCardContainer.tsx @@ -6,7 +6,7 @@ export function PaddedCardContainer({ children }: PropsWithChildren) { diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts new file mode 100644 index 00000000..dc674c0c --- /dev/null +++ b/src/hooks/useIsMobile.ts @@ -0,0 +1,6 @@ +import { useMediaQuery, useTheme } from "@mui/material"; + +export const useIsMobile = () => { + const muiTheme = useTheme(); + return useMediaQuery(muiTheme.breakpoints.down("sm")); +}; diff --git a/src/theme.tsx b/src/theme.tsx index c313239e..5cbe0424 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -1,6 +1,6 @@ -import { createTheme } from "@mui/material"; +import { createTheme, responsiveFontSizes } from "@mui/material"; -export const theme = createTheme({ +const appTheme = createTheme({ typography: { fontFamily: "Poppins", h1: { @@ -54,3 +54,5 @@ export const theme = createTheme({ }, }, }); + +export const theme = responsiveFontSizes(appTheme);