ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

[PULSE-59] Design consistency audit fixes #34

Merged
uz1mani merged 15 commits from staging into main 2026-02-21 23:09:41 +00:00
Conversation 1 Commits 15 Files Changed 35 +231 -263
uz1mani commented 2026-02-21 23:04:09 +00:00 (Migrated from github.com)
Copy Link

Work Item

PULSE-59

Summary

  • Fix 18 design inconsistencies across Pulse frontend to align with the Ciphera design system
  • Standardize typography, buttons, containers, colors, dark mode, padding, and spacing
  • Fix org slug domain and remove stale /tools reference

Changes

Typography:

  • Standardized heading sizes: text-4xl md:text-5xl for marketing H1s (integrations, changelog, features, welcome)
  • Features page H1: text-4xl md:text-6xl → text-4xl md:text-5xl; H2s → text-2xl font-bold

Buttons:

  • Replaced custom <button> with <Button> from @ciphera-net/ui in Site Settings (3), VerificationModal (3), Pricing Enterprise (1)

Containers:

  • Unified page container to max-w-6xl across org-settings, settings, site-settings, sites, sites/new, notifications
  • Removed inner max-w-4xl from OrganizationSettings and ProfileSettings (ciphera-ui)

Colors:

  • Replaced 30+ hardcoded hex values in Chart, WorldMap, Funnels, Uptime with CSS variables (var(--color-brand-orange), etc.)
  • Replaced VS Code hex backgrounds with bg-neutral-900/bg-neutral-800 in integrations + installation pages

Dark mode:

  • Added 28 dark: variants across OrganizationSettings, site settings, PricingSection, funnels page

Padding & spacing:

  • Standardized card padding to p-6 (~30 instances)
  • Integration sub-pages: pt-12 → pt-20 (4 static pages + IntegrationGuide.tsx)
  • Standardized gap values: gap-1.5 → gap-2, gap-2.5 → gap-3, gap-0.5 → gap-1 (19 instances)

Tailwind:

  • Replaced arbitrary values with standard scale: text-[10px]/text-[11px] → text-xs, gap-[2px] → gap-0.5, rounded-[2px] → rounded-sm, h-[320px] → h-80, min-w-[160px] → min-w-40, mt-[-10px] → -mt-2.5

Shadows:

  • Added transition-shadow duration-300 to 7 shadow elements across Chart, Funnels, Share, Uptime, OfflineBanner

Copy & cleanup:

  • Org slug prefix: drop.ciphera.net/ → pulse.ciphera.net/
  • Removed stale **Tools:** UtmBuilder from DESIGN_SYSTEM.md

ciphera-ui:

  • ProfileSettings: removed inner max-w-4xl wrapper for full-width layout
  • Bumped to 0.0.58

Test Plan

  • Verify marketing pages (integrations, changelog, features, welcome) have consistent H1/H2 sizing
  • Verify Site Settings and Org Settings "Save Changes" buttons match (both use standard Button)
  • Verify all settings pages (Settings, Org Settings, Site Settings) span full max-w-6xl width
  • Toggle dark mode on Org Settings, Site Settings, Pricing, Funnels — confirm text is readable
  • Verify chart colors (dashboard, funnels, uptime) render correctly in light/dark mode
  • Verify integration sub-pages have consistent top padding (pt-20)
  • Verify org slug shows pulse.ciphera.net/ in Org Settings → General
