added responsive component for mobile

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,
 };