remove reactStrap dependency from layout of the app

Author: Sahil811

src/client/app/components/NotFoundPage/index.js

@@ -1,17 +1,16 @@
 import React from 'react';
-import { Container, Row, Col } from 'reactstrap';
 import { Link } from 'react-router';
 
 import './index.scss';
 
 export default () =>
-	<Container className='container' id='notfoundcontainer'>
-		<Row>
-			<Col className="">
-				<h1 className="not-found">404</h1>
-				<p className="subtext">Oooooops!!!</p>
-				<p>The page seems to have evaporated.</p>
-				<Link to={"/"}>Continue to Homepage</Link>
-			</Col>
-		</Row>
-	</Container>
+	<div className='container' id='notfoundcontainer'>
+
+
+		<h1 className="not-found">404</h1>
+		<p className="subtext">Oooooops!!!</p>
+		<p>The page seems to have evaporated.</p>
+		<Link to={"/"}>Continue to Homepage</Link>
+
+
+	</div>

src/client/app/components/NotFoundPage/index.scss

@@ -1,25 +1,33 @@
 @import "../../styles/globals";
 
 #notfoundcontainer {
-	margin-top: $global_component_margin;
+
 	border-radius: $global_border_radius;
 	padding: $global_padding;
 	color: $global_black_color;
 	background: $global_white_color;
+	margin: 0 auto !important;
+	text-align: center;
 
 	a {
 		color: $theme_color_1;
+		
+
 	}
 
+
+
 	.not-found {
 		font-size: 20vmax;
 		color: $theme_color_1;
 		opacity: 0.3;
+		
 	}
 
 	.subtext {
 		font-size: 3vmax;
 		opacity: 0.7;
+	
 	}
 }
 

src/client/app/routes/ContactUs/index.js

@@ -3,7 +3,6 @@
  */
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Table } from 'reactstrap';
 import { toast, ToastContainer } from 'react-toastify';
 import CSVReader from 'react-csv-reader';
 import { APPLICATION_ROUTES, navigationIndexer } from '../../constants';

src/client/app/routes/LandingPage/index.js

@@ -3,14 +3,7 @@
  * @author gaurav sharma
  */
 import React, { useEffect } from 'react';
-import {
-	Container,
-	Row,
-	Col,
-	Form,
-	FormGroup,
-	Label
-} from 'reactstrap';
+
 import { connect } from 'react-redux';
 import { userLogin } from '../../redux/actions';
 import { toast, ToastContainer } from 'react-toastify';
@@ -41,7 +34,7 @@ const LandingPage = (props) => {
 		const loginContainer = document.getElementById('user-login');
 
 		if (bodyContainer.clientWidth >= 720) {
-			const loginMargin = (bodyContainer.clientHeight - loginContainer.clientHeight - 100) / 2;
+			const loginMargin = (bodyContainer.clientHeight - loginContainer.clientHeight - 80) / 2;
 			loginContainer.style.marginTop = `${loginMargin}px`;
 		} else {
 			loginContainer.style.marginTop = '10px';
@@ -76,41 +69,35 @@ const LandingPage = (props) => {
 
 	const { fetching, login } = props;
 	{ login && responseHandler() }
-	return <section className='content' id='content'>
+	return <section className='content' id='content' >
 		{/* <LoadingOverlay fetching={fetching}/> */}
 		<ToastContainer />
 		<section className='transparent-overlay'></section>
 		<br /><br /><br />
 		{/* <HeaderComponent/><br/> */}
-		<Container fluid>
-			<Row>
-				<Col md={4} sm={3} xs={2}></Col>
-				<Col md={4} sm={6} xs={8}>
-					<div className='text-center'>
-						<h2 className='logo-text'>PluginFactory ReactJS Scaffold</h2>
-					</div>
-					<section className='user-login' id='user-login'>
-						<Form>
-							<FormGroup>
-								<Label for="username">Username</Label><br />
-								<input ref={userUname => userUname = userUname} className='custom-field login-field' placeholder='Username for user' />
-							</FormGroup>
-							<FormGroup>
-								<Label for="username">Password</Label><br />
-								<input ref={userPass => userPass = userPass} type='password' className='custom-field login-field' placeholder='Password for user' />
-							</FormGroup>
-							<p className='text-center'>
-								<button className="litnite-btn" onClick={onLogin}>LOGIN&nbsp;&nbsp;&nbsp;<FontAwesome name="chevron-right" /></button>
-							</p>
-						</Form>
-						<br /><br /><br />
-						<hr className='line-break' />
-						<p className='text-center'>PluginFactory&copy;2019</p>
-					</section>
-				</Col>
-				<Col md={4} sm={3} xs={2}></Col>
-			</Row>
-		</Container>
+		<section className='form-container'>
+
+			<div className='text-center'>
+				<h2 className='logo-text'>PluginFactory ReactJS Scaffold</h2>
+			</div>
+			<section className='user-login' id='user-login'>
+
+				<label htmlFor="username">Username</label><br />
+				<input ref={userUname => userUname = userUname} className='custom-field login-field' placeholder='Username for user' />
+
+				<label htmlFor="username">Password</label><br />
+				<input ref={userPass => userPass = userPass} type='password' className='custom-field login-field' placeholder='Password for user' />
+
+				<p className='text-center'>
+					<button className="litnite-btn" onClick={onLogin}>LOGIN&nbsp;&nbsp;&nbsp;<FontAwesome name="chevron-right" /></button>
+				</p>
+
+				<br /><br /><br />
+				<hr className='line-break' />
+				<p className='text-center'>PluginFactory&copy;2019</p>
+			</section>
+
+		</section>
 	</section>
 }
 

src/client/app/routes/LandingPage/index.scss

@@ -42,4 +42,17 @@
 }
 .login-field {
 	width: 100%;
+}
+
+.user-login {
+   padding: 17px;
+
+   input  {
+	   margin-bottom: 19px;
+   }
+}
+
+.form-container{ 
+	max-width: 616px;
+	margin: 0 auto;
 }

src/client/app/routes/index.js

@@ -27,6 +27,7 @@ export default () => {
 				<Route path='/dashboard' component={DashboardPage} />
 				<Route path='/contactUs' component={ContactUsPage} />
 			</Route>
+
 		</Router>
 	</Provider>;
 }

src/client/app/styles/globals.scss

@@ -145,3 +145,4 @@ $global_white_color: #fff;
 	border: solid 1px silver;
 	min-height: 300px;
 }
+