fix: ui improvement

[Junjiequan]

Description

• Cleaned up unused/obsolete CSS.
• Replaced Help and About text links with icons and added tooltips for all the header icons.
• Updated wording from Cart to Selection in the selection modal.
• Changed the cart icon to ballot.
• Updated icons in the selection UI:
  • Remove all icon in the selection modal changed from remove_shopping_cart to remove_circle_outline
  • Empty selection icon on the selection page changed from remove_shopping_cart to remove_circle_outline

Motivation

Background on use case, changes needed

Fixes:

Please provide a list of the fixes implemented in this PR

• Items added

Changes:

Please provide a list of the changes implemented by this PR

• changes made

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

Summary by Sourcery

Improve header and dataset selection UI for better clarity, accessibility, and consistency.

New Features:

• Add tooltips and icon-button styling to main navigation, help, about, user, and sign-in controls in the header.
• Introduce clearer dataset selection terminology by renaming cart-related labels and icons to Selection across relevant views.

Enhancements:

• Adjust header, empty batch message, and filter layout styling for improved alignment and spacing.
• Update dataset action and batch-related icons to better reflect selection semantics.

Tests:

• Update layout and header component tests to include Material tooltip module dependencies.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• In AppMainLayoutComponent tests you replaced RouterTestingModule with MatTooltipModule; if the component or its template uses routing, you probably want to keep RouterTestingModule and add MatTooltipModule instead of swapping them.
• Several icon-only buttons (e.g. main menu, help, about, cart, login) now rely on matTooltip text; consider adding explicit aria-label attributes to these buttons to improve accessibility for screen readers.
• In .main-menu mat-icon styling you set right and bottom without specifying a positioning context (e.g. position: relative/absolute), so these properties have no effect; consider using margins or proper positioning if you intend to offset the icon.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `AppMainLayoutComponent` tests you replaced `RouterTestingModule` with `MatTooltipModule`; if the component or its template uses routing, you probably want to keep `RouterTestingModule` and add `MatTooltipModule` instead of swapping them.
- Several icon-only buttons (e.g. main menu, help, about, cart, login) now rely on `matTooltip` text; consider adding explicit `aria-label` attributes to these buttons to improve accessibility for screen readers.
- In `.main-menu mat-icon` styling you set `right` and `bottom` without specifying a positioning context (e.g. `position: relative/absolute`), so these properties have no effect; consider using margins or proper positioning if you intend to offset the icon.

## Individual Comments

### Comment 1
<location path="src/app/_layout/app-header/app-header.component.html" line_range="104-112" />
<code_context>
-    <div class="main-menu" [matMenuTriggerFor]="mainMenu">
-      <mat-icon [inline]="true">menu</mat-icon>
-    </div>
+    <button mat-icon-button class="main-menu" [matMenuTriggerFor]="mainMenu">
+      <mat-icon
+        color="primary"
+        [matTooltip]="'Main menu'"
+        [matTooltipShowDelay]="500"
+        >menu</mat-icon
+      >
+    </button>
</code_context>
<issue_to_address>
**suggestion:** Consider attaching the main menu tooltip to the button instead of the icon for better UX and accessibility.

Right now the tooltip is bound to the `<mat-icon>`, so the hover/focus area is smaller than the actual clickable button and less discoverable for keyboard users. To align with other header actions and improve accessibility, please move `[matTooltip]` and `[matTooltipShowDelay]` from the `<mat-icon>` to the `<button mat-icon-button>` element.

```suggestion
  <mat-toolbar class="mat-elevation-z1" color="primary">
    <button
      mat-icon-button
      class="main-menu"
      [matMenuTriggerFor]="mainMenu"
      [matTooltip]="'Main menu'"
      [matTooltipShowDelay]="500"
    >
      <mat-icon color="primary">menu</mat-icon>
    </button>
```
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}