remove css media query and add bootstrap class for responsive LoginPa…

…nel component
joshsoftware · May 25, 2020 · a4aaaa0 · a4aaaa0
1 parent 6720926
commit a4aaaa0
Showing 1 changed file with 18 additions and 30 deletions.
diff --git a/react-frontend/src/login/LoginPanel.js b/react-frontend/src/login/LoginPanel.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row } from "react-bootstrap";
+import { Col } from "react-bootstrap";
 import PropTypes from "prop-types";
 import { AiOutlineMail } from "react-icons/ai";
 import Styled from "styled-components";
@@ -10,23 +10,10 @@ import LoginTextComponent from "shared-components/login-text-component/LoginText
 
 const Wrapper = Styled.div`
 background: #334856;
-height: auto
 `;
-const FirstRow = Styled(Row)`
+const FirstCol = Styled(Col)`
   font: Helvetica Neue,Regular;
   padding-top: 1rem;
-  height: 33.33%;
-`;
-const SecondRow = Styled(Row)`
-  height: 33.33%;
-  @media (max-width: 769px) {
-    height: 55.5%;
-  }
-`;
-const ThirdRow = Styled(Row)`
-  @media (min-width: 767px) {
-    height: 33.33%;
-  }
 `;
 const SignInButtonComponent = Styled(ButtonComponent)`
   border-radius: 25px;
@@ -36,34 +23,35 @@ const LoginPanel = ({
   buttonText,
   orgPrimaryCoreValue,
   encouragementThought,
+  onClick,
 }) => (
-  <Wrapper className="h-100 align-items-center">
-    <FirstRow className="h1">
+  <Wrapper className="h-100 align-items-center d-flex flex-column">
+    <FirstCol className="h1">
       <LogoComponent />
-    </FirstRow>
-    <SecondRow className="align-items-center d-flex justify-content-center">
+    </FirstCol>
+    <Col className="align-items-center d-flex justify-content-center ">
       <SignInButtonComponent
-        className="btn-light "
+        className="btn-light"
         icon={<AiOutlineMail fontSize={15} />}
         text={buttonText}
+        onClick={onClick}
+      />
+    </Col>
+    <Col className="d-none d-md-block d-lg-block">
+      <LoginTextComponent
+        className="text-white text-center "
+        orgPrimaryCoreValue={orgPrimaryCoreValue}
+        encouragementThought={encouragementThought}
       />
-    </SecondRow>
-    <div className="d-none d-md-block ">
-      <ThirdRow>
-        <LoginTextComponent
-          className="text-white text-center "
-          orgPrimaryCoreValue={orgPrimaryCoreValue}
-          encouragementThought={encouragementThought}
-        />
-      </ThirdRow>
-    </div>
+    </Col>
   </Wrapper>
 );
 
 LoginPanel.propTypes = {
   buttonText: PropTypes.string,
   orgPrimaryCoreValue: PropTypes.string,
   encouragementThought: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
 };
 
 LoginPanel.defaultProps = {