Merge branch 'dev' of github.com:WalkingPal/walking-pal-web into pr/41

.docs/COLOR-SYSTEM.md

@@ -3,22 +3,22 @@
 This style guide is created from Material.io design guidelines
 If you want to learn from animations and illustrations, [follow this link](https://material.io/design/color/the-color-system.html#color-theme-creation)
 
-Following given are the types of colors that we using across our WebApp.
+The following given are the types of colors that we use across our WebApp.
 
-1. **background color** - background color for pages/screens. this color DOES NOT represent brand.
+1. **background color** - background color for pages/screens. This color DOES NOT represent the brand.
 
-2. **surface/paper color** - background color for elements containing content, such as cards. this color DOES NOT represent brand. cards are generally elevated surfaces/layer. they look like they have some height.
+2. **surface/paper color** - background color for elements containing content, such as cards. This color DOES NOT represent the brand. Cards are generally elevated surfaces/layer. They look like they have some height.
 
-3. **placeholder/disabled text color** - its used as disabled text color/ low-emphasis text color
+3. **placeholder/disabled text color** - its used as a disabled text color/ low-emphasis text color.
 
-4. **primary color** - primary color, usually your brand color. _Used frequently_ in components and app's screen.
+4. **primary color** - primary color, usually your brand color. _Used frequently_ in components and the app's screen.
 
 5. **Accent/Secondary color** - secondary color for your app which complements the primary color. _Used sparingly_.
    Secondary colors are used for: Floating action buttons, Links and headings (not regular text for paragraphs. For headings n other large fonts), Selection controls, like sliders and switches, Highlighting selected text
 
    _(Both of these primary and secondary colors mainly represent your brand)_
 
-6. **primary text color** - its general text on buttons and paragraphs and small font text only
+6. **primary text color** - its general text on buttons and paragraphs and small font text only.
 
 7. **secondary text color** - its used an complementary text color with **text color**
 
@@ -39,4 +39,4 @@ In Fig 1,
   - There are two different types in color: fill colors and text colors
     - There are 4 fill colors (primary, primary variant, secondary, secondary varaint) and 2 text colors (primary, secondary)
   - There primary text color is only used upon primary color fill and primary variant fill. Similarly, there seconndary text color is only used upon secondary color fill and secodnary variant fill.
-  - Currently, in our project we are not using any fill variant colors. But, it is subject to change in future.
+  - Currently, in our project we are not using any fill variant colors. But, it is subject to change in the future.

.docs/CONTRIBUTING.md

@@ -6,9 +6,9 @@ We are happy to welcome all the contributions from anyone willing to improve/add
 
 - Each participant/contributor will be assigned **2 issues (max)** at a time to work on.
 - Participants are expected to follow [project guidelines and coding style](PROJECT-GUIDELINES.md). Structured code is one of our top priorities.
-- Participants/contributors have to **comment** on issues they would like to work on, and mentors will assign you.
+- Participants/contributors have to **comment** on "open issues" they would like to work on, and mentors will assign you.
 - Issues will be assigned on a **first-come, first-serve basis**.
-- Participants/contributors can also **open their issues**
+- Participants/contributors can also **open their issues** and they can assign themselves if they want to work on it.
   - ##### Make sure to follow these when opening Issues:
     - Your Issue title must be in the form of `ISSUE_TYPE: ISSUE_TITLE`
       - ISSUE_TYPE can be `feat` (issues for new features), `bug`(for bug), `docs` (for docs), `chore`(for miscellaneous)
@@ -31,8 +31,9 @@ We are happy to welcome all the contributions from anyone willing to improve/add
   - Your PR title must be in the form of `PR_TYPE: PR_TITLE`
     - eg, `feat: new funky section`, `fix: fix the fencepost error`, `docs: add link to discord`, `style: make header component responsive`, `chore: add walkingpal logo`
     - Refer [Git Commit Guidelines](./GIT-GUIDELINES.MD) for more details
-  - Make sure you have created the issue for your PR. Link that issue to your PR.
-  - In your PR, if created new files, make sure they follow [Project Structure Guidelines](./PROJECT-STRUCTURE.md).
+  - Make sure you have created the issue for your PR. [Link that issue to your PR](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
+  - Mention you proposed changes in you PR description along with screenshots and reference links (if applicable).
+  - In your PR, if you created new files, make sure they follow [Project Structure Guidelines](./PROJECT-STRUCTURE.md).
   - Your work must be **original**, written by you not copied from other resources. Copying is not bad. But copying without properly understanding what part of code is actually needed and what what part is not, is very bad. Make sure you avoid adding redundant code.
   - You must **comment** on your code wherever necessary. **Avoid committing commented code**, e.g `console.log` statements, etc
   - For **frontend changes** kindly share screenshots and work samples of your work before sending a PR.
@@ -90,6 +91,28 @@ The following tools should be installed and running on your computer:
    yarn install
    ```
 
+### Additonal Setup
+
+Our app uses reCAPTCHA to help us prevent spammers/bots for polluting our database and helps us enhance the security we provide on our app.
+In order to access the `/register` and `/faq` pages on the app seamlessly, follow the required steps:
+
+1. Head to the [reCAPTCHA admin console](https://www.google.com/recaptcha/admin/create) and fill in the required details.
+
+![recaptcha-registration](./assets/recaptcha-registration.jpg)
+
+2. After clicking submit, you should be able to see the public and secret keys.
+
+![recaptcha-keys](./assets/recaptcha-keys.jpg)
+
+3. Create a file called .env.local and add the following to it, and paste the keys you copied from the reCAPTCHA dashboard here appropriately.
+
+```bash
+# Add the public site key here
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
+# Add the secret key here
+RECAPTCHA_SECRET_KEY=
+```
+
 ## Run Next.js Developement server
 
 ```bash

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,22 @@
+name: 🐛 Bug
+description: Report an issue to help improve the project.
+title: "bug: <description>"
+labels: ["bug", "hacktoberfest"]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description:
+        Write a brief description of the question or issue, also include what you tried and what didn't work. *Please add screenshots if applicable along with* ***steps to reproduce the issue and reference links (if applicable)***. If you need help or if you want to to discuss something with us, join the WalkingPal [Discord community](https://discord.gg/Et3aQTsW6a)!       
+        You can assign this issue to yourself if you want to work on it.
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: "&nbsp;"
+      options:
+        - label: I have read and I am following [the guidelines for creating a new issue](https://github.com/WalkingPal/walking-pal-web/blob/dev/.docs/CONTRIBUTING.md#make-sure-to-follow-these-when-opening-issues)
+          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,6 @@
+blank_issues_enabled: true
+contact_links:
+  - name: 👩‍💻 Join the WalkingPal Discord community
+    url: https://discord.gg/Et3aQTsW6a
+    about: If you need help or if you want to to discuss/ask questions, join the WalkingPal Discord community!
+

.github/ISSUE_TEMPLATE/doc.yml

@@ -0,0 +1,22 @@
+name: 📄 Documentation
+description: Found an issue in the documentation? You can use this one!
+title: "docs: <description>"
+labels: ["documentation", "hacktoberfest"]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description:
+        Write a description of the question or issue in the documentation. **Add reference links (if applicable)**. If you need help or if you want to to discuss something with us, join the WalkingPal [Discord community](https://discord.gg/Et3aQTsW6a)!
+        You can assign this issue to yourself if you want to work on it.
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: "&nbsp;"
+      options:
+        - label: I have read and I am following [the guidelines for creating a new issue](https://github.com/WalkingPal/walking-pal-web/blob/dev/.docs/CONTRIBUTING.md#make-sure-to-follow-these-when-opening-issues)
+          required: true

.github/ISSUE_TEMPLATE/features.yml

@@ -0,0 +1,21 @@
+name: 💡Feature Request
+description: Have a new idea/feature for this project? Please suggest!
+title: "feat: <description>"
+labels: ["enhancement", "hacktoberfest"]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description:
+        Write a description of the enhancement you propose. **Add screenshots/images or reference links (if applicable)**. If you need help or if you want to to discuss something with us, join the WalkingPal [Discord community](https://discord.gg/Et3aQTsW6a)!
+        You can assign this issue to yourself if you want to work on it.
+    validations:
+      required: true
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: "&nbsp;"
+      options:
+        - label: I have read and I am following [the guidelines for creating a new issue](https://github.com/WalkingPal/walking-pal-web/blob/dev/.docs/CONTRIBUTING.md#make-sure-to-follow-these-when-opening-issues)
+          required: true

components/Footer/Footer.tsx

@@ -12,22 +12,27 @@ const socials = [
 	{
 		link: "https://www.facebook.com/walkingpal.in",
 		icon: <FacebookOutlined sx={{ color: "#fff" }} />,
+		name: "Facebook",
 	},
 	{
 		link: "https://twitter.com/WalkingPal_in",
 		icon: <Twitter color="#fff" />,
+		name: "Twitter",
 	},
 	{
 		link: "https://www.linkedin.com/company/walkingpal/",
 		icon: <Linkedin color="#fff" />,
+		name: "Linkedin",
 	},
 	{
 		link: "https://www.instagram.com/walkingpal.in/",
 		icon: <Insta color="#fff" />,
+		name: "Instagram",
 	},
 	{
 		link: "https://youtu.be/L73A9fyyQqw",
 		icon: <YouTube color="#fff" />,
+		name: "Youtube",
 	},
 ];
 export const Footer: FC = ({}) => {
@@ -81,7 +86,12 @@ export const Footer: FC = ({}) => {
 					>
 						{socials.map((social, i) => {
 							return (
-								<Link href={social.link} target="_blank" key={"socail-" + i}>
+								<Link
+									href={social.link}
+									target="_blank"
+									key={"socail-" + i}
+									aria-label={social.name}
+								>
 									{social.icon}
 								</Link>
 							);

components/Header/Header.tsx

@@ -11,7 +11,10 @@ export const links = [
 	{ name: "FAQ", route: "/faq" },
 ];
 
-export const Header: FC = () => {
+interface IHeader {
+	allowPadding: boolean;
+}
+export const Header: FC<IHeader> = ({ allowPadding }) => {
 	const marginTop = 20;
 	const headerRef = useRef<HTMLElement>(null);
 	useEffect(() => {
@@ -43,10 +46,18 @@ export const Header: FC = () => {
 					})}
 					elevation={0}
 				>
-					{!width || width < 1200 ? <HeaderMobile /> : <HeaderDesktop />}
+					{(() => {
+						if (width) {
+							return width < 1200 ? <HeaderMobile /> : <HeaderDesktop />;
+						}
+					})()}
 				</Paper>
 			</header>
-			<div style={{ height: "calc(var(--header-height) + 5px)" }}></div>
+			<div
+				style={{
+					height: allowPadding ? "calc(var(--header-height) + 5px)" : 0,
+				}}
+			/>
 		</>
 	);
 };

components/Header/components/List1.tsx

@@ -1,6 +1,11 @@
-import { List, ListItemButton, ListItemText, Typography } from "@mui/material";
+import {
+	List,
+	ListItem,
+	ListItemButton,
+	ListItemText,
+	Typography,
+} from "@mui/material";
 import { links } from "components/Header";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { FC, MouseEvent } from "react";
 
@@ -12,7 +17,7 @@ export const List1: FC<IList1> = ({ mobile }) => {
 	const router = useRouter();
 
 	const handleClick = (
-		e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
+		e: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>,
 		route: string,
 	) => {
 		e.preventDefault();
@@ -36,24 +41,29 @@ export const List1: FC<IList1> = ({ mobile }) => {
 		>
 			{links.map(({ name, route }) => {
 				return (
-					<ListItemButton
-						key={name}
-						onClick={e => handleClick(e, route)}
-						sx={{ borderRadius: 1 }}
-					>
-						<ListItemText>
-							<Typography
-								variant="body2"
-								sx={{
-									color: router.route === route ? "primary.main" : "#828282",
-									textTransform: "capitalize",
-									px: 2,
-								}}
-							>
-								<Link href={route}>{name}</Link>
-							</Typography>
-						</ListItemText>
-					</ListItemButton>
+					<ListItem key={name}>
+						<ListItemButton
+							onClick={(
+								e: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>,
+							) => handleClick(e, route)}
+							sx={{ borderRadius: 1 }}
+							component="a"
+							role="link"
+						>
+							<ListItemText>
+								<Typography
+									variant="body2"
+									sx={{
+										color: router.route === route ? "primary.main" : "#828282",
+										textTransform: "capitalize",
+										px: 2,
+									}}
+								>
+									{name}
+								</Typography>
+							</ListItemText>
+						</ListItemButton>
+					</ListItem>
 				);
 			})}
 		</List>

components/LogoWordmark/LogoWordmark.tsx

@@ -23,7 +23,7 @@ export const LogoWordmark: FC<ILogoWordmark> = props => {
 					alignItems: "flex-end",
 				}}
 			>
-				<Logo />
+				<Logo style={{ width: 50, marginRight: 10 }} />
 				<Wordmark color={fill} />
 			</span>
 		</div>

pages/404.pg.ts

@@ -1 +1 @@
-export { ErrorMessage as default } from "./404/ErrorMessage";
+export { Error404 as default } from "./404/404";

pages/404/404.module.scss

@@ -0,0 +1,20 @@
+.main {
+	text-align: center;
+	display: flex;
+	min-height: 100vh;
+	flex-wrap: wrap;
+}
+.left {
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-width: 300px;
+}
+.right {
+	flex: 1;
+	display: grid;
+	align-content: center;
+	justify-content: center;
+	padding: 30px 4vw;
+}

pages/404/404.tsx

@@ -0,0 +1,40 @@
+import Head from "next/head";
+import type { NextPage } from "next";
+import styles from "./404.module.scss";
+import { Error } from "assets/png";
+import Image from "next/image";
+import { Box, Typography } from "@mui/material";
+
+export const Error404: NextPage = () => {
+	return (
+		<>
+			<Head>
+				<title> 404 | Page Not Found </title>
+				<meta
+					name="description"
+					content="Uh oh! 404 Not Found. Looks like you got lost"
+				/>
+				<meta
+					name="keywords"
+					content="404, not, found, walking, pal, buddy, walk"
+				/>
+			</Head>
+
+			<main className={styles.main}>
+				<div className={styles.left}>
+					<Image src={Error} alt="" />
+				</div>
+				<Box bgcolor="primary.main" color="#ffffffcc" className={styles.right}>
+					<Typography variant="h1" pb={3}>
+						Ouppps! <br /> 404
+					</Typography>
+					<Typography variant="h5">
+						Looks like this page is missing or unavailable. If you think this is
+						a mistake, don’t worry though, our best man is on the case! <br />
+						<br /> Meanwhile, please head back.
+					</Typography>
+				</Box>
+			</main>
+		</>
+	);
+};