fix(ui): Polish settings dialog

[siduck]

• Fixed bad line height & improved better wording
• Use separate bg colors for sidebar/content to create good contrast
• Added pretty card btns for theme toggle

Before

simplescreenrecorder-2026-09-06_18.23.49.mp4

After

simplescreenrecorder-2026-09-06_18.22.24.mp4

[greptile-apps]

Confidence Score: 3/5

Not safe to merge until the new endpoint validates its client-controlled team identifier.

_{Reviews (4) · Last reviewed commit: "Merge pull request #317 from frappe/refa..."}

[greptile-apps]

Theme cards crowd mobile
The fixed three-column grid leaves each card only about 88–106px wide on the mobile settings page, making the previews and labels cramped. Please make the grid responsive.

Prompt To Fix With AI

This is a comment left during a code review.
Path: dashboard/src/components/settings/forms/AppearanceForm.vue
Line: 41

Comment:
**Theme cards crowd mobile**
The fixed three-column grid leaves each card only about 88–106px wide on the mobile settings page, making the previews and labels cramped. Please make the grid responsive.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[prathameshkurunkar7]

@siduck See if Team can be a single setting item instead of Team and Manage. Two separate items does not make sense. Keep "System" instead of Automatic, and make it default in themes. Add a shortcut to open settings dialog - "Cmd + , "

[netchampfaris]

@siduck This diverges from espresso design system. Surfaces that are "floating" and closer to the user needs to be lighter than the background.

[siduck]

@siduck This diverges from espresso design system. Surfaces that are "floating" and closer to the user needs to be lighter than the background.

I think we should re-consider for floating surfaces that have darker overlay tint behind them. because using elevation-1 instead of surface-base bg for dialog looks bright imo

elevation-1 is around 16% lighter than bg-surface-base, ig makes sense for all floating items except dialog cuz it has overlaytint.

bg-surface-base is around 53% lighter than the overlay tint and looks better for dialogs only

[greptile-apps]

Team input lacks validation

The new whitelisted endpoint passes the client-controlled team value into membership and document lookups without confirming it is a string. This violates the repository directive to explicitly validate input types at every whitelisted trust boundary and can allow complex values to reach Frappe’s ORM.

How this was verified: The endpoint forwards team into membership and document lookups without an explicit string check.

Context Used: Guidelines for reviewing Frappe Framework applications. (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: central/api/teams.py
Line: 240-241

Comment:
**Team input lacks validation**

The new whitelisted endpoint passes the client-controlled `team` value into membership and document lookups without confirming it is a string. This violates the repository directive to explicitly validate input types at every whitelisted trust boundary and can allow complex values to reach Frappe’s ORM.

**How this was verified:** The endpoint forwards `team` into membership and document lookups without an explicit string check.

**Context Used:** Guidelines for reviewing Frappe Framework applications. ([source](https://github.com/frappe/skills/blob/main/skills/quality-code-review/SKILL.md))

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.