Altinn / Altinn/app-frontend-react

Look into upgrading how app specific information is presented in our header

Open
#178 0 comments 0 reactions 0 assignees View on GitHub
kind/analysis
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

## Description
Our apps are getting more and more functionality, way beyond what was intended in the original design of the modal view we have today. In some future example we see that the space is getting cramped, is there anything we can do with the general design to hinder this? In a way we have two headers today. Our top "menu/header" shows the Altinn logo and who you are logged in as. (In the future also language will be chosen from here?) At this time we look at these elements as global, they do not change depending on what application the user is accessing.

Inside the modal we have the app specific information. The name of the app and the app owner name. This is were we are putting in more features making it more cramped. This is the main content of the app and should be given space. Is there something we can do give the app specific elements more space?

**Element to assess**
* App owner logo as a part of the global header?
* A lot of space between modal and header, are there other ways we structure it to give more focus to the main content?
* Expand design of modal or look into other ways of presenting the app specific information.

## In scope
How will our current design hold up with future features being introduced?
Do our global / app specific information make sense how it set up today?

## Tasks
- [ ] Research similar "powered by" solutions. How do they show the app owner / Platform owner
- [ ] How does the global header function today? Is it useful or just there because thats how the original design was?
- [ ] Map out the functionality and information that will most often be present in our apps. What is most important and should have focus?

Contributor guide

Open the contributing guide

Research direction

No files or tests are named. Start by reviewing the current global top header and app-specific modal, then map the information and functionality expected in apps. Research similar “powered by” solutions and assess whether the current separation and spacing remain suitable; done means a documented design assessment with recommendations.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.