Merge branch 'development' of https://github.com/codeisscience/journal-policy-tracker-frontend into feature/Alert

Author: NumanAnees

src/components/Navigation.js

@@ -13,6 +13,7 @@ function Navigation() {
       bg='light'
       variant='light'
       style={{ paddingLeft: '30px', paddingRight: '30px' }}
+      fixed="top"
     >
       <Navbar.Brand href='#home'>
         <img src={Logo} alt='' srcSet='' height={81} width={150} />

src/pages/Contact.js

@@ -6,7 +6,7 @@ import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
 import { FaGitter } from 'react-icons/fa';
 
 const Contact = () => (
-  <Container>
+  <Container  className='contact-padding'>
     <h1>Contact Us</h1>
     <p>Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:</p>
     <Row className='contact-card-one'>

src/pages/Home.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import Header from '../components/Header';
 import LandingSection from '../components/LandingSection';
+import "../styles/Header.css"
 
 function Home() {
   return (
-    <>
-      <Header />
+    <div className='header-padding'>
+       <Header />
       <LandingSection />
-    </>
+    </div>
   );
 }
 

src/pages/Journal.js

@@ -2,11 +2,12 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 import { Col, Row, Container, Table } from 'react-bootstrap';
+import "../styles/Journal.css"
 
 import AddJournal from '../components/AddJournal';
 
 const Journal = () => (
-  <Container>
+  <Container className='journal-padding'>
     <h1>Journals</h1>
     <AddJournal />
   </Container>

src/pages/Login.js

@@ -51,7 +51,7 @@ function Login() {
   }
   };
     return (
-      <Row>
+      <Row className='login-padding'>
         <Col md={4} />
         <Col md={4}>
           <Form className='login-form' onSubmit={handleLogin}>

src/pages/Manifesto.js

@@ -14,7 +14,7 @@ import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
 
 const Manifesto = () => (
   <Container>
-    <Row className='manifesto-header'>
+    <Row className='manifesto-header manifesto-padding'>
       <Col xs={12} sm={12} md={3}>
         <Image src={StandingImg} height={220} />
       </Col>
@@ -50,7 +50,7 @@ const Manifesto = () => (
     </Row>
     <Row className='manifesto-support'>
       <h1>I want to express my support for the manifesto! Tell me how</h1>
-      <Col md={4}>
+      <Col md={3} className="manifesto-support-points">
         <Image src={WalkingImg} height={140} />
         <p>
           <a
@@ -62,7 +62,7 @@ const Manifesto = () => (
           </a>
         </p>
       </Col>
-      <Col md={4}>
+      <Col md={3} className="manifesto-support-points">
         <Image src={PeersImg} height={140} />
         <p>
           <a
@@ -76,16 +76,16 @@ const Manifesto = () => (
           on behalf of an organisation.
         </p>
       </Col>
-      <Col md={4}>
+      <Col md={3} className="manifesto-support-points">
         <img src={HandsIcon} alt='' height={140} />
         <p>
           We’re particularly interested in adding logos and links indicating organisational support
           from publishers, funders, and research institutions.
         </p>
       </Col>
     </Row>
-    <Row>
-      <Col md={6}>
+    <Row className='manifesto-contribute'>
+      <Col md={5}>
         <h2>How can I contribute?</h2>
         <ul>
           <li>Sign the manifesto and share with all your friends!</li>
@@ -111,7 +111,7 @@ const Manifesto = () => (
           </li>
         </ul>
       </Col>
-      <Col md={6} className='manifesto-contact'>
+      <Col md={5} className='manifesto-contact'>
         <h2>Contact</h2>
         <a href='https://twitter.com/codeisscience'>
           <ImTwitter />

src/pages/SignUp.js

@@ -3,6 +3,7 @@ import { React, useState } from 'react';
 import { Row, Col, Form, Button } from 'react-bootstrap';
 import { showSuccessMessage,showErrorMessage } from '../helpers/alerts';
 import { SignupValidation } from '../helpers/validate';
+import "../styles/Signup.css"
 
 const SignUp = () => {
   const [details, setDetails] = useState({
@@ -39,7 +40,7 @@ const SignUp = () => {
   };
 
   return (
-    <Row>
+    <Row className='signup-padding'>
       <Col md={4} />
       <Col md={4}>
         <Form className='login-form' onSubmit={handleSubmit}>

src/styles/Contact.css

@@ -11,3 +11,6 @@
 .contact-form {
   margin-bottom: 4em;
 }
+.contact-padding{
+  padding-top: 8.7em;
+}

src/styles/Header.css

@@ -24,3 +24,6 @@
   margin-top: 20em;
   margin-left: calc(((100% - 270px) / 3) * 2);
 }
+.header-padding{
+  padding-top: 6.7em; 
+}

src/styles/Journal.css

@@ -0,0 +1,3 @@
+.journal-padding{
+    padding-top: 7em;
+}