[PULSE-56] Consolidate pulse-frontend with ciphera-ui (design system migration) #30

2026-02-17T20:03:56Z

uz1mani commented

2026-02-17 20:03:56 +00:00

(Migrated from github.com)

Work Item

PULSE-56

Summary

Migrated shared components and utilities from pulse-frontend to @ciphera-net/ui (v0.0.57).
Aligned form cards, brand colors, and selection styling with the design system.
Removed 6 duplicate or dead files (LoadingOverlay, SwissFlagIcon, CodeBlock, authErrors.ts, format.ts).

Changes

Components: Replaced local SwissFlagIcon, CodeBlock with imports from ciphera-ui. Replaced inline spinners in dashboard widgets (TopReferrers, Locations, TechSpecs, Campaigns, ContentStats), notifications page, and OrganizationSettings with Spinner from ciphera-ui.
Utilities: Migrated format utilities (formatNumber, formatDuration, formatDate, getDateRange, formatUpdatedAgo, formatRelativeTime) and auth error utilities (getAuthErrorMessage, authMessageFromStatus, authMessageFromErrorType) to imports from ciphera-ui.
Design system: Form card border radius set to rounded-2xl (login, signup, invite accept, verify, reset-password, forgot-password, organization create). Uptime chart uses var(--color-brand-orange) instead of hardcoded #FD5E0F. Removed redundant selection:bg-brand-orange/20 from page wrappers.
Removed: LoadingOverlay.tsx (unused; all usage already from ciphera-ui).
Version: Bumped to 0.7.0-alpha and ciphera-ui to ^0.0.57.

Test Plan

Home page, site dashboard, and share dashboard load correctly.
Integration guides (e.g. /integrations/nextjs) render code blocks.
Auth flows (login, signup, verify, invite accept, reset-password) show correct card styling.
Dashboard widgets and org settings show loading spinners during data fetch.
Uptime page chart displays brand-orange styling.
Text selection shows orange highlight (ciphera-ui base styles).

## Work Item PULSE-56 ## Summary - Migrated shared components and utilities from pulse-frontend to @ciphera-net/ui (v0.0.57). - Aligned form cards, brand colors, and selection styling with the design system. - Removed 6 duplicate or dead files (LoadingOverlay, SwissFlagIcon, CodeBlock, authErrors.ts, format.ts). ## Changes - **Components:** Replaced local SwissFlagIcon, CodeBlock with imports from ciphera-ui. Replaced inline spinners in dashboard widgets (TopReferrers, Locations, TechSpecs, Campaigns, ContentStats), notifications page, and OrganizationSettings with Spinner from ciphera-ui. - **Utilities:** Migrated format utilities (formatNumber, formatDuration, formatDate, getDateRange, formatUpdatedAgo, formatRelativeTime) and auth error utilities (getAuthErrorMessage, authMessageFromStatus, authMessageFromErrorType) to imports from ciphera-ui. - **Design system:** Form card border radius set to rounded-2xl (login, signup, invite accept, verify, reset-password, forgot-password, organization create). Uptime chart uses var(--color-brand-orange) instead of hardcoded #FD5E0F. Removed redundant selection:bg-brand-orange/20 from page wrappers. - **Removed:** LoadingOverlay.tsx (unused; all usage already from ciphera-ui). - **Version:** Bumped to 0.7.0-alpha and ciphera-ui to ^0.0.57. ## Test Plan - [x] Home page, site dashboard, and share dashboard load correctly. - [x] Integration guides (e.g. /integrations/nextjs) render code blocks. - [x] Auth flows (login, signup, verify, invite accept, reset-password) show correct card styling. - [x] Dashboard widgets and org settings show loading spinners during data fetch. - [x] Uptime page chart displays brand-orange styling. - [x] Text selection shows orange highlight (ciphera-ui base styles).

👍 1

greptile-apps[bot] (Migrated from github.com) reviewed 2026-02-17 20:04:18 +00:00

