Merge pull request #8 from kjannette/rise8

Rise8

src/Components/Features/FeaturesPage.js

@@ -23,13 +23,13 @@ const FeaturesPage = () => {
           <div className="features-top-right">
             <img className="features-image-one" src={legalTechFlip} />
           </div>
-          <div className="features-bottom-wrapper">
+        </div>
-            <div className="features-top-mobile-img">
+        <div className="features-bottom-wrapper">
-              <img className="features-image-one" src={legalTek} />
+          <div className="features-bottom-left">
-            </div>
+            <img className="features-image-one" src={legalTek} />
-            <div className="features-top-left">
+          </div>
-              <FeaturesBottom />
+          <div className="features-bottom-right">
-            </div>
+            <FeaturesBottom />
           </div>
         </div>
       </div>
@@ -41,6 +41,27 @@ export default FeaturesPage;
 
 /*
 
+
+
+          <div className="features-top-mobile-img">
+            <img className="features-image-one" src={legalTechFlip} />
+          </div>
+          <div className="features-top-left">
+            <FeaturesTop />
+          </div>
+          <div className="features-top-right">
+            <img className="features-image-one" src={legalTechFlip} />
+          </div>
+          <div className="features-bottom-wrapper">
+            <div className="features-top-mobile-img">
+              <img className="features-image-one" src={legalTek} />
+            </div>
+            <div className="features-top-left">
+              <FeaturesBottom />
+            </div>
+          </div>
+
+          
         <div className="features-bottom-wrapper">
           <div className="features-bottom-right">
             <img className="features-image-one" src={legalTek} />

src/Components/Home/HomePage.js

@@ -12,6 +12,7 @@ import "../../styles/homepage.scss";
 
 const HomePage = () => {
   const navigate = useNavigate();
+
   const handleNavigate = () => {
     navigate("/signup");
   };

src/Components/Login/Login.js

@@ -6,6 +6,7 @@ import "../../styles/login.scss";
 
 const Login = () => {
   const navigate = useNavigate();
+
   const auth = getAuth();
   const [isBusy, setIsBusy] = useState(false);
   const [email, setEmail] = useState("");

src/Components/SignupPage/SignupPage.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
@@ -24,6 +24,9 @@ const SignupPage = () => {
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
   const [isMobile, setIsMobile] = useState(window.innerWidth < 440);
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 440);
+  });
   const fieldsChunkSize = 2;
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));

src/styles/features.scss

@@ -47,8 +47,13 @@
 .features-bottom-left {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
   padding: 6px 8px;
   width: 50%;
+  background-color: var(--haq-blue);
+  border-radius: 15px;
   height: 100%;
 }
 
@@ -58,8 +63,6 @@
   padding: 18px 8px;
   width: 50%;
   height: 100%;
-  background-color: var(--haq-blue);
-  border-radius: 15px;
 }
 
 .features-image-one {
@@ -89,6 +92,8 @@
 
   .features-top-wrapper {
     flex-direction: column;
+    height: 468px;
+    margin-bottom: 12px;
   }
 
   .features-bottom-wrapper {