Added image and description to review card with dummy data

src/components/Cards/UserReviewsCard/ReviewOffer/ReviewOffer.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ReviewOfferContainer, ReviewOfferDescription, ReviewOfferDetails, ReviewOfferImage, ReviewOfferTitle } from './ReviewOffer.styled'
+
+const ReviewOffer = () => {
+
+  return (
+    <ReviewOfferContainer>
+        <ReviewOfferImage src="https://diligentproduction.s3.eu-central-1.amazonaws.com/trampa/7bbd641a-8d9c-4a85-be0e-4263ff6fc673.jpg"/>
+        <ReviewOfferDetails>
+            <ReviewOfferDescription>Proizvod: </ReviewOfferDescription>
+            <ReviewOfferTitle>Neki proizvod</ReviewOfferTitle>
+        </ReviewOfferDetails>
+    </ReviewOfferContainer>
+  )
+}
+
+ReviewOffer.propTypes = {
+    children: PropTypes.node,
+}
+
+export default ReviewOffer

src/components/Cards/UserReviewsCard/ReviewOffer/ReviewOffer.styled.js

@@ -0,0 +1,31 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../../themes";
+
+export const ReviewOfferContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 18px;
+  padding-left: 16px;
+`;
+export const ReviewOfferImage = styled.img`
+  width: 54px;
+  height: 54px;
+  border-radius: 2px;
+`;
+export const ReviewOfferDetails = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    padding-top: 6px;
+`;
+export const ReviewOfferDescription = styled(Typography)`
+  font-family: "DM Sans";
+  font-size: 12px;
+  color: ${selectedTheme.primaryDarkText};
+`;
+export const ReviewOfferTitle = styled(Typography)`
+  color: ${selectedTheme.primaryPurple};
+  font-size: 16px;
+  font-weight: 600;
+  font-family: "DM Sans";
+`;

src/components/Cards/UserReviewsCard/UserReviewsCard.js

@@ -18,6 +18,7 @@ import {
 import { ListItem } from "@mui/material";
 import selectedTheme from "../../../themes";
 import { useTranslation } from "react-i18next";
+import ReviewOffer from "./ReviewOffer/ReviewOffer";
 
 const UserReviewsCard = (props) => {
   const { t } = useTranslation();
@@ -86,6 +87,7 @@ const UserReviewsCard = (props) => {
           </ReviewDetailsValue>
         </ReviewDetailsText>
       </ReviewDetails>
+      <ReviewOffer />
     </ReviewContainer>
   );
 };

src/components/UserReviews/UserReviews.js

@@ -4,6 +4,12 @@ import {
   ReviewList,
   ReviewsBox,
   ReviewsHeader,
+  ReviewsHeaderTitle,
+  ReviewSortContainer,
+  ReviewSortDescription,
+  ReviewSortIcon,
+  ReviewSortOption,
+  ReviewSortOptionContainer,
   ReviewsTitle,
 } from "./UserReviews.styled";
 
@@ -36,7 +42,7 @@ const UserReviews = (props) => {
       return [...props.profileReviews];
     }
     if (props.isProfileReviews) {
-      return [...reviews.slice(0, 3)];
+      return [...reviews];
     }
     if (offer?.companyData?.lastThreeReviews) {
       return [...offer?.companyData.lastThreeReviews];
@@ -58,8 +64,17 @@ const UserReviews = (props) => {
           alignItems="center"
           sx={{ mb: 1.4 }}
         >
-          <StarBorderIcon color="action" sx={{ mr: 0.9 }} />
-          <ReviewsTitle>{t("reviews.rates")}</ReviewsTitle>
+          <ReviewsHeaderTitle>
+            <StarBorderIcon color="action" sx={{ mr: 0.9, position: "relative", top: 6 }} />
+            <ReviewsTitle>{t("reviews.rates")}</ReviewsTitle>
+          </ReviewsHeaderTitle>
+          <ReviewSortContainer>
+            <ReviewSortDescription>Sortiraj po: </ReviewSortDescription>
+            <ReviewSortOptionContainer>
+              <ReviewSortOption>Pozitivne</ReviewSortOption>
+              <ReviewSortIcon />
+            </ReviewSortOptionContainer>
+          </ReviewSortContainer>
         </ReviewsHeader>
       )}
       <ReviewList>

src/components/UserReviews/UserReviews.styled.js

@@ -3,6 +3,7 @@ import { List, Box, Typography, Grid } from "@mui/material";
 import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import selectedTheme from "../../themes";
+import { ReactComponent as DownArrow } from "../../assets/images/svg/up-arrow.svg";
 
 export const ReviewsBox = styled(Box)`
   width: 100%;
@@ -16,7 +17,7 @@ export const ReviewsBox = styled(Box)`
   /* @media (max-width: 1200px) {
     padding: 0 50px;
   } */
-  margin-top: ${props => props.profile ? "60px" : "0"};
+  margin-top: ${(props) => (props.profile ? "60px" : "0")};
   @media (max-width: 600px) {
     position: relative;
     top: -45px;
@@ -32,6 +33,7 @@ export const ReviewsBox = styled(Box)`
   }
 `;
 export const ReviewsHeader = styled(Grid)`
+  justify-content: space-between;
   @media (max-width: 600px) {
     margin-bottom: 18px;
     font-size: 12px;
@@ -49,6 +51,7 @@ export const ReviewsTitle = styled(Typography)`
 export const ReviewList = styled(List)`
   background: white;
   padding: 2rem;
+  padding-top: 6px;
   border-radius: 4px 0 0 4px;
   padding-right: 0.4rem;
   height: 100%;
@@ -135,3 +138,33 @@ export const ProfileName = styled(Typography)`
   font-family: "DM Sans";
 `;
 export const ReviewContainer = styled(Box)``;
+export const ReviewSortDescription = styled(Typography)`
+  font-size: 16px;
+  font-family: "DM Sans";
+  color: ${selectedTheme.primaryDarkTextThird};
+
+`;
+export const ReviewSortOption = styled(Typography)`
+  font-family: "DM Sans";
+  font-size: 16px;
+  font-weight: 600;
+  color: ${selectedTheme.primaryPurple};
+`;
+export const ReviewSortIcon = styled(DownArrow)`
+  transform: rotate(180deg);
+  position: relative;
+  margin-left: 4px;
+  top: 1px;
+`;
+export const ReviewSortContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  position: relative;
+  top: 4px;
+`
+export const ReviewSortOptionContainer = styled(Box)`
+  cursor: pointer;
+`
+export const ReviewsHeaderTitle = styled(Box)`
+`

src/i18n/resources/rs.js

@@ -199,7 +199,7 @@ export default {
     commentError: "Komentar mora imati minimum 5 karaktera!",
     selectFieldError: "Odaberite jedno polje!",
     leaveComment: "Ostavi komentar",
-    rates: "Ocene",
+    rates: "Ocene kompanije",
   },
   messages: {
     headerTitle: "Moje Ćaskanje",