Orders page

StartUpNationLabs · Sep 17, 2024 · 21dadad · 21dadad
1 parent 9be4de1
commit 21dadad
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/libs/ui/common/src/lib/orders/orders.css b/libs/ui/common/src/lib/orders/orders.css
@@ -3,6 +3,7 @@
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
+    font-size: 24px;
 }
 
 .popup-fullscreen {
@@ -11,21 +12,30 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(139, 196, 227, 0.9); /* Fond bleu */
+    background-color: rgba(139, 196, 227, 0.9); 
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    align-items: left;  
     color: white;
-    z-index: 1000; /* Assure que la popup est au-dessus de tout */
+    z-index: 1000; 
     animation: fadeIn 0.5s ease-in-out;
+    border-top-left-radius: 80px;
+    border-top-right-radius: 80px;
 }
 
-/* Bouton de fermeture dans la popup */
 .close-button {
-    margin-top: 20px;
+    font-size: 24px;
+    position: absolute;    
+    top: 70px;              
+    left: 50%;               
+    transform: translateX(-50%); 
+    margin-top: 0px;        
+    z-index: 1010;          
+
 }
 
+
+
 @keyframes fadeIn {
     from {
         opacity: 0;

diff --git a/libs/ui/common/src/lib/orders/orders.tsx b/libs/ui/common/src/lib/orders/orders.tsx
@@ -2,6 +2,17 @@ import './orders.css';
 import { Button, Typography, Box } from "@mui/material";
 import { useState } from 'react';
 
+const Section = ({ title, content }) => (
+    <Box sx={{ marginBottom: '20px' }}>
+        <Typography variant="h6" gutterBottom sx={{ color: 'black', fontSize: '24px' }}>
+            {title}
+        </Typography>
+        <Typography variant="body1" sx={{ color: 'black', fontSize: '18px' }}>
+            {content}
+        </Typography>
+    </Box>
+);
+
 export function Orders() {
     const [open, setOpen] = useState(false);
 
@@ -11,20 +22,31 @@ export function Orders() {
 
     return (
         <Box margin='170px' marginTop='20vw'>
-
-
             <Box className="bottom-button">
                 <Button variant="contained" onClick={handleToggle}>
-                    {open ? 'Orders' : 'Orders'}
+                    Orders
                 </Button>
             </Box>
 
             {open && (
                 <Box className="popup-fullscreen">
-
                     <Button variant="contained" onClick={handleToggle} className="close-button">
                         Orders
                     </Button>
+
+                    <Box 
+                        sx={{ 
+                            display: 'flex', 
+                            flexDirection: 'column', 
+                            alignItems: 'flex-start',
+                            mt: 15,
+                            paddingLeft: '20px'
+                        }}
+                    >
+                        <Section title="Drink" content="Tables" />
+                        <Section title="Starter" content="Tables" />
+                        <Section title="Main Course" content="Tables" />
+                    </Box>
                 </Box>
             )}
         </Box>