Create a figma design for settings page #863

New issue

Closed

opened 2026-05-11 07:55:48 +00:00 by a22erigr · 26 comments

a22erigr commented 2026-05-11 07:55:48 +00:00

Collaborator

Copy link

Description

In the parent issue #843 the general design of the website is created. We need some one to design how the settings page should look.
The design should follow meterial design. Please use https://www.figma.com/community/file/1035203688168086460/material-3-design-kit

What should be done

• Implement how the settings page will look in both dark and light mode
• How should the theme colors be used.
• Can Material design icons be used

## Description In the parent issue #843 the general design of the website is created. We need some one to design how the settings page should look. The design should follow meterial design. Please use https://www.figma.com/community/file/1035203688168086460/material-3-design-kit ## What should be done + Implement how the settings page will look in both dark and light mode + How should the theme colors be used. + Can Material design icons be used

a22erigr added the

design

label 2026-05-11 07:55:48 +00:00

c24carso was assigned by a22erigr 2026-05-11 07:56:58 +00:00

a22erigr commented 2026-05-11 07:57:25 +00:00

Author

Collaborator

Copy link

The mockup look of the website

The mockup look of the website 

bild.png

43 KiB

bild.png

43 KiB

c24carso was unassigned by a22erigr 2026-05-11 07:57:39 +00:00

a24danwe was assigned by a22erigr 2026-05-11 08:00:26 +00:00

a24danwe commented 2026-05-11 12:09:48 +00:00

Collaborator

Copy link

Since I have not worked with Figma this design might not have been perfect but this is what I have done so far.

Since I have not worked with Figma this design might not have been perfect but this is what I have done so far.

a24danwe commented 2026-05-11 12:09:55 +00:00

Collaborator

Copy link

Light mode

Light mode 

image.png

72 KiB

a24danwe commented 2026-05-11 12:10:25 +00:00

Collaborator

Copy link

Dark mode

Dark mode 

image.png

79 KiB

a24danwe commented 2026-05-11 12:10:55 +00:00

Collaborator

Copy link

Please come with suggestions/improvements.

Please come with suggestions/improvements.

a22erigr commented 2026-05-11 12:12:38 +00:00

Author

Collaborator

Copy link

Make sure to follows https://m2.material.io/design/guidelines-overview guidlines

Make sure to follows https://m2.material.io/design/guidelines-overview guidlines

a22erigr commented 2026-05-11 12:14:47 +00:00

Author

Collaborator

Copy link

Here is how our loginpage is going to look like #864 (comment)

Here is how our loginpage is going to look like https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/864#issuecomment-9616

a24danwe commented 2026-05-11 12:17:12 +00:00

Collaborator

Copy link

Should we not follow Material design 3?

Should we not follow Material design 3?

a22erigr commented 2026-05-11 12:19:38 +00:00

Author

Collaborator

Copy link

I have taken insperation from this page https://m2.material.io/components?platform=web

I have taken insperation from this page https://m2.material.io/components?platform=web

a22erigr commented 2026-05-11 12:21:35 +00:00

Author

Collaborator

Copy link


bild.png

69 KiB

a24julot commented 2026-05-11 12:24:04 +00:00

Collaborator

Copy link

I like that we have buttons, but they should follow the theme, instead of the whole part being green, maybe only the buttons should be green?

I like that we have buttons, but they should follow the theme, instead of the whole part being green, maybe only the buttons should be green?

image.png

62 KiB

a24julot commented 2026-05-11 12:24:42 +00:00

Collaborator

Copy link

I also really like this layout for selecting theme:

I also really like this layout for selecting theme:

image.png

10 KiB

a22erigr commented 2026-05-11 12:31:14 +00:00

Author

Collaborator

Copy link

I also thing it's a good ide that the select buttons have the color of the theme

I also thing it's a good ide that the select buttons have the color of the theme

a24danwe commented 2026-05-11 12:47:09 +00:00

Collaborator

Copy link

should I try to replicate this layout? I think this design was really good.

should I try to replicate this layout? I think this design was really good.

image.png

225 KiB

a22erigr commented 2026-05-11 12:48:48 +00:00

Author

Collaborator

Copy link

Feel free to do so. Just keep the buttons

Feel free to do so. Just keep the buttons

a22erigr commented 2026-05-11 12:50:17 +00:00

Author

Collaborator

Copy link

SHould be a button there

 SHould be a button there

