39 değiştirilmiş dosya ile 1378 ekleme ve 467 silme
+ 10
- 10
src/App.js
Dosyayı Görüntüle
| @@ -1,11 +1,12 @@ | |||
| import React from "react"; | |||
| import { Router } from "react-router-dom"; | |||
| import { Helmet } from "react-helmet-async"; | |||
| import i18next from "i18next"; | |||
| import history from "./store/utils/history"; | |||
| import AppRoutes from "./AppRoutes"; | |||
| import GlobalStyle from "./components/Styles/globalStyles"; | |||
| import { StyledEngineProvider } from "@mui/material"; | |||
| import React from 'react'; | |||
| import { Router } from 'react-router-dom'; | |||
| import { Helmet } from 'react-helmet-async'; | |||
| import i18next from 'i18next'; | |||
| import history from './store/utils/history'; | |||
| import AppRoutes from './AppRoutes'; | |||
| import Header from './components/Header/Header'; | |||
| import { StyledEngineProvider } from '@mui/material'; | |||
| import GlobalStyle from './components/Styles/globalStyles'; | |||
| const App = () => { | |||
| return ( | |||
| @@ -14,8 +15,7 @@ const App = () => { | |||
| <Helmet> | |||
| <title>{i18next.t("app.title")}</title> | |||
| </Helmet> | |||
| {/* <main className="l-page"> */} | |||
| <Header/> | |||
| <StyledEngineProvider injectFirst> | |||
| <GlobalStyle /> | |||
| <AppRoutes /> | |||
+ 7
- 0
src/assets/images/logo.svg
Dosyayı Görüntüle
| @@ -0,0 +1,7 @@ | |||
| <svg width="129" height="53" viewBox="0 0 129 53" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
| <path d="M65.864 17.896H74.63V19.912H71.246V31H69.158V19.912H65.864V17.896ZM77.6259 23.386L77.8059 25.546L77.7339 25.24C77.9499 24.784 78.2439 24.394 78.6159 24.07C78.9999 23.734 79.3899 23.482 79.7859 23.314C80.1819 23.134 80.5059 23.044 80.7579 23.044L80.6679 25.06C80.0919 25.012 79.5879 25.12 79.1559 25.384C78.7359 25.636 78.4059 25.972 78.1659 26.392C77.9379 26.812 77.8239 27.256 77.8239 27.724V31H75.8079V23.386H77.6259ZM85.8146 31.198C85.0946 31.198 84.4406 31.048 83.8526 30.748C83.2766 30.448 82.8206 30.004 82.4846 29.416C82.1486 28.816 81.9806 28.078 81.9806 27.202C81.9806 26.338 82.1546 25.6 82.5026 24.988C82.8626 24.364 83.3306 23.884 83.9066 23.548C84.4946 23.212 85.1306 23.044 85.8146 23.044C86.5466 23.044 87.1346 23.188 87.5786 23.476C88.0346 23.764 88.3886 24.106 88.6406 24.502L88.5326 24.79L88.7306 23.386H90.5846V31H88.5686V29.146L88.7666 29.632C88.7186 29.704 88.6226 29.824 88.4786 29.992C88.3346 30.148 88.1366 30.322 87.8846 30.514C87.6326 30.706 87.3326 30.868 86.9846 31C86.6486 31.132 86.2586 31.198 85.8146 31.198ZM86.3726 29.542C86.7326 29.542 87.0566 29.476 87.3446 29.344C87.6446 29.212 87.8966 29.026 88.1006 28.786C88.3166 28.546 88.4726 28.258 88.5686 27.922V26.266C88.4726 25.954 88.3166 25.684 88.1006 25.456C87.8846 25.216 87.6206 25.03 87.3086 24.898C87.0086 24.766 86.6726 24.7 86.3006 24.7C85.8926 24.7 85.5146 24.802 85.1666 25.006C84.8186 25.21 84.5366 25.492 84.3206 25.852C84.1166 26.212 84.0146 26.626 84.0146 27.094C84.0146 27.55 84.1226 27.964 84.3386 28.336C84.5546 28.708 84.8426 29.002 85.2026 29.218C85.5626 29.434 85.9526 29.542 86.3726 29.542ZM95.1864 23.386L95.3664 24.934L95.2944 24.808C95.5824 24.256 95.9724 23.824 96.4644 23.512C96.9684 23.2 97.5504 23.044 98.2104 23.044C98.6304 23.044 99.0024 23.11 99.3264 23.242C99.6504 23.374 99.9204 23.56 100.136 23.8C100.364 24.04 100.514 24.34 100.586 24.7L100.478 24.736C100.79 24.22 101.192 23.812 101.684 23.512C102.176 23.2 102.698 23.044 103.25 23.044C103.994 23.044 104.588 23.26 105.032 23.692C105.476 24.112 105.704 24.658 105.716 25.33V31H103.718V26.122C103.706 25.75 103.628 25.444 103.484 25.204C103.34 24.952 103.07 24.814 102.674 24.79C102.242 24.79 101.87 24.928 101.558 25.204C101.246 25.468 101 25.816 100.82 26.248C100.652 26.668 100.568 27.118 100.568 27.598V31H98.5344V26.122C98.5224 25.75 98.4384 25.444 98.2824 25.204C98.1264 24.952 97.8504 24.814 97.4544 24.79C97.0344 24.79 96.6684 24.928 96.3564 25.204C96.0444 25.468 95.8044 25.816 95.6364 26.248C95.4684 26.668 95.3844 27.112 95.3844 27.58V31H93.3684V23.386H95.1864ZM113.112 31.198C112.584 31.198 112.074 31.084 111.582 30.856C111.09 30.628 110.694 30.316 110.394 29.92L110.502 29.308V34.654H108.486V23.242H110.232L110.502 25.006L110.322 24.466C110.694 24.058 111.144 23.722 111.672 23.458C112.212 23.182 112.818 23.044 113.49 23.044C114.21 23.044 114.852 23.212 115.416 23.548C115.98 23.884 116.424 24.364 116.748 24.988C117.084 25.6 117.252 26.326 117.252 27.166C117.252 28.006 117.072 28.726 116.712 29.326C116.352 29.926 115.86 30.388 115.236 30.712C114.612 31.036 113.904 31.198 113.112 31.198ZM112.716 29.596C113.16 29.596 113.568 29.494 113.94 29.29C114.324 29.086 114.63 28.804 114.858 28.444C115.086 28.072 115.2 27.658 115.2 27.202C115.2 26.722 115.092 26.302 114.876 25.942C114.672 25.57 114.39 25.282 114.03 25.078C113.682 24.862 113.292 24.754 112.86 24.754C112.464 24.754 112.11 24.82 111.798 24.952C111.486 25.084 111.222 25.276 111.006 25.528C110.79 25.768 110.622 26.056 110.502 26.392V27.922C110.586 28.246 110.73 28.534 110.934 28.786C111.138 29.038 111.396 29.236 111.708 29.38C112.02 29.524 112.356 29.596 112.716 29.596ZM122.588 31.198C121.868 31.198 121.214 31.048 120.626 30.748C120.05 30.448 119.594 30.004 119.258 29.416C118.922 28.816 118.754 28.078 118.754 27.202C118.754 26.338 118.928 25.6 119.276 24.988C119.636 24.364 120.104 23.884 120.68 23.548C121.268 23.212 121.904 23.044 122.588 23.044C123.32 23.044 123.908 23.188 124.352 23.476C124.808 23.764 125.162 24.106 125.414 24.502L125.306 24.79L125.504 23.386H127.358V31H125.342V29.146L125.54 29.632C125.492 29.704 125.396 29.824 125.252 29.992C125.108 30.148 124.91 30.322 124.658 30.514C124.406 30.706 124.106 30.868 123.758 31C123.422 31.132 123.032 31.198 122.588 31.198ZM123.146 29.542C123.506 29.542 123.83 29.476 124.118 29.344C124.418 29.212 124.67 29.026 124.874 28.786C125.09 28.546 125.246 28.258 125.342 27.922V26.266C125.246 25.954 125.09 25.684 124.874 25.456C124.658 25.216 124.394 25.03 124.082 24.898C123.782 24.766 123.446 24.7 123.074 24.7C122.666 24.7 122.288 24.802 121.94 25.006C121.592 25.21 121.31 25.492 121.094 25.852C120.89 26.212 120.788 26.626 120.788 27.094C120.788 27.55 120.896 27.964 121.112 28.336C121.328 28.708 121.616 29.002 121.976 29.218C122.336 29.434 122.726 29.542 123.146 29.542Z" fill="#5A3984"/> | |||
| <rect x="17.5078" width="24.7529" height="24.7529" rx="6.3546" transform="rotate(45 17.5078 0)" fill="#5A3984"/> | |||
| <rect x="35.0078" y="17.5032" width="24.7529" height="24.7529" rx="6.3546" transform="rotate(45 35.0078 17.5032)" fill="#FEB005"/> | |||
| <circle cx="29.5859" cy="22.7096" r="4.85659" transform="rotate(45 29.5859 22.7096)" fill="#FEB005"/> | |||
| <circle cx="22.8281" cy="29.6886" r="4.85659" transform="rotate(45 22.8281 29.6886)" fill="#5A3984"/> | |||
| </svg> | |||
+ 7
- 0
src/assets/images/logo_vertical.svg
Dosya farkı çok büyük olduğundan ihmal edildi
Dosyayı Görüntüle
+ 4
- 0
src/assets/images/svg/arrow-back.svg
Dosyayı Görüntüle
| @@ -0,0 +1,4 @@ | |||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
| <path d="M19 12L5 12" stroke="#1D1D1D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> | |||
| <path d="M12 19L5 12L12 5" stroke="#1D1D1D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> | |||
| </svg> | |||
+ 4
- 0
src/assets/images/svg/close-modal.svg
Dosyayı Görüntüle
| @@ -0,0 +1,4 @@ | |||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
| <path d="M18 6L6 18" stroke="#1D1D1D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |||
| <path d="M6 6L18 18" stroke="#1D1D1D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |||
| </svg> | |||
+ 43
- 0
src/assets/images/svg/logo-horizontal.svg
Dosyayı Görüntüle
| @@ -0,0 +1,43 @@ | |||
| <svg | |||
| width="129" | |||
| height="53" | |||
| viewBox="0 0 129 53" | |||
| fill="none" | |||
| xmlns="http://www.w3.org/2000/svg" | |||
| > | |||
| <path | |||
| d="M65.864 17.896H74.63V19.912H71.246V31H69.158V19.912H65.864V17.896ZM77.6259 23.386L77.8059 25.546L77.7339 25.24C77.9499 24.784 78.2439 24.394 78.6159 24.07C78.9999 23.734 79.3899 23.482 79.7859 23.314C80.1819 23.134 80.5059 23.044 80.7579 23.044L80.6679 25.06C80.0919 25.012 79.5879 25.12 79.1559 25.384C78.7359 25.636 78.4059 25.972 78.1659 26.392C77.9379 26.812 77.8239 27.256 77.8239 27.724V31H75.8079V23.386H77.6259ZM85.8146 31.198C85.0946 31.198 84.4406 31.048 83.8526 30.748C83.2766 30.448 82.8206 30.004 82.4846 29.416C82.1486 28.816 81.9806 28.078 81.9806 27.202C81.9806 26.338 82.1546 25.6 82.5026 24.988C82.8626 24.364 83.3306 23.884 83.9066 23.548C84.4946 23.212 85.1306 23.044 85.8146 23.044C86.5466 23.044 87.1346 23.188 87.5786 23.476C88.0346 23.764 88.3886 24.106 88.6406 24.502L88.5326 24.79L88.7306 23.386H90.5846V31H88.5686V29.146L88.7666 29.632C88.7186 29.704 88.6226 29.824 88.4786 29.992C88.3346 30.148 88.1366 30.322 87.8846 30.514C87.6326 30.706 87.3326 30.868 86.9846 31C86.6486 31.132 86.2586 31.198 85.8146 31.198ZM86.3726 29.542C86.7326 29.542 87.0566 29.476 87.3446 29.344C87.6446 29.212 87.8966 29.026 88.1006 28.786C88.3166 28.546 88.4726 28.258 88.5686 27.922V26.266C88.4726 25.954 88.3166 25.684 88.1006 25.456C87.8846 25.216 87.6206 25.03 87.3086 24.898C87.0086 24.766 86.6726 24.7 86.3006 24.7C85.8926 24.7 85.5146 24.802 85.1666 25.006C84.8186 25.21 84.5366 25.492 84.3206 25.852C84.1166 26.212 84.0146 26.626 84.0146 27.094C84.0146 27.55 84.1226 27.964 84.3386 28.336C84.5546 28.708 84.8426 29.002 85.2026 29.218C85.5626 29.434 85.9526 29.542 86.3726 29.542ZM95.1864 23.386L95.3664 24.934L95.2944 24.808C95.5824 24.256 95.9724 23.824 96.4644 23.512C96.9684 23.2 97.5504 23.044 98.2104 23.044C98.6304 23.044 99.0024 23.11 99.3264 23.242C99.6504 23.374 99.9204 23.56 100.136 23.8C100.364 24.04 100.514 24.34 100.586 24.7L100.478 24.736C100.79 24.22 101.192 23.812 101.684 23.512C102.176 23.2 102.698 23.044 103.25 23.044C103.994 23.044 104.588 23.26 105.032 23.692C105.476 24.112 105.704 24.658 105.716 25.33V31H103.718V26.122C103.706 25.75 103.628 25.444 103.484 25.204C103.34 24.952 103.07 24.814 102.674 24.79C102.242 24.79 101.87 24.928 101.558 25.204C101.246 25.468 101 25.816 100.82 26.248C100.652 26.668 100.568 27.118 100.568 27.598V31H98.5344V26.122C98.5224 25.75 98.4384 25.444 98.2824 25.204C98.1264 24.952 97.8504 24.814 97.4544 24.79C97.0344 24.79 96.6684 24.928 96.3564 25.204C96.0444 25.468 95.8044 25.816 95.6364 26.248C95.4684 26.668 95.3844 27.112 95.3844 27.58V31H93.3684V23.386H95.1864ZM113.112 31.198C112.584 31.198 112.074 31.084 111.582 30.856C111.09 30.628 110.694 30.316 110.394 29.92L110.502 29.308V34.654H108.486V23.242H110.232L110.502 25.006L110.322 24.466C110.694 24.058 111.144 23.722 111.672 23.458C112.212 23.182 112.818 23.044 113.49 23.044C114.21 23.044 114.852 23.212 115.416 23.548C115.98 23.884 116.424 24.364 116.748 24.988C117.084 25.6 117.252 26.326 117.252 27.166C117.252 28.006 117.072 28.726 116.712 29.326C116.352 29.926 115.86 30.388 115.236 30.712C114.612 31.036 113.904 31.198 113.112 31.198ZM112.716 29.596C113.16 29.596 113.568 29.494 113.94 29.29C114.324 29.086 114.63 28.804 114.858 28.444C115.086 28.072 115.2 27.658 115.2 27.202C115.2 26.722 115.092 26.302 114.876 25.942C114.672 25.57 114.39 25.282 114.03 25.078C113.682 24.862 113.292 24.754 112.86 24.754C112.464 24.754 112.11 24.82 111.798 24.952C111.486 25.084 111.222 25.276 111.006 25.528C110.79 25.768 110.622 26.056 110.502 26.392V27.922C110.586 28.246 110.73 28.534 110.934 28.786C111.138 29.038 111.396 29.236 111.708 29.38C112.02 29.524 112.356 29.596 112.716 29.596ZM122.588 31.198C121.868 31.198 121.214 31.048 120.626 30.748C120.05 30.448 119.594 30.004 119.258 29.416C118.922 28.816 118.754 28.078 118.754 27.202C118.754 26.338 118.928 25.6 119.276 24.988C119.636 24.364 120.104 23.884 120.68 23.548C121.268 23.212 121.904 23.044 122.588 23.044C123.32 23.044 123.908 23.188 124.352 23.476C124.808 23.764 125.162 24.106 125.414 24.502L125.306 24.79L125.504 23.386H127.358V31H125.342V29.146L125.54 29.632C125.492 29.704 125.396 29.824 125.252 29.992C125.108 30.148 124.91 30.322 124.658 30.514C124.406 30.706 124.106 30.868 123.758 31C123.422 31.132 123.032 31.198 122.588 31.198ZM123.146 29.542C123.506 29.542 123.83 29.476 124.118 29.344C124.418 29.212 124.67 29.026 124.874 28.786C125.09 28.546 125.246 28.258 125.342 27.922V26.266C125.246 25.954 125.09 25.684 124.874 25.456C124.658 25.216 124.394 25.03 124.082 24.898C123.782 24.766 123.446 24.7 123.074 24.7C122.666 24.7 122.288 24.802 121.94 25.006C121.592 25.21 121.31 25.492 121.094 25.852C120.89 26.212 120.788 26.626 120.788 27.094C120.788 27.55 120.896 27.964 121.112 28.336C121.328 28.708 121.616 29.002 121.976 29.218C122.336 29.434 122.726 29.542 123.146 29.542Z" | |||
| fill="#5A3984" | |||
| /> | |||
| <rect | |||
| x="17.5078" | |||
| width="24.7529" | |||
| height="24.7529" | |||
| rx="6.3546" | |||
| transform="rotate(45 17.5078 0)" | |||
| fill="#5A3984" | |||
| /> | |||
| <rect | |||
| x="35.0078" | |||
| y="17.5032" | |||
| width="24.7529" | |||
| height="24.7529" | |||
| rx="6.3546" | |||
| transform="rotate(45 35.0078 17.5032)" | |||
| fill="#FEB005" | |||
| /> | |||
| <circle | |||
| cx="29.5859" | |||
| cy="22.7096" | |||
| r="4.85659" | |||
| transform="rotate(45 29.5859 22.7096)" | |||
| fill="#FEB005" | |||
| /> | |||
| <circle | |||
| cx="22.8281" | |||
| cy="29.6886" | |||
| r="4.85659" | |||
| transform="rotate(45 22.8281 29.6886)" | |||
| fill="#5A3984" | |||
| /> | |||
| </svg> | |||
+ 37
- 27
src/components/Buttons/ArrowButton/ArrowButton.styled.js
Dosyayı Görüntüle
| @@ -1,41 +1,45 @@ | |||
| import IconButton from "../../IconButton/IconButton" | |||
| import {ReactComponent as DownArrow} from "../../../assets/images/svg/arrow-down.svg" | |||
| 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' && ` | |||
| ${(props) => | |||
| props.side === "left" && | |||
| ` | |||
| transform: rotate(180deg); | |||
| `} | |||
| width: 18px; | |||
| height: 18px; | |||
| & path { | |||
| ${props => props.disabled && ` | |||
| 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 { | |||
| 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; | |||
| stroke: white; | |||
| } | |||
| } | |||
| ${props => props.disabled && ` | |||
| } | |||
| ${(props) => | |||
| props.disabled && | |||
| ` | |||
| border 1px solid ${selectedTheme.iconStrokeDisabledColor}; | |||
| &:hover { | |||
| background-color: inherit; | |||
| @@ -50,4 +54,10 @@ ${props => props.disabled && ` | |||
| } | |||
| `} | |||
| ` | |||
| @media screen and (max-width: 600px) { | |||
| min-width: 32px; | |||
| width: 32px; | |||
| height: 32px; | |||
| } | |||
| `; | |||
+ 2
- 1
src/components/Buttons/PrimaryButton/PrimaryButton.js
Dosyayı Görüntüle
| @@ -6,12 +6,13 @@ import { | |||
| } from "./PrimaryButton.styled"; | |||
| export const PrimaryButton = (props) => { | |||
| console.log(props); | |||
| return ( | |||
| <PrimaryButtonContainer | |||
| style={props.containerStyle} | |||
| className={props.className} | |||
| > | |||
| <PrimaryButtonStyled {...props} sx={props.style}> | |||
| <PrimaryButtonStyled {...props} buttoncolor={props.buttoncolor} sx={props.style}> | |||
| {props.children} | |||
| </PrimaryButtonStyled> | |||
| </PrimaryButtonContainer> | |||
+ 4
- 2
src/components/Buttons/PrimaryButton/PrimaryButton.styled.js
Dosyayı Görüntüle
| @@ -1,8 +1,10 @@ | |||
| import { Box, Button } from "@mui/material"; | |||
| import { Button } from "@mui/material"; | |||
| import styled from "styled-components"; | |||
| import selectedTheme from "../../../themes"; | |||
| export const PrimaryButtonContainer = styled(Box)``; | |||
| export const PrimaryButtonContainer = styled.div` | |||
| min-width: fit-content; | |||
| `; | |||
| export const PrimaryButtonStyled = styled(Button)` | |||
| background-color: ${(props) => | |||
+ 83
- 16
src/components/Cards/CreateOfferCard/CreateOffer.js
Dosyayı Görüntüle
| @@ -24,6 +24,11 @@ import { | |||
| RegisterAltText, | |||
| RegisterTextContainer, | |||
| FieldLabel, | |||
| ModalCreateOfferContainer, | |||
| ModalBackDrop, | |||
| ModalHeader, | |||
| BackIcon, | |||
| CloseIcon, | |||
| } from "./CreateOffer.styled"; | |||
| import selectedTheme from "../../../themes"; | |||
| import StepProgress from "../../StepProgress/StepProgress"; | |||
| @@ -32,8 +37,11 @@ import FirstPartCreateOffer from "./FirstPart/FirstPartCreateOffer"; | |||
| import SecondPartCreateOffer from "./SecondPart/SecondPartCreateOffer"; | |||
| import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer"; | |||
| import { addOffer } from "../../../store/actions/offers/offersActions"; | |||
| import { ReactComponent as ArrowBack } from "../../../assets/images/svg/arrow-back.svg"; | |||
| import { ReactComponent as CloseButton } from "../../../assets/images/svg/close-modal.svg"; | |||
| import BackdropComponent from "../../MUI/BackdropComponent"; | |||
| const CreateOffer = ({ history }) => { | |||
| const CreateOffer = ({ history, setShowCreateOfferModal }) => { | |||
| const dispatch = useDispatch(); | |||
| const { t } = useTranslation(); | |||
| const [informations, setInformations] = useState({}); | |||
| @@ -43,6 +51,8 @@ const CreateOffer = ({ history }) => { | |||
| const handleMouseDownPassword = () => setShowPassword(!showPassword); | |||
| const categories = useSelector((state) => state.categories.categories); | |||
| console.log(informations); | |||
| // When user refreshes page | |||
| // useEffect(() => { | |||
| // function redirectClient() { | |||
| @@ -89,6 +99,7 @@ const CreateOffer = ({ history }) => { | |||
| .filter((img) => img !== undefined) | |||
| .map((img) => | |||
| img | |||
| .replace("data:image/jpg;base64,", "") | |||
| .replace("data:image/jpeg;base64,", "") | |||
| .replace("data:image/png;base64,", "") | |||
| ); | |||
| @@ -123,22 +134,78 @@ const CreateOffer = ({ history }) => { | |||
| submitOffer(offerData); | |||
| }; | |||
| const backButtonHandler = () => { | |||
| setCurrentStep((prevState) => prevState - 1); | |||
| }; | |||
| const closeModalHandler = () => { | |||
| setShowCreateOfferModal(false); | |||
| }; | |||
| const goStepBack = (stepNumber) => { | |||
| setCurrentStep(stepNumber); | |||
| const { | |||
| category, | |||
| condition, | |||
| description, | |||
| images, | |||
| location, | |||
| nameOfProduct, | |||
| subcategory, | |||
| } = informations; | |||
| if (stepNumber === 1) { | |||
| setInformations({}); | |||
| } | |||
| if (stepNumber === 2) { | |||
| setInformations({ | |||
| category, | |||
| condition, | |||
| description, | |||
| location, | |||
| nameOfProduct, | |||
| subcategory, | |||
| }); | |||
| } | |||
| }; | |||
| return ( | |||
| <CreateOfferContainer> | |||
| <CreateOfferTitle component="h1" variant="h5"> | |||
| {currentStep === 3 ? "Pregled" : "Nova Objava"} | |||
| </CreateOfferTitle> | |||
| <StepProgress current={currentStep} numberOfSteps={3} /> | |||
| {currentStep === 1 && <FirstPartCreateOffer handleNext={handleNext} />} | |||
| {currentStep === 2 && <SecondPartCreateOffer handleNext={handleNext} />} | |||
| {currentStep === 3 && ( | |||
| <ThirdPartCreateOffer | |||
| handleSubmitOffer={handleSubmitOffer} | |||
| informations={informations} | |||
| /> | |||
| )} | |||
| </CreateOfferContainer> | |||
| <> | |||
| <BackdropComponent isLoading handleClose={closeModalHandler} /> | |||
| {/* <ModalBackDrop onClick={closeModalHandler}></ModalBackDrop> */} | |||
| <ModalCreateOfferContainer currentStep={currentStep}> | |||
| <CreateOfferContainer> | |||
| <ModalHeader> | |||
| <BackIcon onClick={backButtonHandler}> | |||
| {currentStep !== 1 ? <ArrowBack /> : ""} | |||
| </BackIcon> | |||
| <CreateOfferTitle component="h1" variant="h5"> | |||
| {currentStep === 3 ? "Pregled" : "Nova Objava"} | |||
| </CreateOfferTitle> | |||
| <CloseIcon onClick={closeModalHandler}> | |||
| <CloseButton /> | |||
| </CloseIcon> | |||
| </ModalHeader> | |||
| <StepProgress | |||
| current={currentStep} | |||
| numberOfSteps={3} | |||
| functions={[() => goStepBack(1), () => goStepBack(2)]} | |||
| /> | |||
| {currentStep === 1 && ( | |||
| <FirstPartCreateOffer handleNext={handleNext} /> | |||
| )} | |||
| {currentStep === 2 && ( | |||
| <SecondPartCreateOffer handleNext={handleNext} /> | |||
| )} | |||
| {currentStep === 3 && ( | |||
| <ThirdPartCreateOffer | |||
| handleSubmitOffer={handleSubmitOffer} | |||
| informations={informations} | |||
| /> | |||
| )} | |||
| </CreateOfferContainer> | |||
| </ModalCreateOfferContainer> | |||
| </> | |||
| ); | |||
| }; | |||
+ 75
- 2
src/components/Cards/CreateOfferCard/CreateOffer.styled.js
Dosyayı Görüntüle
| @@ -4,17 +4,85 @@ import selectedTheme from "../../../themes"; | |||
| import { Label } from "../../CheckBox/Label"; | |||
| import Select from "../../Select/Select"; | |||
| export const ModalBackDrop = styled(Box)` | |||
| width: 100%; | |||
| height: 100vh; | |||
| background-color: rgba(0, 0, 0, 0.2); | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| z-index: 90; | |||
| `; | |||
| export const ModalCreateOfferContainer = styled(Box)` | |||
| background-color: #fff; | |||
| position: absolute; | |||
| top: ${(props) => | |||
| props.currentStep === 1 ? "calc(50% - 375px);" : "calc(50% - 294px);"}; | |||
| left: ${(props) => | |||
| props.currentStep !== 3 ? "calc(50% - 310px);" : "calc(50% - 340px);"}; | |||
| z-index: 150; | |||
| padding: 0 150px; | |||
| padding: ${(props) => (props.currentStep !== 3 ? "0 120px" : "0 150px")}; | |||
| @media only screen and (max-width: 600px) { | |||
| height: 767px; | |||
| width: 95%; | |||
| left: 10px; | |||
| padding: 0 30px; | |||
| top: 70px; | |||
| } | |||
| `; | |||
| export const ModalHeader = styled(Box)` | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| `; | |||
| export const BackIcon = styled(Box)` | |||
| cursor: pointer; | |||
| position: absolute; | |||
| left: 40px; | |||
| @media screen and (max-width: 600px) { | |||
| left: 20px; | |||
| & svg { | |||
| width: 20px; | |||
| } | |||
| } | |||
| `; | |||
| export const CloseIcon = styled(Box)` | |||
| cursor: pointer; | |||
| position: absolute; | |||
| right: 40px; | |||
| @media screen and (max-width: 600px) { | |||
| right: 20px; | |||
| & svg { | |||
| width: 20px; | |||
| } | |||
| } | |||
| `; | |||
| export const CreateOfferContainer = styled(Container)` | |||
| margin-top: 0px; | |||
| display: flex; | |||
| width: 380px; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| @media screen and (max-width: 600px) { | |||
| width: 95%; | |||
| } | |||
| `; | |||
| export const CreateOfferTitle = styled(Typography)` | |||
| font-family: "Open Sans"; | |||
| width: 328px; | |||
| height: 33px; | |||
| /* width: 328px; | |||
| height: 33px; */ | |||
| text-align: center; | |||
| flex: 1; | |||
| font-style: normal; | |||
| @@ -24,6 +92,11 @@ export const CreateOfferTitle = styled(Typography)` | |||
| color: ${selectedTheme.primaryPurple}; | |||
| margin-top: 36px; | |||
| margin-bottom: 40px; | |||
| @media screen and (max-width: 600px) { | |||
| font-size: 18px; | |||
| margin-bottom: 30px; | |||
| } | |||
| `; | |||
| export const CreateOfferDescription = styled(Typography)` | |||
| font-family: "Open Sans"; | |||
+ 3
- 1
src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.js
Dosyayı Görüntüle
| @@ -22,6 +22,8 @@ const FirstPartCreateOffer = (props) => { | |||
| const locations = useSelector((state) => state.locations.locations); | |||
| const categories = useSelector((state) => state.categories.categories); | |||
| console.log(locations); | |||
| const { t } = useTranslation(); | |||
| const handleSubmit = (values) => { | |||
| console.log(values); | |||
| @@ -158,7 +160,7 @@ const FirstPartCreateOffer = (props) => { | |||
| // formik.values.password.length === 0 | |||
| // } | |||
| > | |||
| NASTAVI | |||
| {t("offer.continue")} | |||
| </NextButton> | |||
| </CreateOfferFormContainer> | |||
| ); | |||
+ 7
- 2
src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.styled.js
Dosyayı Görüntüle
| @@ -36,8 +36,7 @@ export const CreateOfferDescription = styled(Typography)` | |||
| `; | |||
| export const CreateOfferFormContainer = styled(Box)` | |||
| width: 335px; | |||
| height: 700px; | |||
| padding-top: 20px; | |||
| padding: 20px 0 35px 0; | |||
| `; | |||
| export const FieldLabel = styled(Label)` | |||
| position: relative; | |||
| @@ -57,4 +56,10 @@ export const DescriptionField = styled(TextField)` | |||
| export const TitleField = styled(TextField)``; | |||
| export const NextButton = styled(PrimaryButton)` | |||
| margin-top: 16px; | |||
| @media screen and (max-width: 600px) { | |||
| width: 332px; | |||
| position: absolute; | |||
| bottom: 20px; | |||
| } | |||
| `; | |||
+ 1
- 1
src/components/Cards/CreateOfferCard/SecondPart/SecondPartCreateOffer.js
Dosyayı Görüntüle
| @@ -99,7 +99,7 @@ const SecondPartCreateOffer = (props) => { | |||
| // formik.values.password.length === 0 | |||
| // } | |||
| > | |||
| NASTAVI | |||
| {t("offer.continue")} | |||
| </NextButton> | |||
| </InputButtonContainer> | |||
| </CreateOfferFormContainer> | |||
+ 0
- 2
src/components/Cards/CreateOfferCard/SecondPart/SecondPartCreateOffer.styled.js
Dosyayı Görüntüle
| @@ -5,8 +5,6 @@ import { Label } from "../../../CheckBox/Label"; | |||
| import HorizontalScroller from "../../../Scroller/HorizontalScroller"; | |||
| export const CreateOfferFormContainer = styled(Box)` | |||
| width: 585px; | |||
| height: 700px; | |||
| padding-top: 20px; | |||
| margin-top: 20px; | |||
| `; | |||
+ 1
- 1
src/components/Cards/CreateOfferCard/ThirdPart/ThirdPartCreateOffer.js
Dosyayı Görüntüle
| @@ -20,7 +20,7 @@ const ThirdPartCreateOffer = (props) => { | |||
| description={props.informations.description} | |||
| images={props.informations.images} | |||
| showBarterButton={false} | |||
| showPublishButton={true} | |||
| showPublishButton | |||
| /> | |||
| </CreateOfferFormContainer> | |||
| ); | |||
+ 88
- 82
src/components/Cards/ItemDetailsCard/ItemDetailsCard.js
Dosyayı Görüntüle
| @@ -29,60 +29,61 @@ import HorizontalScroller from "../../Scroller/HorizontalScroller"; | |||
| const ItemDetailsCard = (props) => { | |||
| return ( | |||
| <ItemDetailsCardContainer | |||
| sponsored={props.sponsored.toString()} | |||
| halfwidth={props.halfwidth ? 1 : 0} | |||
| > | |||
| <OfferInfo> | |||
| <Info> | |||
| <InfoGroup> | |||
| <InfoIcon | |||
| color={selectedTheme.iconStrokeColor} | |||
| component="span" | |||
| size="16px" | |||
| > | |||
| <Category width={"14px"} /> | |||
| </InfoIcon> | |||
| <InfoText>{props.category}</InfoText> | |||
| </InfoGroup> | |||
| <InfoGroup> | |||
| <InfoIcon | |||
| color={selectedTheme.iconStrokeColor} | |||
| component="span" | |||
| size="16px" | |||
| > | |||
| <Subcategory width={"14px"} /> | |||
| </InfoIcon> | |||
| <InfoText>{props.subcategory}</InfoText> | |||
| </InfoGroup> | |||
| <InfoGroup> | |||
| <InfoIcon | |||
| color={selectedTheme.iconStrokeColor} | |||
| component="span" | |||
| size="16px" | |||
| > | |||
| <Quantity width={"22px"} height={"16px"} /> | |||
| </InfoIcon> | |||
| <InfoText>{props.condition}</InfoText> | |||
| </InfoGroup> | |||
| {props.showNumberOfViews && ( | |||
| <> | |||
| <ItemDetailsCardContainer | |||
| sponsored={props.sponsored.toString()} | |||
| halfwidth={props.halfwidth ? 1 : 0} | |||
| > | |||
| <OfferInfo> | |||
| <Info> | |||
| <InfoGroup> | |||
| <InfoIcon | |||
| color={selectedTheme.iconStrokeColor} | |||
| component="span" | |||
| size="16px" | |||
| > | |||
| <Category width={"14px"} /> | |||
| </InfoIcon> | |||
| <InfoText>{props.category}</InfoText> | |||
| </InfoGroup> | |||
| <InfoGroup> | |||
| <InfoIcon | |||
| color={selectedTheme.iconStrokeColor} | |||
| component="span" | |||
| size="16px" | |||
| > | |||
| <Subcategory width={"14px"} /> | |||
| </InfoIcon> | |||
| <InfoText>{props.subcategory}</InfoText> | |||
| </InfoGroup> | |||
| <InfoGroup> | |||
| <InfoIcon color={"black"} component="span" size="12px"> | |||
| <Eye width={"18px"} height={"20px"} /> | |||
| <InfoIcon | |||
| color={selectedTheme.iconStrokeColor} | |||
| component="span" | |||
| size="16px" | |||
| > | |||
| <Quantity width={"22px"} height={"16px"} /> | |||
| </InfoIcon> | |||
| <InfoText>{offer.numberOfViews}</InfoText> | |||
| <InfoText>{props.condition}</InfoText> | |||
| </InfoGroup> | |||
| )} | |||
| </Info> | |||
| <PostDate>Objavljeno: {offer.postDate}</PostDate> | |||
| </OfferInfo> | |||
| <Details> | |||
| <OfferTitle>{props.title}</OfferTitle> | |||
| <HorizontalScroller> | |||
| {props.images.map((img, i) => ( | |||
| <OfferImage src={img} key={i} /> | |||
| ))} | |||
| {/* <DummyImage1 /> | |||
| {props.showNumberOfViews && ( | |||
| <InfoGroup> | |||
| <InfoIcon color={"black"} component="span" size="12px"> | |||
| <Eye width={"18px"} height={"20px"} /> | |||
| </InfoIcon> | |||
| <InfoText>{offer.numberOfViews}</InfoText> | |||
| </InfoGroup> | |||
| )} | |||
| </Info> | |||
| <PostDate>Objavljeno: {offer.postDate}</PostDate> | |||
| </OfferInfo> | |||
| <Details> | |||
| <OfferTitle>{props.title}</OfferTitle> | |||
| <HorizontalScroller> | |||
| {props.images.map((img, i) => ( | |||
| <OfferImage src={img} key={i} /> | |||
| ))} | |||
| {/* <DummyImage1 /> | |||
| <DummyImage1 /> | |||
| <DummyImage1 /> | |||
| <DummyImage1 /> | |||
| @@ -91,26 +92,41 @@ const ItemDetailsCard = (props) => { | |||
| <DummyImage1 /> | |||
| <DummyImage1 /> | |||
| <DummyImage1 /> */} | |||
| </HorizontalScroller> | |||
| <OfferDetails> | |||
| <OfferDescriptionTitle>Opis:</OfferDescriptionTitle> | |||
| <OfferDescriptionText>{props.description}</OfferDescriptionText> | |||
| </OfferDetails> | |||
| </Details> | |||
| {props.showBarterButton && !props.halfwidth ? ( | |||
| <React.Fragment> | |||
| <CheckButton | |||
| variant={props.sponsored ? "contained" : "outlined"} | |||
| buttoncolor={selectedTheme.primaryPurple} | |||
| textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple} | |||
| style={{ fontWeight: "600" }} | |||
| > | |||
| Trampi | |||
| </CheckButton> | |||
| </React.Fragment> | |||
| ) : ( | |||
| <></> | |||
| )} | |||
| </HorizontalScroller> | |||
| <OfferDetails> | |||
| <OfferDescriptionTitle>Opis:</OfferDescriptionTitle> | |||
| <OfferDescriptionText showBarterButton={props.showBarterButton}> | |||
| {props.description} | |||
| </OfferDescriptionText> | |||
| </OfferDetails> | |||
| </Details> | |||
| {props.showBarterButton && !props.halfwidth ? ( | |||
| <React.Fragment> | |||
| <CheckButton | |||
| variant={props.sponsored ? "contained" : "outlined"} | |||
| buttoncolor={selectedTheme.primaryPurple} | |||
| textcolor={ | |||
| props.sponsored ? "white" : selectedTheme.primaryPurple | |||
| } | |||
| style={{ fontWeight: "600" }} | |||
| > | |||
| Trampi | |||
| </CheckButton> | |||
| </React.Fragment> | |||
| ) : ( | |||
| <></> | |||
| )} | |||
| {/* {props.image} | |||
| {props.title} | |||
| {props.description} | |||
| {props.category} | |||
| {props.author} | |||
| {props.location} | |||
| {props.quantity} | |||
| {props.package} | |||
| {props.numberOfViews} */} | |||
| </ItemDetailsCardContainer> | |||
| {props.showPublishButton && ( | |||
| <PublishButtonContainer> | |||
| <NextButton | |||
| @@ -129,17 +145,7 @@ const ItemDetailsCard = (props) => { | |||
| </NextButton> | |||
| </PublishButtonContainer> | |||
| )} | |||
| {/* {props.image} | |||
| {props.title} | |||
| {props.description} | |||
| {props.category} | |||
| {props.author} | |||
| {props.location} | |||
| {props.quantity} | |||
| {props.package} | |||
| {props.numberOfViews} */} | |||
| </ItemDetailsCardContainer> | |||
| </> | |||
| ); | |||
| }; | |||
+ 38
- 1
src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js
Dosyayı Görüntüle
| @@ -20,6 +20,11 @@ export const ItemDetailsCardContainer = styled(Container)` | |||
| padding: 18px; | |||
| max-width: 2000px; | |||
| position: relative; | |||
| @media screen and (max-width: 600px) { | |||
| width: 370px; | |||
| padding: 10px; | |||
| } | |||
| `; | |||
| export const OfferInfo = styled(Box)` | |||
| display: flex; | |||
| @@ -38,6 +43,11 @@ export const PostDate = styled(Typography)` | |||
| font-family: "Open Sans"; | |||
| font-size: 12px; | |||
| color: ${selectedTheme.primaryText}; | |||
| @media screen and (max-width: 600px) { | |||
| font-size: 11px; | |||
| display: none; | |||
| } | |||
| `; | |||
| export const Info = styled(Box)` | |||
| display: flex; | |||
| @@ -58,12 +68,22 @@ export const OfferTitle = styled(Typography)` | |||
| font-weight: 700; | |||
| font-size: 24px; | |||
| padding: 0 60px; | |||
| @media screen and (max-width: 600px) { | |||
| padding: 0; | |||
| font-size: 18px; | |||
| } | |||
| `; | |||
| export const OfferImage = styled.img` | |||
| width: 144px; | |||
| height: 144px; | |||
| margin-right: 20px; | |||
| object-fit: cover; | |||
| @media screen and (max-width: 600px) { | |||
| min-width: 144px; | |||
| margin-right: 13px; | |||
| } | |||
| `; | |||
| export const OfferAuthor = styled(Box)` | |||
| display: flex; | |||
| @@ -88,6 +108,10 @@ export const OfferDetails = styled(Box)` | |||
| flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")}; | |||
| justify-content: space-between; | |||
| padding: 0 60px; | |||
| @media screen and (max-width: 600px) { | |||
| padding: 0; | |||
| } | |||
| `; | |||
| export const OfferCategory = styled(Box)` | |||
| font-family: "Open Sans"; | |||
| @@ -121,12 +145,18 @@ export const OfferDescriptionText = styled(Box)` | |||
| font-size: 16px; | |||
| color: ${selectedTheme.primaryDarkText}; | |||
| line-height: 22px; | |||
| max-width: calc(100% - 230px); | |||
| /* max-width: calc(100% - 230px); */ | |||
| max-width: ${(props) => | |||
| props.showBarterButton ? "calc(100% - 230px)" : "488px"}; | |||
| max-height: 120px; | |||
| overflow: hidden; | |||
| display: -webkit-box; | |||
| -webkit-line-clamp: 5; | |||
| -webkit-box-orient: vertical; | |||
| @media screen and (max-width: 600px) { | |||
| font-size: 14px; | |||
| } | |||
| `; | |||
| export const OfferDescription = styled(Box)` | |||
| flex: 3; | |||
| @@ -168,9 +198,16 @@ export const Details = styled(Box)` | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 12px; | |||
| /* height: 300px; | |||
| overflow-y: scroll; */ | |||
| @media screen and (max-width: 600px) { | |||
| margin-top: 15px; | |||
| } | |||
| `; | |||
| export const PublishButtonContainer = styled(Box)` | |||
| display: flex; | |||
| justify-content: center; | |||
| margin-bottom: 30px; | |||
| `; | |||
+ 248
- 0
src/components/Header/Header.js
Dosyayı Görüntüle
| @@ -0,0 +1,248 @@ | |||
| import React, { useState, useMemo } from "react"; | |||
| import { | |||
| AddOfferButton, | |||
| DrawerContainer, | |||
| LogoContainer, | |||
| SearchIcon, | |||
| SearchInput, | |||
| ToggleDrawerButton, | |||
| ToolsButtonsContainer, | |||
| ToolsContainer, | |||
| UserButton, | |||
| UserName, | |||
| } from "./Header.styled"; | |||
| import { | |||
| AppBar, | |||
| Badge, | |||
| Toolbar, | |||
| useMediaQuery, | |||
| Typography, | |||
| } from "@mui/material"; | |||
| import { useTheme } from "@mui/system"; | |||
| import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined"; | |||
| import MailIcon from "@mui/icons-material/EmailOutlined"; | |||
| import Autorenew from "@mui/icons-material/Autorenew"; | |||
| import AccountCircle from "@mui/icons-material/PersonOutlineOutlined"; | |||
| import Drawer from "../MUI/DrawerComponent"; | |||
| import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton"; | |||
| import PopoverComponent from "../Popovers/PopoverComponent"; | |||
| import { MyPosts } from "../Popovers/MyPosts/MyPosts"; | |||
| import { MyMessages } from "../Popovers/MyMessages/MyMessages"; | |||
| import { MyProfile } from "../Popovers/MyProfile/MyProfile"; | |||
| import { ReactComponent as LogoHorizontal } from "../../assets/images/svg/logo-horizontal.svg"; | |||
| import selectedTheme from "../../themes"; | |||
| import { useTranslation } from "react-i18next"; | |||
| import { IconButton } from "../Buttons/IconButton/IconButton"; | |||
| import { Icon } from "../Icon/Icon"; | |||
| import CreateOffer from "../Cards/CreateOfferCard/CreateOffer"; | |||
| const Header = () => { | |||
| const [openDrawer, setOpenDrawer] = useState(false); | |||
| const [showCreateOfferModal, setShowCreateOfferModal] = useState(false); | |||
| const { t } = useTranslation(); | |||
| const theme = useTheme(); | |||
| const matches = useMediaQuery(theme.breakpoints.down("md")); | |||
| const handleToggleDrawer = () => { | |||
| setOpenDrawer(!openDrawer); | |||
| }; | |||
| const [postsPopoverOpen, setPostsPopoverOpen] = useState(false); | |||
| const [postsAnchorEl, setPostsAnchorEl] = useState(null); | |||
| const [msgPopoverOpen, setMsgPopoverOpen] = useState(false); | |||
| const [msgAnchorEl, setMsgAnchorEl] = useState(null); | |||
| const [userPopoverOpen, setUserPopoverOpen] = useState(false); | |||
| const [userAnchorEl, setUserAnchorEl] = useState(null); | |||
| const handleShowModal = () => { | |||
| setShowCreateOfferModal(!showCreateOfferModal); | |||
| }; | |||
| const drawerContent = useMemo( | |||
| () => ( | |||
| <DrawerContainer> | |||
| <PrimaryButton | |||
| type="submit" | |||
| variant="contained" | |||
| height="36px" | |||
| fullWidth | |||
| buttoncolor={selectedTheme.primaryYellow} | |||
| textcolor="black" | |||
| onClick={() => handleToggleDrawer()} | |||
| > | |||
| {t("header.addOffer")} | |||
| </PrimaryButton> | |||
| <ToolsContainer mobile> | |||
| <IconButton | |||
| onClick={(e) => { | |||
| setPostsPopoverOpen(true); | |||
| setPostsAnchorEl(e.currentTarget); | |||
| }} | |||
| sx={{ borderRadius: "4px" }} | |||
| > | |||
| <Autorenew /> | |||
| <Typography sx={{ ml: 2 }}>Moje objave</Typography> | |||
| </IconButton> | |||
| <IconButton | |||
| onClick={(e) => { | |||
| setMsgPopoverOpen(true); | |||
| setMsgAnchorEl(e.currentTarget); | |||
| }} | |||
| sx={{ borderRadius: "4px" }} | |||
| > | |||
| <Badge badgeContent={3} color="primary"> | |||
| <MailIcon color="action" /> | |||
| </Badge> | |||
| <Typography sx={{ ml: 2 }}>Moje poruke</Typography> | |||
| </IconButton> | |||
| <IconButton | |||
| onClick={(e) => { | |||
| setUserPopoverOpen(true); | |||
| setUserAnchorEl(e.currentTarget); | |||
| }} | |||
| sx={{ borderRadius: "4px" }} | |||
| > | |||
| <AccountCircle /> | |||
| <Typography sx={{ ml: 2 }}>Moj profil</Typography> | |||
| </IconButton> | |||
| </ToolsContainer> | |||
| </DrawerContainer> | |||
| ), | |||
| [handleToggleDrawer] | |||
| ); | |||
| return ( | |||
| <> | |||
| <AppBar | |||
| style={{ zIndex: 80 }} | |||
| elevation={0} | |||
| positionFixed | |||
| sx={{ backgroundColor: "white" }} | |||
| > | |||
| <Toolbar> | |||
| <ToolsContainer> | |||
| <LogoContainer> | |||
| <LogoHorizontal /> | |||
| </LogoContainer> | |||
| {matches && ( | |||
| <Drawer | |||
| open={openDrawer} | |||
| toggleOpen={handleToggleDrawer} | |||
| content={drawerContent} | |||
| /> | |||
| )} | |||
| <SearchInput | |||
| fullWidth | |||
| InputProps={{ | |||
| startAdornment: ( | |||
| <Icon size="36px"> | |||
| <SearchIcon /> | |||
| </Icon> | |||
| ), | |||
| }} | |||
| label={t("header.searchOffers")} | |||
| /> | |||
| <ToolsButtonsContainer mobile={matches}> | |||
| {matches ? ( | |||
| <ToggleDrawerButton> | |||
| <IconButton onClick={handleToggleDrawer}> | |||
| <MenuOutlinedIcon /> | |||
| </IconButton> | |||
| </ToggleDrawerButton> | |||
| ) : ( | |||
| <React.Fragment> | |||
| <AddOfferButton | |||
| type="submit" | |||
| variant="contained" | |||
| fullWidth | |||
| buttoncolor={selectedTheme.primaryYellow} | |||
| textcolor={selectedTheme.primaryDarkText} | |||
| onClick={handleShowModal} | |||
| > | |||
| {t("header.addOffer")} | |||
| </AddOfferButton> | |||
| <IconButton | |||
| onClick={(e) => { | |||
| setPostsPopoverOpen(true); | |||
| setPostsAnchorEl(e.currentTarget); | |||
| }} | |||
| style={{ | |||
| background: selectedTheme.primaryIconBackgroundColor, | |||
| color: selectedTheme.primaryPurple, | |||
| }} | |||
| > | |||
| <Autorenew /> | |||
| </IconButton> | |||
| <IconButton | |||
| onClick={(e) => { | |||
| setMsgPopoverOpen(true); | |||
| setMsgAnchorEl(e.currentTarget); | |||
| }} | |||
| style={{ | |||
| background: selectedTheme.primaryIconBackgroundColor, | |||
| color: selectedTheme.primaryPurple, | |||
| }} | |||
| > | |||
| <Badge badgeContent={3} color="primary"> | |||
| <MailIcon /> | |||
| </Badge> | |||
| </IconButton> | |||
| <UserButton | |||
| onClick={(e) => { | |||
| setUserPopoverOpen(true); | |||
| setUserAnchorEl(e.currentTarget); | |||
| }} | |||
| > | |||
| <UserName>Username korisnika</UserName> | |||
| <IconButton | |||
| style={{ | |||
| background: selectedTheme.primaryIconBackgroundColor, | |||
| color: selectedTheme.primaryPurple, | |||
| }} | |||
| > | |||
| <AccountCircle /> | |||
| </IconButton> | |||
| </UserButton> | |||
| </React.Fragment> | |||
| )} | |||
| </ToolsButtonsContainer> | |||
| </ToolsContainer> | |||
| </Toolbar> | |||
| <PopoverComponent | |||
| anchorEl={postsAnchorEl} | |||
| open={postsPopoverOpen} | |||
| onClose={() => { | |||
| setPostsPopoverOpen(false); | |||
| setPostsAnchorEl(null); | |||
| }} | |||
| content={<MyPosts />} | |||
| /> | |||
| <PopoverComponent | |||
| anchorEl={msgAnchorEl} | |||
| open={msgPopoverOpen} | |||
| onClose={() => { | |||
| setMsgPopoverOpen(false); | |||
| setMsgAnchorEl(null); | |||
| }} | |||
| content={<MyMessages />} | |||
| /> | |||
| <PopoverComponent | |||
| anchorEl={userAnchorEl} | |||
| open={userPopoverOpen} | |||
| onClose={() => { | |||
| setUserPopoverOpen(false); | |||
| setUserAnchorEl(null); | |||
| }} | |||
| content={<MyProfile />} | |||
| /> | |||
| </AppBar> | |||
| {showCreateOfferModal && ( | |||
| <CreateOffer setShowCreateOfferModal={setShowCreateOfferModal} /> | |||
| )} | |||
| </> | |||
| ); | |||
| }; | |||
| export default Header; | |||
+ 90
- 0
src/components/Header/Header.styled.js
Dosyayı Görüntüle
| @@ -0,0 +1,90 @@ | |||
| import { Box, Typography } from "@mui/material"; | |||
| import styled from "styled-components"; | |||
| import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton"; | |||
| import { TextField } from "../TextFields/TextField/TextField"; | |||
| import { ReactComponent as Search } from "../../assets/images/svg/magnifying-glass.svg"; | |||
| import selectedTheme from "../../themes"; | |||
| export const SearchInput = styled(TextField)` | |||
| margin-left: 3.8rem; | |||
| background-color: #f4f4f4; | |||
| width: 45%; | |||
| max-width: 520px; | |||
| margin-right: 30px; | |||
| font-family: "Open Sans"; | |||
| @media (max-width: 1100px) { | |||
| width: 36%; | |||
| } | |||
| @media (max-width: 1000px) { | |||
| width: 54%; | |||
| margin-left: 2.8rem; | |||
| margin-right: 10px; | |||
| } | |||
| @media (max-width: 600px) { | |||
| width: 60%; | |||
| margin-left: 2rem; | |||
| } | |||
| `; | |||
| export const DrawerContainer = styled(Box)` | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin: 25px; | |||
| & div { | |||
| flex-direction: column; | |||
| } | |||
| `; | |||
| export const ToolsContainer = styled(Box)` | |||
| display: flex; | |||
| flex-direction: row; | |||
| justify-content: ${(props) => (props.mobile ? "center" : "space-between")}; | |||
| align-items: ${(props) => (props.mobile ? "start" : "center")}; | |||
| ${(props) => !props.mobile && `width: 100%;`} | |||
| & div button { | |||
| ${props => props.mobile && `width: auto;`} | |||
| } | |||
| `; | |||
| export const LogoContainer = styled(Box)` | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| `; | |||
| export const ToolsButtonsContainer = styled(Box)` | |||
| display: flex; | |||
| justify-content: space-between; | |||
| min-width: ${props => props.mobile ? "40px" : "600px"}; | |||
| align-items: center; | |||
| flex-wrap: nowrap; | |||
| `; | |||
| export const ToggleDrawerButton = styled(Box)` | |||
| max-width: 40px; | |||
| `; | |||
| export const AddOfferButton = styled(PrimaryButton)` | |||
| height: 49px; | |||
| width: 180px; | |||
| font-weight: 600; | |||
| `; | |||
| export const SearchIcon = styled(Search)` | |||
| position: relative; | |||
| top: 11px; | |||
| left: 4px; | |||
| color: ${selectedTheme.primaryPurple}; | |||
| & path { | |||
| width: 18px; | |||
| height: 18px; | |||
| } | |||
| `; | |||
| export const UserButton = styled(Box)` | |||
| display: flex; | |||
| flex-direction: row; | |||
| cursor: pointer; | |||
| `; | |||
| export const UserName = styled(Typography)` | |||
| color: ${selectedTheme.primaryPurple}; | |||
| padding-top: 5px; | |||
| padding-right: 10px; | |||
| font-family: "Open Sans"; | |||
| font-weight: 600; | |||
| white-space: nowrap; | |||
| `; | |||
+ 21
- 19
src/components/MUI/BackdropComponent.js
Dosyayı Görüntüle
| @@ -1,26 +1,28 @@ | |||
| import React from 'react'; | |||
| import PropTypes from 'prop-types'; | |||
| import { Backdrop, CircularProgress } from '@mui/material'; | |||
| import { alpha } from '@mui/system'; | |||
| import React from "react"; | |||
| import PropTypes from "prop-types"; | |||
| import { Backdrop } from "@mui/material"; | |||
| // import { alpha } from "@mui/system"; | |||
| const BackdropComponent = ({ position = 'fixed', isLoading }) => ( | |||
| <Backdrop | |||
| sx={{ | |||
| // 'fixed' takes whole page, 'absolute' takes whole space of the parent element which needs to have 'relative' position | |||
| position, | |||
| backgroundColor: ({ palette }) => | |||
| alpha(palette.background.default, palette.action.disabledOpacity), | |||
| zIndex: ({ zIndex }) => zIndex.drawer + 1, | |||
| }} | |||
| open={isLoading} | |||
| > | |||
| <CircularProgress /> | |||
| </Backdrop> | |||
| const BackdropComponent = ({ position = "fixed", isLoading, handleClose }) => ( | |||
| <Backdrop | |||
| sx={{ | |||
| // 'fixed' takes whole page, 'absolute' takes whole space of the parent element which needs to have 'relative' position | |||
| position, | |||
| // zIndex: ({ zIndex }) => zIndex.drawer + 1, | |||
| zIndex: 140, | |||
| }} | |||
| open={isLoading} | |||
| onClick={handleClose} | |||
| style={{ backgroundColor: "rgba(0,0,0,0.3)" }} | |||
| > | |||
| {/* <CircularProgress /> */} | |||
| </Backdrop> | |||
| ); | |||
| BackdropComponent.propTypes = { | |||
| position: PropTypes.oneOf(['fixed', 'absolute']), | |||
| isLoading: PropTypes.bool.isRequired, | |||
| position: PropTypes.oneOf(["fixed", "absolute"]), | |||
| isLoading: PropTypes.bool.isRequired, | |||
| handleClose: PropTypes.func, | |||
| }; | |||
| export default BackdropComponent; | |||
+ 57
- 57
src/components/MUI/Examples/ModalsExample.js
Dosyayı Görüntüle
| @@ -1,63 +1,63 @@ | |||
| import React, { useState } from 'react'; | |||
| import { Button, Divider, Paper, Typography } from '@mui/material'; | |||
| import DialogComponent from '../DialogComponent'; | |||
| import DrawerComponent from '../DrawerComponent'; | |||
| import PopoverComponent from '../PopoverComponent'; | |||
| import React from 'react'; | |||
| // import { Button, Divider, Paper, Typography } from '@mui/material'; | |||
| // import DialogComponent from '../DialogComponent'; | |||
| // import DrawerComponent from '../DrawerComponent'; | |||
| // import PopoverComponent from '../PopoverComponent'; | |||
| const Modals = () => { | |||
| const [dialogOpen, setDialogOpen] = useState(false); | |||
| const [drawerOpen, setDrawerOpen] = useState(false); | |||
| const [popoverOpen, setPopoverOpen] = useState(false); | |||
| const [anchorEl, setAnchorEl] = useState(null); | |||
| // const [dialogOpen, setDialogOpen] = useState(false); | |||
| // const [drawerOpen, setDrawerOpen] = useState(false); | |||
| // const [popoverOpen, setPopoverOpen] = useState(false); | |||
| // const [anchorEl, setAnchorEl] = useState(null); | |||
| return ( | |||
| <Paper | |||
| sx={{ | |||
| p: 2, | |||
| display: 'flex', | |||
| flexDirection: 'column', | |||
| }} | |||
| elevation={5} | |||
| > | |||
| <Typography variant="h4" gutterBottom align="center"> | |||
| Modals Example | |||
| </Typography> | |||
| <Divider /> | |||
| <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button> | |||
| <Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button> | |||
| <Button | |||
| onClick={(e) => { | |||
| setPopoverOpen(true); | |||
| setAnchorEl(e.currentTarget); | |||
| }} | |||
| > | |||
| Open Popover | |||
| </Button> | |||
| <DialogComponent | |||
| title="Dialog Title" | |||
| content={<Typography>Dialog Content</Typography>} | |||
| open={dialogOpen} | |||
| onClose={() => setDialogOpen(false)} | |||
| maxWidth="md" | |||
| fullWidth | |||
| responsive | |||
| /> | |||
| <DrawerComponent | |||
| anchor="left" | |||
| content={<Typography sx={{ p: 2 }}>Drawer Content</Typography>} | |||
| open={drawerOpen} | |||
| toggleOpen={() => setDrawerOpen(!drawerOpen)} | |||
| /> | |||
| <PopoverComponent | |||
| anchorEl={anchorEl} | |||
| open={popoverOpen} | |||
| onClose={() => { | |||
| setPopoverOpen(false); | |||
| setAnchorEl(null); | |||
| }} | |||
| content={<Typography sx={{ p: 2 }}>Popover Content</Typography>} | |||
| /> | |||
| </Paper> | |||
| return (<></> | |||
| // <Paper | |||
| // sx={{ | |||
| // p: 2, | |||
| // display: 'flex', | |||
| // flexDirection: 'column', | |||
| // }} | |||
| // elevation={5} | |||
| // > | |||
| // <Typography variant="h4" gutterBottom align="center"> | |||
| // Modals Example | |||
| // </Typography> | |||
| // <Divider /> | |||
| // <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button> | |||
| // <Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button> | |||
| // <Button | |||
| // onClick={(e) => { | |||
| // setPopoverOpen(true); | |||
| // setAnchorEl(e.currentTarget); | |||
| // }} | |||
| // > | |||
| // Open Popover | |||
| // </Button> | |||
| // <DialogComponent | |||
| // title="Dialog Title" | |||
| // content={<Typography>Dialog Content</Typography>} | |||
| // open={dialogOpen} | |||
| // onClose={() => setDialogOpen(false)} | |||
| // maxWidth="md" | |||
| // fullWidth | |||
| // responsive | |||
| // /> | |||
| // <DrawerComponent | |||
| // anchor="left" | |||
| // content={<Typography sx={{ p: 2 }}>Drawer Content</Typography>} | |||
| // open={drawerOpen} | |||
| // toggleOpen={() => setDrawerOpen(!drawerOpen)} | |||
| // /> | |||
| // <PopoverComponent | |||
| // anchorEl={anchorEl} | |||
| // open={popoverOpen} | |||
| // onClose={() => { | |||
| // setPopoverOpen(false); | |||
| // setAnchorEl(null); | |||
| // }} | |||
| // content={<Typography sx={{ p: 2 }}>Popover Content</Typography>} | |||
| // /> | |||
| // </Paper> | |||
| ); | |||
| }; | |||
+ 151
- 151
src/components/MUI/NavbarComponent.js
Dosyayı Görüntüle
| @@ -1,160 +1,160 @@ | |||
| import React, { useState, useMemo, useContext } from 'react'; | |||
| import React, { useState, useMemo, useContext } from "react"; | |||
| import { | |||
| AppBar, | |||
| Badge, | |||
| Box, | |||
| IconButton, | |||
| Toolbar, | |||
| Typography, | |||
| List, | |||
| ListItem, | |||
| ListItemButton, | |||
| ListItemIcon, | |||
| ListItemText, | |||
| useMediaQuery, | |||
| } from '@mui/material'; | |||
| import { useTheme } from '@mui/system'; | |||
| import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'; | |||
| import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket'; | |||
| import Brightness4Icon from '@mui/icons-material/Brightness4'; | |||
| import Brightness7Icon from '@mui/icons-material/Brightness7'; | |||
| import MenuList from './MenuListComponent'; | |||
| import Drawer from './DrawerComponent'; | |||
| import { ColorModeContext } from '../../context/ColorModeContext'; | |||
| AppBar, | |||
| Badge, | |||
| Box, | |||
| IconButton, | |||
| Toolbar, | |||
| Typography, | |||
| List, | |||
| ListItem, | |||
| ListItemButton, | |||
| ListItemIcon, | |||
| ListItemText, | |||
| useMediaQuery, | |||
| } from "@mui/material"; | |||
| import { useTheme } from "@mui/system"; | |||
| import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined"; | |||
| import ShoppingBasketIcon from "@mui/icons-material/ShoppingBasket"; | |||
| import Brightness4Icon from "@mui/icons-material/Brightness4"; | |||
| import Brightness7Icon from "@mui/icons-material/Brightness7"; | |||
| import MenuList from "./MenuListComponent"; | |||
| import Drawer from "./DrawerComponent"; | |||
| import { ColorModeContext } from "../../context/ColorModeContext"; | |||
| const NavbarComponent = () => { | |||
| const [openDrawer, setOpenDrawer] = useState(false); | |||
| const theme = useTheme(); | |||
| const matches = useMediaQuery(theme.breakpoints.down('sm')); | |||
| const toggleColorMode = useContext(ColorModeContext); | |||
| const [openDrawer, setOpenDrawer] = useState(false); | |||
| const theme = useTheme(); | |||
| const matches = useMediaQuery(theme.breakpoints.down("sm")); | |||
| const toggleColorMode = useContext(ColorModeContext); | |||
| const handleToggleDrawer = () => { | |||
| setOpenDrawer(!openDrawer); | |||
| }; | |||
| const handleToggleDrawer = () => { | |||
| setOpenDrawer(!openDrawer); | |||
| }; | |||
| const drawerContent = useMemo( | |||
| () => ( | |||
| <List> | |||
| <ListItemButton divider onClick={handleToggleDrawer}> | |||
| <ListItemIcon> | |||
| <ListItemText>Link 1</ListItemText> | |||
| </ListItemIcon> | |||
| </ListItemButton> | |||
| <ListItem divider onClick={handleToggleDrawer}> | |||
| <ListItemIcon> | |||
| <ListItemText>Link 2</ListItemText> | |||
| </ListItemIcon> | |||
| </ListItem> | |||
| <ListItem divider onClick={handleToggleDrawer}> | |||
| <ListItemText>Link 3</ListItemText> | |||
| </ListItem> | |||
| <ListItem divider> | |||
| <IconButton onClick={toggleColorMode}> | |||
| <ListItemText>Toggle {theme.palette.mode} mode</ListItemText> | |||
| {theme.palette.mode === 'dark' ? ( | |||
| <Brightness7Icon /> | |||
| ) : ( | |||
| <Brightness4Icon /> | |||
| )} | |||
| </IconButton> | |||
| </ListItem> | |||
| </List> | |||
| ), | |||
| [handleToggleDrawer] | |||
| ); | |||
| const drawerContent = useMemo( | |||
| () => ( | |||
| <List> | |||
| <ListItemButton divider onClick={handleToggleDrawer}> | |||
| <ListItemIcon> | |||
| <ListItemText>Link 1</ListItemText> | |||
| </ListItemIcon> | |||
| </ListItemButton> | |||
| <ListItem divider onClick={handleToggleDrawer}> | |||
| <ListItemIcon> | |||
| <ListItemText>Link 2</ListItemText> | |||
| </ListItemIcon> | |||
| </ListItem> | |||
| <ListItem divider onClick={handleToggleDrawer}> | |||
| <ListItemText>Link 3</ListItemText> | |||
| </ListItem> | |||
| <ListItem divider> | |||
| <IconButton onClick={toggleColorMode}> | |||
| <ListItemText>Toggle {theme.palette.mode} mode</ListItemText> | |||
| {theme.palette.mode === "dark" ? ( | |||
| <Brightness7Icon /> | |||
| ) : ( | |||
| <Brightness4Icon /> | |||
| )} | |||
| </IconButton> | |||
| </ListItem> | |||
| </List> | |||
| ), | |||
| [handleToggleDrawer] | |||
| ); | |||
| return ( | |||
| <AppBar | |||
| elevation={2} | |||
| sx={{ backgroundColor: 'background.default', position: 'relative' }} | |||
| > | |||
| <Toolbar> | |||
| <Box | |||
| component="div" | |||
| sx={{ | |||
| display: 'flex', | |||
| justifyContent: 'space-between', | |||
| alignItems: 'center', | |||
| width: '100%', | |||
| }} | |||
| > | |||
| {matches ? ( | |||
| <Drawer | |||
| open={openDrawer} | |||
| toggleOpen={handleToggleDrawer} | |||
| content={drawerContent} | |||
| /> | |||
| ) : ( | |||
| <Box sx={{ display: 'flex' }}> | |||
| <Typography | |||
| variant="h6" | |||
| sx={{ | |||
| marginRight: 3, | |||
| cursor: 'pointer', | |||
| color: 'text.primary', | |||
| }} | |||
| > | |||
| Link 1 | |||
| </Typography> | |||
| <Typography | |||
| variant="body1" | |||
| sx={{ | |||
| marginRight: 3, | |||
| cursor: 'pointer', | |||
| color: 'text.primary', | |||
| }} | |||
| > | |||
| Link 2 | |||
| </Typography> | |||
| <Typography | |||
| variant="subtitle1" | |||
| sx={{ | |||
| marginRight: 3, | |||
| cursor: 'pointer', | |||
| color: 'text.primary', | |||
| }} | |||
| > | |||
| Link 3 | |||
| </Typography> | |||
| </Box> | |||
| )} | |||
| <Box> | |||
| <MenuList /> | |||
| </Box> | |||
| <Box | |||
| sx={{ | |||
| display: 'flex', | |||
| justifyContent: 'center', | |||
| alignItems: 'center', | |||
| }} | |||
| > | |||
| {matches ? ( | |||
| <Box> | |||
| <IconButton onClick={handleToggleDrawer}> | |||
| <MenuOutlinedIcon /> | |||
| </IconButton> | |||
| </Box> | |||
| ) : ( | |||
| <Box> | |||
| <IconButton> | |||
| <Badge badgeContent={3} color="primary"> | |||
| <ShoppingBasketIcon color="action" /> | |||
| </Badge> | |||
| </IconButton> | |||
| <IconButton sx={{ ml: 1 }} onClick={toggleColorMode}> | |||
| {theme.palette.mode === 'dark' ? ( | |||
| <Brightness7Icon /> | |||
| ) : ( | |||
| <Brightness4Icon /> | |||
| )} | |||
| </IconButton> | |||
| </Box> | |||
| )} | |||
| </Box> | |||
| </Box> | |||
| </Toolbar> | |||
| </AppBar> | |||
| ); | |||
| return ( | |||
| <AppBar | |||
| elevation={2} | |||
| sx={{ backgroundColor: "background.default", position: "relative" }} | |||
| > | |||
| <Toolbar> | |||
| <Box | |||
| component="div" | |||
| sx={{ | |||
| display: "flex", | |||
| justifyContent: "space-between", | |||
| alignItems: "center", | |||
| width: "100%", | |||
| }} | |||
| > | |||
| {matches ? ( | |||
| <Drawer | |||
| open={openDrawer} | |||
| toggleOpen={handleToggleDrawer} | |||
| content={drawerContent} | |||
| /> | |||
| ) : ( | |||
| <Box sx={{ display: "flex" }}> | |||
| <Typography | |||
| variant="h6" | |||
| sx={{ | |||
| marginRight: 3, | |||
| cursor: "pointer", | |||
| color: "text.primary", | |||
| }} | |||
| > | |||
| Link 1 | |||
| </Typography> | |||
| <Typography | |||
| variant="body1" | |||
| sx={{ | |||
| marginRight: 3, | |||
| cursor: "pointer", | |||
| color: "text.primary", | |||
| }} | |||
| > | |||
| Link 2 | |||
| </Typography> | |||
| <Typography | |||
| variant="subtitle1" | |||
| sx={{ | |||
| marginRight: 3, | |||
| cursor: "pointer", | |||
| color: "text.primary", | |||
| }} | |||
| > | |||
| Link 3 | |||
| </Typography> | |||
| </Box> | |||
| )} | |||
| <Box> | |||
| <MenuList /> | |||
| </Box> | |||
| <Box | |||
| sx={{ | |||
| display: "flex", | |||
| justifyContent: "center", | |||
| alignItems: "center", | |||
| }} | |||
| > | |||
| {matches ? ( | |||
| <Box> | |||
| <IconButton onClick={handleToggleDrawer}> | |||
| <MenuOutlinedIcon /> | |||
| </IconButton> | |||
| </Box> | |||
| ) : ( | |||
| <Box> | |||
| <IconButton> | |||
| <Badge badgeContent={3} color="primary"> | |||
| <ShoppingBasketIcon color="action" /> | |||
| </Badge> | |||
| </IconButton> | |||
| <IconButton sx={{ ml: 1 }} onClick={toggleColorMode}> | |||
| {theme.palette.mode === "dark" ? ( | |||
| <Brightness7Icon /> | |||
| ) : ( | |||
| <Brightness4Icon /> | |||
| )} | |||
| </IconButton> | |||
| </Box> | |||
| )} | |||
| </Box> | |||
| </Box> | |||
| </Toolbar> | |||
| </AppBar> | |||
| ); | |||
| }; | |||
| export default NavbarComponent; | |||
+ 0
- 35
src/components/MUI/PopoverComponent.js
Dosyayı Görüntüle
| @@ -1,35 +0,0 @@ | |||
| import React from 'react'; | |||
| import PropTypes from 'prop-types'; | |||
| import { Box, Popover } from '@mui/material'; | |||
| const PopoverComponent = ({ open, anchorEl, onClose, content }) => { | |||
| const handleClose = () => { | |||
| onClose(); | |||
| }; | |||
| return ( | |||
| <Box component="div"> | |||
| <Popover | |||
| sx={{ p: 5 }} | |||
| open={open} | |||
| anchorEl={anchorEl} | |||
| onClose={handleClose} | |||
| anchorOrigin={{ | |||
| vertical: 'bottom', | |||
| horizontal: 'left', | |||
| }} | |||
| > | |||
| {content} | |||
| </Popover> | |||
| </Box> | |||
| ); | |||
| }; | |||
| PopoverComponent.propTypes = { | |||
| anchorEl: PropTypes.object, | |||
| open: PropTypes.bool.isRequired, | |||
| onClose: PropTypes.func.isRequired, | |||
| content: PropTypes.any, | |||
| }; | |||
| export default PopoverComponent; | |||
+ 60
- 0
src/components/Popovers/HeaderPopover/HeaderPopover.js
Dosyayı Görüntüle
| @@ -0,0 +1,60 @@ | |||
| import React from "react"; | |||
| import PropTypes from "prop-types"; | |||
| import { | |||
| EyeIcon, | |||
| HeaderPopoverContainer, | |||
| PopoverButton, | |||
| PopoverList, | |||
| PopoverListItem, | |||
| PopoverListItemAvatar, | |||
| PopoverListItemAvatarContainer, | |||
| PopoverListItemProfileAvatar, | |||
| PopoverListItemTextContainer, | |||
| PopoverTitle, | |||
| } from "./HeaderPopover.styled"; | |||
| import selectedTheme from "../../../themes"; | |||
| const HeaderPopover = (props) => { | |||
| return ( | |||
| <HeaderPopoverContainer> | |||
| <PopoverTitle p={2}>{props.title}</PopoverTitle> | |||
| <PopoverList> | |||
| {props.items.map((item, index) => ( | |||
| <PopoverListItem key={index}> | |||
| <PopoverListItemAvatarContainer> | |||
| {props.isProfile ? ( | |||
| <PopoverListItemProfileAvatar alt={item.alt} src={item.src} /> | |||
| ) : ( | |||
| <PopoverListItemAvatar alt={item.alt} src={item.src} /> | |||
| )} | |||
| </PopoverListItemAvatarContainer> | |||
| <PopoverListItemTextContainer | |||
| primary={item.title} | |||
| secondary={item.text} | |||
| > | |||
| </PopoverListItemTextContainer> | |||
| </PopoverListItem> | |||
| ))} | |||
| </PopoverList> | |||
| <PopoverButton | |||
| sx={{ | |||
| mr: 2, | |||
| mb: 2, | |||
| }} | |||
| variant="text" | |||
| endIcon={<EyeIcon color={selectedTheme.iconYellowColor} />} | |||
| > | |||
| {props.buttonText} | |||
| </PopoverButton> | |||
| </HeaderPopoverContainer> | |||
| ); | |||
| }; | |||
| HeaderPopover.propTypes = { | |||
| title: PropTypes.string, | |||
| items: PropTypes.array, | |||
| buttonText: PropTypes.string, | |||
| isProfile: PropTypes.bool, | |||
| }; | |||
| export default HeaderPopover; | |||
+ 56
- 0
src/components/Popovers/HeaderPopover/HeaderPopover.styled.js
Dosyayı Görüntüle
| @@ -0,0 +1,56 @@ | |||
| import { Avatar, Box, Button, List, ListItem, ListItemAvatar, ListItemText, Typography } from "@mui/material"; | |||
| import styled from "styled-components"; | |||
| import selectedTheme from "../../../themes"; | |||
| import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg"; | |||
| import { ProfileAvatar } from "../MyProfile/MyProfile.styled"; | |||
| export const HeaderPopoverContainer = styled(Box)` | |||
| ` | |||
| export const PopoverTitle = styled(Typography)` | |||
| background-color: ${selectedTheme.primaryPurple}; | |||
| color: white; | |||
| width: 100%; | |||
| min-width: 270px; | |||
| font-family: "Open Sans"; | |||
| ` | |||
| export const PopoverList = styled(List)` | |||
| width: 100%; | |||
| max-width: 360px; | |||
| background-color: "white"; | |||
| ` | |||
| export const PopoverListItem = styled(ListItem)` | |||
| align-items: flex-start; | |||
| ` | |||
| export const PopoverListItemAvatar = styled(Avatar)` | |||
| position: relative; | |||
| top: 4px; | |||
| ` | |||
| export const PopoverListItemProfileAvatar = styled(ProfileAvatar)` | |||
| ` | |||
| export const PopoverListItemAvatarContainer = styled(ListItemAvatar)` | |||
| ` | |||
| export const PopoverButton = styled(Button)` | |||
| text-decoration: underline; | |||
| float: right; | |||
| color: ${selectedTheme.primaryPurple}; | |||
| font-weight: 500; | |||
| ` | |||
| export const PopoverListItemTextContainer = styled(ListItemText)` | |||
| & span { | |||
| font-weight: 700; | |||
| color: ${selectedTheme.primaryPurple}; | |||
| } | |||
| & p { | |||
| font-size: 0.81rem; | |||
| & svg { | |||
| position: relative; | |||
| top: 2px; | |||
| } | |||
| } | |||
| ` | |||
| export const EyeIcon = styled(Eye)` | |||
| & path { | |||
| stroke: ${selectedTheme.primaryYellow}; | |||
| } | |||
| ` | |||
+ 28
- 0
src/components/Popovers/MyMessages/MyMessages.js
Dosyayı Görüntüle
| @@ -0,0 +1,28 @@ | |||
| import React from "react"; | |||
| import { useTranslation } from "react-i18next"; | |||
| import HeaderPopover from "../HeaderPopover/HeaderPopover"; | |||
| const dummyData1 = [ | |||
| { | |||
| alt: "Remy Sharp", | |||
| src: "/static/images/avatar/1.jpg", | |||
| title: "Coca-Cola", | |||
| text: "Kompresor je stigao. Samo..." | |||
| }, | |||
| { | |||
| alt: "Travis Howard", | |||
| src: "/static/images/avatar/2.jpg", | |||
| title: "Voda Vrnjci", | |||
| text: "Poslao sam vodu. Ukupno i..." | |||
| } | |||
| ] | |||
| export const MyMessages = () => { | |||
| const {t} = useTranslation(); | |||
| return ( | |||
| <HeaderPopover | |||
| title={t("header.myMessages")} | |||
| items={dummyData1} | |||
| buttonText={t("header.checkEverything")} /> | |||
| ); | |||
| }; | |||
+ 18
- 0
src/components/Popovers/MyMessages/MyMessages.styled.js
Dosyayı Görüntüle
| @@ -0,0 +1,18 @@ | |||
| import { TextField } from "@mui/material"; | |||
| import styled from "styled-components"; | |||
| export const SearchInput = styled(TextField)` | |||
| margin-left: 3.8rem; | |||
| background-color: #F4F4F4; | |||
| width: 45%; | |||
| max-width: 100%; | |||
| @media (max-width: 1100px) { | |||
| width: 36%; | |||
| } | |||
| @media (max-width: 900px) { | |||
| width: 54%; | |||
| } | |||
| @media (max-width: 600px) { | |||
| width: 36%; | |||
| } | |||
| ` | |||
+ 29
- 0
src/components/Popovers/MyPosts/MyPosts.js
Dosyayı Görüntüle
| @@ -0,0 +1,29 @@ | |||
| import React from "react"; | |||
| import { PostsImgSuit } from "./MyPosts.styled"; | |||
| const dummyData2 = [ | |||
| { | |||
| alt: "Remy Sharp", | |||
| src: "/static/images/avatar/1.jpg", | |||
| title: "Gitara", | |||
| text: (<React.Fragment><PostsImgSuit/> Player.rs</React.Fragment>) | |||
| }, | |||
| { | |||
| alt: "Remy Sharp", | |||
| src: "/static/images/avatar/1.jpg", | |||
| title: "Gitara", | |||
| text: (<React.Fragment><PostsImgSuit/> Player.rs</React.Fragment>) | |||
| } | |||
| ] | |||
| import HeaderPopover from "../HeaderPopover/HeaderPopover"; | |||
| import { useTranslation } from "react-i18next"; | |||
| export const MyPosts = () => { | |||
| const {t} = useTranslation(); | |||
| return ( | |||
| <HeaderPopover | |||
| title={t("header.myOffers")} | |||
| items={dummyData2} | |||
| buttonText={t("header.checkEverything")}/> | |||
| ); | |||
| }; | |||
+ 29
- 0
src/components/Popovers/MyPosts/MyPosts.styled.js
Dosyayı Görüntüle
| @@ -0,0 +1,29 @@ | |||
| import { TextField, Avatar } from "@mui/material"; | |||
| import Suit from '@mui/icons-material/WorkOutline'; | |||
| import styled from "styled-components"; | |||
| export const PostsImgSuit = styled(Suit)` | |||
| width: 1rem; | |||
| height: 1rem; | |||
| margin-right: .36rem; | |||
| ` | |||
| export const PostsAvatar = styled(Avatar)` | |||
| border-radius: 4px; | |||
| ` | |||
| export const SearchInput = styled(TextField)` | |||
| margin-left: 3.8rem; | |||
| background-color: #F4F4F4; | |||
| width: 45%; | |||
| max-width: 100%; | |||
| @media (max-width: 1100px) { | |||
| width: 36%; | |||
| } | |||
| @media (max-width: 900px) { | |||
| width: 54%; | |||
| } | |||
| @media (max-width: 600px) { | |||
| width: 36%; | |||
| } | |||
| ` | |||
+ 25
- 0
src/components/Popovers/MyProfile/MyProfile.js
Dosyayı Görüntüle
| @@ -0,0 +1,25 @@ | |||
| import React from "react"; | |||
| import { ProfileImgPIB } from "./MyProfile.styled"; | |||
| import HeaderPopover from "../HeaderPopover/HeaderPopover"; | |||
| import { useTranslation } from "react-i18next"; | |||
| const dummyData3 = [ | |||
| { | |||
| alt: "Profile", | |||
| src: "/static/images/avatar/2.jpg", | |||
| title: "Player.rs", | |||
| text: <React.Fragment><ProfileImgPIB/> PIB - 1234567890 </React.Fragment> | |||
| }, | |||
| ]; | |||
| export const MyProfile = () => { | |||
| const {t} = useTranslation(); | |||
| return ( | |||
| <HeaderPopover | |||
| title={t("header.myProfile")} | |||
| items={dummyData3} | |||
| buttonText={t("header.checkProfile")} | |||
| isProfile | |||
| /> | |||
| ); | |||
| }; | |||
+ 31
- 0
src/components/Popovers/MyProfile/MyProfile.styled.js
Dosyayı Görüntüle
| @@ -0,0 +1,31 @@ | |||
| import { TextField, Avatar } from "@mui/material"; | |||
| import styled from "styled-components"; | |||
| import PIB from '@mui/icons-material/AdminPanelSettingsOutlined'; | |||
| export const ProfileImgPIB = styled(PIB)` | |||
| width: 1rem; | |||
| height: 1rem; | |||
| margin-right: .36rem; | |||
| ` | |||
| export const ProfileAvatar = styled(Avatar)` | |||
| width: 63px; | |||
| height: 63px; | |||
| margin-right: 1rem; | |||
| ` | |||
| export const SearchInput = styled(TextField)` | |||
| margin-left: 3.8rem; | |||
| background-color: #F4F4F4; | |||
| width: 45%; | |||
| max-width: 100%; | |||
| @media (max-width: 1100px) { | |||
| width: 36%; | |||
| } | |||
| @media (max-width: 900px) { | |||
| width: 54%; | |||
| } | |||
| @media (max-width: 600px) { | |||
| width: 36%; | |||
| } | |||
| ` | |||
+ 32
- 0
src/components/Popovers/PopoverComponent.js
Dosyayı Görüntüle
| @@ -0,0 +1,32 @@ | |||
| import React from "react"; | |||
| import PropTypes from "prop-types"; | |||
| import { Popover } from "@mui/material"; | |||
| const PopoverComponent = ({ open, anchorEl, onClose, content }) => { | |||
| const handleClose = () => { | |||
| onClose(); | |||
| }; | |||
| return ( | |||
| <Popover | |||
| open={open} | |||
| anchorEl={anchorEl} | |||
| onClose={handleClose} | |||
| anchorOrigin={{ | |||
| vertical: "bottom", | |||
| horizontal: "left", | |||
| }} | |||
| > | |||
| {content} | |||
| </Popover> | |||
| ); | |||
| }; | |||
| PopoverComponent.propTypes = { | |||
| anchorEl: PropTypes.object, | |||
| open: PropTypes.bool.isRequired, | |||
| onClose: PropTypes.func.isRequired, | |||
| content: PropTypes.any, | |||
| }; | |||
| export default PopoverComponent; | |||
+ 54
- 44
src/components/Scroller/HorizontalScroller.styled.js
Dosyayı Görüntüle
| @@ -1,39 +1,45 @@ | |||
| import { Box } from "@mui/material"; | |||
| import styled from "styled-components"; | |||
| import {ReactComponent as DownArrow} from "../../assets/images/svg/arrow-down.svg" | |||
| import { ReactComponent as DownArrow } from "../../assets/images/svg/arrow-down.svg"; | |||
| import selectedTheme from "../../themes"; | |||
| import ScrollContainer from 'react-indiana-drag-scroll' | |||
| import ScrollContainer from "react-indiana-drag-scroll"; | |||
| import { IconButton } from "../Buttons/IconButton/IconButton"; | |||
| export const HorizontalScrollerContainer = styled(Box)` | |||
| display: flex; | |||
| flex: 1; | |||
| flex-direction: row; | |||
| flex-wrap: nowrap; | |||
| overflow: hidden; | |||
| ` | |||
| display: flex; | |||
| flex: 1; | |||
| flex-direction: row; | |||
| flex-wrap: nowrap; | |||
| overflow: hidden; | |||
| @media screen and (max-width: 600px) { | |||
| width: 350px; | |||
| } | |||
| `; | |||
| export const Arrow = styled(IconButton)` | |||
| border: 1px solid ${selectedTheme.primaryPurple}; | |||
| border-radius: 100%; | |||
| min-width: 40px; | |||
| width: 40px; | |||
| height: 40px; | |||
| display: block; | |||
| box-sizing: border-box; | |||
| cursor: pointer; | |||
| padding-left: 8px; | |||
| padding-top: 10px; | |||
| margin-top: auto; | |||
| margin-bottom: auto; | |||
| transition: 0.2s all ease; | |||
| &:hover { | |||
| background-color: ${selectedTheme.primaryPurple}; | |||
| & svg path { | |||
| stroke: white; | |||
| } | |||
| border: 1px solid ${selectedTheme.primaryPurple}; | |||
| border-radius: 100%; | |||
| min-width: 40px; | |||
| width: 40px; | |||
| height: 40px; | |||
| display: block; | |||
| box-sizing: border-box; | |||
| cursor: pointer; | |||
| padding-left: 8px; | |||
| padding-top: 10px; | |||
| margin-top: auto; | |||
| margin-bottom: auto; | |||
| transition: 0.2s all ease; | |||
| &:hover { | |||
| background-color: ${selectedTheme.primaryPurple}; | |||
| & svg path { | |||
| stroke: white; | |||
| } | |||
| ${props => props.disabled && ` | |||
| } | |||
| ${(props) => | |||
| props.disabled && | |||
| ` | |||
| border 1px solid ${selectedTheme.iconStrokeDisabledColor}; | |||
| & svg path { | |||
| stroke: ${selectedTheme.iconStrokeDisabledColor}; | |||
| @@ -41,25 +47,29 @@ export const Arrow = styled(IconButton)` | |||
| } | |||
| `} | |||
| ` | |||
| `; | |||
| export const ListContainer = styled(ScrollContainer)` | |||
| display: flex; | |||
| flex: 1; | |||
| flex-direction: row; | |||
| flex-wrap: nowrap; | |||
| scroll-behavior: smooth; | |||
| margin: 0 18px; | |||
| user-select: none; | |||
| ` | |||
| display: flex; | |||
| flex: 1; | |||
| flex-direction: row; | |||
| flex-wrap: nowrap; | |||
| scroll-behavior: smooth; | |||
| margin: 0 18px; | |||
| user-select: none; | |||
| `; | |||
| export const ArrowIcon = styled(DownArrow)` | |||
| ${props => props.side === 'left' && ` | |||
| ${(props) => | |||
| props.side === "left" && | |||
| ` | |||
| transform: rotate(180deg); | |||
| `} | |||
| width: 18px; | |||
| height: 18px; | |||
| & path { | |||
| ${props => props.disabled && ` | |||
| width: 18px; | |||
| height: 18px; | |||
| & path { | |||
| ${(props) => | |||
| props.disabled && | |||
| ` | |||
| stroke: ${selectedTheme.iconStrokeDisabledColor} | |||
| `} | |||
| } | |||
| ` | |||
| } | |||
| `; | |||
+ 10
- 3
src/components/StepProgress/StepProgress.styled.js
Dosyayı Görüntüle
| @@ -9,6 +9,10 @@ export const StepProgressContainer = styled(Box)` | |||
| position: relative; | |||
| left: 2px; | |||
| width: 100%; | |||
| @media screen and (min-width: 468px) and (max-width: 600px) { | |||
| width: 80%; | |||
| } | |||
| `; | |||
| export const StepLine = styled(Box)` | |||
| @@ -22,12 +26,15 @@ export const StepLine = styled(Box)` | |||
| export const StepBar = styled(Box)` | |||
| flex: 0 0 35px; | |||
| background-color: ${(props) => | |||
| props.done ? selectedTheme.primaryPurple : selectedTheme.primaryDarkGrayText}; | |||
| props.done | |||
| ? selectedTheme.primaryPurple | |||
| : selectedTheme.primaryDarkGrayText}; | |||
| border-radius: 100%; | |||
| font-family: "Open Sans"; | |||
| text-align: center; | |||
| border: 5px solid | |||
| ${(props) => (props.current || props.done ? selectedTheme.primaryPurple : "white")}; | |||
| ${(props) => | |||
| props.current || props.done ? selectedTheme.primaryPurple : "white"}; | |||
| padding-top: 2px; | |||
| line-height: 19px; | |||
| margin-left: -2px; | |||
| @@ -35,7 +42,7 @@ export const StepBar = styled(Box)` | |||
| color: #1d1d1d; | |||
| z-index: 1; | |||
| transition: background-color 1s ease; | |||
| ${props => props.done && `cursor: pointer;`} | |||
| ${(props) => props.done && `cursor: pointer;`} | |||
| `; | |||
| export const Progress = styled(Box)` | |||
| height: 9px; | |||
+ 1
- 1
src/components/TextFields/TextField/TextField.js
Dosyayı Görüntüle
| @@ -7,7 +7,7 @@ export const TextField = (props) => { | |||
| // for italicPlaceholder | |||
| useEffect(() => { | |||
| if (props.value.length === 0) { | |||
| if (props?.value?.length === 0) { | |||
| setIsFieldEmpty(true); | |||
| } else { | |||
| setIsFieldEmpty(false); | |||
+ 3
- 0
src/constants/stylesConstants.js
Dosyayı Görüntüle
| @@ -0,0 +1,3 @@ | |||
| export const PRIMARY_PURPLE_COLOR = `rgb(90, 57, 131)`; | |||
| export const PRIMARY_YELLOW_COLOR = `rgb(247, 178, 38)`; | |||
| export const PRIMARY_PURPLE_DISABLED = `rgb(75, 92, 100)`; | |||
+ 14
- 1
src/i18n/resources/rs.js
Dosyayı Görüntüle
| @@ -153,6 +153,19 @@ export default { | |||
| condition: "STANJE", | |||
| choseCondition: "Izaberi Stanje", | |||
| supportedImagesFormats: | |||
| "Podržani formati fotografija: <strong>.JPG</strong> | <strong>.PNG</strong>", | |||
| "Podržani formati fotografija: <strong>.JPG</strong> | <strong>.JPEG</strong> | <strong>.PNG</strong>", | |||
| continue: "NASTAVI", | |||
| }, | |||
| apiErrors: { | |||
| somethingWentWrong: "Greska sa serverom!", | |||
| }, | |||
| header: { | |||
| addOffer: "Dodaj proizvod", | |||
| searchOffers: "Pretražite proizvode...", | |||
| myProfile: "Moj profil", | |||
| checkProfile: "POGLEDAJ PROFIL", | |||
| myOffers: "Moje objave", | |||
| checkEverything: "POGLEDAJ SVE", | |||
| myMessages: "Moje poruke", | |||
| }, | |||
| }; | |||
+ 7
- 8
src/pages/RegisterPages/Register/Register.js
Dosyayı Görüntüle
| @@ -46,7 +46,7 @@ const Register = () => { | |||
| console.log(error); | |||
| const { mail, password, PIB, image } = informations; | |||
| if (error.type === "mail") { | |||
| setInformations({image}); | |||
| setInformations({ image }); | |||
| setCurrentStep(1); | |||
| setMailError(mail); | |||
| if ( | |||
| @@ -86,20 +86,19 @@ const Register = () => { | |||
| const setImage = (image) => { | |||
| setImageError(false); | |||
| setInformations(prevInfo => ({ | |||
| setInformations((prevInfo) => ({ | |||
| ...prevInfo, | |||
| image | |||
| })) | |||
| } | |||
| image, | |||
| })); | |||
| }; | |||
| const goStepBack = (stepNumber) => { | |||
| setCurrentStep(stepNumber); | |||
| const { mail, password, image } = informations; | |||
| if (stepNumber === 1) { | |||
| setInformations({image}); | |||
| setInformations({ image }); | |||
| } | |||
| if (stepNumber === 2) { | |||
| setInformations({ mail, password, image }); | |||
| } | |||
| }; | |||
| @@ -125,7 +124,7 @@ const Register = () => { | |||
| /> | |||
| </ProgressContainer> | |||
| <ProfileImagePicker setImage={setImage} > | |||
| <ProfileImagePicker setImage={setImage}> | |||
| <ProfilePicture /> | |||
| </ProfileImagePicker> | |||
Loading…