Andras/BoundlessFlowCampus2K

Fork 0

Improve design of textfields #626

New issue

Closed

opened 2026-04-28 12:19:00 +00:00 by a24vinla · 6 comments

a24vinla commented

2026-04-28 12:19:00 +00:00

Collaborator

We need a better looking textbox! Please post screenshots in issue comments of different alterantives.

a24vinla added the

design

frontEnd

labels

2026-04-28 12:19:00 +00:00

b25marem was assigned by a24vinla

2026-04-28 13:43:25 +00:00

b25marem commented

2026-04-29 07:29:39 +00:00

Collaborator

Alternative 1: Textfields with thicker border and rounded corners.

I think that this design makes the input fields more visible and improves clarity. The increased padding and border radius give a cleaner and more modern look.

![image](/attachments/46c4b8d1-9f5d-40ec-b715-15e594b11416) Alternative 1: Textfields with thicker border and rounded corners. I think that this design makes the input fields more visible and improves clarity. The increased padding and border radius give a cleaner and more modern look.

image.png

47 KiB

b25marem commented

2026-04-29 07:31:13 +00:00

Collaborator

Alternative 2: Filled textfields with soft background and colored focus state.

This design uses a light background instead of borders to create a softer appearance. The focus state is highlighted with a colored outline to make the active field more noticeable.

![image](/attachments/23662e53-9bc5-4480-9c26-4a5432a74b56) Alternative 2: Filled textfields with soft background and colored focus state. This design uses a light background instead of borders to create a softer appearance. The focus state is highlighted with a colored outline to make the active field more noticeable.

image.png

48 KiB

b25marem commented

2026-04-29 07:46:40 +00:00

Collaborator

Alternative 3: Textfields with subtle shadow and soft focus outline.

This design uses a light shadow instead of a strong border to create a cleaner and more modern look. The focused field is highlighted with a soft outline, making it easy to identify while keeping the UI consistent with the rest of the system.

In my opinion, this is the best option as it fits well with the overall design and provides a good balance between clarity and simplicity.

![image](/attachments/2fb2ef58-3c06-4f18-a52e-f98f2415c47c) Alternative 3: Textfields with subtle shadow and soft focus outline. This design uses a light shadow instead of a strong border to create a cleaner and more modern look. The focused field is highlighted with a soft outline, making it easy to identify while keeping the UI consistent with the rest of the system. In my opinion, this is the best option as it fits well with the overall design and provides a good balance between clarity and simplicity.

image.png

49 KiB

b25marem added the

needs review

label

2026-04-29 07:47:10 +00:00

hGustavs commented

2026-04-29 12:36:33 +00:00

Owner

What can we conclude when comparing other operating systems.

If no consensus can be found I really like https://m3.material.io/ as a basis for our design language

What can we conclude when comparing other operating systems. If no consensus can be found I really like https://m3.material.io/ as a basis for our design language

👍 1

b25marem commented

2026-05-04 06:43:59 +00:00

Collaborator

Yes, this is Alternative 2.

Thanks for pointing us to Material Design 3. It helped clarify the direction.

After comparing, this option aligns best with their text field guidelines. It uses a soft filled style, subtle borders, and a clear focus state without heavy shadows.

I think this is a good base to work from. We can keep this structure but adapt it by using our brand colors for the focus state and adjusting it to fit our overall theme.

This way we stay consistent with Material Design while still making it feel like part of our application.

![image](/attachments/d81d8fc4-c3ff-434e-aeeb-ea070468bdd1) Yes, this is Alternative 2. Thanks for pointing us to Material Design 3. It helped clarify the direction. After comparing, this option aligns best with their text field guidelines. It uses a soft filled style, subtle borders, and a clear focus state without heavy shadows. I think this is a good base to work from. We can keep this structure but adapt it by using our brand colors for the focus state and adjusting it to fit our overall theme. This way we stay consistent with Material Design while still making it feel like part of our application.

image.png

190 KiB