Feature/refactor code

src/App.tsx

@@ -1,39 +1,28 @@
 import { ChakraProvider } from "@chakra-ui/react";
-import { Route, Routes } from "react-router-dom";
-import Home from "./features/home";
-import LoginPage from "./features/login/login-page";
-import ProfileSetupPage from "./features/registration/profile-setup-page";
-import RegistrationPage from "./features/registration/registration-page";
-import OrgProfilePage from "./features/organisation-profile";
-import OrganisationList from "./features/organisation-list";
-import UserDashboardPage from "./features/user-dashboard/user-dashboard-page";
 import { AuthProvider } from "./services/firebase/authProvider";
-import FirestoreMock from "./features/firestore-mock/firestore-mock";
-import { Paths } from "./paths";
-import { appTheme } from "./theme";
+import Routing from "./routing";
+import { Paths } from "./routing/Paths";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import mendisphereTheme from "./theme/index";
 
 function App() {
+  // Get current page
+  const currentPage = window.location.pathname;
+
+  // Check the current page is not login and registration page
+  const isShowHeaderAndFooter = ![
+    Paths.login,
+    Paths.signup,
+    Paths.profileSetup,
+  ].includes(currentPage);
+
   return (
-    <ChakraProvider theme={appTheme}>
+    <ChakraProvider theme={mendisphereTheme}>
       <AuthProvider>
-        <Routes>
-          <Route path={Paths.home} element={<Home />} />
-          <Route path={Paths.login} element={<LoginPage />} />
-          <Route path={Paths.dashboard} element={<UserDashboardPage />} />
-          <Route path={Paths.signup} element={<RegistrationPage />} />
-          <Route path={Paths.profileSetup} element={<ProfileSetupPage />} />
-          <Route
-            path={Paths.organisationListing}
-            element={<OrganisationList />}
-          />
-          <Route
-            path={Paths.organisationProfile}
-            element={<OrgProfilePage />}
-          />
-          {process.env.NODE_ENV === "development" && (
-            <Route path="firestore-mock" element={<FirestoreMock />} />
-          )}
-        </Routes>
+        {isShowHeaderAndFooter && <Header />}
+        <Routing />
+        {isShowHeaderAndFooter && <Footer />}
       </AuthProvider>
     </ChakraProvider>
   );

src/features/common/orgBreadCrumb.tsx → src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -7,23 +7,26 @@ import {
   Box,
   Text,
 } from "@chakra-ui/react";
-import { Link as RouterLink } from "react-router-dom";
 import { HomeIcon } from "@primer/octicons-react";
 import { Organisation } from "../../data/model/organisation";
-import { Paths } from "../../paths";
+import { Paths } from "../../routing/Paths";
 
 const currentPageStyle = {
   color: "#3959FF",
   textDecoration: "underline",
   fontWeight: "700",
 };
 
-const OrgBreadCrumb: React.FC<{ org?: Organisation }> = ({ org }) => {
+const Breadcrumbs: React.FC<{ org?: Organisation }> = ({ org }) => {
   const isOrgProfilePage = org !== undefined;
 
   return (
-    <Flex h="6vh">
-      <Box alignSelf="center" fontSize="14px">
+    <Flex h="6vh" marginBottom={25}>
+      <Box
+        alignSelf="center"
+        fontSize="14px"
+        className="page-width page-padding"
+      >
         <Breadcrumb spacing="1vw" separator={<ChevronRightIcon />}>
           {/* Home link */}
           <BreadcrumbItem>
@@ -59,4 +62,4 @@ const OrgBreadCrumb: React.FC<{ org?: Organisation }> = ({ org }) => {
   );
 };
 
-export default OrgBreadCrumb;
+export default Breadcrumbs;

src/components/Breadcrumbs/index.ts

@@ -0,0 +1 @@
+export { default } from "./Breadcrumbs";

src/components/Container/Container.tsx

@@ -0,0 +1,10 @@
+const Container = (props: any) => {
+  const { Children } = props;
+  return (
+    <Container maxW="1440px" centerContent margin="auto">
+      {Children}
+    </Container>
+  );
+};
+
+export default Container;

src/components/Container/index.ts

@@ -0,0 +1 @@
+export { default } from "./Container";

src/components/Footer/Footer.tsx

@@ -0,0 +1,196 @@
+import {
+  Flex,
+  Center,
+  VStack,
+  StackDivider,
+  Divider,
+  Box,
+  Text,
+  HStack,
+  Spacer,
+} from "@chakra-ui/react";
+import "../../pages/style.scss";
+import { SocialType } from "../../data/enums/social-type.enum";
+import { GetIconForSocials } from "../../utilities/iconMappings/iconMapping";
+import { Social } from "../../data/model/organisationSummary";
+
+const Footer: React.FC = () => {
+  const socials: Social[] = [
+    {
+      socialType: SocialType.Youtube,
+      url: "https://www.youtube.com/",
+    },
+    {
+      socialType: SocialType.Facebook,
+      url: "https://www.facebook.com/",
+    },
+    {
+      socialType: SocialType.LinkedIn,
+      url: "https://www.linkedin.com/",
+    },
+  ];
+  // dynamically generate social icons based on organisation data
+  const socialIconsView = socials.map((item, index) => {
+    return (
+      <Box key={index}>
+        <a href={item.url}>{GetIconForSocials(item.socialType)}</a>
+      </Box>
+    );
+  });
+
+  return (
+    <Box minH="37.33vh">
+      <Flex align="left" bg={"#F5F5F5"}>
+        <Box className="page-width page-padding" minH="37.33vh">
+          <VStack
+            divider={<StackDivider borderColor="whiteAlpha.200" />}
+            spacing={0}
+            align="stretch"
+          >
+            <Box h="4.6vh" />
+
+            <Box>
+              <Text
+                fontFamily={"Inter"}
+                fontStyle={"normal"}
+                fontWeight={"700"}
+                fontSize={"32px"}
+                lineHeight={"39px"}
+                letterSpacing={"-0.015em"}
+                color={"#192873"}
+              >
+                Mendisphere
+              </Text>
+            </Box>
+
+            <Box h="2.77vh" />
+
+            <HStack align="flex-end">
+              <Box w="42.2vw" id="footer">
+                <Text
+                  fontFamily={"Inter"}
+                  fontStyle={"normal"}
+                  fontWeight={"400"}
+                  fontSize={"18px"}
+                  lineHeight={"27px"}
+                  letterSpacing={"-0.015em"}
+                  textAlign="justify"
+                >
+                  Mendisphere aims to bring together mental health organizations
+                  and support non-profit mental health organizations who are
+                  struggling with resources and financial sustainability by
+                  increasing their visibility and supporting their fundraising
+                  efforts. Unlock the potential for mental wellness through
+                  nonprofit-corporate collaboration.
+                </Text>
+              </Box>
+              <Spacer></Spacer>
+              {socialIconsView}
+            </HStack>
+
+            <Box h="3.77vh"></Box>
+
+            <Divider colorScheme={"blue"} orientation={"horizontal"} />
+
+            <Box h="2.77vh"></Box>
+
+            <Flex>
+              <Box>
+                <Flex>
+                  <Text
+                    fontFamily={"Inter"}
+                    fontStyle={"normal"}
+                    fontWeight={"700"}
+                    fontSize={"24px"}
+                    lineHeight={"29px"}
+                    letterSpacing={"-0.015em"}
+                    color={"#707070"}
+                    as="a"
+                    href="mailto:[email protected]"
+                  >
+                    Contact us at [email protected]
+                  </Text>
+                  <Box w="4.166vw"></Box>
+
+                  {/* <Text
+                      fontFamily={"Inter"}
+                      fontStyle={"normal"}
+                      fontWeight={"700"}
+                      fontSize={"24px"}
+                      lineHeight={"29px"}
+                      letterSpacing={"-0.015em"}
+                    >
+                      Get resources
+                    </Text> */}
+                </Flex>
+              </Box>
+              <Box minW="40vw"> </Box>
+              {/* <Box>
+                  <Flex>
+                    <Text
+                      fontFamily={"Inter"}
+                      fontStyle={"normal"}
+                      fontWeight={"400"}
+                      fontSize={"18px"}
+                      lineHeight={"22px"}
+                      textAlign={"center"}
+                      letterSpacing={"-0.015em"}
+                    >
+                      About
+                    </Text>
+                    <Box w="4.166vw"></Box>
+
+                    <Text
+                      fontFamily={"Inter"}
+                      fontStyle={"normal"}
+                      fontWeight={"400"}
+                      fontSize={"18px"}
+                      lineHeight={"22px"}
+                      textAlign={"center"}
+                      letterSpacing={"-0.015em"}
+                    >
+                      Contact
+                    </Text>
+
+                    <Box w="4.166vw"></Box>
+
+                    <Text
+                      fontFamily={"Inter"}
+                      fontStyle={"normal"}
+                      fontWeight={"400"}
+                      fontSize={"18px"}
+                      lineHeight={"22px"}
+                      textAlign={"center"}
+                      letterSpacing={"-0.015em"}
+                    >
+                      FAQ
+                    </Text>
+                  </Flex>
+                </Box> */}
+            </Flex>
+
+            <Box h="3.33vh" />
+
+            <Box>
+              <Text
+                fontFamily={"Inter"}
+                fontStyle={"normal"}
+                fontWeight={"400"}
+                fontSize={"14px"}
+                lineHeight={"17px"}
+                letterSpacing={"-0.015em"}
+                color={"#707070"}
+              >
+                {`© ${new Date().getFullYear()} Mendisphere. All Rights Reserved.`}
+              </Text>
+            </Box>
+
+            <Box h="2vh" />
+          </VStack>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Footer;

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from "./Footer";