github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-08 22:48:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: bg styling outside workspace (#2605)

Browse Source
This commit is contained in:
Emir Karabeg
2025-12-26 21:08:13 -08:00
committed by GitHub
parent 3d75445459
commit 3054d6c1ed
11 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/sim/app/(auth)/components/auth-background.tsx
View File

@@ -9,6 +9,7 @@ type AuthBackgroundProps = {
export default function AuthBackground({ className, children }: AuthBackgroundProps) {
return (
<div className={cn('relative min-h-screen w-full overflow-hidden', className)}>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<AuthBackgroundSVG />
<div className='relative z-20'>{children}</div>
</div>

46
apps/sim/app/(landing)/components/background/background-svg.tsx
View File

@@ -5,39 +5,39 @@ export default function BackgroundSVG() {
focusable='false'
className='-translate-x-1/2 pointer-events-none absolute top-0 left-1/2 z-10 hidden h-full min-h-full w-[1308px] sm:block'
width='1308'
height='4942'
viewBox='0 18 1308 4066'
height='4970'
viewBox='0 18 1308 4094'
fill='none'
xmlns='http://www.w3.org/2000/svg'
preserveAspectRatio='xMidYMin slice'
>
{/* Pricing section (original height ~380 units) */}
{/* Pricing section (extended by ~28 units) */}
<path d='M6.71704 1236.22H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='1236.48' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='1236.48' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 1245.42V1613.91' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 1245.96V1613.91' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 1245.42V1641.91' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 1245.96V1641.91' stroke='#E7E4EF' strokeWidth='2' />
{/* Integrations section (original height ~412 units) */}
<path d='M6.71704 1614.89H1291.05' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='1615.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='1615.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 1624.61V2026.93' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 1624.61V2026.93' stroke='#E7E4EF' strokeWidth='2' />
{/* Integrations section (shifted down by 28 units) */}
<path d='M6.71704 1642.89H1291.05' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='1643.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='1643.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 1652.61V2054.93' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 1652.61V2054.93' stroke='#E7E4EF' strokeWidth='2' />
{/* Testimonials section (original short height ~149 units) */}
<path d='M6.71704 2026.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='2026.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='2026.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 2036.43V2177.43' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 2036.43V2177.43' stroke='#E7E4EF' strokeWidth='2' />
{/* Testimonials section (shifted down by 28 units) */}
<path d='M6.71704 2054.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='2054.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='2054.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 2064.43V2205.43' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 2064.43V2205.43' stroke='#E7E4EF' strokeWidth='2' />
{/* Footer section line */}
<path d='M6.71704 2177.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='2177.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='2177.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 2187.43V4090.25' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 2187.43V4090.25' stroke='#E7E4EF' strokeWidth='2' />
{/* Footer section line (shifted down by 28 units) */}
<path d='M6.71704 2205.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='2205.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='2205.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 2215.43V4118.25' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 2215.43V4118.25' stroke='#E7E4EF' strokeWidth='2' />
<path
d='M959.828 116.604C1064.72 187.189 1162.61 277.541 1293.45 536.597'
stroke='#E7E4EF'

1
apps/sim/app/(landing)/components/background/background.tsx
View File

@@ -15,6 +15,7 @@ type BackgroundProps = {
export default function Background({ className, children }: BackgroundProps) {
return (
<div className={cn('relative min-h-screen w-full', className)}>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<BackgroundSVG />
<div className='relative z-0 mx-auto w-full max-w-[1308px]'>{children}</div>
</div>

12
apps/sim/app/_styles/globals.css
View File

@@ -538,25 +538,25 @@ input[type="search"]::-ms-clear {
}
.auth-button-gradient {
background: linear-gradient(to bottom, var(--brand-500), var(--brand-400)) !important;
background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
border-color: var(--brand-400) !important;
box-shadow: inset 0 2px 4px 0 var(--brand-400) !important;
}
.auth-button-gradient:hover {
background: linear-gradient(to bottom, var(--brand-500), var(--brand-400)) !important;
background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
opacity: 0.9;
}
.auth-button-custom {
background: var(--brand-500) !important;
border-color: var(--brand-500) !important;
background: var(--brand-primary-hex) !important;
border-color: var(--brand-primary-hex) !important;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
}
.auth-button-custom:hover {
background: var(--brand-500) !important;
border-color: var(--brand-500) !important;
background: var(--brand-primary-hover-hex) !important;
border-color: var(--brand-primary-hover-hex) !important;
opacity: 1;
}

3
apps/sim/app/changelog/layout.tsx
View File

@@ -2,7 +2,8 @@ import Nav from '@/app/(landing)/components/nav/nav'
export default function ChangelogLayout({ children }: { children: React.ReactNode }) {
return (
<div className='min-h-screen bg-background text-foreground'>
<div className='relative min-h-screen text-foreground'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav />
{children}
</div>

2
apps/sim/app/chat/[identifier]/chat.tsx
View File

@@ -553,7 +553,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
// Standard text-based chat interface
return (
<div className='fixed inset-0 z-[100] flex flex-col bg-background text-foreground'>
<div className='fixed inset-0 z-[100] flex flex-col bg-white text-foreground'>
{/* Header component */}
<ChatHeader chatConfig={chatConfig} starCount={starCount} />

3
apps/sim/app/invite/components/layout.tsx
View File

@@ -8,7 +8,8 @@ interface InviteLayoutProps {
export default function InviteLayout({ children }: InviteLayoutProps) {
return (
<div className='bg-white'>
<div className='relative min-h-screen'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav variant='auth' />
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
<div className='w-full max-w-[410px]'>{children}</div>

3
apps/sim/app/not-found.tsx
View File

@@ -49,7 +49,8 @@ export default function NotFound() {
}, [])
return (
<div className='min-h-screen bg-white'>
<div className='relative min-h-screen'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav variant='auth' />
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
<div className='w-full max-w-[410px]'>

6
apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
View File

@@ -996,7 +996,8 @@ export default function ResumeExecutionPage({
if (!executionDetail) {
return (
<div className='min-h-screen bg-white'>
<div className='relative min-h-screen'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav variant='auth' />
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
<div className='w-full max-w-[410px]'>
@@ -1042,7 +1043,8 @@ export default function ResumeExecutionPage({
}
return (
<div className='min-h-screen bg-gradient-to-b from-slate-50 to-white'>
<div className='relative min-h-screen bg-gradient-to-b from-slate-50 to-white'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav variant='auth' />
<div className='mx-auto min-h-[calc(100vh-120px)] max-w-7xl px-4 py-6 sm:py-8'>
{/* Header Section */}

5
apps/sim/app/templates/layout-client.tsx
View File

@@ -6,7 +6,10 @@ import { season } from '@/app/_styles/fonts/season/season'
export default function TemplatesLayoutClient({ children }: { children: React.ReactNode }) {
return (
<Tooltip.Provider delayDuration={600} skipDelayDuration={0}>
<div className={`${season.variable} flex min-h-screen flex-col font-season`}>{children}</div>
<div className={`${season.variable} relative flex min-h-screen flex-col font-season`}>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
{children}
</div>
</Tooltip.Provider>
)
}

12
apps/sim/app/unsubscribe/unsubscribe.tsx
View File

@@ -118,7 +118,7 @@ function UnsubscribeContent() {
if (loading) {
return (
<div className='flex min-h-screen items-center justify-center bg-background'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardContent className='flex items-center justify-center p-8'>
<Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
@@ -130,7 +130,7 @@ function UnsubscribeContent() {
if (error) {
return (
<div className='flex min-h-screen items-center justify-center bg-background p-4'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardHeader className='text-center'>
<XCircle className='mx-auto mb-2 h-12 w-12 text-red-500' />
@@ -191,7 +191,7 @@ function UnsubscribeContent() {
if (data?.isTransactional) {
return (
<div className='flex min-h-screen items-center justify-center bg-background p-4'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardHeader className='text-center'>
<Info className='mx-auto mb-2 h-12 w-12 text-blue-500' />
@@ -243,7 +243,7 @@ function UnsubscribeContent() {
if (unsubscribed) {
return (
<div className='flex min-h-screen items-center justify-center bg-background'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardHeader className='text-center'>
<CheckCircle className='mx-auto mb-2 h-12 w-12 text-green-500' />
@@ -271,7 +271,7 @@ function UnsubscribeContent() {
}
return (
<div className='flex min-h-screen items-center justify-center bg-background p-4'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardHeader className='text-center'>
<Heart className='mx-auto mb-2 h-12 w-12 text-red-500' />
@@ -391,7 +391,7 @@ export default function Unsubscribe() {
return (
<Suspense
fallback={
<div className='flex min-h-screen items-center justify-center bg-background'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardContent className='flex items-center justify-center p-8'>
<Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />