Skip to content

improvement: landing, sidebar, globals, buttons#3590

Merged
emir-karabeg merged 6 commits intostagingfrom
improvement/ui
Mar 15, 2026
Merged

improvement: landing, sidebar, globals, buttons#3590
emir-karabeg merged 6 commits intostagingfrom
improvement/ui

Conversation

@emir-karabeg
Copy link
Collaborator

Summary

UI improvement

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation
  • Other: ___________

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@cursor
Copy link

cursor bot commented Mar 14, 2026

PR Summary

Medium Risk
Broad UI refactor touching shared Button variants, many call sites, and theme tokens; risk is mainly visual regressions or inconsistent styling across pages rather than functional changes.

Overview
Updates landing and marketing CTAs to a new neutral/white button style, including changing the hero secondary CTA to Get a demo linking to /enterprise.

Reworks the hero “workspace preview” into a two-view experience: a new LandingPreviewHome initial view with a minimal chat input, plus a refreshed preview sidebar with Home navigation and expanded static workspace sections; prompt submission is centralized via new useLandingSubmit (stores the prompt then redirects to /signup).

Standardizes UI theming by updating the brand tertiary green to #33C482 across CSS tokens, emails, and DB defaults; revises global sidebar collapse behavior to temporarily disable pointer events during the collapse animation; and switches many in-app actions from Button tertiary to primary with updated Button/ButtonGroup styling.

Written by Cursor Bugbot for commit dc98812. Configure here.

@vercel
Copy link

vercel bot commented Mar 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Mar 15, 2026 11:55am

Request Review

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: Hero CTA links to non-existent /enterprise route
    • Reverted the hero CTA href from /enterprise to /login, restoring the working route that existed before the breaking change.

Create PR

Or push these changes by commenting:

@cursor push 9f56602c98
Preview (9f56602c98)
diff --git a/apps/sim/app/(home)/components/hero/hero.tsx b/apps/sim/app/(home)/components/hero/hero.tsx
--- a/apps/sim/app/(home)/components/hero/hero.tsx
+++ b/apps/sim/app/(home)/components/hero/hero.tsx
@@ -71,11 +71,11 @@
 
         <div className='mt-[12px] flex items-center gap-[8px]'>
           <Link
-            href='/enterprise'
+            href='/login'
             className={`${CTA_BASE} border-[#3d3d3d] text-[#ECECEC] transition-colors hover:bg-[#2A2A2A]`}
-            aria-label='Get a demo'
+            aria-label='Log in'
           >
-            Get a demo
+            Log in
           </Link>
           <Link
             href='/signup'

This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.

aria-label='Get a demo'
>
Log in
Get a demo
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hero CTA links to non-existent /enterprise route

High Severity

The hero "Get a demo" button's href was changed from /login (a valid route) to /enterprise, which does not appear to have a corresponding page route. The Enterprise component in enterprise.tsx returns null (it's a stub), there is no enterprise/page.tsx in any route group, and no middleware or next.config rewrite handles this path. This prominent landing-page CTA will likely navigate users to a 404 page.

Fix in Cursor Fix in Web

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Mar 14, 2026

Greptile Summary

This PR is a broad UI improvement pass touching 82 files across the landing page, workspace sidebar, modal components, button/button-group design tokens, and the database schema. The primary goals are: refreshing the landing page hero/CTA styling (white buttons replacing the green brand color on the public site), standardising primary and tertiary button variants to a dark/light contrast pair, tightening modal spacing, fixing sidebar dropdown overflow, and updating the --brand-tertiary-2 token (+ matching DB default + email color) to #33C482.

