Add divider to home

pages/index.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types'
-import {Container, Typography, Box} from '@mui/material'
+import {Container, Typography, Box, Divider, Chip} from '@mui/material'
+import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown'
+import {createTheme, ThemeProvider} from '@mui/material/styles'
 
 import HeadLayout from '../components/head-layout'
 import Footer from '../components/footer'
@@ -7,12 +9,24 @@ import RezoDialog from '../components/rezo/rezo-dialog'
 import DenyeTeks from '../components/teks/denye-teks'
 import {jwennDenyeTeks} from '../lib/oki-api'
 
+const theme = createTheme({
+  components: {
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          color: 'black',
+        }
+      }
+    }
+  }
+})
+
 export default function Home({teks}) {
   return (
     <HeadLayout tab={0}>
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
-        <Box sx={{flexGrow: 1, marginBottom: 3}}>
-          <Container sx={{marginBottom: 3}} align='center'>
+        <Box sx={{flexGrow: 1, marginBottom: 4}}>
+          <Container sx={{marginBottom: 2}} align='center'>
             <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h1'>
               #OKi
             </Typography>
@@ -27,12 +41,14 @@ export default function Home({teks}) {
             <RezoDialog />
           </Container>
         </Box>
-        <Container align='center'>
-          <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
-            ⬇️ Derniers textes publiés ⬇️
-          </Typography>
-        </Container>
+        <Container>
+          <ThemeProvider theme={theme}>
+            <Divider variant='middle' sx={{marginBottom: 1}}>
+              <Chip icon={<ArrowCircleDownIcon />} label='Derniers textes publiés ' variant='outlined' />
+            </Divider>
+          </ThemeProvider>
           <DenyeTeks {...teks} />
+        </Container>
         <Footer />
       </Box>
     </HeadLayout>