Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Proposal: Make several icons consistent with Lepton style #962

Open
Aleksandra0056 opened this issue Aug 12, 2024 · 8 comments
Open

Proposal: Make several icons consistent with Lepton style #962

Aleksandra0056 opened this issue Aug 12, 2024 · 8 comments
Labels
Class::Icon Icon for panels, menus, libraries Issue::Enhancement New feature or request

Comments

@Aleksandra0056
Copy link
Contributor

Aleksandra0056 commented Aug 12, 2024 •
edited
Loading

Is your feature request related to a problem?

I found many icons which are thick (thicker than usual), older (Photon-like) or icons that don't fit into other menu icons.

For the Firefox help panel sub-menu:

  • Share ideas and feedback... | Note: The paper plane icon simply doesn't fit with other icons because it's thick and filled.
  • Troubleshoot Mode... | Note: The two hammers icon is used for service workers and it's also Photon.
  • More troubleshooting information | Note: The icon is indeed Proton, but it doesn't fit into this menu since it is a 3-dots icon with a completely different height and style than other icons.
  • Report deceptive site | Note: The filled warning icon should be replaced with a non-filled variant.

For the Extensions page gear menu:

  • Check for updates | Note: The two arrows icon itself is good, but it is an older and thick Photon icon, so it should be re-drawn.
  • Install Add-on from File... | Note: The rectangle icon with arrow itself is good, but it's an older and thick Photon icon, so it should be re-drawn.
  • Update Add-ons Automatically... | Note: The timer icon itself is good, but it's an older and thick Photon icon, so it should be re-drawn.
  • Reset All Add-ons to Update Manually | Note: The two hammers icon is used for service workers, is Photon and doesn't fit into this item.

The solution I'd like

My proposed replacements for icons are:

Share ideas and feedback...
feedback

Why? This icon is indeed used for closed captions, but it fits better with other menu icons than the paper plane icon.

Troubleshoot Mode...
troubleshoot

Why? Because the wrench icon better fits with the "Troubleshoot mode..." item than the two hammers icon.

I made this wrench icon myself 1.5 months ago, but you should re-create it or create similar since this icon file itself doesn't support a dark theme, because I'm not good with Inkscape.

More troubleshooting information
troubleshoot_more

Why? This icon is indeed used for the reader, but it better fits to "More troubleshooting information" item and other menu icons than the 3-dots icon.

Report deceptive site
warning

Why? This icon is basically the same as the actual, but it's non-filled and it better fits into the "Report deceptive site" item

Screenshots or video

Actual icons in the Firefox help panel sub-menu:
Screenshot 2024-08-12 173729

Actual icons in the Extensions page gear menu:
Screenshot 2024-08-12 173903

Alternatives I've considered

No response

Additional context

No response
@Aleksandra0056 Aleksandra0056 added the Issue::Enhancement New feature or request label Aug 12, 2024
@Aleksandra0056
Copy link
Contributor Author

Aleksandra0056 commented Aug 12, 2024 •
edited
Loading

I also forgot to note, that this icon is better for the "Reset All Add-ons to Update Manually" item in the Extensions page gear menu:
reload

It is a reload icon but it is a Proton icon, unlike two hammers which is a Photon icon.

@Aleksandra0056
Copy link
Contributor Author

Aleksandra0056 commented Aug 16, 2024 •
edited
Loading

By the way, this is where I found inspiration for a new icon for "Share ideas and feedback...". It was in Windows 7 Builds 6801 and 7000 as a feedback icon.

I know these two designs are completely different but I want to prove that the closed captions icon is suitable for the "Share ideas and feedback..." item in Firefox help menu.

640px-Windows7-6 1-6801-Desktop

@Aleksandra0056
Copy link
Contributor Author

Aleksandra0056 commented Aug 25, 2024 •
edited
Loading

Here are another icons inconsistent with Lepton style they are "Dictionaries" and "Languages" which use Photon icons.

Except for inconsistency, these icons are also exactly the same, but I think, that icons for "Dictionaries" and "Languages" should be unique.

Screenshot:

Screenshot 2024-08-25 124158

zapSNH added a commit to zapSNH/lepton-icons that referenced this issue Sep 1, 2024
@zapSNH
Icons for black7375/Firefox-UI-Fix#962
2177bae 
* 1.25px import icon (from Photon)
* 1.25px stopwatch icon (from Photon)
* 1.25px refresh icon (from Acorn)
* 1.25px update circle icon (from Acorn)
@zapSNH
Copy link
Contributor

zapSNH commented Sep 1, 2024

I also forgot to note, that this icon is better for the "Reset All Add-ons to Update Manually" item in the Extensions page gear menu: reload

It is a reload icon but it is a Proton icon, unlike two hammers which is a Photon icon.

This icon seems to similar to the Check for Updates icon imo. I think the current icon for the check for updates menu item should be used for the reset all addons to update automatically (since the refresh icon sorta indicates a 'reset') menu item and a new icon should be used for the check for updates menu item (like this one).

@black7375 black7375 added the Class::Icon Icon for panels, menus, libraries label Sep 3, 2024
black7375 pushed a commit that referenced this issue Sep 23, 2024
@zapSNH @black7375
Icons for #962
4c78d5c 
* 1.25px import icon (from Photon)
* 1.25px stopwatch icon (from Photon)
* 1.25px refresh icon (from Acorn)
* 1.25px update circle icon (from Acorn)
@Aleksandra0056
Copy link
Contributor Author

Aleksandra0056 commented Sep 23, 2024 •
edited
Loading

This is my proposal for the "Dictionaries" (i.e. book.svg) and "Languages" (i.e. translations.svg) icons within the about:addons sidebar which I mentioned in my previous comment. No additional icons are needed since book.svg and translations.svg are from the Firefox UI Fix icons folder.

Screenshot 2024-09-23 163304

I implemented the icons in this screenshot using userContent.css as I finally learned some very basic CSS codes.

@Aleksandra0056
Copy link
Contributor Author

Aleksandra0056 commented Sep 24, 2024 •
edited
Loading

In commit 4c78d5cd9d38dba951756fff7939f75184f921ba were the icons implemented, however, the about:addons gear button menu is still using the old icons for items "Install Add-on From File...", "Update Add-ons Automatically" and "Reset All Add-ons to Update Manually":

Screenshot 2024-09-24 125620

I investigated and I found, that paths weren't updated in the chrome\src\icons\_addon_page.scss file to the corresponding icons.

The "Check for Updates" icon was updated correctly.

@Aleksandra0056
Copy link
Contributor Author

Aleksandra0056 commented Oct 9, 2024 •
edited
Loading

I found another inconsistent icon. It's the "pin-tab.svg" which is thick when compared to its unpin variant. The "pin-tab.svg" should use the same thickness as "unpin-tab.svg".

The "pin-tab.svg" icon (incorrect thickness):
pin-tab

The "unpin-tab.svg" icon (correct thickness):
unpin-tab

@Aleksandra0056
Copy link
Contributor Author

The "mute tab" and "unmute tab" icons are very small when compared to other tab context menu icons.

I disabled Tab Mix Plus in my Firefox for better illustration:

Mute tab:

Screenshot 2024-10-09 190059

Unmute tab:

Screenshot 2024-10-09 190115

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Class::Icon Icon for panels, menus, libraries Issue::Enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@black7375 @Aleksandra0056 @zapSNH