Creating create Offer page

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

 import styled from "styled-components";
 import selectedTheme from "../../../themes";
 import { Label } from "../../CheckBox/Label";
+import Select from "../../Select/Select";
 
 export const CreateOfferContainer = styled(Container)`
   margin-top: 0px;
     cursor: auto;
     letter-spacing: 0.2px;
   }
+`
+export const SelectField = styled(Select)`
+  position: relative;
+  top: 15px;
+  margin-bottom: 30px;
 `

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

-import React from 'react'
-import PropTypes from 'prop-types'
-import {useFormik} from "formik";
-import { CreateOfferFormContainer, FieldLabel } from './FirstPartCreateOffer.styled'
-import { TextField } from '../../../TextFields/TextField/TextField'
-import { PrimaryButton } from '../../../Buttons/PrimaryButton/PrimaryButton'
-import * as Yup from "yup"
-import selectedTheme from '../../../../themes';
-import { useTranslation } from 'react-i18next';
-import Select from '../../../Select/Select';
-import Option from '../../../Select/Option/Option';
+import React from "react";
+import PropTypes from "prop-types";
+import { useFormik } from "formik";
+import {
+  CreateOfferFormContainer,
+  FieldLabel,
+} from "./FirstPartCreateOffer.styled";
+import { TextField } from "../../../TextFields/TextField/TextField";
+import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
+import * as Yup from "yup";
+import selectedTheme from "../../../../themes";
+import { useTranslation } from "react-i18next";
+import Option from "../../../Select/Option/Option";
+import { SelectField } from "../CreateOffer.styled";
 
 const FirstPartCreateOffer = () => {
-    const {t} = useTranslation();
-    const handleSubmit = (values) => {
-        console.log(values)
-    }
-    const formik = useFormik({
-        initialValues: {
-          nameOfProduct: "",
-          description: "",
-        },
-        validationSchema: Yup.object().shape({
-          nameOfProduct: Yup.string().required(t("login.nameOfProductRequired")),
-          description: Yup.string().required(t("login.descriptionRequired")).min(8),
-        }),
-        onSubmit: handleSubmit,
-        validateOnBlur: true,
-        enableReinitialize: true,
-      });
+  const { t } = useTranslation();
+  const handleSubmit = (values) => {
+    console.log(values);
+  };
+  const formik = useFormik({
+    initialValues: {
+      nameOfProduct: "",
+      description: "",
+    },
+    validationSchema: Yup.object().shape({
+      nameOfProduct: Yup.string().required(t("login.nameOfProductRequired")),
+      description: Yup.string().required(t("login.descriptionRequired")).min(8),
+    }),
+    onSubmit: handleSubmit,
+    validateOnBlur: true,
+    enableReinitialize: true,
+  });
   return (
     <CreateOfferFormContainer component="form" onSubmit={formik.handleSubmit}>
-        {/* <Backdrop position="absolute" isLoading={isLoading} /> */}
+      {/* <Backdrop position="absolute" isLoading={isLoading} /> */}
 
-        <FieldLabel
-          leftText={"NASLOV"}
-        />
-        <TextField
-          name="nameOfProduct"
-          placeholder={"Naziv proizvoda..."}
-          italicPlaceholder
-          margin="normal"
-          value={formik.values.nameOfProduct}
-          onChange={formik.handleChange}
-          error={formik.touched.nameOfProduct && formik.errors.nameOfProduct}
-          helperText={
-            formik.touched.nameOfProduct && formik.errors.nameOfProduct
-          }
-          autoFocus
-          fullWidth
-        />
+      <FieldLabel leftText={"NASLOV"} />
+      <TextField
+        name="nameOfProduct"
+        placeholder={"Naziv proizvoda..."}
+        italicPlaceholder
+        margin="normal"
+        value={formik.values.nameOfProduct}
+        onChange={formik.handleChange}
+        error={formik.touched.nameOfProduct && formik.errors.nameOfProduct}
+        helperText={formik.touched.nameOfProduct && formik.errors.nameOfProduct}
+        autoFocus
+        fullWidth
+      />
 
-        <FieldLabel
-          leftText={"OPIS PROIZVODA"}
-        />
-        <TextField
-          name="description"
-          placeholder={"Opis..."}
-          margin="normal"
-          italicPlaceholder
-          value={formik.values.description}
-          onChange={formik.handleChange}
-          error={formik.touched.description && formik.errors.description}
-          helperText={formik.touched.description && formik.errors.description}
-          fullWidth
-          multiline
-          minRows={4}
-          height={"100px"}
-        />
+      <FieldLabel leftText={"OPIS PROIZVODA"} />
+      <TextField
+        name="description"
+        placeholder={"Opis..."}
+        margin="normal"
+        italicPlaceholder
+        value={formik.values.description}
+        onChange={formik.handleChange}
+        error={formik.touched.description && formik.errors.description}
+        helperText={formik.touched.description && formik.errors.description}
+        fullWidth
+        multiline
+        minRows={4}
+        height={"100px"}
+      />
 
-        <Select defaultValue={1}>
-            <Option value={1}>Opcija 1</Option>
-            <Option value={2}>Opcija 2</Option>
-            <Option value={3}>Opcija 3</Option>
-            <Option value={4}>Opcija 4</Option>
+      <FieldLabel leftText={"KATEGORIJA"} />
+      <SelectField defaultValue={1}>
+        <Option value={1}>Opcija 1</Option>
+        <Option value={2}>Opcija 2</Option>
+        <Option value={3}>Opcija 3</Option>
+        <Option value={4}>Opcija 4</Option>
+      </SelectField>
 
-        </Select>
+      <FieldLabel leftText={"PODKATEGORIJA"} />
+      <SelectField defaultValue={1}>
+        <Option value={1}>Opcija 1</Option>
+        <Option value={2}>Opcija 2</Option>
+        <Option value={3}>Opcija 3</Option>
+        <Option value={4}>Opcija 4</Option>
+      </SelectField>
 
+      <FieldLabel leftText={"LOKACIJA"} />
+      <SelectField defaultValue={1}>
+        <Option value={1}>Opcija 1</Option>
+        <Option value={2}>Opcija 2</Option>
+        <Option value={3}>Opcija 3</Option>
+        <Option value={4}>Opcija 4</Option>
+      </SelectField>
 
-
-        <PrimaryButton
-          type="submit"
-          variant="contained"
-          height="48px"
-          fullWidth={true}
-          buttoncolor={selectedTheme.primaryPurple}
-          textcolor="white"
-          //   disabled={
-          //     formik.values.username.length === 0 ||
-          //     formik.values.password.length === 0
-          //   }
-        >
-          NASTAVI
-        </PrimaryButton>
-
-      </CreateOfferFormContainer>
-  )
-}
+      <PrimaryButton
+        type="submit"
+        variant="contained"
+        height="48px"
+        fullWidth={true}
+        buttoncolor={selectedTheme.primaryPurple}
+        textcolor="white"
+        //   disabled={
+        //     formik.values.username.length === 0 ||
+        //     formik.values.password.length === 0
+        //   }
+      >
+        NASTAVI
+      </PrimaryButton>
+    </CreateOfferFormContainer>
+  );
+};
 
 FirstPartCreateOffer.propTypes = {
-    children: PropTypes.any,
-}
+  children: PropTypes.any,
+};
 
