Finished feature 632

src/components/Cards/CreateOfferCard/FirstPart/ErrorMessage/ErrorMessage.js

@@ -6,23 +6,25 @@ const ErrorMessage = (props) => {
   const formik = props.formik;
   return (
     <>
-      {formik.errors.nameOfProduct ? (
+      {formik.errors.nameOfProduct && formik.touched.nameOfProduct ? (
         <ErrorText>{formik.errors.nameOfProduct}</ErrorText>
-      ) : formik.errors.description ? (
+      ) : formik.errors.description && formik.touched.description ? (
         <ErrorText>{formik.errors.description}</ErrorText>
-      ) : formik.errors.location ? (
+      ) : formik.errors.location && formik.touched.location ? (
         <ErrorText>{formik.errors.location}</ErrorText>
-      ) : formik.errors.category ? (
+      ) : formik.errors.category && formik.touched.category ? (
         <ErrorText>{formik.errors.category}</ErrorText>
-      ) : formik.errors.subcategory ? (
+      ) : formik.errors.subcategory && formik.touched.subcategory ? (
         <ErrorText>{formik.errors.subcategory}</ErrorText>
-      ) : (<></>)}
+      ) : (
+        <></>
+      )}
     </>
   );
 };
 
 ErrorMessage.propTypes = {
-    formik: PropTypes.any,
+  formik: PropTypes.any,
 };
 
 export default ErrorMessage;

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.js

@@ -53,7 +53,7 @@ const FirstPartCreateOffer = (props) => {
     initialValues,
     validationSchema,
     onSubmit: handleSubmit,
-    validateOnBlur: true,
+    // validateOnBlur: true,
     enableReinitialize: true,
   });
 

src/components/Cards/FilterCard/FilterCard.js

