create recognition left panel for adding recognition

react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.js

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import PlusSign from "shared-components/plus-sign/PlusSign"; //todo depend upon peerly logo
+
+const ButtonComponent = styled.div`
+  background: transparent url(${(props) => props.imageUrl}) 90% 60% no-repeat
+    padding-box;
+  opacity: 1;
+  box-shadow: 0px 3px 6px #0000004e;
+  width: 45px;
+  height: 45px;
+  background-color: var(--rust);
+  border: none;
+  border-radius: 50%;
+  margin-top: 7.5px;
+  margin-left: 7.5px;
+`;
+
+const PlusSignWrapper = styled.div`
+  position: absolute;
+  margin-left: 10px;
+  margin-top: 8px;
+  font-size: 23px;
+  color: var(--white);
+`;
+
+const RoundCircle = styled.div`
+  position: absolute;
+  background: var(--white) 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 6px #0000004e;
+  opacity: 1;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+`;
+
+const CreateRecognitionButton = ({ onClick, imageUrl }) => {
+  return (
+    <RoundCircle>
+      <ButtonComponent onClick={onClick} imageUrl={imageUrl}>
+        <PlusSignWrapper>
+          <PlusSign />
+        </PlusSignWrapper>
+      </ButtonComponent>
+    </RoundCircle>
+  );
+};
+
+CreateRecognitionButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+};
+
+export default React.memo(CreateRecognitionButton);

react-frontend/src/shared-components/create-recognition-button/CreateRecognitionButton.test.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import CreateRecognitionButton from "shared-components/create-recognition-button/CreateRecognitionButton";
+
+describe("Image component test", () => {
+  const onClick = () => {
+    onClick;
+  };
+
+  test("renders + sign for the component", () => {
+    const { getByText } = render(
+      <CreateRecognitionButton onClick={onClick} imageUrl="xxx" />
+    );
+    const testImage = getByText("+");
+    expect(testImage).toBeInTheDocument();
+  });
+});

react-frontend/src/shared-components/create-recognition-left-panel/CreateRecognitionLeftPanel.js

@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import { Card } from "core-components/card/card";
+import Img from "shared-components/user-image-name/UserImageName";
+import { Row } from "core-components/grid/GridComponent";
+import CreateRecognitionButton from "shared-components/create-reccognition-button/CreateRecognitionButton";
+
+const ButtonComponentWrapper = styled.div`
+  position: absolute;
+  margin-top: 200px;
+  margin-left: -35px;
+`;
+
+const CreateRecognitionLeftPanel = ({
+  hi5ImageForButton,
+  emaployeeImage,
+  employeeName,
+  hi5CollectedImage,
+  hi5Collected,
+}) => {
+  const onClick = () => {
+    //todo
+  };
+  return (
+    <Card
+      style={{
+        borderRadius: "36px 36px 0px 0px",
+        minHeight: "100vh",
+        width: "206px",
+        background: "linear-gradient(var(--sage) 100px, var(--white) 0%)",
+      }}
+    >
+      <Row className="justify-content-center">
+        <Img
+          className="justify-content-center mt-5"
+          text={employeeName}
+          imageSrc={emaployeeImage}
+        />
+      </Row>
+      <Row className="justify-content-center">
+        <Img
+          className="justify-content-center mt-5"
+          text={hi5Collected}
+          imageSrc={hi5CollectedImage}
+        />
+      </Row>
+      <Row className="justify-content-center">
+        <ButtonComponentWrapper>
+          <CreateRecognitionButton
+            imageUrl={hi5ImageForButton}
+            onClick={onClick}
+          />
+        </ButtonComponentWrapper>
+      </Row>
+    </Card>
+  );
+};
+
+CreateRecognitionLeftPanel.propTypes = {
+  hi5ImageForButton: PropTypes.string.isRequired,
+  emaployeeImage: PropTypes.string.isRequired,
+  employeeName: PropTypes.string.isRequired,
+  hi5CollectedImage: PropTypes.string.isRequired,
+  hi5Collected: PropTypes.string.isRequired,
+};
+
+export default CreateRecognitionLeftPanel;