## Work Item PULSE-59 ## Summary - Fix 18 design inconsistencies across Pulse frontend to align with the Ciphera design system - Standardize typography, buttons, containers, colors, dark mode, padding, and spacing - Fix org slug domain and remove stale `/tools` reference ## Changes **Typography:** - Standardized heading sizes: `text-4xl md:text-5xl` for marketing H1s (integrations, changelog, features, welcome) - Features page H1: `text-4xl md:text-6xl` → `text-4xl md:text-5xl`; H2s → `text-2xl font-bold` **Buttons:** - Replaced custom `<button>` with `<Button>` from `@ciphera-net/ui` in Site Settings (3), VerificationModal (3), Pricing Enterprise (1) **Containers:** - Unified page container to `max-w-6xl` across org-settings, settings, site-settings, sites, sites/new, notifications - Removed inner `max-w-4xl` from OrganizationSettings and ProfileSettings (ciphera-ui) **Colors:** - Replaced 30+ hardcoded hex values in Chart, WorldMap, Funnels, Uptime with CSS variables (`var(--color-brand-orange)`, etc.) - Replaced VS Code hex backgrounds with `bg-neutral-900`/`bg-neutral-800` in integrations + installation pages **Dark mode:** - Added 28 `dark:` variants across OrganizationSettings, site settings, PricingSection, funnels page **Padding & spacing:** - Standardized card padding to `p-6` (~30 instances) - Integration sub-pages: `pt-12` → `pt-20` (4 static pages + IntegrationGuide.tsx) - Standardized gap values: `gap-1.5` → `gap-2`, `gap-2.5` → `gap-3`, `gap-0.5` → `gap-1` (19 instances) **Tailwind:** - Replaced arbitrary values with standard scale: `text-[10px]`/`text-[11px]` → `text-xs`, `gap-[2px]` → `gap-0.5`, `rounded-[2px]` → `rounded-sm`, `h-[320px]` → `h-80`, `min-w-[160px]` → `min-w-40`, `mt-[-10px]` → `-mt-2.5` **Shadows:** - Added `transition-shadow duration-300` to 7 shadow elements across Chart, Funnels, Share, Uptime, OfflineBanner **Copy & cleanup:** - Org slug prefix: `drop.ciphera.net/` → `pulse.ciphera.net/` - Removed stale `**Tools:** UtmBuilder` from DESIGN_SYSTEM.md **ciphera-ui:** - ProfileSettings: removed inner `max-w-4xl` wrapper for full-width layout - Bumped to 0.0.58 ## Test Plan - [x] Verify marketing pages (integrations, changelog, features, welcome) have consistent H1/H2 sizing - [x] Verify Site Settings and Org Settings "Save Changes" buttons match (both use standard Button) - [x] Verify all settings pages (Settings, Org Settings, Site Settings) span full `max-w-6xl` width - [x] Toggle dark mode on Org Settings, Site Settings, Pricing, Funnels — confirm text is readable - [x] Verify chart colors (dashboard, funnels, uptime) render correctly in light/dark mode - [x] Verify integration sub-pages have consistent top padding (`pt-20`) - [x] Verify org slug shows `pulse.ciphera.net/` in Org Settings → General
👍 1
greptile-apps[bot] commented 2026-02-21 23:09:06 +00:00 (Migrated from github.com)
Copy Link

Greptile Summary

This PR implements comprehensive design consistency improvements across the Pulse frontend, successfully aligning 35 files with the Ciphera design system. The changes are well-structured and focus on standardization without introducing breaking changes.

Key improvements:

  • Replaced 30+ hardcoded hex color values with CSS variables (var(--color-brand-orange), etc.) for better theming
  • Standardized typography across marketing pages (H1: text-4xl md:text-5xl, H2: text-2xl font-bold)
  • Replaced custom button implementations with the Button component from @ciphera-net/ui
  • Unified page containers to max-w-6xl across settings pages
  • Added 28 dark: variants for improved dark mode support
  • Standardized spacing values (card padding to p-6, gaps to standard Tailwind scale)
  • Updated domain references from drop.ciphera.net to pulse.ciphera.net
  • Added smooth shadow transitions with transition-shadow duration-300

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk
  • All changes are cosmetic design improvements focused on consistency and maintainability. No business logic modified, no new features added, no breaking changes introduced. The refactoring improves code quality by replacing hardcoded values with design tokens.
  • No files require special attention