-export default FirstPartCreateOffer
+export default FirstPartCreateOffer;

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

   color: ${selectedTheme.primaryPurple};
   margin-top: 36px;
   margin-bottom: 40px;
+  position: relative;
 `;
 export const CreateOfferDescription = styled(Typography)`
   font-family: "Open Sans";

src/components/Cards/OfferCard/OfferCard.js

     <OfferCardContainer sponsored={props.offer.pinned.toString()} halfwidth={props.halfwidth ? 1 : 0}>
       <OfferImage src={props.offer.images[0]}></OfferImage>
       <OfferInfo>
-        <OfferTitle>{props.title}</OfferTitle>
+        <OfferTitle>{props.offer.name}</OfferTitle>
         <OfferAuthor>
-          <OfferAuthorName>{props.author}</OfferAuthorName>
-          <OfferLocation>{props.location}</OfferLocation>
+          <OfferAuthorName>{props.offer.description}</OfferAuthorName>
+          <OfferLocation>{props.offer.location.city}</OfferLocation>
         </OfferAuthor>
         <OfferDetails>
           <OfferCategory>
             <DetailIcon color="black" component="span" size="16px">
               <Category width={"14px"} />
             </DetailIcon>
-            <DetailText>{props.category}</DetailText>
+            <DetailText>{props.offer.category.name}</DetailText>
           </OfferCategory>
           <OfferPackage>
             <DetailIcon color="black" component="span" size="16px">
               <Quantity width={"12px"} height={"12px"} />
             </DetailIcon>
-            <DetailText>{props.quantity} pakovanja</DetailText>
+            <DetailText>{props.offer.quantity} pakovanja</DetailText>
           </OfferPackage>
           <OfferViews>
             <DetailIcon color="black" component="span" size="16px">
           <Line/>
           <OfferDescription>
             <OfferDescriptionTitle>Opis:</OfferDescriptionTitle>
