Small bugs in Settings>Appearance page

Bug Reports
1

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. The options Layout Direction and Default Text Direction have a subtitle which looks cramped.

image

  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 how the UI looks cluttered
  5. Observe that hovering on Theme, Font Family, Layout Direction, Default Text Direction does not show a hover background and grab cursor.
  6. 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. The UI could look like this:
    image

The above snapshot is from Settings>Files tab, observe how the subtitle is rendered with enough whitespace.

  1. Hovering on all text buttons should show a background and grab cursor.
  2. 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

No response

Additional Context

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

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