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%'
}}>
-
-
+
-
+
+
+
{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