-            <OfferDescriptionText>{props.description}</OfferDescriptionText>
+            <OfferDescriptionText>{props.offer.description}</OfferDescriptionText>
           </OfferDescription>
 
           <CheckButton

src/components/Select/Option/Option.styled.js

 export const OptionStyled = styled(MenuItem)`
     background-color: ${props => props.selected ? selectedTheme.primaryPurple : "white"} !important;
     color: ${props => props.selected ? "white" : selectedTheme.selectOptionTextColor};
+    margin:2px 9px;
+    border-radius: 4px;
     &:hover {
         background-color: ${selectedTheme.primaryPurple} !important;
+        color: white;
     }
 `
 export const OptionIcon = styled(Box)`

src/components/Select/Select.js

     <SelectStyled
     defaultValue={props.defaultValue}
       fullWidth={props.fullwidth}
+      width={props.width}
+      height={props.height}
+      className={props.className}
       IconComponent={(iconProps) => (
         <SelectIcon {...iconProps}>
           <Down />
 Select.propTypes = {
   children: PropTypes.node,
   width: PropTypes.string,
+  height: PropTypes.string,
   fullwidth: PropTypes.bool,
   defaultValue: PropTypes.number,
+  className: PropTypes.string,
 };
 Select.defaultProps = {
   fullwidth: true,
+  height: "48px"
 };
 
 export default Select;

src/components/Select/Select.styled.js

 export const SelectStyled = styled(Select)`
     width: ${props => props.width};
     height: ${props => props.height};
+    padding: 2px;
+    font-size: 16px;
+    font-weight: 600;
+    font-family: "Open Sans";
 `
 export const SelectIcon = styled(Box)`
     position: relative;

src/components/StepProgress/StepProgress.js

       current: i === props.current,
     });
   }
