Merge pull request #1 from StartUpNationLabs/fix-landing-page

fix: landing page

apps/frontend-bff/src/main.tsx

@@ -3,13 +3,15 @@ import * as ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
 import App from './app/app';
+import {CssBaseline} from "@mui/material";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <StrictMode>
     <BrowserRouter>
+      <CssBaseline />
       <App />
     </BrowserRouter>
   </StrictMode>

libs/ui/common/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lib/ui-common';
 export * from './lib/tables/landingPage';
+export * from './lib/tables/tableSquare';
 export * from './lib/offers/offers';
 export * from './lib/orders/orders';
 export * from './lib/summary/summary';

libs/ui/common/src/lib/tables/landingPage.tsx

@@ -1,51 +1,41 @@
-import { CenterFocusStrong } from '@mui/icons-material';
-import './landingPage.css';
-import { useNavigate } from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 import TableSquare from './tableSquare';
-import { Button, Typography, Grid2, Box } from "@mui/material";
+import {Button, Typography, Box, Grid2 as Grid} from "@mui/material";
 import * as React from 'react';
-import { useState } from 'react';
-import { Router } from 'react-router-dom';
+import {useState} from 'react';
 
 export function LandingPage() {
-    const [totalPeople, setTotalPeople] = useState(0);
-    const navigate = useNavigate();
+  const [totalPeople, setTotalPeople] = useState(0);
+  const navigate = useNavigate();
 
-    const validateTables = () => {
-        console.log({totalPeople})
-        navigate("/offers")
-    }
+  const validateTables = () => {
+    console.log({totalPeople})
+    navigate("/offers")
+  }
 
-    return (
-        <Box margin='170px' marginTop='20vw'>
-            <Typography align='center'  variant="h1" component="h2" fontSize="8vw" fontWeight="bold" >
-                Tables
-            </Typography>
-            <Grid2 container spacing={4} justifyContent="center" marginTop="60px">
-                {Array.from(Array(9)).map((_, index) => (
-                    <Grid2 key={index} size='auto' >
-                        <TableSquare tableNumber={index} totalPeople={totalPeople} setTotalPeople={setTotalPeople}></TableSquare>
-                    </Grid2>
-                ))}
-            </Grid2>
-            <Box textAlign='center' marginTop="60px">
-            { totalPeople>0 ? 
-                <Button
-                    onClick={validateTables}
-                    variant="contained"
-                    color="success"
-                    style={{
-                        padding: '20px 50px', // Plus grand bouton
-                        borderRadius: '50px',  // Coins arrondis
-                        fontSize: '4vw',      // Texte plus grand
-                    }}
-                    >
-                    Validate
-                </Button>
-                : null
-            }
-            </Box>
-        </Box>
-    );
+  return (
+    <Box  width={"100%"} height={"100vh"} display={"flex"} alignItems={"center"} flexDirection={"column"} justifyContent={"center"}>
+      <Typography align='center' variant="h1" component="h2" fontSize="10vh" fontWeight="bold">
+        Tables
+      </Typography>
+      <Grid container spacing={4} justifyContent={"center"} alignItems={"center"} marginTop="60px" maxHeight='60vh'  overflow='auto' maxWidth={800} >
+        {Array.from(Array(15)).map((_, index) => (
+          <Grid key={index}  >
+            <TableSquare tableNumber={index} totalPeople={totalPeople} setTotalPeople={setTotalPeople}></TableSquare>
+          </Grid>
+        ))}
+      </Grid>
+      <Box textAlign='center' marginTop="60px">
+        <Button
+          onClick={validateTables}
+          variant="contained"
+          color="success"
+        >
+          <Typography variant={"h4"}>Create</Typography>
+        </Button>
+      </Box>
+    </Box>
+  );
 }
-export default LandingPage;
+
+export default LandingPage;

libs/ui/common/src/lib/tables/nbPeopleSelector.tsx

@@ -1,11 +1,149 @@
-import './landingPage.css';
 
+import {ReactNode, useState} from 'react';
+import * as React from 'react';
+import {
+  Unstable_NumberInput as BaseNumberInput,
+  NumberInputProps,
+} from '@mui/base/Unstable_NumberInput';
+import { styled } from '@mui/system';
+import RemoveIcon from '@mui/icons-material/Remove';
 import AddIcon from '@mui/icons-material/Add';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
 
-import { IconButton, Typography, Box } from "@mui/material";
-import { useState } from 'react';
+const NumberInput = React.forwardRef(function CustomNumberInput(
+  props: NumberInputProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <BaseNumberInput
+      slots={{
+        root: StyledInputRoot,
+        input: StyledInput,
+        incrementButton: StyledButton,
+        decrementButton: StyledButton
+      } as any}
+      slotProps={{
+        incrementButton: {
+          children: <AddIcon fontSize="small" />,
+          className: 'increment',
+        },
+        decrementButton: {
+          children: <RemoveIcon fontSize="small" />,
+        },
+      }}
+      {...props }
+      ref={ref}
+    />
+  );
+});
 
