Patch: UI improvement

[vedansh-5]

📌 Fixes

Fixes #211

---

📝 Summary of Changes

Consistent labels
Proper spacing
Notes section changes
Show section changes
Hover title fix

---

📸 Screenshots / Demo (if UI-related)

---

✅ Checklist

• I’ve tested my changes locally
• I’ve added tests (if applicable)
• I’ve updated documentation (if applicable)
• My code follows the project’s code style guidelines

---

👀 Reviewer Notes

Add any special notes for the reviewer here

Summary by Sourcery

Improve the popup UI by standardizing label styles and spacing, fixing a hover title bug, consolidating the Notes section, and updating the extension version.

New Features:

• Add a Note section below the Scrum Report to clarify PR fetch logic and accuracy recommendations.

Bug Fixes:

• Fix hover title attribute on the home button (resolve issue UI Improvements #211).

Enhancements:

• Standardize label font weights, sizes, and spacing across radio buttons, date inputs, checkboxes, and buttons.
• Consolidate duplicate Notes block into a single styled container.
• Adjust call-to-action button icon padding and layout for consistency.

Build:

• Bump extension version to 2.0.0 in package.json and manifest.json.

[sourcery-ai]

Reviewer's Guide

This PR refactors the popup UI for better consistency by standardizing label fonts, spacing, and button layouts, fixes the home button hover title, introduces a revamped Notes section, and bumps the extension version to 2.0.0.

File-Level Changes

Change	Details	Files
Refined UI label styles and overall spacing	Updated label elements to use font-medium and text-xs classes Added consistent margin-left and gap utilities for checkboxes and radio groups Adjusted heading and container top margins for uniform spacing	src/popup.html
Fixed home button hover title and action button icon spacing	Removed unused data-i18n-title attribute from homeButton Added gap-2 and pl-1 classes to code/report action links Adjusted icon padding for consistent alignment	src/popup.html
Implemented revamped Notes section and removed duplicate	Removed old duplicated note container Inserted new bordered Notes block with updated list markup and translation keys	src/popup.html
Updated checkbox label text in Show section	Changed 'Open/Merged/Closed Labels' text to 'PRs Labels' Standardized label styling for showOpenLabel and showCommitsLabel	src/popup.html
Bumped extension version to 2.0	Updated version in package.json to 2.0.0 Updated manifest.json version to 2.0	package.json src/manifest.json

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#211	Ensure consistent font formatting for specified labels on Home and Settings screens.	✅
#211	Improve spacing between text and icons/images/symbols for specified UI elements.	✅
#211	Update layout and content of 'Fetch your contributions', 'Note', and 'Show' sections as described, including label changes, alignment, and removal of Note section from Settings screen.	✅

Possibly linked issues

• UI Improvements #211: The PR addresses UI improvements such as consistent labels and proper spacing, fixing issue UI Improvements #211.
• UI Improvements #211: The PR fixes UI issues related to font, spacing, notes, and show sections as described in the issue.
• UI Improvements #211: The PR improves the popup UI, aligning labels, spacing, and relocating the notes section as per the issue.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @vedansh-5 - I've reviewed your changes - here's some feedback:

• Inline style attributes (e.g. margin-left) break consistency with Tailwind—replace them with the appropriate utility classes.
• The Notes section uses

  tags inside a

  instead of
  • elements, so switch to proper list items for correct semantics.
  • Using arbitrary spacing classes like gap-[7px] can be confusing; consider sticking to the standard Tailwind spacing scale (e.g. gap-2 or gap-1.5).
  Prompt for AI Agents

  Please address the comments from this code review:
  ## Overall Comments
  - Inline style attributes (e.g. margin-left) break consistency with Tailwind—replace them with the appropriate utility classes.
  - The Notes section uses <p> tags inside a <ul> instead of <li> elements, so switch to proper list items for correct semantics.
  - Using arbitrary spacing classes like gap-[7px] can be confusing; consider sticking to the standard Tailwind spacing scale (e.g. gap-2 or gap-1.5).

  ---

  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.}

[vedansh-5]

@hpdang I have made the mentioned changes excluding the

Fetch your contributions
Put them all in one line: last week, previous day, and date selection

Please explain this, I could not see how you want it, if we have all of them in one line, custom date selection wouldn't look so good.
Thanks!

[hpdang]

@vedansh-5 I still see that Organization Name and Project Name look bold compare to rest

Regarding the "Fetch your contributions" section, Can we please try to put all date related to one line

• Align left, the first circle should align with Fetch and use the following options maybe: Previous day, last 7 day, from ....., to ...........

[vedansh-5]

@hpdang Thanks for the feedback!

Regarding the Organization Name and Project Name: all of them use the same style classes. In your screenshot it appears bolder, but on my end it renders uniformly - so it might be a local rendering issue on your side (browser/font/rendering engine).
As for the "Fetch your contributions" section: I tried keeping all date options on one line, but it doesn't look clean or usable -

. Even when I remove the boxes and puts a underline like you said, it would still take as much space.

[hpdang]

@mariobehling any feedback here?

[hpdang]

@vedansh-5 maybe we don't need the last 7 days, either previous day or if they want a period, they should select. What do you think?

[hpdang]

@vedansh-5 and for the Note part, what do you think about this "Pull requests may appear in your report based on recent activity by others, not just your own. Please review and edit the generated SCRUM to ensure accuracy before sharing."

[vedansh-5]

@vedansh-5 maybe we don't need the last 7 days, either previous day or if they want a period, they should select. What do you think?

We can get rid of last 7 days, its good for making weekly reports though.

[vedansh-5]

@vedansh-5 and for the Note part, what do you think about this "Pull requests may appear in your report based on recent activity by others, not just your own. Please review and edit the generated SCRUM to ensure accuracy before sharing."

Instead of both the points we can have this one, but this does not provide any description as to why this would happen.
or are you suggesting to replace one of the points with ^^

[vedansh-5]

@hpdang I have made the changes, please review, I haven't changed the notes yet, how do you want me to keep them? Thanks!

[hpdang]

@vedansh-5 I have the following suggestions:

Email subject

• The label can be: Project Name (used in email subject).
• Add a tooltip (hover text)
  This project name will appear in the subject line of your email as part of:
  "[Scrum] Project Name - Date”. Leave blank to skip.
• I think we do not need the name of a contributor in the subject line

Fetch contributions

• Move the date selection to the beginning of the line
• Use From and To instead of (start date, end date), the date insert box can be smaller

Notes

Replace the existing one with "Pull requests are fetched based on the most recent review activity by any contributor, not just your own. Please review and adjust the generated SCRUM report to ensure it accurately reflects your work before sharing."

Setting screen

• I remember there use to be a tooltip over GitHub token but it is not there anymore, can we please add it back?
• Is there already a space between the small checkbox and Enable Filtering? See my screenshot

[vedansh-5]

Removed the contributor name from subject line.

[vedansh-5]

@hpdang Made the suggested changes, please review, thanks.

[hpdang]

LGTM! Thank you

[hpdang]

@vedansh-5 one thing, when the Project Name is blank, the Compose Window Subject show "[Scrum] - - 20250728" (can we please remove this when it is bank?

[vedansh-5]

@vedansh-5 one thing, when the Project Name is blank, the Compose Window Subject show "[Scrum] - - 20250728" (can we please remove this when it is bank?

should this skip the subject generation at all?

[hpdang]

@vedansh-5 the subject should still be there with Scrum + Date

[vedansh-5]

@hpdang Made the required change.