Merge pull request #26 from Itera/restaurantOverview

Restaurant overview

restaurant/web/src/components/Header.tsx

@@ -17,6 +17,7 @@ import {
 } from '@chakra-ui/react';
 import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
 import { Link as ReactRouterLink } from 'react-router-dom';
+import theme from '../theme';
 
 interface Props {
   children: React.ReactNode;
@@ -47,7 +48,7 @@ const SimpleNav = () => {
 
   return (
     <>
-      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
+      <Box bg={theme.colors['explore-gray'].main} px={4}>
         <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
           <IconButton
             size={'md'}
@@ -64,12 +65,16 @@ const SimpleNav = () => {
               display={{ base: 'none', md: 'flex' }}
             >
               <Text>
-              <ChakraLink as={ReactRouterLink} to="/">
-                  Home
+                <ChakraLink as={ReactRouterLink} to="/">
+                    Home
                 </ChakraLink>
+              </Text>
+              <Text>
                 <ChakraLink as={ReactRouterLink} to="/mybookings">
                   My Bookings
                 </ChakraLink>
+              </Text>
+              <Text>
                 <ChakraLink as={ReactRouterLink} to="/restaurants">
                   Restaurants
                 </ChakraLink>

restaurant/web/src/pages/Home.tsx

@@ -1,10 +1,12 @@
 import { useAccount, useMsal } from '@azure/msal-react';
-import { Box, Button, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Box, Button, Heading, Image, Text, VStack} from '@chakra-ui/react';
 import { Guest, Room } from 'cms-types';
 import { useEffect } from 'react';
 import useAccessToken from '../auth/useAccessToken';
 import { useGet } from '../hooks/useGet';
-import { Link as ReactLink } from 'react-router-dom';
+import theme from '../theme';
+// import { Link as ReactLink } from 'react-router-dom';
+import sourceWhite from '../assets/LogoWhite.png';
 
 const Home = () => {  
   const { accounts } = useMsal();
@@ -60,63 +62,44 @@ const Home = () => {
   }, [guest, account, accessToken, mutate, isLoading]);
 
   return (
-    <Flex
+    <VStack
       width="100vw"
       height="100vh"
       alignContent="center"
       justifyContent="center"
-      backgroundColor="#f0f0f0"
+      backgroundColor={theme.colors['explore-blue'].main}
     >
-      <Box m="0 auto">
-        <Heading as="h1" textAlign="center" fontSize="5xl" mt="100px">
+      <Box mt={6}>
+        <Image src={sourceWhite}></Image>
+      </Box>
+      <Box 
+        m="0 auto"
+        mb={10}
+      >
+        <Heading as="h1" textAlign="center" fontSize="5xl" mt="100px" color='white'>
           Welcome, {account?.name}!
         </Heading>
-        <Text fontSize="xl" textAlign="center" mt="30px">
+        <Text fontSize="xl" textAlign="center" mt="30px" color='white'>
           {guest && guest.id == ''
             ? 'Hang on, we are creating a guest account for you...'
             : room && room.roomNumber == ''
             ? 'Hang on, your room is not ready yet...'
             : 'Your room number is ' + room?.roomNumber}
         </Text>
-        <Box>
-          {accessToken &&
-            CopyToClipboardButton(
-              accessToken,
-              'Copy access token to clipboard'
-            )}
-        </Box>
-        <Link as={ReactLink} to="/restaurant/1"><Button variant='solid' colorScheme='blue'> Restaurant</Button></Link>
       </Box>
-    </Flex>
-  );
-};
-
-const CopyToClipboardButton = (text: string, label?: string) => {
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(text);
-  };
-
-  return (
-
-    <Tooltip label={label ?? 'Copy to clipboard'}>
-
-      <Button
-        w="fit-content"
-        p="4"
-        px="4px"
-        colorScheme="blue"
-        borderRadius="10px"
+
+      <Box 
         m="0 auto"
-        mt="8"
-        fontWeight="bold"
-        color="white"
-        fontSize="l"
-        onClick={copyToClipboard}
+        mb={6}
         >
-        📄
-      </Button>
-    </Tooltip>
+        <VStack>
+          <Button m={3} variant='solid' colorScheme='gray'>Spa</Button>
+          <Button m={3} variant='solid' colorScheme='gray'>Restaurants</Button>
+          <Button m={3} variant='solid' colorScheme='gray'>Excursions</Button>
+        </VStack>
+      </Box>
+    </VStack>
   );
 };
 
-export default Home;
+export default Home;

restaurant/web/src/pages/RestaurantOverview.tsx

@@ -9,23 +9,25 @@ import {
   Button,
   Heading,
   Link as ChakraLink,
+  HStack
 } from '@chakra-ui/react';
 import { Link as ReactRouterLink } from 'react-router-dom';
-import theme from "../theme";
+import theme from '../theme';
 
 const RestaurantOverview = () => {
   return (
     <Stack
-      direction="column" 
+      direction="column"
       align="center"
       alignContent="center"
       justifyContent="center"
       backgroundColor={theme.colors['explore-light-blue'].main}
     >
+
       <Box 
-        height='100%'
-      >
+        height='100%'>
         <ChakraLink as={ReactRouterLink} to="/restaurant/1">
+
           <Card
             p={6}
             m={8}
@@ -52,9 +54,16 @@ const RestaurantOverview = () => {
               </CardBody>
 
               <CardFooter>
-                <Button variant="outline" color="#FFB46D">
-                  Book
-                </Button>
+                <HStack>
+                  <Button variant="outline" color="#FFB46D">
+                    Book
+                  </Button>
+                  <ChakraLink as={ReactRouterLink} to="/restaurant">
+                    <Button variant="outline" color="#FFB46D">
+                      See Menu
+                    </Button>
+                  </ChakraLink>
+                </HStack>
               </CardFooter>
             </Stack>
           </Card>
@@ -87,9 +96,16 @@ const RestaurantOverview = () => {
               </CardBody>
 
               <CardFooter>
-                <Button variant="outline" color="#FFB46D">
-                  Book
-                </Button>
+                <HStack>
+                  <Button variant="outline" color="#FFB46D">
+                    Book
+                  </Button>
+                  <ChakraLink as={ReactRouterLink} to="/restaurant">
+                    <Button variant="outline" color="#FFB46D">
+                      See Menu
+                    </Button>
+                  </ChakraLink>
+                </HStack>
               </CardFooter>
             </Stack>
           </Card>
@@ -122,9 +138,16 @@ const RestaurantOverview = () => {
               </CardBody>
 
               <CardFooter>
-                <Button variant="outline" color="#FFB46D">
-                  Book
-                </Button>
+                <HStack>
+                  <Button variant="outline" color="#FFB46D">
+                    Book
+                  </Button>
+                  <ChakraLink as={ReactRouterLink} to="/restaurant">
+                    <Button variant="outline" color="#FFB46D">
+                      See Menu
+                    </Button>
+                  </ChakraLink>
+                </HStack>
               </CardFooter>
             </Stack>
           </Card>
@@ -157,9 +180,16 @@ const RestaurantOverview = () => {
               </CardBody>
 
               <CardFooter>
-                <Button variant="outline" color="#FFB46D">
-                  Book
-                </Button>
+                <HStack>
+                  <Button variant="outline" color="#FFB46D">
+                    Book
+                  </Button>
+                  <ChakraLink as={ReactRouterLink} to="/restaurant">
+                    <Button variant="outline" color="#FFB46D">
+                      See Menu
+                    </Button>
+                  </ChakraLink>
+                </HStack>
               </CardFooter>
             </Stack>
           </Card>