bild.png

303 KiB

👍 1

a24danwe commented 2026-05-12 08:56:44 +00:00

Collaborator

Copy link

Updated Light mode:

Updated Light mode: 

image.png

64 KiB

a24danwe commented 2026-05-12 08:57:15 +00:00

Collaborator

Copy link

Updated Dark Mode:

Updated Dark Mode:

image.png

68 KiB

a22erigr commented 2026-05-12 09:01:21 +00:00

Author

Collaborator

Copy link

The leadership finds this design the best . Is it possible to re create this one but add some polish. Ex buttons and. We also find that the corners are a bit to rounded

The leadership finds this design the best . Is it possible to re create this one but add some polish. Ex buttons and. We also find that the corners are a bit to rounded

bild.png

95 KiB

a24danwe commented 2026-05-12 09:08:54 +00:00

Collaborator

Copy link

Okay, i will try to do that.

Okay, i will try to do that.

👍 1

a24danwe commented 2026-05-12 12:35:39 +00:00

Collaborator

Copy link

I have tried to replicate the design that the leaders agreed upon. I have made changed to the "cards" to make them not rounded. I have also added buttons.

I have tried to replicate the design that the leaders agreed upon. I have made changed to the "cards" to make them not rounded. I have also added buttons.

a24danwe commented 2026-05-12 12:35:50 +00:00

Collaborator

Copy link

Light Mode:

Light Mode: 

image.png

107 KiB

a24danwe commented 2026-05-12 12:37:19 +00:00

Collaborator

Copy link

Did not find the right icon to the left of the setting so I added a cogwheel

Did not find the right icon to the left of the setting so I added a cogwheel

a22erigr commented 2026-05-12 12:44:12 +00:00

Author

Collaborator

Copy link

(ai)

 (ai)

bild.png

23 KiB

c24danli commented 2026-05-12 12:57:46 +00:00

Collaborator

Copy link

Good job! I now this have been on the longer side, but we will now use these designs to start working on implementing the designs in practice

Good job! I now this have been on the longer side, but we will now use these designs to start working on implementing the designs in practice

a22erigr closed this issue 2026-05-12 13:00:24 +00:00

a24danwe commented 2026-05-12 16:10:33 +00:00

Collaborator

Copy link

Dark mode:

Dark mode: 

image.png

138 KiB

a22erigr referenced this issue 2026-05-13 11:22:34 +00:00

Implement the new settings page designe #946

a24vinla referenced this issue 2026-05-19 09:02:06 +00:00

946-Implement-the-new-settings-page-design #1003

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

#1236-edit-mode-txt

#1229-generic-themed-buttons

Add-an-option-to-set-no-image-to-image-view-1227

#1242-prog-bar-colors-fix

#1239-Remove-Vertical-Scroll

Image-view-error-1230

Make-the-card-title-and-header-of-card-uniform-1233

both_teams_week_8

team_2_week_7

team_1_week_7

temp_branch_week_7

team_2_week_6

team_1_week_6

team_2_week_5

team_1_week_5

temp_branch_week_5

team_2_week_4

team_1_week_4

week_4_temp_branch

temp-branch-week-3

team_2_week_3

team_1_week_3

team_2_week_2

team_1_week_2

temp-week-2-merge-branch

team_2_week_1

team_1_week_1

No results found.

Labels

Clear labels   

_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  

API

  

app

  

backEnd

  

Blocked, waiting for further changes

  

bug

Something is not working

  

cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  

close

Issue to close

  

design

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

feature request

  

frontEnd

  

help wanted

Need some help

  

invalid

Something is wrong

  

low priority

  

needs input

Issue needs input from product owner or customer

  

needs review

issue is in need of review

  

project documentation

  

question

More information is needed

  

research

  

reviewed

This Issue has been reviewed

  

script

  

security

use this for security-related issues

  

SQL

  

style

  

testing

  

topLevel

Reserved for top-level, project-wide issues.

  

wontfix

This won't be fixed

No labels

_CRITICAL_

API

app

backEnd

Blocked, waiting for further changes

bug

cleanup

close

design

duplicate

enhancement

feature request

frontEnd

help wanted

invalid

low priority

needs input

needs review

project documentation

question

research

reviewed

script

security

SQL

style

testing

topLevel

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

a24danwe

4 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

Andras/BoundlessFlowCampus2K#863

No description provided.