From b067758db5e5b01d4ebfb5b86f68d1c97b2912c2 Mon Sep 17 00:00:00 2001 From: Lavi2910 Date: Mon, 27 Apr 2026 18:32:30 +0300 Subject: [PATCH 1/5] discovery page --- .../src/components/layout/AppLayout/styles.ts | 1 + .../customer/DiscoveryPage/DiscoveryPage.tsx | 42 +++++++++++- .../components/BusinessCard/BusinessCard.tsx | 40 ++++++------ .../components/BusinessCard/styles.ts | 64 ++++++++++++++----- .../SectionHeader/SectionHeader.tsx | 28 ++++++++ .../components/SectionHeader/styles.ts | 18 ++++++ .../pages/customer/DiscoveryPage/styles.ts | 2 +- 7 files changed, 157 insertions(+), 38 deletions(-) create mode 100644 apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/SectionHeader.tsx create mode 100644 apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/styles.ts diff --git a/apps/web/src/components/layout/AppLayout/styles.ts b/apps/web/src/components/layout/AppLayout/styles.ts index ffa6553..c6fd65e 100644 --- a/apps/web/src/components/layout/AppLayout/styles.ts +++ b/apps/web/src/components/layout/AppLayout/styles.ts @@ -1,5 +1,6 @@ import { type CSSProperties } from 'react'; export const contentWrapper: CSSProperties = { + paddingTop: 'env(safe-area-inset-top, 0.75rem)', paddingBottom: '5rem', }; diff --git a/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx b/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx index fb2719c..826587a 100644 --- a/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx +++ b/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx @@ -3,6 +3,9 @@ import { DiscoveryHeader } from './components/DiscoveryHeader/DiscoveryHeader'; import * as styles from './styles'; import { SearchBar } from './components/SearchBar/SearchBar'; import { CategoryPills } from './components/CategoryPills/CategoryPills'; +import { SectionHeader } from './components/SectionHeader/SectionHeader'; +import { BusinessCard } from './components/BusinessCard/BusinessCard'; + export const DiscoveryPage = () => { const user = useAuthStore((state) => state.user); const token = useAuthStore((state) => state.token); @@ -14,8 +17,43 @@ export const DiscoveryPage = () => { - {/* PromoBanner — next */} - {/* SectionHeader + BusinessCards — next */} + {}} /> +
+ + + +
); }; diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/BusinessCard.tsx b/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/BusinessCard.tsx index fa1603c..ed79c2b 100644 --- a/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/BusinessCard.tsx +++ b/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/BusinessCard.tsx @@ -52,20 +52,29 @@ export const BusinessCard = ({
- -
- {name} {isOpen && ( - + {'פתוח עכשיו'} )}
+
+ + {`(${reviewCount})`} +
+
+ + {name} + +
- + {`${category} · ${location}`}
@@ -73,19 +82,14 @@ export const BusinessCard = ({ {distance}
-
-
- - - {`(${reviewCount})`} - -
- - - {'קבע תור'} - - -
+ + + {'קבע תור'} + +
); diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts b/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts index cd85b42..4674faf 100644 --- a/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts +++ b/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts @@ -5,13 +5,17 @@ export const getContainerStyle = (token: GlobalToken): CSSProperties => ({ borderRadius: '1rem', overflow: 'hidden', backgroundColor: token.colorBgContainer, - boxShadow: token.boxShadowTertiary, - width: '16rem', + boxShadow: token.boxShadowSecondary, + width: '13rem', + height: '14rem', + flexShrink: 0, + display: 'flex', + flexDirection: 'column', }); export const bannerSection: CSSProperties = { position: 'relative', - height: '6rem', + height: '5rem', }; export const bannerImage: CSSProperties = { @@ -30,15 +34,17 @@ export const getAvatarWrapper = (token: GlobalToken): CSSProperties => ({ export const infoArea: CSSProperties = { display: 'flex', - flexDirection: 'row', - padding: '1rem', - gap: '1rem', + flexDirection: 'column', + justifyContent: 'flex-end', + padding: '0 0.75rem 0.5rem', + gap: '0.25rem', + flex: 1, }; export const desc: CSSProperties = { display: 'flex', flexDirection: 'column', - gap: '0.2rem', + gap: '0.15rem', }; export const distanceDiv: CSSProperties = { @@ -46,7 +52,6 @@ export const distanceDiv: CSSProperties = { flexDirection: 'row', alignItems: 'center', gap: '0.25rem', - marginTop: '1rem', }; export const getLocationIconStyle = (token: GlobalToken): CSSProperties => ({ @@ -63,25 +68,50 @@ export const ratingDiv: CSSProperties = { gap: '0.5rem', }; -export const businessName: CSSProperties = { - margin: '1.5rem 1rem 0rem 1rem', +export const ratingRow: CSSProperties = { display: 'flex', flexDirection: 'row', - justifyContent: 'space-between', + alignItems: 'center', + justifyContent: 'flex-end', + gap: '0.25rem', + margin: '0 0.75rem 0 0.75rem', +}; + +export const businessName: CSSProperties = { + margin: '0.1rem 0.75rem 0 0.75rem', +}; + +export const openTagStyle: CSSProperties = { + position: 'absolute', + bottom: '0.4rem', + left: '0.5rem', +}; + +export const nameText: CSSProperties = { + overflow: 'hidden', + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + flex: 1, +}; + +export const categoryText: CSSProperties = { + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', }; export const getBookColor = (token: GlobalToken): CSSProperties => ({ color: token.colorBgContainer, }); -export const bookAndRevDiv: CSSProperties = { - display: 'flex', - flexDirection: 'column', - gap: '1rem', -}; - export const getBookStyle = (token: GlobalToken): CSSProperties => { return { boxShadow: token.boxShadowSecondary, }; }; + +export const statusTagStyle: CSSProperties = { + padding: '0 0.35rem', + lineHeight: 1, +}; diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/SectionHeader.tsx b/apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/SectionHeader.tsx new file mode 100644 index 0000000..eb13707 --- /dev/null +++ b/apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/SectionHeader.tsx @@ -0,0 +1,28 @@ +import { theme } from 'antd'; +import { SolyTypography } from '@soly/ui'; +import * as styles from './styles'; + +interface SectionHeaderProps { + title: string; + onSeeAll?: () => void; +} + +export const SectionHeader = ({ title, onSeeAll }: SectionHeaderProps) => { + const { token } = theme.useToken(); + return ( +
+ {title} + {onSeeAll && ( + + )} +
+ ); +}; diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/styles.ts b/apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/styles.ts new file mode 100644 index 0000000..be97ee4 --- /dev/null +++ b/apps/web/src/pages/customer/DiscoveryPage/components/SectionHeader/styles.ts @@ -0,0 +1,18 @@ +import type { CSSProperties } from 'react'; +import type { GlobalToken } from 'antd'; + +export const containerStyle: CSSProperties = { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: '0 0.75rem', +}; + +export const getSeeAllStyle = (token: GlobalToken): CSSProperties => ({ + background: 'none', + border: 'none', + padding: 0, + cursor: 'pointer', + color: token.colorPrimary, +}); diff --git a/apps/web/src/pages/customer/DiscoveryPage/styles.ts b/apps/web/src/pages/customer/DiscoveryPage/styles.ts index 4b68b93..3da35ad 100644 --- a/apps/web/src/pages/customer/DiscoveryPage/styles.ts +++ b/apps/web/src/pages/customer/DiscoveryPage/styles.ts @@ -3,5 +3,5 @@ import type { CSSProperties } from 'react'; export const pageContainer: CSSProperties = { display: 'flex', flexDirection: 'column', - gap: '1rem', + gap: '0.5rem', }; From ffcee6cc8f812fede9a6fa4d4f455bd1cfb1963c Mon Sep 17 00:00:00 2001 From: Almog Lavi Date: Mon, 18 May 2026 15:47:28 +0300 Subject: [PATCH 2/5] Update apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx b/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx index 826587a..2932b04 100644 --- a/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx +++ b/apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx @@ -17,7 +17,7 @@ export const DiscoveryPage = () => { - {}} /> +
Date: Mon, 18 May 2026 15:53:10 +0300 Subject: [PATCH 3/5] Update apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../customer/DiscoveryPage/components/BusinessCard/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts b/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts index 4674faf..d4e1ba0 100644 --- a/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts +++ b/apps/web/src/pages/customer/DiscoveryPage/components/BusinessCard/styles.ts @@ -74,7 +74,7 @@ export const ratingRow: CSSProperties = { alignItems: 'center', justifyContent: 'flex-end', gap: '0.25rem', - margin: '0 0.75rem 0 0.75rem', + margin: '1.75rem 0.75rem 0 0.75rem', }; export const businessName: CSSProperties = { From 39fec6d375f9b23f6043099a6a8c37d2ea14b17a Mon Sep 17 00:00:00 2001 From: Almog Lavi Date: Mon, 18 May 2026 15:54:08 +0300 Subject: [PATCH 4/5] Update apps/web/src/components/layout/AppLayout/styles.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- apps/web/src/components/layout/AppLayout/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/layout/AppLayout/styles.ts b/apps/web/src/components/layout/AppLayout/styles.ts index c6fd65e..30b95c1 100644 --- a/apps/web/src/components/layout/AppLayout/styles.ts +++ b/apps/web/src/components/layout/AppLayout/styles.ts @@ -1,6 +1,6 @@ import { type CSSProperties } from 'react'; export const contentWrapper: CSSProperties = { - paddingTop: 'env(safe-area-inset-top, 0.75rem)', + paddingTop: 'calc(0.75rem + env(safe-area-inset-top, 0px))', paddingBottom: '5rem', }; From d99f97501af87622a9161e5bec94e773cc403bae Mon Sep 17 00:00:00 2001 From: Lavi2910 Date: Mon, 18 May 2026 16:00:26 +0300 Subject: [PATCH 5/5] ci: trigger pipeline