From cf2bcf7e640bb8ff6c580bdfa5e5c29b730cc8cd Mon Sep 17 00:00:00 2001 From: Baciu Florin-George Date: Tue, 13 Sep 2022 13:39:29 +0300 Subject: [PATCH 1/7] topbar --- public/index.html | 1 + src/common/constants/constants.ts | 4 + .../top-bar/assets/favourites-icon.svg | 3 + src/features/top-bar/assets/user-icon.svg | 3 + .../components/top-bar/top-bar.module.scss | 54 +++++++++++++ .../top-bar/components/top-bar/top-bar.tsx | 78 +++++++++++++++++++ src/index.css | 8 +- src/pages/page-router.tsx | 2 + 8 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 src/features/top-bar/assets/favourites-icon.svg create mode 100644 src/features/top-bar/assets/user-icon.svg create mode 100644 src/features/top-bar/components/top-bar/top-bar.module.scss create mode 100644 src/features/top-bar/components/top-bar/top-bar.tsx diff --git a/public/index.html b/public/index.html index aa069f2..ab9a622 100644 --- a/public/index.html +++ b/public/index.html @@ -40,4 +40,5 @@ To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/src/common/constants/constants.ts b/src/common/constants/constants.ts index 13af4ec..5e9a062 100644 --- a/src/common/constants/constants.ts +++ b/src/common/constants/constants.ts @@ -3,6 +3,8 @@ export const PAGES_PATHS = { SIGN_UP: '/signup', HOME: '/', RESET_PASS: '/reset-password', + SEARCH: '/search', + FAVOURITES: '/favourites', } export const ButtonLables = { @@ -17,3 +19,5 @@ export const HttpMethods = { PUT: 'put', DELETE: 'delete', } + +export const AUTH_PAGES = [PAGES_PATHS.LOG_IN, PAGES_PATHS.SIGN_UP, PAGES_PATHS.RESET_PASS] diff --git a/src/features/top-bar/assets/favourites-icon.svg b/src/features/top-bar/assets/favourites-icon.svg new file mode 100644 index 0000000..1b3b5bb --- /dev/null +++ b/src/features/top-bar/assets/favourites-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/features/top-bar/assets/user-icon.svg b/src/features/top-bar/assets/user-icon.svg new file mode 100644 index 0000000..749bcf5 --- /dev/null +++ b/src/features/top-bar/assets/user-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/features/top-bar/components/top-bar/top-bar.module.scss b/src/features/top-bar/components/top-bar/top-bar.module.scss new file mode 100644 index 0000000..99d02ea --- /dev/null +++ b/src/features/top-bar/components/top-bar/top-bar.module.scss @@ -0,0 +1,54 @@ +.topBar { + width: 100vw; + display: flex; + flex-direction: column; + + &Elements { + max-width: 1100px; + width: 100%; + margin: 22px auto; + display: flex; + } + + &Element { + margin: auto 15px; + font-weight: 600; + font-size: 14px; + color: var(--gray-500); + } + + &InputCategoryHolder { + background: transparent !important; + padding: 0 !important; + } + + &InputCategory { + border: 0 !important; + } + + &Search { + width: 688px; + } + + &Link { + display: flex; + text-decoration: none; + } + + &LinkIcon { + margin: auto 6px; + } + + &LinkText { + color: var(--gray-600); + font-size: 14px; + margin: auto; + } + + &Divider { + margin: 0; + width: 100%; + height: 1px; + border: 1px solid var(--gray-200); + } +} diff --git a/src/features/top-bar/components/top-bar/top-bar.tsx b/src/features/top-bar/components/top-bar/top-bar.tsx new file mode 100644 index 0000000..999226b --- /dev/null +++ b/src/features/top-bar/components/top-bar/top-bar.tsx @@ -0,0 +1,78 @@ +import { Dropdown } from 'primereact/dropdown' +import { Link, useNavigate } from 'react-router-dom' +import classNames from 'classnames' +import { useState } from 'react' + +import { AUTH_PAGES, PAGES_PATHS } from 'common/constants/constants' +import { InputText } from 'primereact/inputtext' +import { useStore } from 'store/store' + +import { ReactComponent as AssistLogo } from 'common/assets/logo-assist.svg' +import { ReactComponent as UserIcon } from './../../assets/user-icon.svg' +import { ReactComponent as FavIcon } from './../../assets/favourites-icon.svg' + +import style from './top-bar.module.scss' + +export const TopBar = () => { + const [selectCategory, setSelectedCategory] = useState(null) + + const { authStore } = useStore() + const { userName } = authStore + + const navigate = useNavigate() + + const categories = [{ name: 'Category 1' }, { name: 'Category 2' }, { name: 'Category 3' }] + + const onCityChange = (e: any) => { + setSelectedCategory(e.value) + } + + const handleKeyDown = (event: any) => { + if (event.key === 'Enter') { + navigate(`${PAGES_PATHS.SEARCH}/${event.target.value}`) + } + } + + if (AUTH_PAGES.includes(document.location.pathname)) return <> + + return ( +
+
+
+ + + +
+
+
+ + + + +
+
+
+ + + Favourites + +
+
+ {/**replace the link to PAGES_PATHS.settings when the PR will be merged */} + + + {userName || 'My account'} + +
+
+
+
+ ) +} diff --git a/src/index.css b/src/index.css index ec2585e..7323ae8 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,11 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } diff --git a/src/pages/page-router.tsx b/src/pages/page-router.tsx index 4a4706e..45c3688 100644 --- a/src/pages/page-router.tsx +++ b/src/pages/page-router.tsx @@ -3,10 +3,12 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom' import { AuthPage } from './page-auth/page-auth' import { PAGES_PATHS } from '../common/constants/constants' import { PageAllComponents } from './page-all-components' +import { TopBar } from 'features/top-bar/components/top-bar/top-bar' export const PageRouter = () => { return ( + }> } /> From 78726aa830cb05f1240e5734fc529ba07f4144c9 Mon Sep 17 00:00:00 2001 From: Baciu Florin-George Date: Tue, 13 Sep 2022 13:55:48 +0300 Subject: [PATCH 2/7] + --- .../top-bar/components/top-bar/top-bar.module.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/features/top-bar/components/top-bar/top-bar.module.scss b/src/features/top-bar/components/top-bar/top-bar.module.scss index 99d02ea..7b1f6ce 100644 --- a/src/features/top-bar/components/top-bar/top-bar.module.scss +++ b/src/features/top-bar/components/top-bar/top-bar.module.scss @@ -35,6 +35,15 @@ text-decoration: none; } + &Link:hover { + span { + color: var(--primary-300) !important; + } + svg path { + fill: var(--primary-300) !important; + } + } + &LinkIcon { margin: auto 6px; } From 162553e8464995d685a437b5f4548f5f609117ff Mon Sep 17 00:00:00 2001 From: Baciu Florin-George Date: Fri, 16 Sep 2022 16:33:48 +0300 Subject: [PATCH 3/7] solved the issues --- .../top-bar/components/top-bar/top-bar.tsx | 15 +++++++++------ .../top-bar/constants/top-bar-constants.tsx | 1 + 2 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 src/features/top-bar/constants/top-bar-constants.tsx diff --git a/src/features/top-bar/components/top-bar/top-bar.tsx b/src/features/top-bar/components/top-bar/top-bar.tsx index 999226b..5c9d7dc 100644 --- a/src/features/top-bar/components/top-bar/top-bar.tsx +++ b/src/features/top-bar/components/top-bar/top-bar.tsx @@ -1,4 +1,4 @@ -import { Dropdown } from 'primereact/dropdown' +import { Dropdown, DropdownChangeParams } from 'primereact/dropdown' import { Link, useNavigate } from 'react-router-dom' import classNames from 'classnames' import { useState } from 'react' @@ -7,11 +7,12 @@ import { AUTH_PAGES, PAGES_PATHS } from 'common/constants/constants' import { InputText } from 'primereact/inputtext' import { useStore } from 'store/store' +import { ReactComponent as FavIcon } from './../../assets/favourites-icon.svg' import { ReactComponent as AssistLogo } from 'common/assets/logo-assist.svg' import { ReactComponent as UserIcon } from './../../assets/user-icon.svg' -import { ReactComponent as FavIcon } from './../../assets/favourites-icon.svg' import style from './top-bar.module.scss' +import { DROPDOWN_PLACEHOLDER } from 'features/top-bar/constants/top-bar-constants' export const TopBar = () => { const [selectCategory, setSelectedCategory] = useState(null) @@ -23,13 +24,15 @@ export const TopBar = () => { const categories = [{ name: 'Category 1' }, { name: 'Category 2' }, { name: 'Category 3' }] - const onCityChange = (e: any) => { + const onCityChange = (e: DropdownChangeParams) => { setSelectedCategory(e.value) } - const handleKeyDown = (event: any) => { + const handleKeyDown = (event: React.KeyboardEvent) => { + const textBox = event.target as HTMLInputElement + if (event.key === 'Enter') { - navigate(`${PAGES_PATHS.SEARCH}/${event.target.value}`) + navigate(`${PAGES_PATHS.SEARCH}/${textBox.value}`) } } @@ -52,7 +55,7 @@ export const TopBar = () => { options={categories} onChange={onCityChange} optionLabel='name' - placeholder='Category' + placeholder={DROPDOWN_PLACEHOLDER} /> diff --git a/src/features/top-bar/constants/top-bar-constants.tsx b/src/features/top-bar/constants/top-bar-constants.tsx new file mode 100644 index 0000000..b51ed21 --- /dev/null +++ b/src/features/top-bar/constants/top-bar-constants.tsx @@ -0,0 +1 @@ +export const DROPDOWN_PLACEHOLDER = 'Category' From 0714385d78dea3849e564d6116b8b1f761105af9 Mon Sep 17 00:00:00 2001 From: Baciu Florin-George Date: Mon, 19 Sep 2022 10:41:15 +0300 Subject: [PATCH 4/7] regrouping imports --- src/features/top-bar/components/top-bar/top-bar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/features/top-bar/components/top-bar/top-bar.tsx b/src/features/top-bar/components/top-bar/top-bar.tsx index 5c9d7dc..c213aee 100644 --- a/src/features/top-bar/components/top-bar/top-bar.tsx +++ b/src/features/top-bar/components/top-bar/top-bar.tsx @@ -1,18 +1,18 @@ import { Dropdown, DropdownChangeParams } from 'primereact/dropdown' import { Link, useNavigate } from 'react-router-dom' +import { InputText } from 'primereact/inputtext' import classNames from 'classnames' import { useState } from 'react' import { AUTH_PAGES, PAGES_PATHS } from 'common/constants/constants' -import { InputText } from 'primereact/inputtext' import { useStore } from 'store/store' -import { ReactComponent as FavIcon } from './../../assets/favourites-icon.svg' +import { DROPDOWN_PLACEHOLDER } from 'features/top-bar/constants/top-bar-constants' +import { ReactComponent as FavIcon } from '../../assets/favourites-icon.svg' import { ReactComponent as AssistLogo } from 'common/assets/logo-assist.svg' -import { ReactComponent as UserIcon } from './../../assets/user-icon.svg' +import { ReactComponent as UserIcon } from '../../assets/user-icon.svg' import style from './top-bar.module.scss' -import { DROPDOWN_PLACEHOLDER } from 'features/top-bar/constants/top-bar-constants' export const TopBar = () => { const [selectCategory, setSelectedCategory] = useState(null) From a91eca16a0fcea9b7a2f8dacf3c245240201797c Mon Sep 17 00:00:00 2001 From: Baciu Florin-George Date: Mon, 19 Sep 2022 16:57:07 +0300 Subject: [PATCH 5/7] fix spelling --- src/common/constants/constants.ts | 4 ++-- .../showroom-property-thumbnail.tsx | 10 +++++----- src/features/top-bar/components/top-bar/top-bar.tsx | 2 +- src/pages/page-router.tsx | 3 +-- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/common/constants/constants.ts b/src/common/constants/constants.ts index 5e9a062..4074999 100644 --- a/src/common/constants/constants.ts +++ b/src/common/constants/constants.ts @@ -4,10 +4,10 @@ export const PAGES_PATHS = { HOME: '/', RESET_PASS: '/reset-password', SEARCH: '/search', - FAVOURITES: '/favourites', + FAVORITES: '/favorites', } -export const ButtonLables = { +export const ButtonLabels = { approve: 'Approve', delete: 'Delete', edit: 'Edit', diff --git a/src/features/showroom/components/showroom-property-thumbnail/showroom-property-thumbnail.tsx b/src/features/showroom/components/showroom-property-thumbnail/showroom-property-thumbnail.tsx index b135047..9a76746 100644 --- a/src/features/showroom/components/showroom-property-thumbnail/showroom-property-thumbnail.tsx +++ b/src/features/showroom/components/showroom-property-thumbnail/showroom-property-thumbnail.tsx @@ -2,7 +2,7 @@ import { FC } from 'react' import classnames from 'classnames/bind' import { Button } from 'primereact/button' -import { ButtonLables } from 'common/constants/constants' +import { ButtonLabels } from 'common/constants/constants' import { UtilService } from 'common/services/util-service' import { ShowroomUtilService } from 'features/showroom/services/showroom-util-service' @@ -50,21 +50,21 @@ export const ShowroomPropertyThumbnail: FC = ({ thumbnail, type, role })
{thumbnail.status === 'pending' && role !== 'client' && (