Use MUI color theme

Author: Amélie

src/App.tsx

@@ -1,5 +1,5 @@
 import '@assets/app.scss'
-import AppLayout from '@app/layouts/AppLayout.tsx';
+import AppLayout from '@app/layouts/app-layout.tsx';
 import { ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
 import { customTheme } from '@app/theme.ts';

src/components/Footer/footer.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react'
-import styled from '@emotion/styled'
+import { styled } from '@mui/material'
 
 export default function Button({ children }: PropsWithChildren) {
   return (
@@ -9,20 +9,19 @@ export default function Button({ children }: PropsWithChildren) {
   )
 }
 
-const Wrapper = styled.button`
-  height: 60px;
-  padding: 0 55px;
-  font-size: 18px;
-  color: #fff;
-  font-weight: bold;
-  background: #0460FC;
-  border: none;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all .2s;
-    
-  &:hover,
-  &:focus {
-    background: #0052dd;
-  }
-`
+const Wrapper = styled('button')(({ theme }) => ({
+  height: '60px',
+  padding: `0 ${theme.spacing(2.5)}`,
+  fontSize: '18px',
+  color: theme.palette.text.primary,
+  fontWeight: 'bold',
+  background: theme.palette.primary.main,
+  border: 'none',
+  borderRadius: theme.shape.borderRadius,
+  cursor: 'pointer',
+  transition: 'all .2s',
+
+  '&:hover, &:focus': {
+    background: theme.palette.primary.dark,
+  },
+}));

src/components/Header/header.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from '@emotion/styled'
+import { styled } from '@mui/material'
 
 type Props = {
   id: string
@@ -29,35 +29,35 @@ export default function FoodOption({ id, label, icon, pickedOptions, setPickedOp
   </>;
 }
 
-const Label = styled.label`
-  padding: 30px;
-  height: 75px;
-  display: flex;
-  align-items: center;
-  gap: 1rem; 
-  font-size: 1.1rem;
-  color: #fff;
-  background: #12122d;
-  border: solid 2px #20203f;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all .2s;
-    
-  &:hover,
-  &:focus {
-    border-color: #0460fc; 
-  } 
-    
-  input:checked, .checked + & {
-    background: #143374;
-    border-color: #0460fc;
-  }
-`
+const Label = styled('label')(({ theme }) => ({
+  padding: theme.spacing(1.5),
+  height: '75px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '1rem',
+  fontSize: '1.1rem',
+  color: theme.palette.text.primary,
+  background: theme.palette.secondary.main,
+  border: 'solid 2px',
+  borderColor: theme.palette.secondary.light,
+  borderRadius: theme.shape.borderRadius,
+  cursor: 'pointer',
+  transition: 'all .2s',
+
+  '&:hover, &:focus': {
+    borderColor: theme.palette.primary.main,
+  },
+
+  'input:checked, .checked + &': {
+    background: theme.palette.primary.dark,
+    borderColor: theme.palette.primary.main,
+  },
+}));
 
-const Icon = styled.span`
-  font-size: 2rem;
-`
+const Icon = styled('span')(() => ({
+  fontSize: '2rem',
+}));
 
-const Input = styled.input`
-  display: none;
-`
+const Input = styled('input')(() => ({
+  display: 'none',
+}));

src/components/UI/Button.tsx

@@ -31,8 +31,9 @@ export default function ToggleSwitch({
 
 
 const LabelStyled = styled(FormControlLabel)(({ theme }) => ({
-  color: theme.palette.secondary.contrastText,
+  color: theme.palette.text.primary,
+
   '& .MuiSwitch-track': {
-    backgroundColor: theme.palette.secondary.contrastText,
+    backgroundColor: theme.palette.text.primary,
   },
 }));

src/components/UI/food-option.tsx

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material'
+
+export default function Footer() {
+  return <Wrapper role="contentinfo">
+      Made with 🌮 at elao - © 2024
+  </Wrapper>;
+}
+
+const Wrapper = styled('footer')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  padding: `${theme.spacing(1)} 0`,
+  color: theme.palette.text.primary,
+  textAlign: 'center',
+  borderTop: 'solid 1px rgba(146, 148, 175, .2)',
+}));

src/components/UI/toggle-switch.tsx

@@ -0,0 +1,45 @@
+import { styled } from '@mui/material'
+
+export default function Header() {
+  return <Wrapper>
+    <Title>
+      <span>Ça mâche</span>
+      <span>quoi ?</span>
+    </Title>
+  </Wrapper>;
+}
+
+const Wrapper = styled('header')(() => ({
+  padding: '100px 0 80px',
+  width: '60%',
+}));
+
+const Title = styled('h1')(({ theme }) => ({
+  margin: `0 0 0 ${theme.spacing(1)}`,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  fontSize: '3.25rem',
+  lineHeight: '1.1',
+  color: theme.palette.text.primary,
+
+  'span': {
+    position: 'relative',
+    zIndex: '1',
+
+    '&::before': {
+      height: '2rem',
+      width: '100%',
+      position: 'absolute',
+      bottom: '.2rem',
+      left: '.5rem',
+      content: '""',
+      zIndex: '-1',
+      background: theme.palette.background.paper,
+    },
+
+    '&:last-of-type': {
+      marginLeft: '13rem',
+    },
+  },
+}));

src/components/footer/footer.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react'
+import Header from '@app/components/header/header.tsx'
+import Footer from '@app/components/footer/footer.tsx'
+import { styled } from '@mui/material'
+import background from '@images/background.svg'
+
+export default function AppLayout({ children }: PropsWithChildren) {
+  return <Container>
+    <Header />
+    <Main>
+      {children}
+    </Main>
+    <Footer />
+  </Container>;
+}
+
+const Container = styled('div')(({ theme }) => ({
+  padding: `0 ${theme.spacing(4.5)}`,
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100vh',
+  height: '100vh',
+  minWidth: '100vw',
+  background: `${theme.palette.background.default} url(${background}) no-repeat right bottom`,
+  overflow: 'auto',
+}));
+
+const Main = styled('main')(() => ({
+  flex: '1',
+}));