feat(mobile): new settings ui

[dvbthien]

Description

Redesigned settings pages with a more modern and eye-catching interface.

I have attached images in the Screenshots

Screenshots (if appropriate)

Checklist:

• I have performed a self-review of my own code
• I have made corresponding changes to the documentation if applicable
• I have no unrelated changes in the PR.
• I have confirmed that any new dependencies are strictly necessary.
• I have written tests for new code (if applicable)
• I have followed naming conventions/patterns in the surrounding code

[alextran1502]

Great work, I like the design a lot. There are a few things I would like to get your help with

1. Can you keep the original translation?

2. Make sure that the spacing is consistent

3. This header looks out of place

4. Use the same style headers for all segments. For example, in Photo Grid, the first segment doesn't have a title. There should be one for consistency

5. In networking, there should be a spacing between the top segment and the app bar

6. In the backup option, you should use the same segment style as others

[dvbthien]

Hi @alextran1502

Regarding the points you mentioned, I'll address each one:

1. I will try to minimize changes to the original translations, but I have added some new translations for certain UI elements.

2. I fixed that issue in my last commit.

3. I changed the header color so it doesn't look out of place. Please see the image below—what do you think?

4. I think using the same header style for all segments would be challenging because each segment requires the appropriate icon and title. If you have any ideas, please share them.

5. I fixed that issue in my last commit.

6. I believe the current design for the backup option is good. If you want to use the same segment style, I can try changing it locally so you can better visualize it. What are your thoughts? If you like it or if you have new ideas, please let me know. I have attached images of the foreground backup with the segment style.

---

In my last commit, I changed the card's background color have more white and reduced the border width. Do you like it?

Let me know your thoughts. Thank you!

[alextran1502]

Hi Thien,

3. We are using all capital letters here, so ideally, the font size should be smaller, try 13 or 14
4. You can make them with a header with a title as "Placeholder", I can go through and come up with an appropriate one
5. Yeah, I like the new option. I wonder if we can swap out the elevated button for a switch like other toggleable options in the settings

In my last commit, I changed the card's background color have more white and reduced the border width. Do you like it?

Looks good, when I go through the final tests, I can make small adjustments if needed

[dvbthien]

Hi @alextran1502,

I have made the changes per your suggestions. I have also added a header titled "Placeholder" for all sections. Please review it when you have time.

Additionally, I have a new design for the backup page. Please see the image below.

[dvbthien]

Hi @alextran1502,

Everything has been completed for you to review in the last two commits. If you find it difficult to review, I can revert those changes and create a separate pull request.

1. In the first commit, I split the settings into smaller widgets so that unrelated widgets are not rebuilt and the code logic is easier to understand.

2. In the second commit, I tried a new font and found it very suitable for the application. I pushed it for you to review—if you like it, please let me know.

Have a nice day,
Thanks

[alextran1502]

Hi @dvbthien, please keep this PR containing the new design for the settings stuff. Other refactoring should be in their PRs.

Regarding the fonts, I would like to make this change when needed. It is an important factor in the whole app's look and feel

[dvbthien]

Hi @alextran1502,

I have reverted the commits. Please review them when you have a moment.

Regarding the Mulish font, I find it very similar to Overpass. I think it's beautiful, comfortable, and easy to read. You can try it out when you have time

Thanks

[alextran1502]

What is this for? I don't notice the different of the components that use this

[dvbthien]

You can long-press to notice the difference—using onTap in ListTile triggers the default splash effect. I used FadeOnTap to avoid the splash while still providing tap feedback. The default splash effect can be tricky to handle in some areas due to padding or borders.

[dvbthien]

11.mp4

22.mp4

[alextran1502]

Why do we want to remove the default splash behavior?

[dvbthien]

I used padding in SettingsCardLayout to align all items and set the ListTile padding to 0. With the default splash behavior, the ripple ignores that padding (as shown below) and can’t be properly clipped where there’s a border. I also chose a Container over a Card for the settings card to save on performance, since we don’t need elevation—but the container doesn’t clip the splash as cleanly as a card does.