Skip to content

fix: add distinct icons and colors for event types#332

Merged
fank merged 3 commits intomainfrom
fix/event-icons-and-styling
Mar 7, 2026
Merged

fix: add distinct icons and colors for event types#332
fank merged 3 commits intomainfrom
fix/event-icons-and-styling

Conversation

@fank
Copy link
Member

@fank fank commented Mar 7, 2026

Summary

  • Add FlagIcon for captured/capturedFlag events (blue --accent-primary)
  • Use AlertTriangleIcon for contested sector events (orange --accent-warning)
  • Use TerminalIcon for terminal hack events (orange --accent-warning)
  • Use DoorExitIcon for EndMissionEvent (purple, replaces TargetIcon)
  • Remove invisible em dash separator from EndMissionEvent rows

Previously, captured, contested, and terminal hack events all fell through to the generic ActivityIcon with #888 color.

Test plan

  • Verify captured/capturedFlag events show a flag icon in blue
  • Verify contested events show a warning triangle in orange
  • Verify terminal hack events show a terminal icon in orange
  • Verify EndMissionEvent shows a door/exit icon in purple
  • Verify EndMissionEvent rows display side + message without a dark separator

- Add FlagIcon for captured/capturedFlag events (blue)
- Use AlertTriangleIcon for contested events (orange)
- Use TerminalIcon for terminal hack events (orange)
- Remove invisible em dash separator from EndMissionEvent rows
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! 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 enhances the user interface by introducing distinct visual cues for various game events. It assigns unique icons and colors to 'captured', 'contested', and 'terminal hack' events, moving away from a generic representation. Additionally, it refines the display of 'EndMissionEvent' rows by removing an unnecessary separator, improving overall readability and user experience.

Highlights

  • Distinct Icons for Events: Implemented FlagIcon for 'captured' and 'capturedFlag' events, AlertTriangleIcon for 'contested' sector events, and TerminalIcon for 'terminal hack' events.
  • Event Coloring: Assigned specific colors: blue (--accent-primary) for 'captured' events, and orange (--accent-warning) for 'contested' and 'terminal hack' events.
  • UI Refinement: Removed the invisible em dash separator from EndMissionEvent rows for cleaner display.
Changelog
  • ui/src/components/Icons.tsx
    • Added FlagIcon component definition.
  • ui/src/pages/recording-playback/components/EventsTab.tsx
    • Imported new icon components (FlagIcon, AlertTriangleIcon, TerminalIcon).
    • Updated eventIcon logic to display distinct icons for captured, contested, and terminal hack events.
    • Modified eventColor logic to apply specific colors for captured, contested, and terminal hack events.
    • Removed the em dash separator from EndMissionEvent rows.
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.

@github-actions
Copy link

github-actions bot commented Mar 7, 2026

Coverage Report for ui

Status Category Percentage Covered / Total
🔵 Lines 99.07%
🟰 ±0%
4825 / 4870
🔵 Statements 98.5%
🟰 ±0%
6711 / 6813
🔵 Functions 97.83%
🟰 ±0%
1894 / 1936
🔵 Branches 89.37%
⬇️ -0.01%
2221 / 2485
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
ui/src/pages/recording-playback/components/EventsTab.tsx 94.55%
⬇️ -0.08%
87.7%
⬇️ -0.20%
92.13%
⬇️ -0.17%
95.48%
🟰 ±0%
23, 250, 270-280
Generated in workflow #418 for commit 827f26c by the Vitest Coverage Report Action

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request successfully adds distinct icons and colors for different event types, improving the clarity of the event log. The changes are well-implemented. I've added two comments: one suggests refactoring related functions to improve long-term maintainability by reducing code duplication, and the other proposes a UI fix for spacing by using a CSS class, aligning with our styling guidelines.

fank added 2 commits March 7, 2026 19:12
Replace TargetIcon with a door/exit icon for mission end events,
better conveying that the mission has ended.
@fank fank merged commit 382fd8c into main Mar 7, 2026
3 checks passed
@fank fank deleted the fix/event-icons-and-styling branch March 7, 2026 18:21
fank added a commit that referenced this pull request Mar 7, 2026
* fix: add distinct icons and colors for capture/contested/terminal events

- Add FlagIcon for captured/capturedFlag events (blue)
- Use AlertTriangleIcon for contested events (orange)
- Use TerminalIcon for terminal hack events (orange)
- Remove invisible em dash separator from EndMissionEvent rows

* fix: use DoorExitIcon for EndMissionEvent events

Replace TargetIcon with a door/exit icon for mission end events,
better conveying that the mission has ended.

* refactor: merge eventIcon and eventColor into single eventStyle function
fank added a commit that referenced this pull request Mar 7, 2026
* fix: improve readability of force totals and event timestamps

Bump color from --text-dimmest to --text-dimmer for the force total
counts in the top bar and event timestamps in the side panel, as they
were too dark to read comfortably.

* fix: add distinct icons and colors for event types (#332)

* fix: add distinct icons and colors for capture/contested/terminal events

- Add FlagIcon for captured/capturedFlag events (blue)
- Use AlertTriangleIcon for contested events (orange)
- Use TerminalIcon for terminal hack events (orange)
- Remove invisible em dash separator from EndMissionEvent rows

* fix: use DoorExitIcon for EndMissionEvent events

Replace TargetIcon with a door/exit icon for mission end events,
better conveying that the mission has ended.

* refactor: merge eventIcon and eventColor into single eventStyle function

* fix: also improve readability of event weapon text
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant