prelogin component for mobile view

react-frontend/src/login/LoginImageComponent.js

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { IMG_BASE_PATH } from "constants/appConstants";
+import ImageComponent from "core-components/image/ImageComponent";
+
+const getImagePath = (size) =>
+  size === "lg"
+    ? `${IMG_BASE_PATH}/cat-img.png`
+    : `${IMG_BASE_PATH}/cat-mobile-img.png`;
+
+const LoginImageComponent = ({ className, size }) => {
+  const imagePath = React.useMemo(() => getImagePath(size), [size]);
+
+  return (
+    <ImageComponent src={imagePath} className={className} alt="login image" />
+  );
+};
+
+LoginImageComponent.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.oneOf(["md", "lg"]),
+};
+
+LoginImageComponent.defaultProps = {
+  size: "md",
+};
+
+export default React.memo(LoginImageComponent);

react-frontend/src/login/LoginImageComponent.test.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import LoginImageComponent from "login/LoginImageComponent";
+
+describe("Image component test", () => {
+  test("renders image component with image", () => {
+    const { getByAltText } = render(<LoginImageComponent />);
+    const testImage = getByAltText("login image");
+    expect(testImage).toBeInTheDocument();
+  });
+
+  test("render image with correct size", () => {
+    const { getByAltText } = render(<LoginImageComponent size="lg" />);
+    const testImage = getByAltText("login image");
+    expect(testImage.src).toBe("http://localhost/assets/images//cat-img.png");
+  });
+});

react-frontend/src/login/MobileDashboardComponent.js

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+
+import PeerlyTextAndLogo from "shared-components/peerly-logo/PeerlyTextAndLogo";
+import InformativeTextComponent from "login/InformativeTextComponent";
+import LoginImageComponent from "login/LoginImageComponent";
+
+const Wrapper = styled.div`
+  height: 100vh;
+  background-color: var(--atomic);
+`;
+
+const MobileDashboardComponent = () => (
+  <Wrapper className="d-md-none flex-column d-flex justify-content-around">
+    <PeerlyTextAndLogo theme="dark" />
+    <LoginImageComponent />
+    <InformativeTextComponent
+      className="mx-5"
+      theme="dark"
+      informativeText="Lets Create the Office Positive"
+      encouragementThought="Encouragement Driven"
+    />
+  </Wrapper>
+);
+
+export default React.memo(MobileDashboardComponent);

