Add description for known newsletters, update icon set

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',

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) => (
-          <SelectOption key={idx} {...{ icon, label }} />
+        {optionDetails.map(({ icon, label, description }, idx) => (
+          <SelectOption key={idx} {...{ icon, label, description }} />
         ))}
       </VStack>
     </OnboardingLayout>

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%'
     }}>
       <Checkbox {...{checked, setChecked}} />
-      <HStack css={{marginRight: '$2'}} />
-      <img
-          src={`/static/images/newsletter/${icon}.svg`}
-          alt={`${icon}-logo`}
+      <SpanBox css={{ marginLeft: '$2', width: '32px', height: '32px' }}>
+        <Image width={32} height={32} layout="fixed"
+          src={`/static/images/newsletter/${icon}`}
+          alt={`${icon.slice(0, -4)} logo`}
         />
-      <StyledText
-        css={{
-          fontSize: 16,
-          fontWeight: 700,
-          marginLeft: '$2',
-          color: '#0A0806CC',
-        }}
-      >
+      </SpanBox>
+      <VStack css={{ border: '1', marginLeft: '$2', color: '#0A0806CC', }}>
+        <StyledText
+          css={{
+            margin: 0,
+            fontSize: 16,
+            fontWeight: 700,
+            
+          }}
+        >
           {label}
-      </StyledText>
+        </StyledText>
+        <StyledText
+          css={{
+            margin: 0,
+            fontSize: 16,
+            fontWeight: 400,
+            color: '#0A0806CC',
+          }}
+        >
+          {description}
+        </StyledText>
+      </VStack>
     </HStack>
   )
 }