+const blue = {
+  100: '#daecff',
+  200: '#b6daff',
+  300: '#66b2ff',
+  400: '#3399ff',
+  500: '#007fff',
+  600: '#0072e5',
+  700: '#0059B2',
+  800: '#004c99',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const StyledInputRoot = styled('div')(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 400;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+`,
+);
+
+const StyledInput = styled('input')(
+  ({ theme }) => `
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 400;
+  line-height: 1.375;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
+  border-radius: 8px;
+  margin: 0 8px;
+  padding: 10px 12px;
+  outline: 0;
+  min-width: 0;
+  width: 4rem;
+  text-align: center;
+
+  &:hover {
+    border-color: ${blue[400]};
+  }
+
+  &:focus {
+    border-color: ${blue[400]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+  }
+
+  &:focus-visible {
+    outline: 0;
+  }
+`,
+);
+
+const StyledButton = styled('button')(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  line-height: 1.5;
+  border: 1px solid;
+  border-radius: 999px;
+  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+
+  &:hover {
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? blue[700] : blue[500]};
+    border-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[400]};
+    color: ${grey[50]};
+  }
+
+  &:focus-visible {
+    outline: 0;
+  }
+
+  &.increment {
+    order: 1;
+  }
+`,
+);
 export function NbPeopleSelector({totalPeople, setTotalPeople}) {
     const [nbPeople, setNbPeople] = useState(0)
 
@@ -24,18 +162,8 @@ export function NbPeopleSelector({totalPeople, setTotalPeople}) {
     };
 
     return (
-        <Box className="horizontal-container">
-            <IconButton onClick={addPerson}  style={{maxWidth: "33%", minWidth: "33%"}}>
-                <AddIcon sx={{ fontSize: "4vw" }} style={{ color: 'black' }}/>
-            </IconButton>
-            <Typography align="center" variant="h3" component="h4" fontSize="4vw" fontWeight="bold" style={{maxWidth: "33%", minWidth: "33%"}}>
-                {nbPeople}
-            </Typography>
-            <IconButton onClick={removePerson} style={{maxWidth: "33%", minWidth: "33%"}} >
-                <RemoveRoundedIcon sx={{ fontSize: "4vw" }} style={{ color: 'black' }}/>
-            </IconButton>
-        </Box>
+      <NumberInput aria-label="Table Input" min={1} max={99} defaultValue={1} />
     );
 }
 
-export default NbPeopleSelector;
+export default NbPeopleSelector;

libs/ui/common/src/lib/tables/tableSquare.tsx

@@ -1,9 +1,9 @@
-import './landingPage.css';
 import NbPeopleSelector from './nbPeopleSelector';
 import { purple, red } from '@mui/material/colors';
 
 import { Button, Typography, Box } from "@mui/material";
 import {useState} from 'react';
+import {styled} from "@mui/system";
 
 export function TableSquare({tableNumber, totalPeople, setTotalPeople}) {
     const [showPeopleSelector, setShowPeopleSelector] = useState(false)
@@ -12,18 +12,31 @@ export function TableSquare({tableNumber, totalPeople, setTotalPeople}) {
     }
 
     return (
-        <Box className="table-box">
-            <Button onClick={showHidePeopleSelector} variant="contained" fullWidth={true} className="table-button" color={showPeopleSelector? 'success':'primary' }>
-                <Typography variant="h1" component="h2"  fontWeight="bold">
-                {tableNumber+1}
+        <Box width="fit-content">
+            <Button onClick={showHidePeopleSelector}
+                    variant="contained"
+                    sx={{aspectRatio: 1,
+
+                    }}
+                    color={showPeopleSelector? 'success':'primary' }>
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                width={120}  // width of the square box
+                height={100} // height of the square box
+              >
+                <Typography variant="h1" component="h2"  fontWeight="bold" >
+                {tableNumber}
                 </Typography>
+              </Box>
             </Button>
             <Box margin="5%"></Box>
-            { showPeopleSelector ? <NbPeopleSelector totalPeople={totalPeople} setTotalPeople={setTotalPeople}/> : null }
+            { showPeopleSelector ? <NbPeopleSelector totalPeople={totalPeople} setTotalPeople={setTotalPeople}/> : <></> }
             <Box margin="2%"></Box>
-            
+
         </Box>
     );
 }
 
-export default TableSquare;
+export default TableSquare;