Filter button doesn't use correct color

[aaronraimist]

The Explore button right next to it uses timeline-text-secondary-color for its text color but the Filter button text color is always white no matter what custom theme variables you use.

The Filter button should use timeline-text-secondary-color for its text color.

[ThobyV]

Hello, I'm an aspiring GSOC 2020 candidate with experience building react applications. May I be assigned to this issue?

[aaronraimist]

Sure you are welcome to work on it.

[Infinity-Intellect]

@aaronraimist Has this been fixed already ? Isn't it how it's supposed to be as in the picture below ? If there is another way to reproduce the issue, please let me know, I would also like have a go at this issue.

[aaronraimist]

No it is not fixed. You have to be using a custom theme to be able to notice it.

For example it is easy to notice using this theme: https://raw.githubusercontent.com/aaronraimist/riot-web-themes/master/Geeko%20Dark/Geeko%20Dark.json

You can install custom themes with matrix-org/matrix-react-sdk#4148

[aaronraimist]

The file you'll probably want to edit to fix this is https://github.com/matrix-org/matrix-react-sdk/blob/develop/res/themes/light-custom/css/_custom.scss

[ThobyV]

Ok thank you @aaronraimist I am working on it I am hoping to send PR as soon as possible. I will be sure to comment on this thread for guidelines.

[Infinity-Intellect]

@aaronraimist The custom theme URL text box is not getting enabled for me. How to get it enabled? I'm not able to get it from the link you mentioned above to 'install custom themes'.

[fooness]

I fear this cannot be fixed in matrix-react-sdk/blob/develop/res/themes/light-custom/css/_custom.scss …

The search box has no color properties assigned in the first place, so this needs to be added in, I guess, matrix-react-sdk/res/css/structures/_SearchBox.scss first and then the scss variables would need to be assigned css variables in matrix-react-sdk/blob/develop/res/themes/light-custom/css/_custom.scss …

Also, I guess, some hover properties would need to be defined, like for example also for the explore button in https://github.com/matrix-org/matrix-react-sdk/blob/develop/res/css/structures/_LeftPanel.scss#L159-L161 … the scss variable used here (for both elements), in my opionion, should NOT be $primary-bg-color but rather something new like $button-highlight-color or something existing like $accent-color … because there’s people who don’t want the side bar to have a different background than the timeline.

[fooness]

EDIT: I fear the approach below does not work as the color is indeed overwritten by some other seclector …

In matrix-react-sdk/res/css/structures/_SearchBox.scss, add color: $notice-secondary-color; at two positions.

.mx_SearchBox {
    color: $notice-secondary-color;
    flex: 1 1 0;
    min-width: 0;

    &.mx_SearchBox_blurred:not(:hover) {
        background-color: transparent;
    }

    .mx_SearchBox_closeButton {
        color: $notice-secondary-color;
        cursor: pointer;
        background-image: url('$(res)/img/icons-close.svg');
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        background-position: center;
        padding: 9px;
    }
}

The same can already be found for the explore button/icon in matrix-react-sdk/res/css/structures/_LeftPanel.scss …

This does not, yet, fix the color of the search ICON. Not sure where this icon is defined …

[fooness]

Same applies to Filter room members in member list, this also does not respect the color definitions. Probably to be solved the same way as the other filter button/input …

[fooness]

Unfortunately I don’t quite figure out how to solve this. Help wanted and needed. Thank you!

[t3chguy]

Currently it uses the svg as a background image, it'd need to be changed into using an svg css mask if you want its colour to be changeable in css.

[fooness]

@t3chguy Hm, not sure on how to correctly convert this. I tried, in res/css/_common.css:

input[type=text].mx_textinput_icon,
input[type=search].mx_textinput_icon {
    padding-left: 36px;
    //background-repeat: no-repeat;
    //background-position: 10px center;
    //color: $notice-secondary-color;
    mask: url('$(res)/img/feather-customised/search-input.svg');
    mask-repeat: no-repeat;
    mask-position: 10px center;
    background-color: $notice-secondary-color;
}

// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search {
    //background-image: url('$(res)/img/feather-customised/search-input.svg');
    //background-color: $notice-secondary-color;
    color: $notice-secondary-color;
}

But that results in the placeholder/input text not being seen:

PS: The Explore button has the following scss. I tried if with adding a before to the class above, but that also didn’t work.

    .mx_AccessibleButton {
        color: $notice-secondary-color;
        […]

        &::before {
            cursor: pointer;
            mask: url('$(res)/img/explore.svg');
            mask-repeat: no-repeat;
            mask-position: center center;
            content: "";
            left: 14px;
            top: 10px;
            width: 16px;
            height: 16px;
            background-color: $notice-secondary-color;
            position: absolute;
        }
    }

[t3chguy]

yeah so it has to be on the ::before selector to not override the field itself.

[fooness]

Tried it exactly like it’s for the Explore button, but that didn’t work. Let me retry and send a screenshot of the result. If I remember correctly, the icon just was not displayed at all.

[t3chguy]

You might need to mess with position relative on the parent and position absolute with a top:0, left:0 on the ::before

[fooness]

I fear there’s no ::before for <input> elements …

[fooness]

Conclusion, for now: I don’t think there’s much we can do in CSS alone. Maybe some HTML re-structuring would be needed, splitting .mx_textinput_icon and .mx_textinput_search in two seperate elements …

Hopefully someone else will be able to fix this.

[turt2live]

Should hopefully be fixed in the new room list (once custom themes are supported).