Skip to content

improvement(ui): align all public pages with dark landing theme and improve whitelabeling #3604

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
waleedlatif1 merged 17 commits into from
Mar 16, 2026
Merged

improvement(ui): align all public pages with dark landing theme and improve whitelabeling #3604

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
71afa3a
fix(sidebar): show icon-sized skeletons in collapsed settings sidebar
waleedlatif1 Mar 15, 2026
af872df
fix(sidebar): hide expanded skeletons during pre-hydration in collaps…
waleedlatif1 Mar 15, 2026
a58de5a
fix(sidebar): align collapsed settings skeletons with actual icon pos…
waleedlatif1 Mar 15, 2026
03739d0
fix(sidebar): match collapsed skeleton section grouping with loaded l…
waleedlatif1 Mar 15, 2026
c191f15
fix(sidebar): hoist skeleton section counts to module constant
waleedlatif1 Mar 15, 2026
0725c98
improvement(ui): align all public pages with dark landing theme and i…
waleedlatif1 Mar 15, 2026
4ede522
fix(ui): address PR review comments - restore StatusPageLayout wrappe…
waleedlatif1 Mar 15, 2026
84b8604
fix(ui): add missing dark class to 404 page, add relative positioning…
waleedlatif1 Mar 15, 2026
a814db7
fix(ui): fallback to white button when whitelabeled without primary c…
waleedlatif1 Mar 15, 2026
7a6d689
improvement(seo): add x-default hreflang, speakable schema to landing…
waleedlatif1 Mar 15, 2026
fe92bf4
fix(ui): fix OTP/input light-mode styles and add missing header class…
waleedlatif1 Mar 15, 2026
b487eee
undo hardcoded ff config
waleedlatif1 Mar 15, 2026
8255763
update old components/ui usage to emcn
waleedlatif1 Mar 15, 2026
d904f81
fix(ui): add SupportFooter to InviteLayout, remove duplicates from un…
waleedlatif1 Mar 15, 2026
3cb33e5
fix(ui): fix invite layout flex centering, use BrandedButton on 404 page
waleedlatif1 Mar 16, 2026
f337b66
fix(ui): fix OTP group styling, props spread order in BrandedButton, …
waleedlatif1 Mar 16, 2026
88ac9d3
fix: enterprise hydration error
emir-karabeg Mar 16, 2026
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
Prev Previous commit
Next Next commit
fix(sidebar): align collapsed settings skeletons with actual icon pos… 
…itions
  • Loading branch information
