UI / UX Improvement Requests (Mainly CSS-related)

Hello,

Thank you for your continued work on FluentCommunity.

After extensive real-world usage, we would like to share several UI/UX improvement requests. Most of these are small visual or structural inconsistencies, but they have a noticeable impact on polish, accessibility, and design consistency—especially for communities that care deeply about visual quality.

Below are the detailed points.

1. Clickable area of lesson links

• Currently, only the thumbnail image or the title is clickable.
• We would strongly prefer that the entire lesson block be wrapped in an <a> tag.
• This improves usability, accessibility, and alignment with common UX expectations.

2. Verse block in Dark Mode

• In Dark Mode, the text color of Verse blocks changes to white as expected.
• However, the background color of the Verse block does not adapt to Dark Mode.
• This results in very low contrast and poor readability because the text and background become nearly the same tone.

3. Blockquote citation visibility in Dark Mode

• In Dark Mode, the <cite> element inside blockquote does not change color.
• This reduces readability and visual hierarchy in dark environments.

4. Border-radius inconsistencies with embedded media

Feed

• When a video is embedded in a feed post, the top-left and top-right corners are rounded correctly.
• However, when an image is embedded, the image itself does not have a border-radius, causing the surrounding border to look visually “cut” or broken.

Courses

• When a video is embedded inside a course lesson, the embedded media follows the same styling as the Feed: the top-left and top-right corners are rounded, while the bottom corners remain flat.
• It would be preferable to unify the styling in course lessons—either make all four corners rounded, or make the embed fully flat—so the visual rules are consistent and intentional.

Feed popup

• When opening a feed post in a popup, the footer section (feed_comment) does not have bottom border-radius applied.
• As a result, it visually overflows outside the rounded popup container.

5. Duplicate borders in course lesson lists

• In the lesson list view, the border-bottom surrounding sections appears duplicated.
• A straight border and a rounded border-radius overlap, creating a double-line effect.
• This looks unintended and slightly degrades the visual clarity.

6. Incomplete color customization coverage

• Some UI elements do not reflect color customization settings, including:

  • Hover states for lesson pagination
  • Hover states for forum topics

• Additionally, the link color for the “Load more / See more” text cannot be customized.

• Expanding color controls to fully cover these elements would be very helpful for branding consistency.

7. Feed menu settings consistency

• When the Feed menu is edited in the menu settings (icon or label),
  the same configuration is not reflected in the sidebar feed.
• It would be ideal if sidebar feed items inherited the same menu settings automatically.

8. Rendering of first name and last name

• Currently, full names are rendered as a single string.
• We would like the first name and last name to be rendered separately, each with its own class selector.
• This would allow more flexible styling and better localization support (e.g., surname-first cultures).

We hope these suggestions are helpful and align with FluentCommunity’s long-term UX goals.

Thank you again for building such a promising community platform.