✨ Add footer and feedback popover (#250)

Author: alejsdev

frontend/src/components/Common/Footer.tsx

@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Flex,
+  Input,
+  Link,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTrigger,
+  Text,
+  Textarea,
+} from "@chakra-ui/react"
+import { FaCommentDots, FaFileAlt, FaQuestionCircle } from "react-icons/fa"
+
+const Footer = () => {
+  return (
+    <Box as="footer" w="100%" p={4}>
+      <Flex justifyContent="flex-end" alignItems="center">
+        <Popover>
+          <PopoverTrigger>
+            <Link mx={2} display="flex" alignItems="center" cursor="pointer">
+              <FaCommentDots />{" "}
+              <Box as="span" ml={1}>
+                Feedback
+              </Box>
+            </Link>
+          </PopoverTrigger>
+          <PopoverContent>
+            <PopoverArrow />
+            <PopoverCloseButton />
+            <PopoverHeader fontWeight="semibold">Feedback</PopoverHeader>
+            <PopoverBody>
+              <Text my={3}>Please let us know your thoughts and suggestions to help us improve:</Text>
+              <Input placeholder="Your email" mb={3} />
+              <Textarea placeholder="Your comments" mb={3} />
+            </PopoverBody>
+            <PopoverFooter>
+              <ButtonGroup size="sm">
+                <Button>Submit</Button>
+                <Button variant="outline">Cancel</Button>
+              </ButtonGroup>
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+        <Link mx={2} display="flex" alignItems="center">
+          <FaQuestionCircle />{" "}
+          <Box as="span" ml={1}>
+            Help
+          </Box>
+        </Link>
+        <Link mx={2} display="flex" alignItems="center">
+          <FaFileAlt />{" "}
+          <Box as="span" ml={1}>
+            Docs
+          </Box>
+        </Link>
+      </Flex>
+    </Box>
+  )
+}
+
+export default Footer

frontend/src/routes/_layout.tsx

@@ -1,7 +1,8 @@
-import { Box, Divider, Flex } from "@chakra-ui/react"
+import { Box, Flex } from "@chakra-ui/react"
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"
 import { Suspense } from "react"
 
+import Footer from "../components/Common/Footer"
 import Sidebar from "../components/Common/Sidebar"
 import UserMenu from "../components/Common/UserMenu"
 import TeamInvitation from "../components/Invitations/TeamInvitation"
@@ -22,43 +23,45 @@ export const Route = createFileRoute("/_layout")({
 function Layout() {
   return (
     <>
-      <Flex maxW="large" h="auto">
-        {/* Sidebar */}
-        <Box
-          position="fixed"
-          top="0"
-          left="0"
-          height="100vh"
-          width={{ md: "250px" }}
-          zIndex="3"
-          bg="white"
-        >
-          <Suspense>
-            <Sidebar />
-          </Suspense>
-        </Box>
-        <Flex flexDir="column" flex="1" ml="250px">
-          {/* Navbar */}
+      <Flex minHeight="100vh" flexDirection="column">
+        <Flex flex="1">
+          {/* Sidebar */}
           <Box
-            display={{ base: "none", md: "flex" }}
-            justifyContent="flex-end"
             position="fixed"
             top="0"
-            right="0"
-            left={{ base: 0, md: "250px" }}
-            h="5%"
-            zIndex="2"
-            p={4}
-            bg="white"
+            left="0"
+            height="100vh"
+            width={{ md: "250px" }}
+            zIndex="3"
           >
-            <UserMenu />
-          </Box>
-          <Divider />
-          {/* Main Content */}
-          <Box w="100%" mt="5%" p={10}>
-            <Outlet />
+            <Suspense>
+              <Sidebar />
+            </Suspense>
           </Box>
+          <Flex flexDir="column" flex="1" ml={{ base: 0, md: "250px" }}>
+            {/* Navbar */}
+            <Box
+              id="navbar"
+              display={{ base: "none", md: "flex" }}
+              justifyContent="flex-end"
+              position="fixed"
+              top="0"
+              right="0"
+              left={{ base: 0, md: "250px" }}
+              height="64px"
+              zIndex="2"
+              p={4}
+              gap="2"
+            >
+              <UserMenu />
+            </Box>
+            {/* Main Content */}
+            <Box w="80%" p={10} mt="64px" mx="auto">
+              <Outlet />
+            </Box>
+          </Flex>
         </Flex>
+        <Footer />
       </Flex>
       <TeamInvitation />
     </>