Important Files Changed
Filename Overview
components/dashboard/Chart.tsx Replaced hardcoded hex colors with CSS variables, standardized gaps and spacing, added shadow transitions
components/settings/OrganizationSettings.tsx Updated domain to pulse.ciphera.net, added dark mode variants, standardized padding and gaps, removed max-w-4xl container
components/sites/VerificationModal.tsx Replaced custom buttons with Button component from @ciphera-net/ui
app/sites/[id]/settings/page.tsx Replaced custom buttons with Button component, updated container to max-w-6xl, standardized padding, added dark mode variants
app/features/page.tsx Standardized H1 to text-4xl md:text-5xl and H2s to text-2xl font-bold, updated card padding to p-6
components/dashboard/WorldMap.tsx Replaced hardcoded colors with CSS variables, standardized negative margin value
app/sites/[id]/funnels/[funnelId]/page.tsx Replaced hardcoded colors with CSS variables, added shadow transitions, added dark mode variants
package.json Bumped version to 0.10.0-alpha and updated @ciphera-net/ui to 0.0.58

Last reviewed commit: 1a97027

<h3>Greptile Summary</h3> This PR implements comprehensive design consistency improvements across the Pulse frontend, successfully aligning 35 files with the Ciphera design system. The changes are well-structured and focus on standardization without introducing breaking changes. **Key improvements:** - Replaced 30+ hardcoded hex color values with CSS variables (`var(--color-brand-orange)`, etc.) for better theming - Standardized typography across marketing pages (H1: `text-4xl md:text-5xl`, H2: `text-2xl font-bold`) - Replaced custom button implementations with the `Button` component from `@ciphera-net/ui` - Unified page containers to `max-w-6xl` across settings pages - Added 28 `dark:` variants for improved dark mode support - Standardized spacing values (card padding to `p-6`, gaps to standard Tailwind scale) - Updated domain references from `drop.ciphera.net` to `pulse.ciphera.net` - Added smooth shadow transitions with `transition-shadow duration-300` <h3>Confidence Score: 5/5</h3> - This PR is safe to merge with minimal risk - All changes are cosmetic design improvements focused on consistency and maintainability. No business logic modified, no new features added, no breaking changes introduced. The refactoring improves code quality by replacing hardcoded values with design tokens. - No files require special attention <details><summary><h3>Important Files Changed</h3></summary> | Filename | Overview | |----------|----------| | components/dashboard/Chart.tsx | Replaced hardcoded hex colors with CSS variables, standardized gaps and spacing, added shadow transitions | | components/settings/OrganizationSettings.tsx | Updated domain to pulse.ciphera.net, added dark mode variants, standardized padding and gaps, removed max-w-4xl container | | components/sites/VerificationModal.tsx | Replaced custom buttons with Button component from @ciphera-net/ui | | app/sites/[id]/settings/page.tsx | Replaced custom buttons with Button component, updated container to max-w-6xl, standardized padding, added dark mode variants | | app/features/page.tsx | Standardized H1 to text-4xl md:text-5xl and H2s to text-2xl font-bold, updated card padding to p-6 | | components/dashboard/WorldMap.tsx | Replaced hardcoded colors with CSS variables, standardized negative margin value | | app/sites/[id]/funnels/[funnelId]/page.tsx | Replaced hardcoded colors with CSS variables, added shadow transitions, added dark mode variants | | package.json | Bumped version to 0.10.0-alpha and updated @ciphera-net/ui to 0.0.58 | </details> </details> <sub>Last reviewed commit: 1a97027</sub>
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
bug
Something isn't working
documentation
Improvements or additions to documentation
duplicate
This issue or pull request already exists
enhancement
New feature or request
good first issue
Good for newcomers
help wanted
Extra attention is needed
invalid
This doesn't seem right
question
Further information is requested
wontfix
This will not be worked on
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
usman
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: ciphera-net/pulse#34
No description provided.
Delete Branch "staging"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?