diff --git a/packages/web/components/elements/Checkbox.tsx b/packages/web/components/elements/Checkbox.tsx index 130bb260d..ac7f91d7a 100644 --- a/packages/web/components/elements/Checkbox.tsx +++ b/packages/web/components/elements/Checkbox.tsx @@ -5,8 +5,10 @@ import { CheckIcon } from './images/CheckIcon' const Checkbox = styled(CheckboxPrimitive.Root, { all: 'unset', - width: 15.83, - height: 15.83, + width: 16, + height: 16, + minWidth: 16, + minHeight: 16, borderRadius: 3, display: 'flex', alignItems: 'center', diff --git a/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx index ec3e74291..b3c7917df 100644 --- a/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx +++ b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx @@ -5,28 +5,24 @@ import { SelectOption } from './SelectOption' const optionDetails = [ { - icon: 'TempleTelegram', - label: 'Temple Daily Telegram - Temple, Tx', + icon: 'AxiosDaily.png', + label: 'Axios Daily Essentials', + description: 'Start and end your day with the stories that matter in your inbox.' }, { - icon: 'NYTNewsletter', - label: 'Newsletters - The New York Times', + icon: 'MilkRoad.png', + label: 'Milk Road', + description: '5 minute daily newsletter. Used by 100,000+ people to be better crypto investors 💪', }, { - icon: 'NYT', - label: 'NYT’s The Morning', + icon: 'MoneyStuff.png', + label: 'Money Stuff by Matt Levine', + description: 'A daily take on Wall Street, finance, companies and other stuff.', }, { - icon: 'BBCNews', - label: 'London - BBC News', - }, - { - icon: 'WashingtonDiplomat', - label: 'Washington Diplomat - Washington, Dc', - }, - { - icon: 'Columbia', - label: 'The State - Columbia, Sc', + icon: 'OmnivoreBlog.png', + label: 'Omnivore', + description: 'Tips and tricks, plus updates on new features in Omnivore.', }, ] @@ -46,8 +42,8 @@ export const OnboardingAddNewsletters = (props: OnboardingAddNewslettersProps) = marginTop: '$4', width: '100%' }}> - {optionDetails.map(({ icon, label }, idx) => ( - + {optionDetails.map(({ icon, label, description }, idx) => ( + ))} diff --git a/packages/web/components/templates/onboarding/SelectOption.tsx b/packages/web/components/templates/onboarding/SelectOption.tsx index 84c5c4af0..3c9ff0d56 100644 --- a/packages/web/components/templates/onboarding/SelectOption.tsx +++ b/packages/web/components/templates/onboarding/SelectOption.tsx @@ -6,11 +6,13 @@ import { StyledText } from '../../elements/StyledText' import { authoredByText } from '../../patterns/ArticleSubtitle' import { LabelChip } from '../../elements/LabelChip' import { Label } from '../../../lib/networking/fragments/labelFragment' +import Image from 'next/image' export const SelectOption: React.FC<{ icon: string label: string -}> = ({ icon, label }) => { + description: string +}> = ({ icon, label, description }) => { const [checked, setChecked] = React.useState(false) const toggleChecked = () => setChecked(!checked) @@ -29,21 +31,34 @@ export const SelectOption: React.FC<{ width: '100%' }}> - - {`${icon}-logo`} + {`${icon.slice(0, - + + + {label} - + + + {description} + + ) } diff --git a/packages/web/public/static/images/newsletter/AxiosDaily.png b/packages/web/public/static/images/newsletter/AxiosDaily.png new file mode 100644 index 000000000..9a3a9fb8a Binary files /dev/null and b/packages/web/public/static/images/newsletter/AxiosDaily.png differ diff --git a/packages/web/public/static/images/newsletter/MilkRoad.png b/packages/web/public/static/images/newsletter/MilkRoad.png new file mode 100644 index 000000000..7332f6038 Binary files /dev/null and b/packages/web/public/static/images/newsletter/MilkRoad.png differ diff --git a/packages/web/public/static/images/newsletter/MoneyStuff.png b/packages/web/public/static/images/newsletter/MoneyStuff.png new file mode 100644 index 000000000..6e8bb5587 Binary files /dev/null and b/packages/web/public/static/images/newsletter/MoneyStuff.png differ diff --git a/packages/web/public/static/images/newsletter/OmnivoreBlog.png b/packages/web/public/static/images/newsletter/OmnivoreBlog.png new file mode 100644 index 000000000..cb09300e5 Binary files /dev/null and b/packages/web/public/static/images/newsletter/OmnivoreBlog.png differ