Delete empty div in LoginPanel

joshsoftware · May 21, 2020 · 0d425e2 · 0d425e2
1 parent a65cb9f
commit 0d425e2
Showing 1 changed file with 34 additions and 22 deletions.
diff --git a/react-frontend/src/featurewise-directories/login/LoginPanel.js b/react-frontend/src/featurewise-directories/login/LoginPanel.js
@@ -4,23 +4,36 @@ import PropTypes from "prop-types";
 import { AiOutlineMail } from "react-icons/ai";
 import Styled from "styled-components";
 
-import LogoComponent from "shared-components/peerly-Logo/LogoComponent";
+import LogoComponent from "shared-components/peerly-logo/LogoComponent";
 import ButtonComponent from "core-components/Button/ButtonComponent";
-import LoginTextComponent from "shared-components/loginTextComponent/LoginTextComponent";
+import LoginTextComponent from "shared-components/login-text-component/LoginTextComponent";
+import styled from "styled-components";
 
 const Div = Styled.div`
 background: #334856;
 height: auto
 `;
 
+const SecondRow = styled(Row)`
+  height: 33.33%;
+  @media (max-width: 768px) {
+    height: 55.5%;
+  }
+`;
+const ThirdRow = styled(Row)`
+  @media (mix-width: 768px) {
+    height: 33.33%;
+  }
+`;
 const FirstRow = Styled(Row)`
-font: Helvetica Neue,Regular;
-height: auto;
-padding-top: 1rem;
+  font: Helvetica Neue,Regular;
+  padding-top: 1rem;
+  height: 33.33%;
 `;
 
 const SignInButtonComponent = Styled(ButtonComponent)`
-border-radius: 25px;
+  border-radius: 25px;
+  height: auto;
 `;
 
 const LoginPanel = ({
@@ -32,23 +45,22 @@ const LoginPanel = ({
     <FirstRow className="h1 text-white ">
       <LogoComponent />
     </FirstRow>
-    <Div className="h-25 d-sm-block d-md-none"></Div>
-    <Row className="justify-content-center h-50">
-      <div className="align-items-center d-flex justify-content-center">
-        <SignInButtonComponent
-          className="btn-light "
-          icon={<AiOutlineMail height={15} width={2} fontSize={15} />}
-          text={buttonText}
-        />
-      </div>
-    </Row>
-    <Row className="d-none d-md-block h-25">
-      <LoginTextComponent
-        className="text-white text-center h3"
-        orgPrimaryCoreValue={orgPrimaryCoreValue}
-        encouragementThought={encouragementThought}
+    <SecondRow className="align-items-center auto-height d-flex justify-content-center">
+      <SignInButtonComponent
+        className="btn-light "
+        icon={<AiOutlineMail height={15} width={2} fontSize={15} />}
+        text={buttonText}
       />
-    </Row>
+    </SecondRow>
+    <div className="d-none d-md-block ">
+      <ThirdRow className="align-items-center d-flex justify-content-center">
+        <LoginTextComponent
+          className="text-white text-center "
+          orgPrimaryCoreValue={orgPrimaryCoreValue}
+          encouragementThought={encouragementThought}
+        />
+      </ThirdRow>
+    </div>
   </Div>
 );