arrow button

src/components/Buttons/ArrowButton/ArrowButton.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ArrowContainer, ArrowIcon } from "./ArrowButton.styled"
+import PropTypes from "prop-types";
+
+export const ArrowButton = (props) => {
+
+    return <ArrowContainer  onClick={props.onClick} className={props.className} disabled={props.disabled}>
+        <ArrowIcon side={props.side} disabled={props.disabled}/>
+    </ArrowContainer>
+}
+
+ArrowButton.propTypes = {
+    onClick: PropTypes.func,
+    className: PropTypes.string,
+    side:PropTypes.string,
+    disabled:PropTypes.bool,
+}

src/components/Buttons/ArrowButton/ArrowButton.styled.js

@@ -0,0 +1,53 @@
+import IconButton from "../../IconButton/IconButton"
+import {ReactComponent as DownArrow} from "../../../assets/images/svg/arrow-down.svg"
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+
+
+export const ArrowIcon = styled(DownArrow)`
+${props => props.side === 'left' && `
+    transform: rotate(180deg);
+`}
+width: 18px;
+height: 18px;
+& path {
+    ${props => props.disabled && `
+    stroke: ${selectedTheme.iconStrokeDisabledColor}
+    `}
+}
+`
+export const ArrowContainer = styled(IconButton)`
+border: 1px solid ${selectedTheme.primaryPurple};
+border-radius: 100%;
+min-width: 40px;
+width: 40px;
+height: 40px;
+display: flex;
+box-sizing: border-box;
+cursor: pointer;
+margin-top: auto;
+margin-bottom: auto;
+transition: 0.2s all ease;
+&:hover {
+    background-color: ${selectedTheme.primaryPurple};
+    & svg path {
+        stroke: white;
+    }
+}
+${props => props.disabled && `
+    border 1px solid ${selectedTheme.iconStrokeDisabledColor};
+    &:hover {
+        background-color: inherit;
+        & svg path {
+            stroke: ${selectedTheme.iconStrokeDisabledColor};
+        }
+    }
+    & svg path {
+        stroke: ${selectedTheme.iconStrokeDisabledColor};
+        transition: 0.2s all ease;
+        
+    }
+    
+`}
+`

src/components/Buttons/IconButton/IconButton.styled.js

@@ -1,5 +1,6 @@
 import { Box, IconButton } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../../themes";
 
 export const IconButtonContainer = styled(Box)`
 `
@@ -13,4 +14,5 @@ export const IconButtonStyled = styled(IconButton)`
             stroke: ${props.iconcolor};
         }
     `}
+    border: ${props => props.border ? "1px solid " + selectedTheme.backgroundSponsoredColor : "none"}
 `

src/components/ItemDetails/Header/Header.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from "prop-types";
 import { useHistory } from "react-router-dom";
-import { IconButton } from "../../Buttons/IconButton/IconButton";
+//import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { HeaderContainer } from './Header.styled';
+import { ArrowButton } from '../../Buttons/ArrowButton/ArrowButton';
 
 // const DownArrow = (props) => (
 //   <IconStyled {...props}>
@@ -21,7 +22,7 @@ const Header = () => {
  
   return (
     <HeaderContainer>
-      <IconButton onClick={handleBackButton}/>
+      <ArrowButton onClick={handleBackButton} side={"left"}></ArrowButton>
       Nazad na objave
     </HeaderContainer>
   );

src/components/ItemDetails/Header/Header.styled.js

@@ -1,4 +1,4 @@
-import { Box, MenuItem, Select } from "@mui/material";
+import { Box, MenuItem, Select} from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
@@ -7,6 +7,7 @@ export const HeaderContainer = styled(Box)`
     margin-top: 20px;
     display: flex;
     justify-content: start;
+    align-items:center;
 `
 export const HeaderLocation = styled(Box)`
     padding-top: 10px;

src/components/ItemDetails/ItemDetailsCard/ItemDetailsCard.js

@@ -21,6 +21,7 @@ import { ReactComponent as Category } from "../../../assets/images/svg/category.
 import selectedTheme from "../../../themes";
 import { Offer as offer } from "../MockupdataDetails";
 import HorizontalScroller from "../../Scroller/HorizontalScroller";
