Feature Request: When using an image and color, use color only as border.

[BlackDex]

Is your feature request related to a problem? Please describe.
I have access to multiple AWS Account of Multiple companies.
I try to differentiate between these companies I tend to use the main color of there logo as color of the account.
When i also add an image, some logo's completely disappear, because they have a single color.
I still want that color to be visible in the AWS Console layout, but not in the list of accounts.

Describe the solution you'd like
Add an option to use an outlining border for the accounts, so the logo's have a white/transparent background, but are outlined with the color configured. That way you can still have multiple colors and they are visible, but not as a default background.
This of course should only be done when there are both an image and color configured.

Describe alternatives you've considered
I tried to change the color to something which looks like it, or totally different, but the images still keep appearing strange, and within the AWS Console the color doesn't match the main Company color.

Additional context
n/a

Thanks for this extensions! An added option like this would be nice i think.

[XargsUK]

@BlackDex Above is a PR which I believe achieves what you are looking for.

New Option

I have added a new option called "Enable image border color":

The behaviour of this is that if enabled, and both an image and color are provided in the AESR config, then a 3px border is wrapped around the image.

Option Disabled

Option Enabled

Example Config Used

[Test / Color]
aws_account_id = 000000000001
role_name = exampleRole
color = f25800

[Test / Image]
aws_account_id = 000000000002
role_name = exampleRole
image = https://example.com/image.png

[Test / ImageColorBlack]
aws_account_id = 000000000003
role_name = exampleRole
color = 000000
image = https://example.com/image.png

[Test / ImageColorBlue]
aws_account_id = 000000000004
role_name = exampleRole
color = 2b31ee
image = https://example.com/image.png

Please could you confirm if this is what you meant?

[BlackDex]

@XargsUK, That looks exactly like I had in mind :).
Cool :).

[XargsUK]

Good stuff @BlackDex :) will leave it completely down to @tilfin as to whether that should be merged. Some modification had to be done to the tests, and it might not be something that the owner of the repo wants. If it's not, I'll create a branch on my fork of this repo, but I wouldn't be able to maintain it like @tilfin does <3

[tilfin]

If the background of the image is transparent, like the favicon in the AWS Management Console (https://console.aws.amazon.com/favicon.ico), it can still be achieved. It will look like the following:

I may consider a incorporating both color and images in the UI, as I don't want to switch the behavior entirely by a setting. I think it isn't good to shrink the icon by enclosing it with a border.

[BlackDex]

The problem with transparent background, or not a transparent background for that matter, is that if the logo has almost the same or exact same color as the one configured, you can't see the logo anymore.

The main reason is, that selecting the color of the logo as the same color to be used on the labels is to quickly see which accounts they belong too.

And, if the logo is not transparent, you will not see the color in the overview of accounts.
Using a border or maybe even a padding to the left or right even of that color makes it a bit more easier to see the difference of the specific accounts.

[XargsUK]

@tilfin in my PR, the border is applied based on the condition that the option is selected in the menu.

Could just have a “if option false, image and color provided, then bg color and image.”

This would meet all requirements. Though again, I understand that the additional option may add additional unneeded complexity.

Totally get that making the image smaller isn’t the best. A different option is to allow users to specify a variable like borderColor, and if that is passed, then it adds the border. This would remove the need for all things to have a border or no things have a border.

[tilfin]

You create a transparent area of 3px in circumference on a canvas of 20px in height and width, and draw an icon with an opaque background in an area of 17px in height and width within the area. That way you can achieve your goal.

One customer may have multiple accounts to manage, while another may only have one. Creating a setting to put a border on the latter account will only make the icon smaller.

Then, I don't think it is good to reference favicons directly from the outside. I think it is better to host it on your own.

[tilfin]

if the logo is not transparent, you will not see the color in the overview of accounts.
Using a border or maybe even a padding to the left or right even of that color makes it a bit more easier to see the difference of the specific accounts.

I would like to address this in due course without switching by setting.