+  const functions = [];
+  steps.forEach((item,index) => {
+    if (props.functions[index]) {
+      functions.push(props.functions[index])
+    } else {
+      functions.push(() => {})
+    }
+  })
   return (
     <StepProgressContainer done>
       {steps.map((item, index) =>
         index === 0 ? (
-          <StepBar current={item.current} done={item.done} key={index}>
+          <StepBar current={item.current} done={item.done} key={index} onClick={item.done ? props.functions[index] : () => {console.log("neuspeh")}}>
             {item.done ? <Checkmark /> : index+1}
           </StepBar>
         ) : (
             <StepLine done={item.done || item.current} >
               <Progress done={item.done || item.current} />
             </StepLine>
-            <StepBar current={item.current} done={item.done}>
+            <StepBar current={item.current} done={item.done} onClick={item.done ? props.functions[index] : () => {}} >
               {item.done ? <Checkmark /> : index+1}
             </StepBar>
           </React.Fragment>
   handleNext: PropTypes.node,
   current: PropTypes.number,
   numberOfSteps: PropTypes.number,
+  functions: PropTypes.array
 };
+StepProgress.defaultProps = {
+  functions: []
+}
 
 export default StepProgress;

src/components/StepProgress/StepProgress.styled.js

   color: #1d1d1d;
   z-index: 1;
   transition: background-color 1s ease;
+  ${props => props.done && `cursor: pointer;`}
 `;
 export const Progress = styled(Box)`
   height: 9px;

src/layouts/GridLayout/GridLayout.js

-import React from "react";
-import PropTypes from "prop-types";
-import { Content, LeftCard, RightCard, GridLayoutContainer, HeaderCard, MiddleCard } from "./GridLayout.styled";
-import { Grid } from "@mui/material";
-
-const GridLayout = (props) => {
-  return (
-    <GridLayoutContainer>
-      {props.children}
-      <Grid container maxHeight="lg">
-        <LeftCard item xs={2} lg={2.5} xl={2.4} md={3}>
-          {props.leftCard}
-        </LeftCard>
-        <MiddleCard item xs={7.5} lg={6.5} xl={6.6} md={6}>
-          <HeaderCard>
-            {props.headerCard}
-          </HeaderCard>
-          <Content>
-            {props.content}
-          </Content>
-        </MiddleCard>
-        <RightCard item xs={2.5} lg={3} xl={3} md={3}>
-            {props.rightCard}
-        </RightCard>
-      </Grid>
-    </GridLayoutContainer>
-  );
-};
-
-GridLayout.propTypes = {
-  children: PropTypes.node,
-  leftCard: PropTypes.node,
-  content: PropTypes.node,
-  rightCard: PropTypes.node,
-  headerCard: PropTypes.node,
-};
-
-export default GridLayout;

src/layouts/GridLayout/GridLayout.styled.js

-import { Box, Container, Grid } from "@mui/material";
-import styled from "styled-components";
-
-export const GridLayoutContainer = styled(Container)`
-    padding-left: 0;
-    padding-right: 0;
-    margin: 0;
-    width: 100%;
-    display: flex;
-    flex: 1;
-    height: 100%;
-`
-
-export const LeftCard = styled(Grid)`
-    margin-top: 30px;
-    border-top-right-radius: 4px;
-`
-export const Content = styled(Grid)`
-`
-export const RightCard = styled(Grid)`
-    margin-top: 30px;
-    border-top-left-radius: 4px;
-`
-export const MiddleCard = styled(Grid)`
-`
-export const HeaderCard = styled(Box)`
-    height: 450px;
-`

src/layouts/ProfileLayout/ProfileLayout.js

   return (
     <ProfileLayoutContainer>
       {props.children}
-      <Grid container maxHeight="xl">
+      <Grid container maxHeight maxWidth={1900}>
         <LeftCard item xs={2} lg={2.5} xl={2.4} md={3}>
           {props.leftCard}
         </LeftCard>

src/layouts/ProfileLayout/ProfileLayout.styled.js

     margin: 0;
     width: 100%;
     display: flex;
+    max-width: none;
     flex: 1;
     height: 100%;
 `
 export const LeftCard = styled(Grid)`
     margin-top: 30px;
     border-top-right-radius: 4px;
+    background-color: green;
 `
 export const Content = styled(Grid)`
+    background-color: yellow;
+    height: 100%;
 `
 export const RightCard = styled(Grid)`
     margin-top: 30px;
     border-top-left-radius: 4px;
+    background-color: blue;
 `
 export const MiddleCard = styled(Grid)`
 `
 export const HeaderCard = styled(Box)`
     height: 450px;
+    background-color: orange;
 `

src/pages/HomePage/HomePageMUI.js

 import React, { useEffect } from "react";
 import Navbar from "../../components/MUI/NavbarComponent";
-import FilterCard from "../../components/Cards/FilterCard/FilterCard";
+// import FilterCard from "../../components/Cards/FilterCard/FilterCard";
 import { HomePageContainer } from "./HomePage.styled";
-import MarketPlace from "../../components/MarketPlace/MarketPlace";
-import MainLayout from "../../layouts/MainLayout/MainLayout";
+// import MarketPlace from "../../components/MarketPlace/MarketPlace";
+// import MainLayout from "../../layouts/MainLayout/MainLayout";
 import { useDispatch } from "react-redux";
-import { logoutUser } from "../../store/actions/login/loginActions";
+// import { logoutUser } from "../../store/actions/login/loginActions";
 import Mockupdata from "../../components/Cards/FilterCard/Mockupdata";
 import qs from "query-string";
 import { useHistory } from "react-router-dom";
 import { setFilters } from "../../store/actions/filters/filtersActions";
+// import ProfileLayout from "../../layouts/ProfileLayout/ProfileLayout";
+import FilterCard from "../../components/Cards/FilterCard/FilterCard";
+import MainLayout from "../../layouts/MainLayout/MainLayout";
+import MarketPlace from "../../components/MarketPlace/MarketPlace";
 
 const HomePage = () => {
   const dispatch = useDispatch();
     }
     dispatch(setFilters({ category, subcategory, cities }));
   }, [history.location.search]);
-  const handleCl = () => {
-    dispatch(logoutUser());
-  };
+  // const handleCl = () => {
+  //   dispatch(logoutUser());
+  // };
   return (
     <HomePageContainer>
-      <button onClick={handleCl}>Dugme</button>
+      {/* <button onClick={handleCl}>Dugme</button> */}
       <Navbar />
       <MainLayout leftCard={<FilterCard />} content={<MarketPlace />} />
 

src/pages/RegisterPages/Register/Register.js

     }
     setInformations({ ...informations, ...values });
   };
+
+  const goToFirst = () => {
+    setInformations({});
+    setCurrentStep(1);
+  }
+  const goToSecond = () => {
+    const {mail, password} = informations;
+    setInformations({mail, password});
+    setCurrentStep(2);
+  }
   return (
     <RegisterPageContainer currentStep={currentStep}>
       <Logo />
       </RegisterDescription>
 
       <ProgressContainer>
-        <StepProgress current={currentStep} numberOfSteps={3} />
+        <StepProgress functions={[goToFirst, goToSecond]} current={currentStep} numberOfSteps={3} />
       </ProgressContainer>
 
       {currentStep === 1 && (