diff --git a/mock-responses/recognition-listning/recognitionList.json b/mock-responses/recognition-listning/recognitionList.json new file mode 100644 index 000000000..0260dde3e --- /dev/null +++ b/mock-responses/recognition-listning/recognitionList.json @@ -0,0 +1,53 @@ +{ +"recognitionList":[ + { + "id":1, + "text": + "i give high five to avinash for writing block on react strap document", + "givenFor": { + "id": 1, + "first_name": "avinash", + "last_name": "mane", + "profile_image_url":"https://i.picsum.photos/id/2/200/200.jpg" + }, + "givenBy": { + "id": 2, + "first_name": "onkar", + "last_name": "hasabe", + "profile_image_url": "https://i.picsum.photos/id/2/200/200.jpg" + }, + "given_at": 1234567890, + "coreValue": { + "id": 3, + "text": "core value text", + "description": "desc", + "thumbnail": "https://i.picsum.photos/id/654/300/200.jpg" + } + }, + + { + "id":1, + "text":"give high five to avinash writing block on react strap document", + "givenFor": { + "id": 1, + "first_name": "avinash", + "last_name": "mane", + "profile_image_url":"https://i.picsum.photos/id/2/200/200.jpg" + }, + "givenBy": { + "id": 2, + "first_name": "onkar", + "last_name": "hasabe", + "profile_image_url": "https://i.picsum.photos/id/2/200/200.jpg" + }, + "given_at": 1234567890, + "coreValue": { + "id": 3, + "text": "core value text", + "description": "desc", + "thumbnail": "https://i.picsum.photos/id/654/300/200.jpg" + } + } + + ] +} diff --git a/react-frontend/src/recognition-list-components/RecognitionCardComponent.js b/react-frontend/src/recognition-list-components/RecognitionCardComponent.js index 43e71dc4b..0b112293a 100644 --- a/react-frontend/src/recognition-list-components/RecognitionCardComponent.js +++ b/react-frontend/src/recognition-list-components/RecognitionCardComponent.js @@ -23,9 +23,9 @@ const HighFive = styled.div` const CardComponent = styled(Card)` border-radius: 20px; margin: 20px 20px; - box-shadow: 0px 5px 20px #505c623b; + box-shadow: 0px 5px 20px var(--box-shadow-color); opacity: 1; - background: #ffffff 0% 0% no-repeat padding-box; + background: var(--white) 0% 0% no-repeat padding-box; `; const RecognitionCardComponent = ({ diff --git a/react-frontend/src/recognition-list-components/RecognitionListComponent.js b/react-frontend/src/recognition-list-components/RecognitionListComponent.js index 77d367f88..f834a8c6d 100644 --- a/react-frontend/src/recognition-list-components/RecognitionListComponent.js +++ b/react-frontend/src/recognition-list-components/RecognitionListComponent.js @@ -5,8 +5,8 @@ import styled from "styled-components"; import RecognitionCardComponent from "recognition-list-components/RecognitionCardComponent"; const Wrapper = styled.div` - border: 1px solid lightgrey; - background: #ffffff 0% 0% no-repeat padding-box; + border: 1px solid var(--grey); + background: var(--white) 0% 0% no-repeat padding-box; border-radius: 36px; opacity: 1; `; diff --git a/react-frontend/src/recognition-list-components/RecognitionListComponent.test.js b/react-frontend/src/recognition-list-components/RecognitionListComponent.test.js index e249eae71..30bec2f31 100644 --- a/react-frontend/src/recognition-list-components/RecognitionListComponent.test.js +++ b/react-frontend/src/recognition-list-components/RecognitionListComponent.test.js @@ -1,11 +1,15 @@ import React from "react"; import { render } from "@testing-library/react"; + import RecognitionListComponent from "recognition-list-components/RecognitionListComponent"; +import recognitionList from "../../../mock-responses/recognition-listning/recognitionList.json"; describe("Recognition list Component test", () => { test("should equal snapshot", () => { const { asFragment } = render( - + ); expect(asFragment()).toMatchSnapshot(); }); diff --git a/react-frontend/src/recognition-list-components/RecognitionTextComponent.js b/react-frontend/src/recognition-list-components/RecognitionTextComponent.js index 105a75fcf..60febe8b9 100644 --- a/react-frontend/src/recognition-list-components/RecognitionTextComponent.js +++ b/react-frontend/src/recognition-list-components/RecognitionTextComponent.js @@ -6,7 +6,7 @@ import { Form } from "core-components/form/FormComponent"; import ImageComponent from "core-components/image/ImageComponent"; const Border = styled.fieldset` - border: 1px solid lightgrey; + border: 1px solid var(--grey); border-radius: 11px; opacity: 1; margin-left: 5%; diff --git a/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardComponent.test.js.snap b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardComponent.test.js.snap index a67bc8836..d9b120f6e 100644 --- a/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardComponent.test.js.snap +++ b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionCardComponent.test.js.snap @@ -7,7 +7,7 @@ exports[`Recognition Card Component test should equal snapshot 1`] = ` } .c3 { - border: 1px solid lightgrey; + border: 1px solid var(--grey); border-radius: 11px; opacity: 1; margin-left: 5%; @@ -37,9 +37,9 @@ exports[`Recognition Card Component test should equal snapshot 1`] = ` .c0 { border-radius: 20px; margin: 20px 20px; - box-shadow: 0px 5px 20px #505c623b; + box-shadow: 0px 5px 20px var(--box-shadow-color); opacity: 1; - background: #ffffff 0% 0% no-repeat padding-box; + background: var(--white) 0% 0% no-repeat padding-box; }
- .c0 { - border: 1px solid lightgrey; - background: #ffffff 0% 0% no-repeat padding-box; + .c2 { + width: 12vh; +} + +.c4 { + border: 1px solid var(--grey); + border-radius: 11px; + opacity: 1; + margin-left: 5%; + margin-right: 5%; +} + +.c5 { + width: auto; + margin-left: 10%; +} + +.c6 { + width: 7vh; + margin-right: 5%; +} + +.c3 { + border-radius: 20px; + overflow: hidden; +} + +.c7 { + position: absolute; + bottom: 50px; +} + +.c1 { + border-radius: 20px; + margin: 20px 20px; + box-shadow: 0px 5px 20px var(--box-shadow-color); + opacity: 1; + background: var(--white) 0% 0% no-repeat padding-box; +} + +.c0 { + border: 1px solid var(--grey); + background: var(--white) 0% 0% no-repeat padding-box; border-radius: 36px; opacity: 1; }
+ > +
+
+
+
+
+
+ +
+
+
+ Profile +
+
+ +
+ + +
+ +
+
+
+ Core value +
+
+ + “ + + +
+
+ + Profile +
+
+
+
+
+ Core value +
+ + + +
+
+
+ High five recognition +
+
+ + + + + + 1 + +
+
+
+
+
+
+
+
+
+ +
+
+
+ Profile +
+
+ +
+ + +
+ +
+
+
+ Core value +
+
+ + “ + + +
+
+ + Profile +
+
+
+
+
+ Core value +
+ + + +
+
+
+ High five recognition +
+
+ + + + + + 1 + +
+
+
+
`; diff --git a/react-frontend/src/recognition-list-components/__snapshots__/RecognitionTextComponent.test.js.snap b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionTextComponent.test.js.snap index a13d3d5d8..fbae9eb0f 100644 --- a/react-frontend/src/recognition-list-components/__snapshots__/RecognitionTextComponent.test.js.snap +++ b/react-frontend/src/recognition-list-components/__snapshots__/RecognitionTextComponent.test.js.snap @@ -3,7 +3,7 @@ exports[`Recognition text Component test should equal snapshot 1`] = ` .c0 { - border: 1px solid lightgrey; + border: 1px solid var(--grey); border-radius: 11px; opacity: 1; margin-left: 5%;