Don't inherit host site css for our popup UI

[oxalorg]

The better popup is formatting differently on different sites as it's inherting css.

We should be able to stop this by setting some default styles on the root div of our popup.

[anirudhvarma12]

@oxalorg , what default styles are you planning to add? I can pick this one up.

[oxalorg]

@anirudhvarma12 I was thinking of not inhertting ANY properties at all.

Can you check this: https://developer.mozilla.org/en-US/docs/Web/CSS/all

We can probably do something like

betterDiv {
    all: unset;
}

That may remove the browser styling too? It's worth a shot.

If that doesn't work, we will have to manually override styles like link colors, margins, padding, font size, etc for all elements in our UI.

[anirudhvarma12]

@oxalorg , might make sense to inject a style tag for this? I was trying unset, but we would have to add the same for all elements. If we have style tags, we can do -

.better-ext-container * {
  all: unset;
}

[oxalorg]

Yup that would work. 👍