Key observations:

  • The workspace.color schema default change now has a corresponding migration (0176_clear_luckman.sql), which resolves a previously noted drift concern.
  • The primary and tertiary button CVA variants (and button-group active variant) continue to use hardcoded hex values (#1D1D1D, #2A2A2A, #E0E0E0, #2DAC72) instead of CSS custom properties, bypassing the theme token system.
  • A tracking-[0.02em] wrapper <div> was added in workspace/layout.tsx to apply letter-spacing globally. Because letter-spacing is an inherited CSS property, this silently propagates to every descendant including code editors, inputs, and monospace elements that do not explicitly override it; a CSS-level declaration would be more appropriate.
  • The sidebar collapse pointer-events guard (@keyframes sidebar-collapse-guard) and the .sidebar-container[data-collapsed] rule were added to globals.css instead of being scoped to the sidebar component.
  • useLandingSubmit is exported from the component file landing-preview-panel.tsx and useAnimatedPlaceholder is imported from the workspace feature's private hook directory — both of which were flagged in a previous review cycle and remain unresolved.

Confidence Score: 3/5

  • Mostly safe to merge — no functional regressions detected, but several style/architecture concerns are unresolved from a prior review cycle and a new global-typography side-effect was introduced.
  • The DB migration is now correctly included. All changes are UI-only (spacing, colours, tracking) so runtime breakage is unlikely. However, the tracking-[0.02em] wrapper div introduces an unscoped global side-effect on inherited letter-spacing; the hardcoded hex colours in button variants remain unaddressed from the previous review; and the sidebar CSS additions to globals.css instead of a component file remain. These lower confidence from a clean pass.
  • apps/sim/app/workspace/layout.tsx (global tracking side-effect), apps/sim/components/emcn/components/button/button.tsx and button-group/button-group.tsx (hardcoded hex colour tokens), apps/sim/app/_styles/globals.css (sidebar animation rules).

Important Files Changed

Filename Overview
apps/sim/app/workspace/layout.tsx Adds a tracking-[0.02em] wrapper div around all workspace children; letter-spacing is inherited so this silently applies to every descendant including code editors and inputs.
apps/sim/components/emcn/components/button/button.tsx Rewrites primary and tertiary CVA variants using hardcoded hex values (#1D1D1D, #2A2A2A, #E0E0E0, #2DAC72) instead of CSS design tokens, bypassing the theme system.
apps/sim/components/emcn/components/button-group/button-group.tsx Updates the active variant to use hardcoded hex colors rather than CSS variables, consistent pattern with button.tsx but still bypasses the token system.
apps/sim/app/_styles/globals.css Adds @keyframes sidebar-collapse-guard animation and .sidebar-container[data-collapsed] rule, which should be scoped to the sidebar component file; also updates --brand-tertiary-2 token in both light and dark mode.
packages/db/migrations/0176_clear_luckman.sql New migration correctly alters workspace.color default from #32bd7e to #33C482 to match the updated schema default.
packages/db/schema.ts Updates workspace.color default value to #33C482; migration file 0176 is included, schema drift concern is addressed.
apps/sim/components/emcn/components/modal/modal.tsx Minor spacing adjustments to ModalHeader (py-4 → pt-4 pb-2), ModalTabsList (pt-3 → pt-1), and ModalBody (adds pt-3); no logic changes.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx Restructures DropdownMenuContent to use flex layout with max-h-none overflow-hidden; moves "Create new workspace" button out of DropdownMenuGroup into a plain <div>, losing the role="group" accessibility semantic.
apps/sim/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx Exports useLandingSubmit hook from a component file rather than a dedicated hook file; this hook is then imported by landing-preview-home.tsx, creating a confusing dependency direction.
apps/sim/app/(home)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx Imports useAnimatedPlaceholder from the workspace feature's private hooks directory and useLandingSubmit from a sibling component file; both coupling issues were previously noted.
apps/sim/components/emails/_styles/base.ts Updates brandTertiary email color to #33C482 to stay in sync with the updated --brand-tertiary-2 design token.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[WorkspaceRootLayout\nworkspace/layout.tsx] -->|wraps all children with\ntracking-0.02em div| B[All Workspace Pages]

    C[Button CVA\nbutton.tsx] -->|primary variant\nbg-#1D1D1D / dark:bg-white| D[~60 modal & sidebar consumers\nvariants changed tertiary → primary]
    C -->|tertiary variant\nbg-brand-tertiary-2 / hover-#2DAC72| D

    E[ButtonGroup CVA\nbutton-group.tsx] -->|active variant\nbg-#1D1D1D / dark:bg-white| F[ButtonGroup consumers]

    G[globals.css] -->|--brand-tertiary-2: #33C482| H[Design Token Consumers]
    G -->|sidebar-collapse-guard keyframe| I[.sidebar-container data-collapsed]

    J[schema.ts\ncolor default #33C482] -->|matched by| K[Migration 0176\nALTER TABLE workspace\nSET DEFAULT #33C482]
    J -->|matched by| L[emails/base.ts\nbrandTertiary #33C482]
Loading

Last reviewed commit: 01c3745

@emir-karabeg
Copy link
Collaborator Author

@greptile

Comment on lines +21 to +23
return (
<SocketProvider user={user}>
<div className='tracking-[0.02em]'>{children}</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Global letter-spacing via wrapper div

letter-spacing is an inherited CSS property, so adding tracking-[0.02em] to this wrapper div propagates to every descendant in the workspace — including monospace code editors, password inputs, inline code snippets, and any other element that relies on the browser's default tracking. Elements that don't explicitly set their own tracking-* class will silently inherit this value.

A more targeted and conventional approach is to declare this on the <body> (or a relevant root container) in globals.css:

body {
  letter-spacing: 0.02em;
}

…or, if it should only apply to the workspace, use a dedicated CSS class scoped to the workspace root layout rather than a generic wrapper <div>.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Comment on lines 497 to 510
@@ -506,7 +509,7 @@ export function WorkspaceHeader({
<Plus className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
Create new workspace
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Create workspace" button moved outside DropdownMenuGroup

DropdownMenuGroup from Radix UI renders a role="group" element, which is important for keyboard navigation and screen-reader announcement inside the dropdown. Moving the "Create new workspace" button into a plain <div> removes that grouping semantic for the button.

Consider keeping the button inside its own DropdownMenuGroup (or at minimum a DropdownMenuItem-wrapped element) to maintain consistent keyboard navigation behaviour and accessibility parity with the rest of the dropdown items:

<DropdownMenuGroup className='flex flex-col gap-[2px]'>
  <button ...>Create new workspace</button>
</DropdownMenuGroup>

@emir-karabeg emir-karabeg merged commit 38c8922 into staging Mar 15, 2026
6 checks passed
@emir-karabeg emir-karabeg deleted the improvement/ui branch March 15, 2026 11:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant