[GH-ISSUE #3429] [Bug] Small bugs in Settings>Appearance page #9941

New issue

Closed

opened 2026-03-24 21:17:58 +00:00 by mirror · 2 comments

mirror commented

2026-03-24 21:17:58 +00:00

Owner

Originally created by @MayurSMahajan on GitHub (Sep 17, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3429

Originally assigned to: @Nitin-Poojary on GitHub.

Bug Description

The UI for the Appearance page in the settings looks like this for the latest branch:

Two bugs with the current UI:

Only the Theme value button changes the cursor to grab and shows a background color upon hover. All the other options, that is Theme, Font Family, Layout Direction, Default Text Direction do not get a grab cursor and background color upon hover.
In the Theme option, observe how there is a file icon followed by the text button followed by the reset icon
It would be better in terms of UX if the order was changed to put the file icon after the Text Button.

How to Reproduce

Open AppFlowy
Go to Settings
Go to the Appearance tab
Observe that hovering on Theme, Font Family, Layout Direction, Default Text Direction does not show a hover background and grab cursor.
Observe how the ordering of the Theme actions is not intuitive.

Expected Behavior

Open AppFlowy
Go to Settings
Go to the Appearance tab
Hovering on all text buttons should show a background and grab cursor.
The Theme actions should be arranged as: Theme Text Button, Folder icon for Theme Picker, Reset Button

Operating System

All

AppFlowy Version(s)

latest main

Screenshots

Additional Context

So to sum up, to solve this issue we need to complete the following sub-tasks:

Make cursor grab and background color when hovering on Appearance Options Buttons.
Rearrange the Theme Picker Actions to: Theme Text Button, Folder icon for Theme Picker, Reset Button

Originally created by @MayurSMahajan on GitHub (Sep 17, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3429 Originally assigned to: @Nitin-Poojary on GitHub. ### Bug Description The UI for the Appearance page in the settings looks like this for the latest branch: Two bugs with the current UI: 1. Only the Theme value button changes the cursor to grab and shows a background color upon hover. All the other options, that is Theme, Font Family, Layout Direction, Default Text Direction do not get a grab cursor and background color upon hover. 2. In the Theme option, observe how there is a file icon followed by the text button followed by the reset icon It would be better in terms of UX if the order was changed to put the file icon after the Text Button. ### How to Reproduce 1. Open AppFlowy 2. Go to Settings 3. Go to the Appearance tab 4. Observe that hovering on Theme, Font Family, Layout Direction, Default Text Direction does not show a hover background and grab cursor. 5. Observe how the ordering of the Theme actions is not intuitive. ### Expected Behavior 1. Open AppFlowy 2. Go to Settings 3. Go to the Appearance tab 4. Hovering on all text buttons should show a background and grab cursor. 5. The Theme actions should be arranged as: Theme Text Button, Folder icon for Theme Picker, Reset Button ### Operating System All ### AppFlowy Version(s) latest main ### Screenshots ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/47064215/9816f909-2e00-4d4f-b02b-8f56e8037d8d) ### Additional Context So to sum up, to solve this issue we need to complete the following sub-tasks: - [ ] Make cursor grab and background color when hovering on Appearance Options Buttons. - [ ] Rearrange the Theme Picker Actions to: Theme Text Button, Folder icon for Theme Picker, Reset Button

mirror

2026-03-24 21:17:58 +00:00

closed this issue
added the
hacktoberfest

good first issue for experienced devs

good first issue for devs

improvements
labels

mirror commented

2026-03-24 21:17:58 +00:00

Author

Owner

@Nitin-Poojary commented on GitHub (Sep 21, 2023):

Is this how you want theme actions to look?

@Nitin-Poojary commented on GitHub (Sep 21, 2023): Is this how you want theme actions to look? <img src = "https://github.com/AppFlowy-IO/AppFlowy/assets/70025277/a41118e3-7b9f-4723-aadd-c726e95a4da8" height = "450" width = "650">

mirror commented

2026-03-24 21:17:58 +00:00

Author

Owner

@MayurSMahajan commented on GitHub (Sep 21, 2023):

Yes.

@MayurSMahajan commented on GitHub (Sep 21, 2023): Yes.