@waleedlatif1
waleedlatif1 committed Mar 15, 2026
commit a58de5a24ba86f1b808297b5329c7b645cb874aa
169 changes: 87 additions & 82 deletions ...space/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,96 +205,101 @@ export function SettingsSidebar({
!isCollapsed && 'overflow-y-auto overflow-x-hidden'
)}
>
{sessionLoading || orgsLoading
? isCollapsed
? Array.from({ length: 7 }, (_, i) => (
{sessionLoading || orgsLoading ? (
isCollapsed ? (
<div className='flex flex-col gap-[2px] px-[8px]'>
{Array.from({ length: 7 }, (_, i) => (
<div key={i} className='mx-[2px] flex h-[30px] items-center px-[8px]'>
<Skeleton className='h-[16px] w-[16px] rounded-[4px]' />
</div>
))
: Array.from({ length: 3 }, (_, i) => (
<div key={i} className='sidebar-collapse-hide flex flex-shrink-0 flex-col'>
<div className='px-[16px] pb-[6px]'>
<Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
</div>
<div className='flex flex-col gap-[2px] px-[8px]'>
{Array.from({ length: i === 0 ? 3 : 2 }, (_, j) => (
<div key={j} className='mx-[2px] flex h-[30px] items-center px-[8px]'>
<Skeleton className='h-[24px] w-full rounded-[4px]' />
</div>
))}
</div>
))}
</div>
) : (
Array.from({ length: 3 }, (_, i) => (
<div key={i} className='sidebar-collapse-hide flex flex-shrink-0 flex-col'>
<div className='px-[16px] pb-[6px]'>
<Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
</div>
))
: sectionConfig.map(({ key, title }) => {
const sectionItems = navigationItems.filter((item) => item.section === key)
if (sectionItems.length === 0) return null

return (
<div key={key} className='flex flex-shrink-0 flex-col'>
{!isCollapsed && (
<div className='sidebar-collapse-remove px-[16px] pb-[6px]'>
<div className='font-base text-[var(--text-icon)] text-small'>{title}</div>
<div className='flex flex-col gap-[2px] px-[8px]'>
{Array.from({ length: i === 0 ? 3 : 2 }, (_, j) => (
<div key={j} className='mx-[2px] flex h-[30px] items-center px-[8px]'>
<Skeleton className='h-[24px] w-full rounded-[4px]' />
</div>
)}
<div className='flex flex-col gap-[2px] px-[8px]'>
{sectionItems.map((item) => {
const Icon = item.icon
const active = activeSection === item.id
const itemClassName = cn(
'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]',
active && 'bg-[var(--surface-active)]'
)
const content = (
<>
<Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
<span className='truncate font-base text-[var(--text-body)]'>
{item.label}
</span>
</>
)

const element = item.externalUrl ? (
<a
href={item.externalUrl}
target='_blank'
rel='noopener noreferrer'
className={itemClassName}
>
{content}
</a>
) : (
<button
type='button'
className={itemClassName}
onMouseEnter={() => handlePrefetch(item.id)}
onFocus={() => handlePrefetch(item.id)}
onClick={() =>
router.replace(
getSettingsHref({ section: item.id as SettingsSection }),
{ scroll: false }
)
}
>
{content}
</button>
)
))}
</div>
</div>
))
)
) : (
sectionConfig.map(({ key, title }) => {
const sectionItems = navigationItems.filter((item) => item.section === key)
if (sectionItems.length === 0) return null

return (
<Tooltip.Root key={`${item.id}-${isCollapsed}`}>
<Tooltip.Trigger asChild>{element}</Tooltip.Trigger>
{showCollapsedContent && (
<Tooltip.Content side='right'>
<p>{item.label}</p>
</Tooltip.Content>
)}
</Tooltip.Root>
)
})}
return (
<div key={key} className='flex flex-shrink-0 flex-col'>
{!isCollapsed && (
<div className='sidebar-collapse-remove px-[16px] pb-[6px]'>
<div className='font-base text-[var(--text-icon)] text-small'>{title}</div>
</div>
)}
<div className='flex flex-col gap-[2px] px-[8px]'>
{sectionItems.map((item) => {
const Icon = item.icon
const active = activeSection === item.id
const itemClassName = cn(
'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]',
active && 'bg-[var(--surface-active)]'
)
const content = (
<>
<Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
<span className='truncate font-base text-[var(--text-body)]'>
{item.label}
</span>
</>
)

const element = item.externalUrl ? (
<a
href={item.externalUrl}
target='_blank'
rel='noopener noreferrer'
className={itemClassName}
>
{content}
</a>
) : (
<button
type='button'
className={itemClassName}
onMouseEnter={() => handlePrefetch(item.id)}
onFocus={() => handlePrefetch(item.id)}
onClick={() =>
router.replace(getSettingsHref({ section: item.id as SettingsSection }), {
scroll: false,
})
}
>
{content}
</button>
)

return (
<Tooltip.Root key={`${item.id}-${isCollapsed}`}>
<Tooltip.Trigger asChild>{element}</Tooltip.Trigger>
{showCollapsedContent && (
<Tooltip.Content side='right'>
<p>{item.label}</p>
</Tooltip.Content>
)}
</Tooltip.Root>
)
})}
</div>
)
})}
</div>
)
})
)}
</div>
</>
)
Expand Down