# Feature DREAM-423 - UI improvements for existing project overview and application home page widgets

Project: Stream Design System
Status: closed
URL: https://community.openproject.org/work_packages/DREAM-423

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | High |
| Target versions | 16.4.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-464 | Bug | Buttons inside the widgets have been displaced with the latest changes | closed |  | 16.4.0 |  | Modules and project features / Project overview / Widget, Frontend components and Primer design system |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Frontend components and Primer design system, Modules and project features / Project overview |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/kjzHe0qOLme1LXCjLoTBFV/Overview-quick-wins?node-id=0-1 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable | Henriette Darge |
| Product manager |  |
| Developers | Henriette Darge |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**16.3**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:685px;" src="/api/v3/attachments/778261/content">

**16.4 RC (2025-08-29)**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:649px;" src="/api/v3/attachments/778262/content">

**Examples**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:626px;" src="/api/v3/attachments/778263/content">

<br>

<img class="image_resized op-uc-image op-uc-image_inline" style="width:603px;" src="/api/v3/attachments/778264/content">

**Acceptance critiera (revisited)**

  - Project overview:
    
      - Make the background white in Light mode: `bgColor-default`
    
      - Make the font color in widget header --fgColor-default
    
      - Style the existing widgets to look as close to GitHub home as possible (but still using the current thing).
        
          - Rounded corners
        
          - Keep the current inline editing functionality
        
          - The more button (three dots) should always appear (not on hover)
    
      - Style the "add widgets" placeholder so that it's a click zone.
        
          - Ideally, always visible in blank spaces (not only on hover)

  - Home:
    
      - The widgets should like the ones on the project overview

**Out of scope**: 

Home

  - Step 1: Static headings that are not linked

  - Step 2: Make the headings blue and link them

  - Linked deadings similar to GitHub organization home
    
      - Projekte (/projects)
    
      - Aktuellste Neuigkeiten -\> Neuigkeiten (/news)
    
      - Kontoeinstellungen (my/account)
    
      - Benutzer: remove widget
    
      - OpenProject Community (openproject.org/docs)
    
      - Administration (/admin)

**Acceptance criteria (old)**

  - Make the background white in Light mode: `bgColor-default`

  - Style the existing widgets to look as close to Primer border boxes as possible (but still using the current thing).
    
      - Rounded corners
    
      - Keep the current inline editing functionality
    
      - The more button (three dots) should always appear (not on hover)
    
      - The header should use the Border Box-style header background colour (to adapt properly to Dark mode).

  - Style the "add widgets" placeholder so that it's a click zone.
    
      - Ideally, always visible in blank spaces (not only on hover)

**Technical notes**

  - Not Primerising quite yet.

**Permissions and visibility considerations**

  - None

**Translation considerations**

  - *None*

**Out of scope**

  - Adding an '+ Widget' subheader. Will be implemented separately: <mention class="mention" data-id="66426" data-type="work_package" data-text="##66426">\#\#66426</mention>