# Feature DREAM-75 - Primerise Branding tab of Admin/Design page

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

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

| ID | Subject | Type | Status | Assignee | Target versions | Spent time |
| --- | --- | --- | --- | --- | --- | --- |
| DREAM-928 | Add primer file input dsl | Implementation | closed |  | 18.0.0 |  |

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Frontend components and Primer design system, Administration / Custom themes |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan | Enterprise / Basic (BAS) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design-Settings?node-id=2044-8701&t=GU8RMd0LO9ZL6TJa-0 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Henriette Darge |
| Designer | Marc Alcobé |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

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

## Description

# **Acceptance**

**A) There is a primerized way of uploading a file:**

**UX in admin/design**

*   For the file upload area the following rules are defined:
    
    *   When there is no file present, the default box with dotted border is shown (see visuals)
        
        *   The box is clickable and a file picker opens
            
        *   After selecting a file, it gets uploaded directly
            
    *   When there is already a saved file:
        
        *   a small preview is shown
            
        *   there is a an ActionMenu in the rop right with the actions
            
            *   "Replace"
                
                *   The file selector opens, after selection it replaces the preview image. 
                    
            *   "Delete" (danger scheme). Deletes immediately without the need to submit the form manually again. 
                

**Technical**

*   For the upload fields a new dsl entry need to be created since Primer does not offer that yet
    
    *   Suggestion: `f.file_input(**system_arguments)` which internal creates an `input` of type `:file`
        
    *   The icon is not configurable in v1
        
    *   it gets documented in the lookbook
        
*   The field should be able to either auto submit the image or wait for the manual form submit

**B) The Ui of the page gets updated**

  - Re-work the UI for the content of the tab "Branding" with Primer components
    
      - Use `Primer::Beta::Subhead` for the headings
    
      - Use the new file dsl for uploading a file

## **Out of scope:**

  - Functional changes

  - Add possibility to upload multiple logos, will be done in <mention class="mention" data-id="56190" data-type="work_package" data-text="##56190">##56190</mention>

## **Figma**

<https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design-Settings?node-id=2044-8701&t=GU8RMd0LO9ZL6TJa-0>

## **Visuals**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:639px;" src="/api/v3/attachments/924091/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:637px;" src="/api/v3/attachments/924092/content">