Didn't see this before I opened #416. My solution was a lot "dumber" in that I just adjust the opacity, so fixing up the general look might be the better way to go here.

I think it looks a little odd right now in dark mode on a skinny screen. Maybe too much padding?

Is this better?

{
  position: absolute;
  bottom: 2px;
  right: 2px;
  padding: 2px;
  font-size: 1em;
  color: white;

  /* I didn't change anything else */
}

@rsammelson of the two of yours, I like the skinnier better! But that's just my opinion! But I'm honestly not the guy that anybody goes to for UX decisions, so I think this is better decided by others.

@mdecourcy the first image I took was of yours, the second is a modification of yours.

Here is mine:

@GitBarns would you like to weigh in here as well?

Also just found a compassOutline which more closely resembles apollo.

Since the compass icon is for Safari, and we target other platforms as well, I would prefer to keep the globe.

Alright I messed with what you had some more and here's what I came up with:

I haven't committed it yet but if I should let me know.

@rsammelson they all look pretty good to me! Wonder if we should take this a step deeper, and make background/icon color dependent on if the user has light/dark mode enabled?

@mdecourcy, that's what I did. That's why it looks different between the two modes. I probably was confusing again but those pictures are all from the same code.

Oh, awesome! Yeah I'd say commit that.

Alright, see mdecourcy#3.

lgtm, merging

I can't believe I forgot to format it 🤦🏼‍♂️

@mdecourcy I made some adjustments- switched out the icon for the "link" icon like we have in the embed component. This makes it consistent which is nice. Check out out and lmk what you think-

Looks good to me @aeharding !

What does it look like in dark mode? Looks good to me.