refactor: update layout and styling of site dashboard buttons and dat… #16

2026-02-08T12:45:21Z

uz1mani commented

2026-02-08 12:45:21 +00:00

(Migrated from github.com)

update layout and styling of site dashboard buttons and date range selector for improved usability

👍 1

greptile-apps[bot] commented

2026-02-08 12:47:19 +00:00

(Migrated from github.com)

Greptile Overview

Greptile Summary

Refactored the site dashboard header layout to improve visual hierarchy and usability. The Export button was updated from a custom <button> element to a Button component with variant="primary", and navigation buttons (Uptime, Funnels, Settings) were changed from variant="secondary" to variant="ghost". The layout now groups controls more logically with nested flex containers and includes a vertical divider between the date range selector and navigation buttons. The Select component also received a variant="input" and min-w-[140px] class for consistent styling.

Key changes:

Updated Export button to use Button component with variant="primary"
Changed navigation buttons from secondary to ghost variant
Added visual separator (vertical divider) between control groups
Improved responsive behavior with hidden md:inline-flex on Export button
Added min-w-[140px] to date range selector for better consistency

Confidence Score: 4/5

This PR is safe to merge with one minor syntax issue to fix
The refactoring improves UI consistency and maintainability by standardizing button components and layout structure. The changes are purely cosmetic and don't affect application logic. There is one minor syntax issue with aria-hidden that should use aria-hidden="true" instead of just aria-hidden
app/sites/[id]/page.tsx - fix aria-hidden attribute syntax

Important Files Changed

Filename	Overview
app/sites/[id]/page.tsx	Refactored button layout with improved grouping, visual separators, and consistent variant styling

Sequence Diagram

sequenceDiagram
    participant User
    participant SiteDashboard
    participant Button
    participant Select
    participant Router

    User->>SiteDashboard: Views dashboard header
    SiteDashboard->>SiteDashboard: Renders grouped button layout
    
    alt Export Action
        User->>Button: Clicks Export button
        Button->>SiteDashboard: setIsExportModalOpen(true)
        SiteDashboard->>SiteDashboard: Opens export modal
    end
    
    alt Date Range Selection
        User->>Select: Changes date range
        Select->>SiteDashboard: onChange(value)
        SiteDashboard->>SiteDashboard: Updates dateRange state
        SiteDashboard->>SiteDashboard: Calls saveSettings()
        SiteDashboard->>SiteDashboard: Triggers data reload
    end
    
    alt Navigation
        User->>Button: Clicks Uptime/Funnels/Settings
        Button->>Router: router.push(path)
        Router->>Router: Navigates to new page
    end

<h2>Greptile Overview</h2> <h3>Greptile Summary</h3> Refactored the site dashboard header layout to improve visual hierarchy and usability. The Export button was updated from a custom `<button>` element to a `Button` component with `variant="primary"`, and navigation buttons (Uptime, Funnels, Settings) were changed from `variant="secondary"` to `variant="ghost"`. The layout now groups controls more logically with nested flex containers and includes a vertical divider between the date range selector and navigation buttons. The `Select` component also received a `variant="input"` and `min-w-[140px]` class for consistent styling. Key changes: - Updated Export button to use `Button` component with `variant="primary"` - Changed navigation buttons from `secondary` to `ghost` variant - Added visual separator (vertical divider) between control groups - Improved responsive behavior with `hidden md:inline-flex` on Export button - Added `min-w-[140px]` to date range selector for better consistency <h3>Confidence Score: 4/5</h3> - This PR is safe to merge with one minor syntax issue to fix - The refactoring improves UI consistency and maintainability by standardizing button components and layout structure. The changes are purely cosmetic and don't affect application logic. There is one minor syntax issue with `aria-hidden` that should use `aria-hidden="true"` instead of just `aria-hidden` - app/sites/[id]/page.tsx - fix aria-hidden attribute syntax <details><summary><h3>Important Files Changed</h3></summary> | Filename | Overview | |----------|----------| | app/sites/[id]/page.tsx | Refactored button layout with improved grouping, visual separators, and consistent variant styling | </details> </details> <h3>Sequence Diagram</h3> ```mermaid sequenceDiagram participant User participant SiteDashboard participant Button participant Select participant Router User->>SiteDashboard: Views dashboard header SiteDashboard->>SiteDashboard: Renders grouped button layout alt Export Action User->>Button: Clicks Export button Button->>SiteDashboard: setIsExportModalOpen(true) SiteDashboard->>SiteDashboard: Opens export modal end alt Date Range Selection User->>Select: Changes date range Select->>SiteDashboard: onChange(value) SiteDashboard->>SiteDashboard: Updates dateRange state SiteDashboard->>SiteDashboard: Calls saveSettings() SiteDashboard->>SiteDashboard: Triggers data reload end alt Navigation User->>Button: Clicks Uptime/Funnels/Settings Button->>Router: router.push(path) Router->>Router: Navigates to new page end ```

greptile-apps[bot] (Migrated from github.com) reviewed 2026-02-08 12:47:24 +00:00

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

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

<sub>1 file reviewed, 1 comment</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]/page.tsx

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

2026-02-08 12:47:23 +00:00

aria-hidden should be set to true not just present as a boolean attribute

                aria-hidden="true"

Prompt To Fix With AI

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

Comment:
`aria-hidden` should be set to `true` not just present as a boolean attribute

```suggestion
                aria-hidden="true"
```

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

`aria-hidden` should be set to `true` not just present as a boolean attribute ```suggestion aria-hidden="true" ``` <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/sites/[id]/page.tsx Line: 315:315 Comment: `aria-hidden` should be set to `true` not just present as a boolean attribute ```suggestion aria-hidden="true" ``` How can I resolve this? If you propose a fix, please make it concise. ````` </details>

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ciphera-net/pulse#16