+import {ReactComponent as DummyImage1 } from "../../../assets/images/svg/dummyImages/offer-1.svg"
 
 const ItemDetailsCard = (props) => {
   return (
@@ -56,7 +57,17 @@ const ItemDetailsCard = (props) => {
       </OfferInfo>
       <Details>
         <OfferTitle>{offer.title}</OfferTitle>
-        <HorizontalScroller></HorizontalScroller>
+        <HorizontalScroller>
+          <DummyImage1 />
+          <DummyImage1 />
+          <DummyImage1 />
+          <DummyImage1 />
+          <DummyImage1 />
+          <DummyImage1 />
+          <DummyImage1 />
+          <DummyImage1 />
+          <DummyImage1 />
+        </HorizontalScroller>
         <OfferDetails>
           <OfferDescriptionTitle>Opis:</OfferDescriptionTitle>
           <OfferDescriptionText>{offer.description}</OfferDescriptionText>

src/components/ItemDetails/MockupdataDetails.js

@@ -41,6 +41,18 @@ export const Offer = {
                 id:1,
                 image: <DummyImage1 />
             },
+            {
+                id:2,
+                image: <DummyImage1 />
+            },
+            {
+                id:3,
+                image: <DummyImage1 />
+            },
+            {
+                id:4,
+                image: <DummyImage1 />
+            },
         ],
         package: packageEnum.package,
         postDate: "12.04.2022",

src/components/Scroller/HorizontalScroller.js

@@ -2,10 +2,9 @@ import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
 import {
   HorizontalScrollerContainer,
-  Arrow,
   ListContainer,
-  ArrowIcon,
 } from "./HorizontalScroller.styled";
+import { ArrowButton } from "../Buttons/ArrowButton/ArrowButton";
 
 const HorizontalScroller = (props) => {
   const scrollRef = useRef(null);
@@ -56,9 +55,8 @@ const HorizontalScroller = (props) => {
   };
   return (
     <HorizontalScrollerContainer style={props.containerStyle}>
-      <Arrow onClick={handleLeft} disabled={isDisabledLeftButton}>
-        <ArrowIcon side={"left"} />
-      </Arrow>
+      <ArrowButton onClick={handleLeft} disabled={isDisabledLeftButton} side={"left"}>
+      </ArrowButton>
       <ListContainer
         innerRef={scrollRef}
         style={props.listStyle}
@@ -66,9 +64,8 @@ const HorizontalScroller = (props) => {
       >
         {props.children}
       </ListContainer>
-      <Arrow onClick={handleRight} disabled={isDisabledRightButton}>
-        <ArrowIcon side={"right"} />
-      </Arrow>
+      <ArrowButton onClick={handleRight} disabled={isDisabledRightButton} side={"right"}>
+      </ArrowButton>
     </HorizontalScrollerContainer>
   );
 };

src/components/Scroller/HorizontalScroller.styled.js

@@ -1,8 +1,9 @@
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
 import styled from "styled-components";
 import {ReactComponent as DownArrow} from "../../assets/images/svg/arrow-down.svg"
 import selectedTheme from "../../themes";
 import ScrollContainer from 'react-indiana-drag-scroll'
+import { IconButton } from "../Buttons/IconButton/IconButton";
 
 
 export const HorizontalScrollerContainer = styled(Box)`
@@ -12,7 +13,7 @@ export const HorizontalScrollerContainer = styled(Box)`
     flex-wrap: nowrap;
     overflow: hidden;
 `
-export const Arrow = styled(Button)`
+export const Arrow = styled(IconButton)`
     border: 1px solid ${selectedTheme.primaryPurple};
     border-radius: 100%;
     min-width: 40px;

src/pages/LoginPage/LoginPage.js

@@ -71,6 +71,7 @@ const LoginPage = ({ history }) => {
   };
 
   const handleSubmit = (values) => {
+    console.log('ddedede');
     const { email, password: password } = values;
     dispatch(clearLoginErrors());
     dispatch(

src/request/index.js

@@ -2,7 +2,7 @@ import axios from "axios";
 import queryString from "qs";
 
 const request = axios.create({
-  baseURL: "http://192.168.88.150:3001/",
+  baseURL: "http://192.168.88.175:3005/",
   headers: {
     "Content-Type": "application/json",
   },

src/store/middleware/accessTokensMiddleware.js

@@ -13,7 +13,7 @@ import { logoutUser, refreshUserToken } from "../actions/login/loginActions";
 // import { setUserAccessToken } from "../actions/user/userActions";
 
 //Change URL with .env
-const baseURL = "http://192.168.88.150:3001/";
+const baseURL = "http://192.168.88.175:3005/";
 
 //Interceptor unique name
 export const accessTokensMiddlewareInterceptorName = "ACCESS_TOKEN_INTERCEPTOR";

src/themes/primaryTheme/primaryThemeColors.js

@@ -15,4 +15,5 @@ export const primaryThemeColors = {
     selectOptionTextColor: "#1D1D1D",
     primaryDarkText: "#505050",
     iconStrokeColor: "#8C8C8C",
+    iconStrokeDisabledColor: "#818181"
 }