From 73b3f7372d640aaca1a29a34be174ba80db0b213 Mon Sep 17 00:00:00 2001
From: as-kolaib <as-kolaib@github.com>
Date: Sat, 21 Nov 2020 10:40:48 -0800
Subject: [PATCH 1/2] Fix: Scroll To Top for Route links

---
 src/components/ScrollToTop/ScrollToTop.js | 12 ++++++++++++
 src/router/RouterPages.jsx                |  2 ++
 2 files changed, 14 insertions(+)
 create mode 100644 src/components/ScrollToTop/ScrollToTop.js

diff --git a/src/components/ScrollToTop/ScrollToTop.js b/src/components/ScrollToTop/ScrollToTop.js
new file mode 100644
index 0000000..8b76e36
--- /dev/null
+++ b/src/components/ScrollToTop/ScrollToTop.js
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
\ No newline at end of file
diff --git a/src/router/RouterPages.jsx b/src/router/RouterPages.jsx
index e4ee5d4..40f4fda 100644
--- a/src/router/RouterPages.jsx
+++ b/src/router/RouterPages.jsx
@@ -11,10 +11,12 @@ import MissingPeople from '../pages/MissingPeople';
 import ContactUs from '../pages/Contactus';
 import PostMissingPerson from '../pages/PostMissingPerson';
 import MissingPerson from '../pages/MissedPerson';
+import ScrollToTop from '../components/ScrollToTop/ScrollToTop'
 
 const RouterPages = () => {
   return (
     <Router>
+      <ScrollToTop/>
       <Navbar />
       <Switch>
         <Route path="/" exact component={Home} />

From 893a62527e0b87967ed28aa08f8a2575d62eee32 Mon Sep 17 00:00:00 2001
From: as-kolaib <as-kolaib@github.com>
Date: Sat, 21 Nov 2020 12:00:53 -0800
Subject: [PATCH 2/2] Fix: Inputs Focus

---
 src/components/ContactUs/Input.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/ContactUs/Input.jsx b/src/components/ContactUs/Input.jsx
index 88f1a11..2964e88 100644
--- a/src/components/ContactUs/Input.jsx
+++ b/src/components/ContactUs/Input.jsx
@@ -2,10 +2,14 @@ import React from 'react'
 //Importing TextField Material Ui element
 import { TextField } from '@material-ui/core';
 
+import { useStyles } from '../AddMissingPersonForm/UseStyles'
+
 //This function is used to create the UI textField based on the assigned prps
 //It is reusable as it can be imported and used at any form 
 
 export default function Input(props) {
+    const classes = useStyles();
+
 //exporting the props recieved 
     const { name, label, value,error=null, onChange,multi } = props;
     //returning the Ui TextField components either as a single or multiline
@@ -16,6 +20,7 @@ export default function Input(props) {
             name={name}
             value={value}
             onChange={onChange}
+            className={classes.textFieldInput}
             {...(error && {error:true,helperText:error})}
             InputLabelProps={{style: {fontSize: 12}}} // font size of input label
             inputProps={{style: {fontSize: 12}}} // font size of input text
@@ -30,6 +35,7 @@ export default function Input(props) {
             rows={4}
             variant="outlined"
             onChange={onChange}
+            className={classes.textFieldInput}
             {...(error && {error:true,helperText:error})}
             InputLabelProps={{style: {fontSize: 12}}} // font size of input label
             inputProps={{style: {fontSize: 12}}} // font size of input text