resolve comments and added icons core component

joshsoftware · Jun 9, 2020 · fc5bfee · fc5bfee
1 parent 2383504
commit fc5bfee
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 64 deletions.
diff --git a/react-frontend/src/core-components/icon/icons.js b/react-frontend/src/core-components/icon/icons.js
@@ -0,0 +1 @@
+export { BsCircle } from "react-icons/bs";
diff --git a/react-frontend/src/recognition-list-components/RecognitionCardComponent.js b/react-frontend/src/recognition-list-components/RecognitionCardComponent.js
@@ -4,10 +4,10 @@ import styled from "styled-components";
 
 import { Row, Col } from "core-components/grid/GridComponent";
 import { Card } from "core-components/card/CardComponent";
+import { BsCircle } from "core-components/icon/icons";
 import ImageComponent from "core-components/image/ImageComponent";
 import RecognitionCardHeaderComponent from "recognition-list-components/RecognitionCardHeaderComponent";
 import RecognitionTextComponent from "recognition-list-components/RecognitionTextComponent";
-import CoreValueIconComponent from "shared-components/core-value-icon-components/CoreValueIconComponent";
 import HighFiveComponent from "shared-components/high-five-components/HighFiveComponent";
 
 const giveHighFive = () => {
@@ -71,7 +71,7 @@ const RecognitionCardComponent = ({
                 />
               </ImgD>
               <Col className="d-flex justify-content-center mt-4">
-                <CoreValueIconComponent size="50px" color="red" />
+                <BsCircle size="50px" color="red" />
               </Col>
             </Row>
           </Col>

diff --git a/react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.js b/react-frontend/src/recognition-list-components/RecognitionCardHeaderComponent.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
-import { Row } from "core-components/grid/GridComponent";
+import { Row, Col } from "core-components/grid/GridComponent";
 import { Form } from "core-components/form/FormComponent";
 import { Button } from "core-components/button/ButtonComponent";
 import ImageComponent from "core-components/image/ImageComponent";
@@ -22,43 +22,45 @@ const RecognitionCardHeaderComponent = ({
 }) => {
   return (
     <Row>
-      <Row className="d-flex justify-content-end">
-        <Button
-          className="bg-white font-weight-bold text-dark btn-outline-light grey"
-          onClick={onclickMenuButton}
-        >
-          ...
-        </Button>
-      </Row>
-      <Row className="d-flex flex-column-left">
-        <Img>
-          <ImageComponent
-            src="https://i.picsum.photos/id/2/200/200.jpg"
-            roundedCircle={true}
-            alt="Profile"
-          />
-        </Img>
-        <Row className="d-flex flex-column text-start ml-4">
-          <Form.Label className="font-weight-bold ">{given_for}</Form.Label>
-          <Row className=" d-sm-block d-xs-block d-md-none">
-            <Row className="d-flex flex-column ml-2">
-              <Form.Label>got a high five for</Form.Label>
-              <Form.Label className="font-weight-bold ml-1">
-                {core_value}
-              </Form.Label>
+      <Col>
+        <Row className="d-flex justify-content-end">
+          <Button
+            className="bg-white font-weight-bold text-dark btn-outline-light grey"
+            onClick={onclickMenuButton}
+          >
+            ...
+          </Button>
+        </Row>
+        <Row className="d-flex flex-column-left">
+          <Img>
+            <ImageComponent
+              src="https://i.picsum.photos/id/2/200/200.jpg"
+              roundedCircle={true}
+              alt="Profile"
+            />
+          </Img>
+          <Row className="d-flex flex-column text-start ml-4">
+            <Form.Label className="font-weight-bold ">{given_for}</Form.Label>
+            <Row className=" d-sm-block d-xs-block d-md-none">
+              <Row className="d-flex flex-column ml-2">
+                <Form.Label>got a high five for</Form.Label>
+                <Form.Label className="font-weight-bold ml-1">
+                  {core_value}
+                </Form.Label>
+              </Row>
             </Row>
-          </Row>
-          <Row className="d-none d-md-block d-{sm,xs}-none">
-            <Row className="d-flex flex-row ml-2">
-              <Form.Label>got a high five for</Form.Label>
-              <Form.Label className="font-weight-bold ml-1">
-                {core_value}
-              </Form.Label>
+            <Row className="d-none d-md-block d-{sm,xs}-none">
+              <Row className="d-flex flex-row ml-2">
+                <Form.Label>got a high five for</Form.Label>
+                <Form.Label className="font-weight-bold ml-1">
+                  {core_value}
+                </Form.Label>
+              </Row>
             </Row>
+            <Form.Label className="text-muted">{given_at}</Form.Label>
           </Row>
-          <Form.Label className="text-muted">{given_at}</Form.Label>
         </Row>
-      </Row>
+      </Col>
     </Row>
   );
 };

diff --git a/react-frontend/src/recognition-list-components/RecognitionTextComponent.js b/react-frontend/src/recognition-list-components/RecognitionTextComponent.js
@@ -25,12 +25,12 @@ const Img = styled.div`
 `;
 
 const RecognitionTextComponent = ({ text, given_by }) => (
-  <Row className="d-flex flex-column">
+  <Row>
     <Border>
       <Legend>“</Legend>
       <Form.Label className="px-2 pb-2 pt-0">{text}</Form.Label>
     </Border>
-    <Row className="d-flex justify-content-end">
+    <Row className="d-flex justify-content-end w-100">
       <Form.Label className="font-weight-bold text-dark">{given_by}</Form.Label>
       <Img>
         <ImageComponent

diff --git a/react-frontend/src/shared-components/core-value-icon-components/CoreValueIconComponent.js b/react-frontend/src/shared-components/core-value-icon-components/CoreValueIconComponent.js
diff --git a/...-frontend/src/shared-components/core-value-icon-components/CoreValueIconComponent.test.js b/...-frontend/src/shared-components/core-value-icon-components/CoreValueIconComponent.test.js