Skip to content

fix(ui): update pro branding with diamond icon and palette colors #444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sajjadmrx merged 1 commit into from
Sep 5, 2026
Merged

fix(ui): update pro branding with diamond icon and palette colors #444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/ui/badge/vip-badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function VipBadge({
)}
{...props}
>
<Icon name="crown" size={iconSize} />
<Icon name="diamond" size={iconSize} />
{!iconOnly && <span>{text}</span>}
</span>
)
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/badge/vip-badge.variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ export const vipBadgeVariants = cva(
{
variants: {
variant: {
indigo: 'bg-indigo-500 text-white shadow-sm shadow-indigo-500/20',
indigo: 'bg-[#0327aa] text-[#ffffff] shadow-sm shadow-[#0327aa]/25',
'indigo-subtle':
'bg-indigo-500/15 text-indigo-500 border border-indigo-500/20',
'bg-[#0327aa]/15 text-[#0327aa] border border-[#0327aa]/20',
white: 'bg-white/20 text-white backdrop-blur-md border border-white/30 shadow-sm',
},
size: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/vip/components/vip-banner-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function VipBannerCard({
>
<div className="flex items-center min-w-0 gap-3">
<div className="flex items-center justify-center text-indigo-500 transition-transform duration-200 w-11 h-11 rounded-2xl shrink-0 group-hover:scale-105">
<Icon name="crown" size={22} />
<Icon name="diamond" size={22} />
</div>

<div className="flex flex-col min-w-0 text-right">
Expand Down
14 changes: 14 additions & 0 deletions src/icons/packs/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,19 @@ import { BsFilterLeft, BsGenderAmbiguous } from 'react-icons/bs'
import { IoPricetagOutline } from 'react-icons/io5'
import { VscColorMode, VscMegaphone, VscPlay, VscRecordKeys } from 'react-icons/vsc'

function ProDiamondIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em" {...props}>
<path d="M4.9 6.2C4.9 7.4 4.3 8.3 3.1 8.4C4.3 8.5 4.9 9.4 4.9 10.6C5.0 9.4 5.6 8.5 6.8 8.4C5.6 8.3 5.0 7.4 4.9 6.2Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.2 5.3C8.6 4.9 9.3 4.8 9.8 5.1L20.4 11.2C21.0 11.6 21.2 12.3 20.9 12.9L11.7 18.7C11.2 19.0 10.6 19.0 10.1 18.6L5.4 11.8C5.0 11.2 5.1 10.4 5.7 9.9L8.2 5.3ZM11.8 7.3L14.6 8.1C14.8 8.2 15.0 8.4 14.9 8.7L14.3 10.1C14.2 10.3 14.0 10.4 13.7 10.4L11.2 9.8C10.9 9.7 10.8 9.4 10.9 9.1L11.3 7.6C11.4 7.4 11.6 7.2 11.8 7.3ZM16.3 8.6L18.5 9.9C18.7 10.0 18.8 10.3 18.6 10.5L17.6 11.0C17.4 11.1 17.2 11.0 17.0 10.9L15.6 9.8C15.4 9.6 15.4 9.3 15.6 9.1L15.9 8.7C16.0 8.6 16.2 8.5 16.3 8.6ZM10.9 11.3C11.1 11.2 11.4 11.3 11.5 11.5L13.6 12.3C13.8 12.4 13.9 12.6 13.8 12.8L12.2 16.0C12.0 16.3 11.6 16.3 11.4 16.1L10.7 12.0C10.6 11.7 10.7 11.4 10.9 11.3ZM14.6 12.3C14.8 12.2 15.1 12.2 15.3 12.3L18.1 12.7C18.4 12.7 18.5 13.0 18.3 13.2L13.8 15.7C13.5 15.8 13.3 15.6 13.4 15.3L14.3 12.6C14.4 12.4 14.5 12.3 14.6 12.3Z"
/>
</svg>
)
}

export const defaultIcons = {
home: HiHome,
calendar: BiCalendar,
Expand Down Expand Up @@ -237,6 +250,7 @@ export const defaultIcons = {
outlineFilterList: MdOutlineFilterList,
crown: FaCrown,
outlineCrown: AiOutlineCrown,
diamond: ProDiamondIcon,
filterLeft: BsFilterLeft,
upDown: TbArrowsUpDown,
coffee: FiCoffee,
Expand Down
1 change: 1 addition & 0 deletions src/icons/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ export type IconName =
| 'outlineFilterListOff'
| 'crown'
| 'outlineCrown'
| 'diamond'
| 'filterLeft'
| 'upDown'
| 'coffee'
Expand Down
5 changes: 2 additions & 3 deletions src/layouts/setting/tabs/vip/vip-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
usePurchaseVipPlan,
} from '@/services/hooks/market/market-vip.hook'
import type { VipPlan } from '@/services/hooks/market/market-vip.interface'
import { formatVipExpiryDate, formatVipRemaining } from '@/common/utils/vip-expiry'
import { cn } from '@/common/utils/cn'
import vipPreviewImg from '@/assets/images/pro-preview.jpg'

Expand Down Expand Up @@ -163,7 +162,7 @@ export function VipTab() {
<div className="space-y-1">
<div className="flex items-center gap-2">
<div className="flex items-center justify-center w-8 h-8 rounded-xl bg-primary/10 text-primary">
<Icon name="crown" size={18} />
<Icon name="diamond" size={18} />
</div>
<h2 className="text-xl font-black tracking-tight sm:text-2xl text-content">
ویجتیفای{' '}
Expand Down Expand Up @@ -390,7 +389,7 @@ export function VipTab() {
onClick={handlePurchase}
className="font-bold text-white bg-indigo-500 transition-all flex items-center justify-center gap-1.5 px-6 h-10 shadow-xs cursor-pointer hover:bg-indigo-500/80!"
>
<Icon name="crown" size={14} />
<Icon name="diamond" size={14} />
<span>فعال‌سازی {VIP_LABEL}</span>
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/widgets-manager/add-widget-modal/actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ function ProUpgradeButton({ label }: { label: string }) {
<Button
type="button"
onClick={() => callEvent('openSettings', 'vip')}
className="flex items-center justify-center w-full gap-2 font-bold border bg-indigo-500/15 hover:bg-indigo-500/25 text-indigo-500 border-indigo-500/30"
className="flex items-center justify-center w-full gap-2 font-bold text-indigo-500 border bg-indigo-500/15 hover:bg-indigo-500/25 border-indigo-500/30"
rounded={'2xl'}
variant={'default'}
>
<Icon name="crown" size={14} />
<Icon name="diamond" size={14} />
<span>{label}</span>
</Button>
)
Expand Down
47 changes: 23 additions & 24 deletions src/layouts/widgets/canvas/canvas-widget-outer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { cn } from '@/common/utils/cn'
import { useAuth } from '@/context/auth.context'
import { Icon } from '@/src/icons'
import { ProBadge } from '@/components/ui/badge/vip-badge'
import { useWidgetVipResolver } from '@/services/hooks/widgets/widget-catalog.hook'
import { WidgetContextMenu } from './widget-context-menu'
import { BookmarkDeleteModal } from './bookmark-delete-modal'
Expand Down Expand Up @@ -376,36 +377,34 @@ function CanvasWidgetOuterImpl({
isWiggling && WIGGLE_CLASSES[wiggleVariant]
)}
>
<WidgetSlot
definition={definition}
instanceId={widget.instanceId}
size={widget.size}
meta={widget.meta}
/>
{(!isLocked || canvasMode === 'edit') && (
<WidgetSlot
definition={definition}
instanceId={widget.instanceId}
size={widget.size}
meta={widget.meta}
/>
)}
{isLocked && canvasMode === 'normal' && (
<div
className="absolute inset-0 z-25 rounded-widget bg-content bg-glass border border-indigo-500/25 flex flex-col items-center justify-center p-1.5 text-center select-none cursor-default overflow-hidden"
style={{
zIndex: 1000,
className="absolute inset-0 z-25 rounded-widget bg-content bg-glass border border-[#0327aa]/20 flex flex-col items-center justify-center p-2 text-center select-none cursor-pointer overflow-hidden group transition-all duration-200 hover:border-[#0327aa]/40"
onClick={(e) => {
e.stopPropagation()
callEvent('openSettings', 'vip')
}}
onClick={(e) => e.stopPropagation()}
>
<div
className={cn(
'rounded-full bg-indigo-500/15 text-indigo-500 flex items-center justify-center shadow-2xs',
isCompactSize ? 'w-6 h-6 mb-1' : 'w-8 h-8 mb-1.5'
<div className="flex flex-col items-center gap-1.5 transition-transform duration-200 group-hover:scale-105">
<ProBadge
size={isCompactSize ? 'xs' : 'sm'}
variant="indigo"
rounded="full"
/>
{!isCompactSize && (
<span className="text-[11px] font-medium text-muted transition-colors duration-200 group-hover:text-content">
ارتقا به اشتراک پرو
</span>
)}
>
<Icon name="crown" size={isCompactSize ? 12 : 15} />
</div>
<span
className={cn(
'font-bold text-content leading-tight',
isCompactSize ? 'text-[10px]' : 'text-xs'
)}
>
{isCompactSize ? 'مخصوص پرو' : 'مخصوص کاربران پرو'}
</span>
</div>
)}
{canvasMode === 'edit' && (
Expand Down
Loading