greptile-apps[bot] (Migrated from github.com) left a comment

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method [here](https://app.greptile.com/review/github).

greptile-apps[bot] commented

2026-02-17 20:14:13 +00:00

(Migrated from github.com)

Greptile Summary

This PR consolidates 6 local duplicate files into @ciphera-net/ui v0.0.57 as part of a design-system migration: auth error utilities (authErrors.ts), format utilities (format.ts), CodeBlock, SwissFlagIcon, and LoadingOverlay are all deleted and their callsites updated to import from the shared package. Inline spinners across dashboard widgets and settings are replaced with the design-system Spinner component, and hardcoded selection:bg-brand-orange/20 classes are removed from public page wrappers in favour of the base styles provided by @ciphera-net/ui.

Issues found:

styles/globals.css — removed CSS classes still in active use. card-glass, gradient-text, badge-primary, bg-grid-pattern, and glow-orange were deleted from globals.css but are still referenced in 21 places across app/features/page.tsx, app/page.tsx, app/faq/page.tsx, app/about/page.tsx, app/installation/page.tsx, all integration pages, app/not-found.tsx, and components/PricingSection.tsx. The PR relies on the @ciphera-net/ui tailwind preset to supply these classes, but there is no in-repo verification that the preset actually does so. If they are absent, glass-blur effects, gradient text, badge styles, and background dot grids will all silently break.
app/sites/[id]/uptime/page.tsx — potentially undefined CSS variable. Five recharts color props (stopColor, stroke, fill) were changed to var(--color-brand-orange). The project's DESIGN_SYSTEM.md and styles/globals.css only define --brand-orange (no color- prefix). The color- prefix variant is not documented anywhere in this repo; if the @ciphera-net/ui preset does not inject it, the uptime chart's area fill, gradient, and line stroke will all render as transparent.
components/Footer.tsx — undocumented layout narrowing. The authenticated footer container was quietly changed from max-w-7xl to max-w-6xl without mention in the PR description or CHANGELOG.

Confidence Score: 2/5

This PR has two unverified assumptions that could produce invisible styling regressions in production — hold for confirmation before merging.
The import migrations themselves are clean and well-executed across all 47 files. However, two unverified dependencies on @ciphera-net/ui internals create real risk: (1) five CSS utility classes deleted from globals.css are still used in 21 call sites and assumed to be re-provided by the package's tailwind preset — if the preset version doesn't include them, multiple public-facing pages will lose their visual design silently; (2) var(--color-brand-orange) used in the uptime chart is undocumented in this repo and may not be defined anywhere, which would render the chart's area and line as transparent. Neither issue would produce a JS error or build failure, making them easy to miss without visual testing of every affected page.
styles/globals.css (removed classes still used at 21 callsites) and app/sites/[id]/uptime/page.tsx (potentially undefined CSS custom property in recharts SVG attributes)

Important Files Changed

Filename	Overview
styles/globals.css	Removed CSS utility classes (card-glass, gradient-text, badge-primary, bg-grid-pattern, glow-orange) that are still actively used across 21 locations in the codebase — correctness depends entirely on the @ciphera-net/ui tailwind preset now providing these classes.
app/sites/[id]/uptime/page.tsx	Replaced hardcoded #FD5E0F with var(--color-brand-orange) in recharts SVG attributes; the CSS variable name is not documented in DESIGN_SYSTEM.md (which documents --brand-orange without the color- prefix) and may be undefined unless ciphera-ui's tailwind preset injects it.
lib/utils/authErrors.ts	File deleted — auth error utilities (getAuthErrorMessage, authMessageFromStatus, authMessageFromErrorType, AUTH_ERROR_MESSAGES, AuthErrorType) migrated to @ciphera-net/ui. All callsites updated correctly.
lib/utils/format.ts	File deleted — format utilities (formatNumber, formatDuration, formatDate, getDateRange, formatUpdatedAgo, formatRelativeTime) migrated to @ciphera-net/ui. All callsites in Chart, Countries, ExportModal, GoalStats, Locations, TechSpecs, TopPages, TopReferrers, Campaigns, ContentStats, and site pages updated correctly.
components/CodeBlock.tsx	File deleted — CodeBlock component migrated to @ciphera-net/ui. lib/integration-guides.tsx import updated correctly.
components/SwissFlagIcon.tsx	File deleted — SwissFlagIcon component migrated to @ciphera-net/ui. Footer.tsx import updated correctly.
components/LoadingOverlay.tsx	File deleted — LoadingOverlay component was already being imported from @ciphera-net/ui everywhere; local duplicate safely removed.
components/Footer.tsx	SwissFlagIcon import moved from local to @ciphera-net/ui. The authenticated footer container width was also silently changed from max-w-7xl to max-w-6xl; this is consistent with the unauthenticated footer (also max-w-6xl) but is an unlisted layout change.
components/dashboard/Campaigns.tsx	Migrated formatNumber from local to @ciphera-net/ui and replaced inline spinner with Spinner component. Results in three separate import statements from @ciphera-net/ui (pre-existing pattern, not introduced here).
lib/api/client.ts	AUTH_ERROR_MESSAGES and authMessageFromStatus imports moved from local lib/utils/authErrors to @ciphera-net/ui. Straightforward import update with no logic changes.

Flowchart

flowchart TD
    subgraph Before["Before (v0.6.0-alpha)"]
        LC["lib/utils/authErrors.ts\n(getAuthErrorMessage, AUTH_ERROR_MESSAGES,\nauthMessageFromStatus, authMessageFromErrorType)"]
        LF["lib/utils/format.ts\n(formatNumber, formatDuration,\nformatDate, getDateRange, etc.)"]
        CB["components/CodeBlock.tsx"]
        SF["components/SwissFlagIcon.tsx"]
        LO["components/LoadingOverlay.tsx"]
        GC["styles/globals.css\n(card-glass, gradient-text,\nbadge-primary, bg-grid-pattern, glow-orange)"]
    end

    subgraph After["After (v0.7.0-alpha)"]
        UI["@ciphera-net/ui v0.0.57\n(consolidated source of truth)"]
        TP["@ciphera-net/ui\ntailwind preset\n(card-glass, gradient-text,\nbadge-primary, bg-grid-pattern)"]
        GCNew["styles/globals.css\n(3D transforms, float animation only)"]
    end

    subgraph Consumers["Consuming Files (updated imports)"]
        AC["app/auth/callback/page.tsx"]
        AP["app/page.tsx, app/sites/*, app/notifications/*, etc."]
        DC["dashboard/Campaigns, ContentStats,\nLocations, TechSpecs, TopReferrers\n(+ Spinner)"]
        FT["components/Footer.tsx"]
        IG["lib/integration-guides.tsx"]
    end

    LC -->|"deleted, moved to"| UI
    LF -->|"deleted, moved to"| UI
    CB -->|"deleted, moved to"| UI
    SF -->|"deleted, moved to"| UI
    LO -->|"deleted, was already"| UI
    GC -->|"deleted, assumed moved to"| TP

    UI --> AC
    UI --> AP
    UI --> DC
    UI --> FT
    UI --> IG
    TP --> GCNew

    style UI fill:#FD5E0F,color:#fff
    style TP fill:#f97316,color:#fff
    style GCNew fill:#e5e7eb

_{Last reviewed commit: 3e8cd8d}

<h3>Greptile Summary</h3> This PR consolidates 6 local duplicate files into `@ciphera-net/ui` v0.0.57 as part of a design-system migration: auth error utilities (`authErrors.ts`), format utilities (`format.ts`), `CodeBlock`, `SwissFlagIcon`, and `LoadingOverlay` are all deleted and their callsites updated to import from the shared package. Inline spinners across dashboard widgets and settings are replaced with the design-system `Spinner` component, and hardcoded `selection:bg-brand-orange/20` classes are removed from public page wrappers in favour of the base styles provided by `@ciphera-net/ui`. **Issues found:** - **`styles/globals.css` — removed CSS classes still in active use.** `card-glass`, `gradient-text`, `badge-primary`, `bg-grid-pattern`, and `glow-orange` were deleted from `globals.css` but are still referenced in 21 places across `app/features/page.tsx`, `app/page.tsx`, `app/faq/page.tsx`, `app/about/page.tsx`, `app/installation/page.tsx`, all integration pages, `app/not-found.tsx`, and `components/PricingSection.tsx`. The PR relies on the `@ciphera-net/ui` tailwind preset to supply these classes, but there is no in-repo verification that the preset actually does so. If they are absent, glass-blur effects, gradient text, badge styles, and background dot grids will all silently break. - **`app/sites/[id]/uptime/page.tsx` — potentially undefined CSS variable.** Five recharts color props (`stopColor`, `stroke`, `fill`) were changed to `var(--color-brand-orange)`. The project's `DESIGN_SYSTEM.md` and `styles/globals.css` only define `--brand-orange` (no `color-` prefix). The `color-` prefix variant is not documented anywhere in this repo; if the `@ciphera-net/ui` preset does not inject it, the uptime chart's area fill, gradient, and line stroke will all render as transparent. - **`components/Footer.tsx` — undocumented layout narrowing.** The authenticated footer container was quietly changed from `max-w-7xl` to `max-w-6xl` without mention in the PR description or CHANGELOG. <h3>Confidence Score: 2/5</h3> - This PR has two unverified assumptions that could produce invisible styling regressions in production — hold for confirmation before merging. - The import migrations themselves are clean and well-executed across all 47 files. However, two unverified dependencies on `@ciphera-net/ui` internals create real risk: (1) five CSS utility classes deleted from `globals.css` are still used in 21 call sites and assumed to be re-provided by the package's tailwind preset — if the preset version doesn't include them, multiple public-facing pages will lose their visual design silently; (2) `var(--color-brand-orange)` used in the uptime chart is undocumented in this repo and may not be defined anywhere, which would render the chart's area and line as transparent. Neither issue would produce a JS error or build failure, making them easy to miss without visual testing of every affected page. - styles/globals.css (removed classes still used at 21 callsites) and app/sites/[id]/uptime/page.tsx (potentially undefined CSS custom property in recharts SVG attributes) <details><summary><h3>Important Files Changed</h3></summary> | Filename | Overview | |----------|----------| | styles/globals.css | Removed CSS utility classes (card-glass, gradient-text, badge-primary, bg-grid-pattern, glow-orange) that are still actively used across 21 locations in the codebase — correctness depends entirely on the @ciphera-net/ui tailwind preset now providing these classes. | | app/sites/[id]/uptime/page.tsx | Replaced hardcoded #FD5E0F with var(--color-brand-orange) in recharts SVG attributes; the CSS variable name is not documented in DESIGN_SYSTEM.md (which documents --brand-orange without the color- prefix) and may be undefined unless ciphera-ui's tailwind preset injects it. | | lib/utils/authErrors.ts | File deleted — auth error utilities (getAuthErrorMessage, authMessageFromStatus, authMessageFromErrorType, AUTH_ERROR_MESSAGES, AuthErrorType) migrated to @ciphera-net/ui. All callsites updated correctly. | | lib/utils/format.ts | File deleted — format utilities (formatNumber, formatDuration, formatDate, getDateRange, formatUpdatedAgo, formatRelativeTime) migrated to @ciphera-net/ui. All callsites in Chart, Countries, ExportModal, GoalStats, Locations, TechSpecs, TopPages, TopReferrers, Campaigns, ContentStats, and site pages updated correctly. | | components/CodeBlock.tsx | File deleted — CodeBlock component migrated to @ciphera-net/ui. lib/integration-guides.tsx import updated correctly. | | components/SwissFlagIcon.tsx | File deleted — SwissFlagIcon component migrated to @ciphera-net/ui. Footer.tsx import updated correctly. | | components/LoadingOverlay.tsx | File deleted — LoadingOverlay component was already being imported from @ciphera-net/ui everywhere; local duplicate safely removed. | | components/Footer.tsx | SwissFlagIcon import moved from local to @ciphera-net/ui. The authenticated footer container width was also silently changed from max-w-7xl to max-w-6xl; this is consistent with the unauthenticated footer (also max-w-6xl) but is an unlisted layout change. | | components/dashboard/Campaigns.tsx | Migrated formatNumber from local to @ciphera-net/ui and replaced inline spinner with Spinner component. Results in three separate import statements from @ciphera-net/ui (pre-existing pattern, not introduced here). | | lib/api/client.ts | AUTH_ERROR_MESSAGES and authMessageFromStatus imports moved from local lib/utils/authErrors to @ciphera-net/ui. Straightforward import update with no logic changes. | </details> </details> <h3>Flowchart</h3> ```mermaid flowchart TD subgraph Before["Before (v0.6.0-alpha)"] LC["lib/utils/authErrors.ts\n(getAuthErrorMessage, AUTH_ERROR_MESSAGES,\nauthMessageFromStatus, authMessageFromErrorType)"] LF["lib/utils/format.ts\n(formatNumber, formatDuration,\nformatDate, getDateRange, etc.)"] CB["components/CodeBlock.tsx"] SF["components/SwissFlagIcon.tsx"] LO["components/LoadingOverlay.tsx"] GC["styles/globals.css\n(card-glass, gradient-text,\nbadge-primary, bg-grid-pattern, glow-orange)"] end subgraph After["After (v0.7.0-alpha)"] UI["@ciphera-net/ui v0.0.57\n(consolidated source of truth)"] TP["@ciphera-net/ui\ntailwind preset\n(card-glass, gradient-text,\nbadge-primary, bg-grid-pattern)"] GCNew["styles/globals.css\n(3D transforms, float animation only)"] end subgraph Consumers["Consuming Files (updated imports)"] AC["app/auth/callback/page.tsx"] AP["app/page.tsx, app/sites/*, app/notifications/*, etc."] DC["dashboard/Campaigns, ContentStats,\nLocations, TechSpecs, TopReferrers\n(+ Spinner)"] FT["components/Footer.tsx"] IG["lib/integration-guides.tsx"] end LC -->|"deleted, moved to"| UI LF -->|"deleted, moved to"| UI CB -->|"deleted, moved to"| UI SF -->|"deleted, moved to"| UI LO -->|"deleted, was already"| UI GC -->|"deleted, assumed moved to"| TP UI --> AC UI --> AP UI --> DC UI --> FT UI --> IG TP --> GCNew style UI fill:#FD5E0F,color:#fff style TP fill:#f97316,color:#fff style GCNew fill:#e5e7eb ``` <sub>Last reviewed commit: 3e8cd8d</sub>

greptile-apps[bot] (Migrated from github.com) reviewed 2026-02-17 20:14:22 +00:00

greptile-apps[bot] (Migrated from github.com) left a comment

_{47 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

<sub>47 files reviewed, 3 comments</sub> <sub>[Edit Code Review Agent Settings](https://app.greptile.com/review/github) | [Greptile](https://greptile.com?utm_source=greptile_expert&utm_medium=github&utm_campaign=code_reviews)</sub>

app/sites/[id]/uptime/page.tsx

greptile-apps[bot] (Migrated from github.com) commented

2026-02-17 20:14:20 +00:00

CSS variable name not defined in design system

var(--color-brand-orange) is used for chart colors, but this variable is not documented or defined anywhere in the project. The DESIGN_SYSTEM.md and styles/globals.css only document --brand-orange (without the color- prefix), alongside --color-success, --color-warning, and --color-error for semantic tokens.

If @ciphera-net/ui's tailwind preset does not inject --color-brand-orange as a CSS custom property, all five of these chart color references will resolve to transparent/initial, causing the uptime response-time chart's area fill, gradient stops, stroke line, and active dot to render as invisible.

The consistent pattern in Chart.tsx is to use hardcoded hex values via a CHART_COLORS object. Consider verifying the variable is actually injected by the preset, or falling back to the documented --brand-orange:

// In ResponseTimeChart, if --color-brand-orange isn't confirmed available:
<stop offset="0%" stopColor="var(--brand-orange)" stopOpacity={0.3} />
<stop offset="100%" stopColor="var(--brand-orange)" stopOpacity={0.02} />

Prompt To Fix With AI

This is a comment left during a code review.
Path: app/sites/[id]/uptime/page.tsx
Line: 333:364

Comment:
**CSS variable name not defined in design system**

`var(--color-brand-orange)` is used for chart colors, but this variable is not documented or defined anywhere in the project. The `DESIGN_SYSTEM.md` and `styles/globals.css` only document `--brand-orange` (without the `color-` prefix), alongside `--color-success`, `--color-warning`, and `--color-error` for semantic tokens.

If `@ciphera-net/ui`'s tailwind preset does not inject `--color-brand-orange` as a CSS custom property, all five of these chart color references will resolve to `transparent`/`initial`, causing the uptime response-time chart's area fill, gradient stops, stroke line, and active dot to render as invisible.

The consistent pattern in `Chart.tsx` is to use hardcoded hex values via a `CHART_COLORS` object. Consider verifying the variable is actually injected by the preset, or falling back to the documented `--brand-orange`:

```tsx
// In ResponseTimeChart, if --color-brand-orange isn't confirmed available:
<stop offset="0%" stopColor="var(--brand-orange)" stopOpacity={0.3} />
<stop offset="100%" stopColor="var(--brand-orange)" stopOpacity={0.02} />
```

How can I resolve this? If you propose a fix, please make it concise.

**CSS variable name not defined in design system** `var(--color-brand-orange)` is used for chart colors, but this variable is not documented or defined anywhere in the project. The `DESIGN_SYSTEM.md` and `styles/globals.css` only document `--brand-orange` (without the `color-` prefix), alongside `--color-success`, `--color-warning`, and `--color-error` for semantic tokens. If `@ciphera-net/ui`'s tailwind preset does not inject `--color-brand-orange` as a CSS custom property, all five of these chart color references will resolve to `transparent`/`initial`, causing the uptime response-time chart's area fill, gradient stops, stroke line, and active dot to render as invisible. The consistent pattern in `Chart.tsx` is to use hardcoded hex values via a `CHART_COLORS` object. Consider verifying the variable is actually injected by the preset, or falling back to the documented `--brand-orange`: ```tsx // In ResponseTimeChart, if --color-brand-orange isn't confirmed available: <stop offset="0%" stopColor="var(--brand-orange)" stopOpacity={0.3} /> <stop offset="100%" stopColor="var(--brand-orange)" stopOpacity={0.02} /> ``` <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/sites/[id]/uptime/page.tsx Line: 333:364 Comment: **CSS variable name not defined in design system** `var(--color-brand-orange)` is used for chart colors, but this variable is not documented or defined anywhere in the project. The `DESIGN_SYSTEM.md` and `styles/globals.css` only document `--brand-orange` (without the `color-` prefix), alongside `--color-success`, `--color-warning`, and `--color-error` for semantic tokens. If `@ciphera-net/ui`'s tailwind preset does not inject `--color-brand-orange` as a CSS custom property, all five of these chart color references will resolve to `transparent`/`initial`, causing the uptime response-time chart's area fill, gradient stops, stroke line, and active dot to render as invisible. The consistent pattern in `Chart.tsx` is to use hardcoded hex values via a `CHART_COLORS` object. Consider verifying the variable is actually injected by the preset, or falling back to the documented `--brand-orange`: ```tsx // In ResponseTimeChart, if --color-brand-orange isn't confirmed available: <stop offset="0%" stopColor="var(--brand-orange)" stopOpacity={0.3} /> <stop offset="100%" stopColor="var(--brand-orange)" stopOpacity={0.02} /> ``` How can I resolve this? If you propose a fix, please make it concise. ````` </details>

components/Footer.tsx

greptile-apps[bot] (Migrated from github.com) commented

2026-02-17 20:14:21 +00:00

Unlisted layout change: authenticated footer width narrowed

The authenticated footer container was changed from max-w-7xl to max-w-6xl, but this is not mentioned in the PR description or CHANGELOG. The site dashboard pages (e.g. app/sites/[id]/page.tsx:235) use max-w-6xl, so this may be intentional for alignment — but it's worth confirming this narrowing of the authenticated footer is deliberate.

Prompt To Fix With AI

This is a comment left during a code review.
Path: components/Footer.tsx
Line: 49:49

Comment:
**Unlisted layout change: authenticated footer width narrowed**

The authenticated footer container was changed from `max-w-7xl` to `max-w-6xl`, but this is not mentioned in the PR description or CHANGELOG. The site dashboard pages (e.g. `app/sites/[id]/page.tsx:235`) use `max-w-6xl`, so this may be intentional for alignment — but it's worth confirming this narrowing of the authenticated footer is deliberate.

How can I resolve this? If you propose a fix, please make it concise.

**Unlisted layout change: authenticated footer width narrowed** The authenticated footer container was changed from `max-w-7xl` to `max-w-6xl`, but this is not mentioned in the PR description or CHANGELOG. The site dashboard pages (e.g. `app/sites/[id]/page.tsx:235`) use `max-w-6xl`, so this may be intentional for alignment — but it's worth confirming this narrowing of the authenticated footer is deliberate. <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: components/Footer.tsx Line: 49:49 Comment: **Unlisted layout change: authenticated footer width narrowed** The authenticated footer container was changed from `max-w-7xl` to `max-w-6xl`, but this is not mentioned in the PR description or CHANGELOG. The site dashboard pages (e.g. `app/sites/[id]/page.tsx:235`) use `max-w-6xl`, so this may be intentional for alignment — but it's worth confirming this narrowing of the authenticated footer is deliberate. How can I resolve this? If you propose a fix, please make it concise. ````` </details>

greptile-apps[bot] commented

2026-02-17 20:14:23 +00:00

(Migrated from github.com)

Additional Comments (1)

styles/globals.css
Removed CSS classes still actively used in 21 locations

The classes card-glass, gradient-text, badge-primary, bg-grid-pattern, and glow-orange were removed from globals.css, but they are still referenced across the codebase:

bg-grid-pattern — app/about/page.tsx:66, app/features/page.tsx:115, app/installation/page.tsx:17, app/integrations/*/page.tsx, app/not-found.tsx:13, app/page.tsx:185, components/IntegrationGuide.tsx:45
badge-primary — app/faq/page.tsx:106, app/features/page.tsx:128, app/page.tsx:199, components/PricingSection.tsx:299
gradient-text — app/features/page.tsx:134, app/features/page.tsx:175, app/page.tsx:215
card-glass — app/features/page.tsx:150, app/page.tsx:266

If the @ciphera-net/ui tailwind preset (v0.0.52+) does not provide these classes, all of these UI elements will silently lose their styling — glass blur effects, gradient text, badge styles, and background dot grids will all break with no runtime error.

Prompt To Fix With AI

This is a comment left during a code review.
Path: styles/globals.css
Line: 1:1

Comment:
**Removed CSS classes still actively used in 21 locations**

The classes `card-glass`, `gradient-text`, `badge-primary`, `bg-grid-pattern`, and `glow-orange` were removed from `globals.css`, but they are still referenced across the codebase:

- `bg-grid-pattern` — `app/about/page.tsx:66`, `app/features/page.tsx:115`, `app/installation/page.tsx:17`, `app/integrations/*/page.tsx`, `app/not-found.tsx:13`, `app/page.tsx:185`, `components/IntegrationGuide.tsx:45`
- `badge-primary` — `app/faq/page.tsx:106`, `app/features/page.tsx:128`, `app/page.tsx:199`, `components/PricingSection.tsx:299`
- `gradient-text` — `app/features/page.tsx:134`, `app/features/page.tsx:175`, `app/page.tsx:215`
- `card-glass` — `app/features/page.tsx:150`, `app/page.tsx:266`

If the `@ciphera-net/ui` tailwind preset (v0.0.52+) does not provide these classes, all of these UI elements will silently lose their styling — glass blur effects, gradient text, badge styles, and background dot grids will all break with no runtime error.

How can I resolve this? If you propose a fix, please make it concise.

<details> <summary>Additional Comments (1)</summary> **`styles/globals.css`** **Removed CSS classes still actively used in 21 locations** The classes `card-glass`, `gradient-text`, `badge-primary`, `bg-grid-pattern`, and `glow-orange` were removed from `globals.css`, but they are still referenced across the codebase: - `bg-grid-pattern` — `app/about/page.tsx:66`, `app/features/page.tsx:115`, `app/installation/page.tsx:17`, `app/integrations/*/page.tsx`, `app/not-found.tsx:13`, `app/page.tsx:185`, `components/IntegrationGuide.tsx:45` - `badge-primary` — `app/faq/page.tsx:106`, `app/features/page.tsx:128`, `app/page.tsx:199`, `components/PricingSection.tsx:299` - `gradient-text` — `app/features/page.tsx:134`, `app/features/page.tsx:175`, `app/page.tsx:215` - `card-glass` — `app/features/page.tsx:150`, `app/page.tsx:266` If the `@ciphera-net/ui` tailwind preset (v0.0.52+) does not provide these classes, all of these UI elements will silently lose their styling — glass blur effects, gradient text, badge styles, and background dot grids will all break with no runtime error. <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: styles/globals.css Line: 1:1 Comment: **Removed CSS classes still actively used in 21 locations** The classes `card-glass`, `gradient-text`, `badge-primary`, `bg-grid-pattern`, and `glow-orange` were removed from `globals.css`, but they are still referenced across the codebase: - `bg-grid-pattern` — `app/about/page.tsx:66`, `app/features/page.tsx:115`, `app/installation/page.tsx:17`, `app/integrations/*/page.tsx`, `app/not-found.tsx:13`, `app/page.tsx:185`, `components/IntegrationGuide.tsx:45` - `badge-primary` — `app/faq/page.tsx:106`, `app/features/page.tsx:128`, `app/page.tsx:199`, `components/PricingSection.tsx:299` - `gradient-text` — `app/features/page.tsx:134`, `app/features/page.tsx:175`, `app/page.tsx:215` - `card-glass` — `app/features/page.tsx:150`, `app/page.tsx:266` If the `@ciphera-net/ui` tailwind preset (v0.0.52+) does not provide these classes, all of these UI elements will silently lose their styling — glass blur effects, gradient text, badge styles, and background dot grids will all break with no runtime error. How can I resolve this? If you propose a fix, please make it concise. ````` </details> </details>

uz1mani (Migrated from github.com) reviewed 2026-02-17 20:17:03 +00:00

components/Footer.tsx

uz1mani (Migrated from github.com) commented

2026-02-17 20:17:03 +00:00

Issue: Authenticated footer changed from max-w-7xl to max-w-6xl without a PR/CHANGELOG note.
Fix: This was intentional to match the site dashboard and page-container-app. Added to CHANGELOG under 0.7.0-alpha: "Footer layout: Authenticated footer container aligned to max-w-6xl (matches site dashboard and page-container-app)."
Why: Footer width should match the main app content so the layout feels consistent; max-w-6xl is the standard app container width.

Issue: Authenticated footer changed from max-w-7xl to max-w-6xl without a PR/CHANGELOG note. Fix: This was intentional to match the site dashboard and page-container-app. Added to CHANGELOG under 0.7.0-alpha: "Footer layout: Authenticated footer container aligned to max-w-6xl (matches site dashboard and page-container-app)." Why: Footer width should match the main app content so the layout feels consistent; max-w-6xl is the standard app container width.

uz1mani (Migrated from github.com) reviewed 2026-02-17 20:17:13 +00:00

app/sites/[id]/uptime/page.tsx

uz1mani (Migrated from github.com) commented

2026-02-17 20:17:13 +00:00

Issue: var(--color-brand-orange) might not be defined and could cause chart colors to be transparent.
Fix: The variable is defined by the @ciphera-net/ui preset in addBase on :root (see ciphera-ui/src/tailwind-preset.ts line 29). It is now documented in DESIGN_SYSTEM.md under Brand Colors, including --color-brand-orange and --color-brand-orange-rgb.
Why: DESIGN_SYSTEM.md only mentioned --brand-orange; adding --color-brand-orange makes it clear where SVG/Recharts get the brand color and removes ambiguity.

Issue: var(--color-brand-orange) might not be defined and could cause chart colors to be transparent. Fix: The variable is defined by the @ciphera-net/ui preset in addBase on :root (see ciphera-ui/src/tailwind-preset.ts line 29). It is now documented in DESIGN_SYSTEM.md under Brand Colors, including --color-brand-orange and --color-brand-orange-rgb. Why: DESIGN_SYSTEM.md only mentioned --brand-orange; adding --color-brand-orange makes it clear where SVG/Recharts get the brand color and removes ambiguity.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ciphera-net/pulse#30