Fix icon alignment for show/hide outdated link on resolved conversation

[CirnoT]

Before:

After:

[silverwind]

Better than before, but it does not look quite vertical center inside the box to me. Maybe some flexbox centering would help.

Also there's a border-radius issue on the bottom where the white background cuts into the border-radius of the box. Maybe you can either remove the background or set border-radius on the element with the background.

[CirnoT]

Better than before, but it does not look quite vertical center inside the box to me. Maybe some flexbox centering would help.

Wasn't supposed to fix that actually, just alignment between text and icon.

Also there's a border-radius issue on the bottom where the white background cuts into the border-radius of the box. Maybe you can either remove the background or set border-radius on the element with the background.

I see it, will try later and open another PR if I manage to get it right

[silverwind]

Fine with me but I think we want to group related fixes together as less PRs is less work :)

[CirnoT]

Yes but it's not really an easy fix, because the issue is on .segment within .segments, and I can't override background there either because arc-green depends on changing background of .segment, so I would have to add another hack for this specific element there.

Also setting border radius is not a proper fix because if you look closely there, the actual bottom border line is thinner than it should be.

The best I can come up with so far is

& > .segment {
    margin-bottom: .02em;
}

[CirnoT]

Also setting border on first .segment breaks when comment is expanded. Ultimately the issue is caused by the fact that last .segment element is hidden, and that's the one that Fomantic applies border onto.

[silverwind]

That border radius issue is tricky because fomantic uses

.ui.segments:not(.horizontal) > .segment:last-child

to fix the border radius but :last-child matches a hidden segment. I don't think this can be solved via CSS.

What we could do is remove background from .segment in both themes via an important rule.

[CirnoT]

It makes the segment same color as background on arc-green however, which is definitely not desired.

[silverwind]

Generally I'd say arc-green has no business setting a different background there if the light theme also doesn't do it, but I guess these parts need a rework anyways.

[CirnoT]

The problem is that borders are generally less visible on arc-green, so it makes it harder to notice and is compensated with slight variations in background color.

Designing dark theme on top of light one is not an easy task, I'd say arc-green is doing exceptionally well for what it has to work with.

[CirnoT]

if the light theme also doesn't do it

Technically it does, the background isn't inherited but explicitly set on element to #fff

[silverwind]

Designing dark theme on top of light one is not an easy task, I'd say arc-green is doing exceptionally well for what it has to work with.

I think it's doing rather bad actually, contrast issues all over the place and many small issues. I plan to eventually auto-generate arc green and a proper dark theme using https://github.com/silverwind/remap-css which is just a css color remapping but I still have a few TODOs on that module before I can start on it.

[silverwind]

overflow:hidden on .segments could work to solve the border radius but it's kind of dangerous and can have side effects. Maybe add a collapsed class to it (probably in js) and then do .timeline-item .segments.collapsed {overflow: hidden}.

[CirnoT]

Will take second attempt at solving it later, but don't want to block this PR either.

[techknowlogick]

ping LG-TM