react-frontend/src/login/MobileDashboardComponent.test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import MobileDashboardComponent from "login/MobileDashboardComponent";
+
+describe("mobile dashboard component test", () => {
+  test("should render  dashboard component", () => {
+    const { asFragment } = render(<MobileDashboardComponent />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

react-frontend/src/login/__snapshots__/MobileDashboardComponent.test.js.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mobile dashboard component test should render  dashboard component 1`] = `
+<DocumentFragment>
+  .c2 {
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  font-size: 30px;
+  color: var(--white);
+}
+
+.c1 {
+  text-align: center;
+  margin-top: 15px;
+  width: 50px;
+  height: 50px;
+  border: 3px solid var(--white);
+  background-color: var(--atomic);
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.c3 {
+  color: var(--white);
+  background-color: var(--atomic);
+  font-size: 30px;
+}
+
+.c5 {
+  width: 10%;
+  background: var(--white);
+}
+
+.c4 {
+  color: var(--white);
+  background-color: var(--atomic);
+}
+
+.c0 {
+  height: 100vh;
+  background-color: var(--atomic);
+}
+
+<div
+    class="c0 d-md-none flex-column d-flex justify-content-around"
+  >
+    <div
+      class="text-center"
+    >
+      <div
+        class="c1 mx-auto"
+        data-testid="Logo"
+      >
+        <div
+          class="c2"
+          data-testid="plusSignText"
+          font-size="30px"
+        >
+          +
+        </div>
+      </div>
+      <div
+        class="c3"
+        data-testid="PeerlyTextComponents"
+        font-size="30px"
+      >
+        Peerly
+      </div>
+    </div>
+    <img
+      alt="login image"
+      class="img-fluid"
+      src="/assets/images//cat-mobile-img.png"
+    />
+    <div
+      class="c4 text-center mx-5"
+      data-testid="info"
+    >
+      <h3>
+        Lets Create the Office Positive
+      </h3>
+      <hr
+        class="c5"
+        data-testid="hrLine"
+      />
+      <h6>
+        Encouragement Driven
+      </h6>
+    </div>
+  </div>
+</DocumentFragment>
+`;

react-frontend/src/shared-components/peerly-logo/PeerlyLogo.js

@@ -7,8 +7,8 @@ import PlusSign from "shared-components/plus-sign/PlusSign";
 const Logo = styled.div`
   text-align: center;
   margin-top: 15px;
-  width: 83px;
-  height: 83px;
+  width: 50px;
+  height: 50px;
   border: 3px solid
     ${({ theme }) => (theme === "dark" ? "var(--white)" : "var(--atomic)")};
   background-color: ${({ theme }) =>
@@ -24,7 +24,7 @@ const PeerlyLogo = ({ theme, fontSize }) => (
 
 PeerlyLogo.defaultProps = {
   theme: "dark",
-  fontSize: "48px",
+  fontSize: "30px",
 };
 
 PeerlyLogo.propTypes = {

react-frontend/src/shared-components/peerly-logo/PeerlyTextAndLogo.js

@@ -5,19 +5,15 @@ import PeerlyLogo from "shared-components/peerly-logo/PeerlyLogo";
 import PeerlyTextComponent from "shared-components/peerly-logo/PeerlyTextComponent";
 
 const PeerlyTextAndLogo = ({ theme, fontSize }) => (
-  <>
-    <div data-testid="peerlyLogoComponent">
-      <PeerlyLogo theme={theme} fontSize={fontSize} />
-    </div>
-    <div className="text-center">
-      <PeerlyTextComponent theme={theme} fontSize={fontSize} />
-    </div>
-  </>
+  <div className="text-center">
+    <PeerlyLogo theme={theme} fontSize={fontSize} />
+    <PeerlyTextComponent theme={theme} fontSize={fontSize} />
+  </div>
 );
 
 PeerlyTextAndLogo.defaultProps = {
   theme: "dark",
-  fontSize: "48px",
+  fontSize: "30px",
 };
 
 PeerlyTextAndLogo.propTypes = {

react-frontend/src/shared-components/peerly-logo/PeerlyTextComponent.js

@@ -22,7 +22,7 @@ const PeerlyTextComponent = ({ theme, fontSize }) => (
 
 PeerlyTextComponent.defaultProps = {
   theme: "dark",
-  fontSize: "48px",
+  fontSize: "30px",
 };
 
 PeerlyTextComponent.propTypes = {

react-frontend/src/shared-components/peerly-logo/__snapshots__/PeerlyLogo.test.js.snap

@@ -13,8 +13,8 @@ exports[`should render PeerlyLogo Component 1`] = `
 .c0 {
   text-align: center;
   margin-top: 15px;
-  width: 83px;
-  height: 83px;
+  width: 50px;
+  height: 50px;
   border: 3px solid var(--white);
   background-color: var(--atomic);
   -webkit-transform: rotate(45deg);

react-frontend/src/shared-components/peerly-logo/__snapshots__/PeerlyTextAndLogo.test.js.snap

@@ -13,17 +13,23 @@ exports[`should equal to Peerly text 1`] = `
 .c0 {
   text-align: center;
   margin-top: 15px;
-  width: 83px;
-  height: 83px;
+  width: 50px;
+  height: 50px;
   border: 3px solid var(--white);
   background-color: var(--atomic);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 
+.c2 {
+  color: var(--white);
+  background-color: var(--atomic);
+  font-size: 48px;
+}
+
 <div
-    data-testid="peerlyLogoComponent"
+    class="text-center"
   >
     <div
       class="c0 mx-auto"
@@ -37,18 +43,8 @@ exports[`should equal to Peerly text 1`] = `
         +
       </div>
     </div>
-  </div>
-  .c0 {
-  color: var(--white);
-  background-color: var(--atomic);
-  font-size: 48px;
-}
-
-<div
-    class="text-center"
-  >
     <div
-      class="c0"
+      class="c2"
       data-testid="PeerlyTextComponents"
       font-size="48px"
     >

react-frontend/src/shared-components/plus-sign/PlusSign.js

@@ -22,7 +22,7 @@ const PlusSign = ({ theme, cross, fontSize }) => (
 
 PlusSign.defaultProps = {
   theme: "dark",
-  fontSize: "48px",
+  fontSize: "36px",
   cross: false,
 };