- 
+
+
@@ -86,8 +111,9 @@ export function ImageCropper({
{imageSrc && (
-
+
Cancel
-
diff --git a/apps/business/src/components/PortfolioCard.module.css b/apps/business/src/components/PortfolioCard.module.css
index 5d2fda5..9a44ea6 100644
--- a/apps/business/src/components/PortfolioCard.module.css
+++ b/apps/business/src/components/PortfolioCard.module.css
@@ -34,14 +34,17 @@
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
- background: rgba(148, 163, 184, 0.08);
+ background: transparent;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.image {
+ position: relative;
+ z-index: 1;
width: 100%;
height: 100%;
- object-fit: cover;
+ object-fit: contain;
+ display: block;
}
.imagePlaceholder {
diff --git a/apps/business/src/context/TenantBrandingContext.tsx b/apps/business/src/context/TenantBrandingContext.tsx
index 922b900..63e8d0e 100644
--- a/apps/business/src/context/TenantBrandingContext.tsx
+++ b/apps/business/src/context/TenantBrandingContext.tsx
@@ -16,6 +16,7 @@ import { resolveTenantByDomain } from '../services/tenantService'
interface TenantBrandingContextValue {
businessName: string
+ logoUrl: string | null
faviconUrl: string | null
refreshBranding: () => void
}
@@ -34,6 +35,7 @@ function pickBusinessName(
export function TenantBrandingProvider({ children }: { children: ReactNode }) {
const [businessName, setBusinessName] = useState('')
+ const [logoUrl, setLogoUrl] = useState(null)
const [faviconUrl, setFaviconUrl] = useState(null)
const [refreshToken, setRefreshToken] = useState(0)
@@ -51,6 +53,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
if (controller.signal.aborted) return
let name = pickBusinessName(tenant.name, tenant.nameFa, domain)
+ let nextLogo = tenant.logoUrl?.trim() || null
let nextFavicon =
tenant.faviconUrl?.trim() || tenant.logoUrl?.trim() || null
@@ -63,6 +66,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
name,
domain,
)
+ nextLogo = profile.profile.logoUrl?.trim() || nextLogo
nextFavicon =
profile.profile.faviconUrl?.trim() ||
profile.profile.logoUrl?.trim() ||
@@ -76,12 +80,14 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
if (!controller.signal.aborted) {
setBusinessName(name || domain)
+ setLogoUrl(nextLogo)
setFaviconUrl(nextFavicon)
applyDocumentFavicon(nextFavicon)
}
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
setBusinessName(domain)
+ setLogoUrl(null)
setFaviconUrl(null)
applyDocumentFavicon(null)
}
@@ -101,8 +107,8 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
}, [refreshToken, refreshBranding])
const value = useMemo(
- () => ({ businessName, faviconUrl, refreshBranding }),
- [businessName, faviconUrl, refreshBranding],
+ () => ({ businessName, logoUrl, faviconUrl, refreshBranding }),
+ [businessName, logoUrl, faviconUrl, refreshBranding],
)
return (
diff --git a/apps/business/src/pages/AddNewPortfolioPage.tsx b/apps/business/src/pages/AddNewPortfolioPage.tsx
index 2373a26..a598692 100644
--- a/apps/business/src/pages/AddNewPortfolioPage.tsx
+++ b/apps/business/src/pages/AddNewPortfolioPage.tsx
@@ -28,6 +28,19 @@ import { flattenCategories } from '../utils/categories'
import pageStyles from '../components/PageContent.module.css'
import styles from './AddNewProductPage.module.css'
+type TitleImageAspectId = 'square' | '3:2' | '16:9' | '9:16'
+
+const TITLE_IMAGE_ASPECTS: {
+ id: TitleImageAspectId
+ label: string
+ aspect: number
+}[] = [
+ { id: 'square', label: 'Square', aspect: 1 },
+ { id: '3:2', label: '3:2', aspect: 3 / 2 },
+ { id: '16:9', label: '16:9', aspect: 16 / 9 },
+ { id: '9:16', label: '9:16 (Reel)', aspect: 9 / 16 },
+]
+
export function AddNewPortfolioPage() {
const { id } = useParams()
const navigate = useNavigate()
@@ -40,6 +53,7 @@ export function AddNewPortfolioPage() {
const [abstract, setAbstract] = useState('')
const [mainTextHtml, setMainTextHtml] = useState('')
const [titleImage, setTitleImage] = useState(null)
+ const [titleImageAspect, setTitleImageAspect] = useState('3:2')
const [images, setImages] = useState([])
const [tags, setTags] = useState([])
const [featuredMediaId, setFeaturedMediaId] = useState(null)
@@ -49,6 +63,8 @@ export function AddNewPortfolioPage() {
const [error, setError] = useState('')
const categoryOptions = flattenCategories(categories)
+ const selectedAspect =
+ TITLE_IMAGE_ASPECTS.find((option) => option.id === titleImageAspect)?.aspect ?? 3 / 2
useEffect(() => {
const controller = new AbortController()
@@ -199,65 +215,96 @@ export function AddNewPortfolioPage() {