diff --git a/apps/frontend-bff/src/main.tsx b/apps/frontend-bff/src/main.tsx
index 563fabf..da4e45b 100644
--- a/apps/frontend-bff/src/main.tsx
+++ b/apps/frontend-bff/src/main.tsx
@@ -3,6 +3,7 @@ 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
@@ -10,6 +11,7 @@ const root = ReactDOM.createRoot(
root.render(
+
diff --git a/libs/ui/common/src/index.ts b/libs/ui/common/src/index.ts
index feea622..4c98658 100644
--- a/libs/ui/common/src/index.ts
+++ b/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';
diff --git a/libs/ui/common/src/lib/tables/landingPage.css b/libs/ui/common/src/lib/tables/landingPage.css
deleted file mode 100644
index 0ca2a2f..0000000
--- a/libs/ui/common/src/lib/tables/landingPage.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.title {
- font-family: 'Montserrat', sans-serif;
- font-weight: 900; /* You can change to 400 for regular weight */
-}
-
-.plus-minus-select {
- font-family: 'Montserrat', sans-serif;
- font-weight: 900;
- font-size: 100px;
-}
-
-.table-box {
- width: 20vw;
- height: 20vw; /* Padding around the container */
-}
-.table-button {
- height: 68%;
-}
-
-.horizontal-container {
- width: 100%;
- display: flex; /* Enables flexbox */
- }
\ No newline at end of file
diff --git a/libs/ui/common/src/lib/tables/landingPage.tsx b/libs/ui/common/src/lib/tables/landingPage.tsx
index fa40d7d..787a7a4 100644
--- a/libs/ui/common/src/lib/tables/landingPage.tsx
+++ b/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 (
-
-
- Tables
-
-
- {Array.from(Array(9)).map((_, index) => (
-
-
-
- ))}
-
-
- { totalPeople>0 ?
-
- : null
- }
-
-
- );
+ return (
+
+
+ Tables
+
+
+ {Array.from(Array(15)).map((_, index) => (
+
+
+
+ ))}
+
+
+
+
+
+ );
}
-export default LandingPage;
\ No newline at end of file
+
+export default LandingPage;
diff --git a/libs/ui/common/src/lib/tables/nbPeopleSelector.tsx b/libs/ui/common/src/lib/tables/nbPeopleSelector.tsx
index 7af7f95..e5fd8b6 100644
--- a/libs/ui/common/src/lib/tables/nbPeopleSelector.tsx
+++ b/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,
+) {
+ return (
+ ,
+ className: 'increment',
+ },
+ decrementButton: {
+ children: ,
+ },
+ }}
+ {...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 (
-
-
-
-
-
- {nbPeople}
-
-
-
-
-
+
);
}
-export default NbPeopleSelector;
\ No newline at end of file
+export default NbPeopleSelector;
diff --git a/libs/ui/common/src/lib/tables/tableSquare.tsx b/libs/ui/common/src/lib/tables/tableSquare.tsx
index 9e3af3b..c95084c 100644
--- a/libs/ui/common/src/lib/tables/tableSquare.tsx
+++ b/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 (
-
-