@@ -26,9 +26,7 @@ const FilterCard = (props) => {
       myOffers={props.myOffers}
       skeleton={props.skeleton}
     >
-      <SkeletonFilterCard
-        skeleton={props.skeleton}
-      />
+      <SkeletonFilterCard skeleton={props.skeleton} />
       {/* Header title for my offers */}
       {props.myOffers && <HeaderBack />}
 
@@ -53,7 +51,9 @@ const FilterCard = (props) => {
         />
 
         {/* Locations */}
-        <LocationChoser filters={filters} ref={locationRef} />
+        {!props.myOffers && (
+          <LocationChoser filters={filters} ref={locationRef} />
+        )}
       </ContentContainer>
 
       <FilterFooter

src/components/Cards/ProfileCard/ProfileCard.styled.js

@@ -13,6 +13,7 @@ export const ProfileCardContainer = styled(Box)`
   box-sizing: border-box;
   padding: 0 50px;
   margin-top: 34px;
+  overflow: hidden;
 
   @media (max-width: 1200px) {
     padding: 0 36px 0 0;
@@ -51,13 +52,14 @@ export const MessageButton = styled(EditButton)`
 `;
 
 export const ProfileCardWrapper = styled(Card)`
-  border: 1px solid ${selectedTheme.colors.primaryPurple};
+  border: 1px solid ${selectedTheme.colors.borderNormal};
   background: ${(props) =>
     props.isMyProfile ? selectedTheme.colors.primaryPurple : "white"};
   width: 100%;
   min-width: fit-content;
   padding: 1rem;
   position: relative;
+  border-radius: 0 0 4px 4px;
 `;
 
 // export const ProfileName = styled(Typography)`

src/components/Cards/ProfileCard/ProfileStats/ProfileStats.styled.js

@@ -12,7 +12,7 @@ export const ProfileStatsContainer = styled(Grid)`
   padding-bottom: 1.3rem;
   margin-bottom: -1rem;
   margin-left: -1rem;
-  border-radius: 0 0 4px 4px;
+  /* border-radius: 0 0 4px 4px; */
 `;
 export const ProfileStatsGrid = styled(Grid)`
   display: flex;

src/components/Header/AboutHeader/AboutHeader.styled.js

@@ -19,6 +19,7 @@ export const LinkRoute = styled(Link)`
   font-size: 16px;
   line-height: 22px;
   letter-spacing: 0.02em;
+  border-bottom: 0px solid ${selectedTheme.iconYellowColor};
   &:hover {
     border-bottom: 1px solid ${selectedTheme.colors.iconYellowColor};
   }

src/components/MarketPlace/Header/Header.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import {
-  ButtonContainer,
+  // ButtonContainer,
   CategoryHeaderIcon,
   HeaderAltLocation,
   HeaderButton,
@@ -10,11 +10,14 @@ import {
   HeaderLocation,
   HeaderOptions,
   HeaderSelect,
-  HeaderText,
+  // HeaderText,
+  HeaderTitleContainer,
+  HeaderTitleText,
   HeaderWrapperContainer,
   IconStyled,
   PageTitleContainer,
   SelectOption,
+  SwapsHeaderIcon,
   SwapsIcon,
   SwapsTitle,
 } from "./Header.styled";
@@ -29,8 +32,8 @@ import SkeletonHeader from "./SkeletonHeader/SkeletonHeader";
 import { useSelector } from "react-redux";
 import { selectHeaderString } from "../../../store/selectors/filtersSelectors";
 import useIsMobile from "../../../hooks/useIsMobile";
-import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
-import history from "../../../store/utils/history";
+// import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
+// import history from "../../../store/utils/history";
 
 const DownArrow = (props) => (
   <IconStyled {...props}>
@@ -58,9 +61,9 @@ const Header = (props) => {
   const handleChangeSelect = (event) => {
     sorting.changeSorting(event.target.value);
   };
-  const goBack = () => {
-    history.goBack();
-  };
+  // const goBack = () => {
+  //   history.goBack();
+  // };
 
   return (
     <>
@@ -79,10 +82,10 @@ const Header = (props) => {
                   <HeaderAltLocation>{altString}</HeaderAltLocation>
                 </>
               ) : (
-                <ButtonContainer onClick={goBack}>
-                  <ArrowButton side={"left"}></ArrowButton>
-                  <HeaderText>{t("profile.backToHome")}</HeaderText>
-                </ButtonContainer>
+                <HeaderTitleContainer>
+                  <SwapsHeaderIcon />
+                  <HeaderTitleText>{t("header.myOffers")}</HeaderTitleText>
+                </HeaderTitleContainer>
               )}
             </>
           </Tooltip>

src/components/MarketPlace/Header/Header.styled.js

@@ -165,3 +165,18 @@ export const HeaderText = styled(Typography)`
     font-size: 14px;
   }
 `;
+export const SwapsHeaderIcon = styled(SwapsIcon)`
+  width: 18px;
+  height: 18px;
+`
+export const HeaderTitleContainer = styled(Box)`
+  position: relative;
+  left: 5px;
+`
+export const HeaderTitleText = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
+  font-size: 16px;
+  position: relative;
+  bottom: 2px;
+`

src/components/Profile/ProfileOffers/ProfileOffers.js

@@ -94,7 +94,6 @@ const ProfileOffers = (props) => {
                 isMyOffer={props.isMyProfile}
                 offer={item}
                 key={JSON.stringify(item)}
-                pinned
                 messageUser={messageUser}
               />
             ))

src/components/Profile/ProfileOffers/SelectSortField/SelectSortField.styled.js

@@ -8,6 +8,7 @@ export const HeaderSelect = styled(Select)`
   width: 210px;
   height: 35px;
   font-family: ${selectedTheme.fonts.textFont};
+  background: white;
   margin-top: 3px;
   font-weight: 400;
   position: absolute;

src/components/UserReviews/NoReviews/NoReviews.js

@@ -15,7 +15,7 @@ const NoReviews = () => {
     <NoReviewsContainer>
       <NoReviewsText>{t("reviews.title")}</NoReviewsText>
       <NoReviewsAltText>{t("reviews.altTitle")}</NoReviewsAltText>
-      <UserReviewsSkeleton numOfElements={isMobile ? 1 : 2} />
+      <UserReviewsSkeleton noReviews numOfElements={isMobile ? 1 : 2} />
     </NoReviewsContainer>
   );
 };

src/components/UserReviews/NoReviews/NoReviews.styled.js

@@ -3,6 +3,8 @@ import styled from "styled-components"
 import selectedTheme from "../../../themes"
 
 export const NoReviewsContainer = styled(Box)`
+  text-align: center;
+  margin-top: 36px;
 `
 export const NoReviewsText = styled(Typography)`
   color: ${selectedTheme.colors.primaryPurple};
@@ -10,7 +12,7 @@ export const NoReviewsText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   text-align: center;
   font-weight: 700;
-  width: 100%;
+  width: 229px;
   
 `
 export const NoReviewsAltText = styled(Typography)`

src/components/UserReviews/NoReviews/UserReviewsSkeleton/UserReviewsSkeleton.styled.js

@@ -41,12 +41,7 @@ export const UserReviewsSkeletonLine = styled(Box)`
   display: flex;
   flex-direction: row;
   & * {
-    background-color: ${(props) =>
-      props.skeleton
-        ? `${selectedTheme.colors.skeletonItemColor}`
-        : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
-  }
-  & * {
+    background-color: ${selectedTheme.colors.skeletonItemColor};
     ${(props) =>
       props.skeleton &&
       css`
@@ -59,6 +54,7 @@ export const UserReviewsSkeletonCircle = styled(Box)`
   width: 54px;
   height: 54px;
   border-radius: 100%;
+  background-color: ${selectedTheme.colors.skeletonItemColor};
   ${(props) =>
     props.skeleton &&
     css`
@@ -75,6 +71,7 @@ export const UserReviewsSkeletonLineOne = styled(Box)`
   height: 18px;
   margin-top: 18px;
   margin-left: 18px;
+  background-color: ${selectedTheme.colors.skeletonItemColor};
   ${(props) =>
     props.skeleton &&
     css`
@@ -123,11 +120,7 @@ export const UserReviewsSkeletonSquareImageContainer = styled(Box)`
 export const UserReviewsSkeletonSquareImage = styled(Box)`
   width: 54px;
   height: 54px;
-  background-color: ${(props) =>
-    props.skeleton
-      ? `${selectedTheme.colors.skeletonItemColor}`
-      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
-
+  background-color: ${selectedTheme.colors.skeletonItemColor};
   ${(props) =>
     props.skeleton &&
     css`
@@ -145,10 +138,7 @@ export const UserReviewsSkeletonSquareInfo = styled(Box)`
 export const UserReviewsSkeletonSquareInfoFirstLine = styled(Box)`
   width: 121px;
   height: 14px;
-  background-color: ${(props) =>
-    props.skeleton
-      ? `${selectedTheme.colors.skeletonItemColor}`
-      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
+  background-color: ${selectedTheme.colors.skeletonItemColor};
 
   ${(props) =>
     props.skeleton &&
@@ -161,10 +151,7 @@ export const UserReviewsSkeletonSquareInfoSecondLine = styled(Box)`
   width: 78px;
   height: 18px;
   margin-top: 6px;
-  background-color: ${(props) =>
-    props.skeleton
-      ? `${selectedTheme.colors.skeletonItemColor}`
-      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
+  background-color: ${selectedTheme.colors.skeletonItemColor};
   ${(props) =>
     props.skeleton &&
     css`

src/components/UserReviews/UserReviews.styled.js

@@ -17,6 +17,12 @@ export const ReviewsBox = styled(Box)`
   /* @media (max-width: 1200px) {
     padding: 0 50px;
   } */
+  ${(props) =>
+    props.profile &&
+    `
+  position: relative;
+  top: -15px;
+  `}
   margin-top: ${(props) => (props.profile ? "60px" : "0")};
   @media (max-width: 600px) {
     position: relative;

src/pages/RegisterPages/Register/Register.js

@@ -87,6 +87,7 @@ const Register = () => {
         registerUser({ ...informations, ...values });
       }
     }
+    console.log({...informations, ...values})
     setInformations({ ...informations, ...values });
   };
 

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.js

@@ -36,10 +36,10 @@ const SecondPartOfRegistration = (props) => {
     },
     validationSchema: Yup.object().shape({
       nameOfFirm: Yup.string().required(t("login.usernameRequired")),
-      PIB: Yup.number()
+      PIB: Yup.string()
         .required(t("login.passwordRequired"))
-        .min(100000000, "PIB mora imati 9 karaktera!")
-        .max(999999999, "PIB mora imati 9 karaktera!"),
+        .min(9, t("register.PIBnoOfCharacters"))
+        .max(9, t("register.PIBnoOfCharacters")),
     }),
     onSubmit: props.handleSubmit,
     validateOnBlur: true,
@@ -69,7 +69,9 @@ const SecondPartOfRegistration = (props) => {
         margin="normal"
         type="number"
         value={formik.values.PIB}
-        onChange={formik.handleChange}
+        onChange={(event) => {
+          formik.setFieldValue("PIB", event.target.value)
+        }}
         error={
           (formik.touched.PIB && Boolean(formik.errors.PIB)) || PIBTakenStatus
         }

src/validations/createOfferValidation/firstPartCreateOfferValidation.js

@@ -3,20 +3,20 @@ import i18next from "i18next";
 
 export default (locations, categories, subcategories) =>
   Yup.object().shape({
-    nameOfProduct: Yup.string().required(i18next.t("offer.nameOfProductError")),
+    nameOfProduct: Yup.string().required(i18next.t("login.nameOfProductError")),
     description: Yup.string()
-      .required(i18next.t("offer.descriptionRequiredError"))
-      .min(8, i18next.t("offer.descriptionNoOfCharsError")),
+      .required(i18next.t("login.descriptionRequiredError"))
+      .min(8, i18next.t("login.descriptionNoOfCharsError")),
     location: Yup.string().oneOf(
       locations.map((l) => l.city),
-      i18next.t("offer.locationError")
+      i18next.t("login.locationError")
     ),
     category: Yup.string().oneOf(
       categories.map((c) => c.name),
-      i18next.t("offer.categoryError")
+      i18next.t("login.categoryError")
     ),
     subcategory: Yup.string().oneOf(
       subcategories || [],
-      i18next.t("offer.subcategoryError")
+      i18next.t("login.subcategoryError")
     ),
   });