From aa64f47f925269c0213e5b54363c731930626fe4 Mon Sep 17 00:00:00 2001
From: Avinash Mane <avimanepatil@gmail.com>
Date: Fri, 22 May 2020 14:51:46 +0530
Subject: [PATCH] added responsive component for mobile

---
 .../src/login/PreLoginPanelMobileComponent.js | 36 +++++++------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/react-frontend/src/login/PreLoginPanelMobileComponent.js b/react-frontend/src/login/PreLoginPanelMobileComponent.js
index c63667506..6e21d3a45 100644
--- a/react-frontend/src/login/PreLoginPanelMobileComponent.js
+++ b/react-frontend/src/login/PreLoginPanelMobileComponent.js
@@ -1,48 +1,36 @@
 import React from "react";
-import { Container } from "react-bootstrap";
+import { Col } from "react-bootstrap";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import LogoComponent from "shared-components/peerly-Logo/LogoComponent";
 import LoginTextComponent from "shared-components/login-text-component/LoginTextComponent";
 import PreLoginImageComponent from "shared-components/prelogin-image-components/PreLoginImageComponent";
 
-const RowText = styled.div`
-  hight: 33%;
-  width: 100%;
-`;
-
-const RowImage = styled.div`
-  hight: 34%;
-  width: 100%;
+const Wrapper = styled.div`
+  height: 100vh;
 `;
 
 const PreLoginPanelMobileComponent = ({
-  classNameContainer,
   orgPrimaryCoreValue,
   encouragementThought,
 }) => (
-  <Container className={classNameContainer} fluid={true}>
-    <RowText className="py-5 text-white">
+  <Wrapper className="bg-dark d-flex flex-column" fluid={true}>
+    <Col className=" d-flex justify-content-center align-items-center">
       <LogoComponent />
-    </RowText>
-    <RowImage>
-      <PreLoginImageComponent className="w-100 img-fluid" />
-    </RowImage>
-    <RowText className="py-5">
+    </Col>
+    <Col className="d-flex justify-content-center align-items-center">
+      <PreLoginImageComponent className="img-fluid" />
+    </Col>
+    <Col className="d-flex justify-content-center align-items-center ">
       <LoginTextComponent
         orgPrimaryCoreValue={orgPrimaryCoreValue}
         encouragementThought={encouragementThought}
       />
-    </RowText>
-  </Container>
+    </Col>
+  </Wrapper>
 );
 
-PreLoginPanelMobileComponent.defaultProps = {
-  classNameContainer: "bg-dark w-100",
-};
-
 PreLoginPanelMobileComponent.propTypes = {
-  classNameContainer: PropTypes.string,
   orgPrimaryCoreValue: PropTypes.string,
   encouragementThought: PropTypes.string,
 };