Tweak text style in sections

- make the text list a `ul` based list with bullets
- and fix the accordion style overrieds (via `sx` prop)

src/components/ListFromMd.tsx

@@ -1,23 +1,29 @@
-import { List, ListItemText, ListItemTextProps, ListProps } from '@mui/material'
+import { Typography, styled } from '@mui/material'
 import { SpanFromMd } from './SpanFromMd'
+import { mergeSxProps } from '../utils'
+import { ComponentProps } from 'react'
 
 
+const UonrderedList = styled('ul')({
+
+})
+
 type ListFromMdProps = {
   /** list of strings with markdown */
   items: string[]
-  ItemProps?: ListItemTextProps
-} & Omit<ListProps, 'children'>
+  ItemProps?: ComponentProps<typeof Typography<'li'>>
+} & Omit<ComponentProps<typeof UonrderedList>, 'children'>
 
 /**
  * Displays a list of text items, converting any markdown to html.
  * Note: *no sanitization*
  */
-export const ListFromMd = ({ items, ItemProps, ...rest }: ListFromMdProps) => (
-  <List {...rest}>
+export const ListFromMd = ({ items, ItemProps, sx, ...rest }: ListFromMdProps) => (
+  <UonrderedList {...rest} sx={mergeSxProps(sx, { pl: '1em', mt: 3, mb: 1 })}>
     {items.map((item, i) => (
-      <ListItemText {...ItemProps} key={i}>
+      <Typography component="li" {...ItemProps} key={i}>
         <SpanFromMd markdown={item} />
-      </ListItemText>
+      </Typography>
     ))}
-  </List>
+  </UonrderedList>
 )

src/pages/LandingPage/EducationItem.tsx

@@ -20,7 +20,7 @@ export const EducationItem = ({ details }: EducationItemProps) => (
   <Card>
     <Typography variant="h4">{details.name}</Typography>
     <Typography variant="h6">{details.subtitle}</Typography>
-    <Typography variant="overline">{details.from ? `${details.from}—` : ''}{details.to}</Typography>
+    <Typography variant="overline">{details.from ? `${details.from}–` : ''}{details.to}</Typography>
     <ListFromMd items={details.description} />
     {details.courses && (
       <Accordion
@@ -32,24 +32,26 @@ export const EducationItem = ({ details }: EducationItemProps) => (
           sx={{
             p: 0,
             m: 0,
-            minHeight: '0px',
+            minHeight: '30px',
             justifyContent: 'flex-start',
             gap: 3,
-            '& > *': {
-              flexGrow: 0
-            },
             [`&.${accordionSummaryClasses.expanded}`]: {
               minHeight: '0px',
+              m: 0,
             },
             [`& > .${accordionSummaryClasses.content}`]: {
               my: 0,
+              flexGrow: 0,
+            },
+            [`& > .${accordionSummaryClasses.content}.${accordionSummaryClasses.expanded}`]: {
+              my: 0,
             }
           }}
         >
           <Typography>Some of the courses I took</Typography>
         </AccordionSummary>
         <AccordionDetails sx={{ p: 1, pl: 3 }}>
-          <Typography>{details.courses.join(', ')}</Typography>
+          <Typography>{details.courses.join(' • ')}</Typography>
         </AccordionDetails>
       </Accordion>
     )}

src/pages/LandingPage/ExperienceItem.tsx

@@ -17,8 +17,8 @@ type ExperienceItemProps = {
 
 export const ExperienceItem = ({ experience }: ExperienceItemProps) => (
   <Card>
-    <Typography variant="h5">{experience.title} &bull; {experience.companyName}</Typography>
-    <Typography variant="overline">{experience.from}&mdash;{experience.to}</Typography>
+    <Typography variant="h5" color="primary">{experience.title} &mdash; {experience.companyName}</Typography>
+    <Typography variant="overline">{experience.from}&ndash;{experience.to}</Typography>
     <ListFromMd items={experience.description} />
   </Card>
 )