Credit card logos for card vault items

Code Contributions (Archived)
1

Feature name:

  • Credit card logos for card vault items

Feature Description

Benefits:

  • This will make it easier to find a credit card in list, and look more elegant
  • Streamlines the interface with login items which also uses specific logos as icons

Clients / Repos Affected:

  • Web
  • Browser
  • Mobile
  • Desktop

Timeline to completion (estimate):

ETA: Q4/2021

Any input/ ok to start work? @tgreer @kspearrin

1 Like
2

Thanks @linusaarnio! Sounds good. Just a couple of items to note:

  • Currently, we donā€™t have those icons in the set, so youā€™ll want to create them to match the size/padding that we have today.
  • We do have an icon update forthcoming that may require a pause while things get merged, but there wonā€™t be any conflicting icons for cards.
  • Youā€™ll want to respect the ā€˜Hide Website Iconsā€™ setting within the clients, as some users may not want to flaunt their card brands :wink:
1 Like
3

Great, Iā€™ll get on it then!

Thanks for pointing out the ā€œHide website iconsā€-setting, I didnā€™t know about it from before :blush:

2 Likes
4

This is now done for the js clients, with credit card logos shown for all available brands, based on the brand the card is.

Images are a modified (changed size to look better in the 20x20 box for icons) version of Figma - Payment Methods Icon Set | A set of the 39 most used icons for your next e-commerce checkout form. With special attention pa... which is licenced under CC BY 4.0 by Arthur Chayka

Code is added in jslib, images in the respective client repos. Here are the PR:s:

  1. Select an image to display for credit cards based on the brand. by linusaarnio Ā· Pull Request #537 Ā· bitwarden/jslib Ā· GitHub
  2. https://github.com/bitwarden/browser/pull/2163
  3. Add credit card logos to allow displaying icons based on brand by linusaarnio Ā· Pull Request #1149 Ā· bitwarden/desktop Ā· GitHub
  4. Add credit card logos to allow displaying icons based on brand by linusaarnio Ā· Pull Request #1280 Ā· bitwarden/web Ā· GitHub

Screenshots can be found in client repo PR:s.

5 Likes
6

Great stuff! Thanks, @linusaarnio!

I think weā€™re close to a code freeze at the moment, but maybe @eliykat could provide more detail around review/merge timelines.

1 Like
7

The screenshots look great, @linusaarnio! The team is a bit snowed under with the upcoming release and a few community PRs already on the backlog, so I canā€™t give you any firm timeline for review, but weā€™ll ping you on Github once weā€™ve had a look. :slight_smile:

2 Likes
9

The plan is to have a release at the end of November and in the middle of December :slight_smile:

3 Likes
11

Iā€™m happy to announce that all PRā€™s have been reviewed and merged. We are now proceeding into QA and if no issues are found, this is going to be included in the Feb release.

@linusaarnio Thank you again for your great work on this!!

4 Likes
12

Closing this topic, as thanks to @linusaarnio the new card icons were included in the Feb release.

1 Like
13