From d09a8ecee9193890dcfebad45f03d725681f6fbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Tue, 10 May 2022 02:10:06 +0400
Subject: [PATCH] Add divider to home

---
 pages/index.js | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 62f9309..0a4670a 100644
--- a/pages/index.js
+++ b/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>
+          <ThemeProvider theme={theme}>
+            <Divider variant='middle' sx={{marginBottom: 1}}>
+              <Chip icon={<ArrowCircleDownIcon />} label='Derniers textes publiés ' variant='outlined' />
+            </Divider>
+          </ThemeProvider>
+          <DenyeTeks {...teks} />
         </Container>
-        <DenyeTeks {...teks} />
         <Footer />
       </Box>
     </HeadLayout>