UI: general improvements

[adoriandoran]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @adoriandoran, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a series of general UI improvements aimed at enhancing the visual consistency and user experience across various parts of the application. Key changes include a significant overhaul of the Fancytree component's active and selected states, the adoption of a new CSS variable for consistent horizontal spacing, and several aesthetic adjustments to calendar and form elements. These updates contribute to a more polished and cohesive interface.

Highlights

• Enhanced Tree View Styling: Refined the appearance and behavior of active and selected items in the Fancytree component, introducing new pseudo-elements for backgrounds and animations for better visual feedback.
• Standardized Spacing with CSS Variables: Replaced hardcoded padding and margin values with a new --content-margin-inline CSS variable across several components (board, calendar, table views, search results, note title actions) for improved layout consistency.
• Calendar Widget Refinements: Adjusted padding, font styles, and alignment within the calendar dropdown widget for a cleaner and more consistent look.
• Form Element Styling: Applied consistent margin-bottom to labels and removed margin from input groups in various form-related widgets for better visual hierarchy.
• Horizontal Rule Styling Update: Modernized the styling of hr elements within the CKEditor content for a more subtle and consistent appearance.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• apps/client/src/stylesheets/theme-next/notes/text.css
  • Updated the styling of horizontal rules (hr) within .ck-content to use margin-block, height: 0, and border: thin solid instead of height: 1px and background-color.
  • Added :root prefix to the hr selector.
• apps/client/src/stylesheets/theme-next/shell.css
  • Removed specific text-align, font-size, and font-weight properties from the calendar month input ([data-calendar-input="month"]).
  • Removed font-size and font-weight from calendar week day labels.
  • Modified fancytree-active background to remove !important and included :hover state for consistency.
  • Added detailed comments explaining the use of ::before and ::after pseudo-elements for fancytree-node.
  • Introduced new styles for fancytree-selected nodes, utilizing position: relative, background-color: transparent, border-radius: 0, and a ::after pseudo-element for the selection background with an animation.
  • Extended hover styles for .tree-item-button to also apply to .fancytree-custom-icon within selected nodes.
  • Defined a @keyframes bulk-action-button-blink animation.
  • Added specific styling for fancytree-custom-icon within fancytree-selected nodes, including display: flex, justify-content, align-items, width, height, margin, and ::before styles, along with an animation on hover and hiding the protected note indicator ::after for selected protected nodes.
• apps/client/src/stylesheets/tree.css
  • Removed !important from background-color for span.fancytree-active.
  • Refactored span.fancytree-selected styles to use background-color: var(--selection-background-color) and border-radius: 0, removing previous border-color, text-decoration, and font-style from .fancytree-title.
  • Updated the ::before content and border color for span.fancytree-selected .fancytree-custom-icon.
• apps/client/src/widgets/collections/board/index.css
  • Replaced hardcoded padding-inline: 12px with margin-inline: var(--content-margin-inline).
• apps/client/src/widgets/collections/calendar/index.css
  • Replaced hardcoded padding: 0 12px with padding: 0 var(--content-margin-inline).
• apps/client/src/widgets/collections/table/index.css
  • Added margin-inline-start: var(--content-margin-inline) to .table-view-container.
• apps/client/src/widgets/launch_bar/CalendarWidget.css
  • Adjusted padding in .calendar-dropdown-widget .calendar-header from 0.5rem to 1rem at the bottom.
  • Modified font-weight and font-size for the calendar month dropdown toggle and added justify-content: center.
  • Removed font-size and font-weight from .calendar-week span and added them back with different values, also added min-height and align-items to .calendar-body.
• apps/client/src/widgets/layout/NoteTitleActions.css
  • Replaced hardcoded padding-start and padding-end with var(--content-margin-inline) and added width: 100% to .title-actions.
• apps/client/src/widgets/layout/NoteTypeSwitcher.css
  • Removed padding: .25em 0 from .note-type-switcher.
• apps/client/src/widgets/search_result.css
  • Replaced padding: 10px on .search-result-widget .note-list with margin-inline: var(--content-margin-inline) on .search-result-widget .note-list-wrapper.
• apps/client/src/widgets/type_widgets/ProtectedSession.css
  • Added margin-bottom: 8px to label elements within .protected-session-widget.
• apps/client/src/widgets/type_widgets/helpers/SetupForm.css
  • Added margin-bottom: 8px to label elements and margin: 0 to .input-group within .setup-form.

Activity

• No specific activity (comments, reviews, progress updates) has been recorded for this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a series of general UI improvements across various CSS files. The changes focus on enhancing code quality and consistency by refactoring styles to use CSS variables for spacing, adopting logical properties, and removing !important declarations. There are also significant restyling efforts for tree items and the calendar widget. Overall, these are positive changes. I've left one comment regarding a redundant CSS property that should be addressed.

[gemini-code-assist]

The font-weight: 400; property is redundant as it is immediately overridden by font-weight: 300; on line 70. This should be removed to improve code clarity and avoid confusion.