Skip to content

Add extension icons and dynamic badge colors based on tab count#2

Merged
flapperz merged 6 commits intomainfrom
copilot/create-icon-and-set-badge-color
Jan 24, 2026
Merged

Add extension icons and dynamic badge colors based on tab count#2
flapperz merged 6 commits intomainfrom
copilot/create-icon-and-set-badge-color

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jan 24, 2026

Plan: Add Icon and Dynamic Badge Colors

  • Create minimal and unique icon for the extension (SVG format)
  • Update manifest.json to reference the SVG icon
  • Modify background.js to implement dynamic badge colors based on tab count:
    • < 25 tabs: bright green (pastel #A7F3D0)
    • < 50 tabs: dark green (pastel #6EE7B7)
    • < 75 tabs: yellow (pastel #FDE68A)
    • < 100 tabs: orange (#FB923C - more dramatic)
    • = 100 tabs: red (#F87171 - more dramatic)

  • Run code review and address feedback
  • Run security scan (no vulnerabilities found)
  • Create testing documentation
  • Address feedback: Change to SVG format with new minimal design
  • Address feedback: Make orange and red colors more dramatic

Summary

All requirements have been successfully implemented:

  1. Minimal SVG Icon: Created clean three-bar tally counter design in SVG format
  2. Dynamic Badge Colors: Implemented color scheme with more dramatic orange and red for higher tab counts
  3. Code Quality: Passed code review and security scans with no issues

The extension uses a single optimized SVG icon that scales for all sizes (16px, 48px, 128px), and the badge colors now provide better visual feedback with more vibrant warning colors.

Original prompt
  1. create minimal and unique icon for this extension
  2. set badge color with pastel pallete base on this criteria
    < 25 tabs bright breen
    < 50 tabs dark green
    < 75 tabs yellow
    < 100 tabs orange

= 100 tabs red


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 2 commits January 24, 2026 01:47
Co-authored-by: flapperz <16036114+flapperz@users.noreply.github.com>
Co-authored-by: flapperz <16036114+flapperz@users.noreply.github.com>
Copilot AI changed the title [WIP] Add unique icon and badge color settings for extension Add extension icons and dynamic badge colors based on tab count Jan 24, 2026
Copilot AI requested a review from flapperz January 24, 2026 01:51
@flapperz
Copy link
Copy Markdown
Owner

@copilot I want icon to be svg, make it minimal but new design this one look weird

Co-authored-by: flapperz <16036114+flapperz@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jan 24, 2026

@copilot I want icon to be svg, make it minimal but new design this one look weird

Changed to SVG format with a new minimal three-bar tally counter design. The icon now uses a single scalable SVG file (icon.svg) for all sizes.

Icon preview

Commit: 6d4cc19

Co-authored-by: flapperz <16036114+flapperz@users.noreply.github.com>
@flapperz flapperz marked this pull request as ready for review January 24, 2026 02:08
@flapperz
Copy link
Copy Markdown
Owner

@copilot make orange and red a little more dramatic

Co-authored-by: flapperz <16036114+flapperz@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jan 24, 2026

@copilot make orange and red a little more dramatic

Made the orange and red colors more dramatic:

  • Orange (< 100 tabs): #FB923C (was #FCD34D)
  • Red (>= 100 tabs): #F87171 (was #FCA5A5)

Updated badge colors

Commit: 34526a6

@flapperz flapperz merged commit 0d707b1 into main Jan 24, 2026
Copilot stopped work on behalf of flapperz due to an error January 24, 2026 02:11
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.

2 participants