161
$\begingroup$

I suppose this isn’t such a big deal, but it seems to have become difficult to see visually if I’ve upvoted a post on math.stackexchange:

enter image description here

Compare this with the clear coloring on stackoverflow:

enter image description here

Has this been discussed? Though it’s not a big deal, it seems to be a change which has made the user interface slightly worse.

Maybe I’m just part of an A/B test and I don’t realize it.

$\endgroup$
9

2 Answers 2

47
$\begingroup$

This is not an A/B test - those happened a while ago and it has now been rolled out to all sub's. There has been a bunch of stink raised over it on https://meta.stackexchange.com/, but then that seems to be a place where a lot of stink is raised frequently.

It seems like there are some overall colors that make up a palette for each sub, and the arrow coloring is drawn from one of those. Math.se seems to be one for which the lack of contrast is significantly worse. I've posted in those meta.se questions about our particular issues.

(What follows is speculation.) It looks like they put a lot of time and energy into designing and testing this change. With that much sunk cost it seems unlikely that they'd "oops, sorry, rollback" the change. The only response I've seen from company people is "Thank you for bringing this to our attention. Our team is working on updating the colors of the button after voting on Meta sites so it will be much more visible." I've also seen somewhere where "near future" was mentioned as the timeline, though I can't seem to find that now. Use that as you will when deciding if you want to try to come up with your own work-around, or wait to see if/how it is "fixed".

$\endgroup$
5
  • 16
    $\begingroup$ “We love fixing stuff that wasn't broken!” $\endgroup$
    – MJD
    Jun 7, 2023 at 20:42
  • 1
    $\begingroup$ @MJD To be fair, a lot of people complain about people not voting 'enough' (for my most popular posts it's around 1 vote per 300 views). StackExchange claims this design helps with that, so I don't think it's fair to say they are changing stuff without reason. Whether it's a good change or not can be debated, but I think your attack was somewhat unfair. $\endgroup$ Jun 13, 2023 at 11:27
  • $\begingroup$ Thanks, that is a good point and I am glad you brought it up. Not just because of your service to truth, but also because it helps me feel better about the change. I am going to leave my comment up to provide context for your much better comment. $\endgroup$
    – MJD
    Jun 13, 2023 at 11:41
  • 1
    $\begingroup$ +1. I note the feedback from the company says "Our team is working on updating the colors of the button after voting on Meta sites", and indeed it looks like it's been fixed on meta sites - but still not on the math.se main site. $\endgroup$
    – N. Virgo
    Jun 14, 2023 at 2:11
  • $\begingroup$ @DavidMulder I wonder what if the increased voting statistics are simply from people who can’t see if they have voted, so they click the upvote button multiple times on the same post $\endgroup$
    – Nick Alger
    Jun 30, 2023 at 16:11
22
$\begingroup$

For the moment (given that it is highly unlikely the buttons will be modified soon), you can use a script to roll-back to the usual buttons.

For the sake of completeness, here's the full script which you can copy and paste to your script manager (for example, this one):

// ==UserScript==
// @name         Original Stack Overflow Vote Buttons
// @homepage     https://github.com/Tyler-H/SO-UserScripts/blob/master/OriginalVoteButtons.js
// @version      1.1
// @description  Reverts post vote buttons on Stack Exchange to the previous implementation, pre-2022-06-24
// @author       TylerH
// @match        https://*.stackoverflow.com/*
// @match        https://*.stackexchange.com/*
// @match        https://*.superuser.com/*
// @match        https://stackapps.com/*
// @match        https://*.serverfault.com/*
// @match        https://*.askubuntu.com/*
// @match        https://*.mathoverflow.net/*
// ==/UserScript==

(function() {
    let allbtns = document.querySelectorAll("button[class^='js-vote-']");
    let downsvg = document.querySelectorAll('.js-vote-down-btn .iconArrowDown');
    let upsvg = document.querySelectorAll('.js-vote-up-btn .iconArrowUp');
    let downpath = document.querySelectorAll('button.js-vote-down-btn svg.iconArrowDown path');
    let uppath = document.querySelectorAll('button.js-vote-up-btn svg.iconArrowUp path');
    
    // set attribute values for the SVG elements
    downsvg.forEach ( x => x.setAttribute('height','36'));
    downsvg.forEach ( x => x.setAttribute('width','36'));
    downsvg.forEach ( x => x.setAttribute('viewBox','0 0 36 36'));
    
    upsvg.forEach ( x => x.setAttribute('height','36'));
    upsvg.forEach ( x => x.setAttribute('width','36'));
    upsvg.forEach ( x => x.setAttribute('viewBox','0 0 36 36'));
    
    // set SVG path values to resize the SVGs themselves
    downpath.forEach ( x => x.setAttribute('d','M2 11h32L18 27 2 11Z'));
    uppath.forEach ( x => x.setAttribute('d','M2 25h32L18 9 2 25Z'));
    
//remove border & revert padding
allbtns.forEach ( x => x.setAttribute('style','border: 1px solid transparent !important; padding: 1px 4px'));

//revert hover styles
document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:hover { color: var(--blue-500) !important; background: none !important; }</style>`);
allbtns.forEach ( x => x.style.setProperty('background-color','transparent','important'));

//revert :focus styles
document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:focus { box-shadow: none; }</style>`);

//revert :active styles
document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:active { background: none }</style>`);

//de-emphasize color brightness of buttons while leaving brightness of score
//allbtns.forEach ( x => x.style.setProperty('color','rgb(105, 111, 117)',''));
document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].fc-black-700 { color: rgb(186, 191, 196) !important; }</style>`);
})();
$\endgroup$
11
  • 1
    $\begingroup$ Anybody know a way to use this with Firefox on Android? I couldn't find a Stylus add-on for there. And I didn't look for Greasemonkey/Tampermonkey - assumed they'd be even less likely to be available. $\endgroup$
    – JonathanZ
    Jun 1, 2023 at 16:12
  • 1
    $\begingroup$ @JonathanZsupportsMonicaC That's a good question, I don't know, but I didn't think about it much since I rarely use SE in my phone. $\endgroup$
    – Pedro Mod
    Jun 1, 2023 at 18:25
  • 1
    $\begingroup$ @JonathanZsupportsMonicaC: There are browsers for Android that allow running Tampermonkey, but the big ones (Chrome/Firefox/etc.) do not allow that. Quite unfortunate indeed. I can only imagine that on iPhone the situation is similar or worse. $\endgroup$
    – Asaf Karagila Mod
    Jun 1, 2023 at 18:33
  • 1
    $\begingroup$ Okay, thanks to you both. I guessed it was "no", but this seemed like a good place to ask. (For others who might come along, it seems like the bleeding-edge nightly build of Android Firefox allows all plug-ins, but i don't feel like switching to that.) $\endgroup$
    – JonathanZ
    Jun 1, 2023 at 18:47
  • 1
    $\begingroup$ @JonathanZsupportsMonicaC: I use Kiwi browser on Android whenever I need to use scripts related to mod work. Otherwise the default is Firefox on Android. $\endgroup$
    – Paramanand Singh Mod
    Jun 3, 2023 at 2:07
  • 1
    $\begingroup$ It would (probably) be possible to make this script into a bookmarklet that could be run by clicking on it, which would work with Firefox on Android. But this would be annoying. $\endgroup$
    – davidlowryduda Mod
    Jun 7, 2023 at 17:18
  • 1
    $\begingroup$ The script was working fine, but now it is doing something weird. It does not show the up arrow if the question/answer is upvoted (just a blank, no arrow at all); the arrow does show if one hovers with the mouse. I tried restarting Chrome but it made no difference. $\endgroup$ Jun 8, 2023 at 19:05
  • $\begingroup$ @MartinArgerami They changed the vote button colouring on meta sites; I expect that's it. $\endgroup$
    – wizzwizz4
    Jun 9, 2023 at 12:43
  • $\begingroup$ @wizzwizz4: thanks, but does that information help me solve the problem? $\endgroup$ Jun 9, 2023 at 18:26
  • 2
    $\begingroup$ @JonathanZ The latest version of Firefox for Android does now have TamperMonkey in its list of addons you can apply. I have it installed on my phone right now. $\endgroup$
    – trlkly
    Jun 10, 2023 at 23:01
  • $\begingroup$ @JonathanZ The above said, is there a Userstyle version of this? I'd much rather use CSS than use JavaScript. Even my userscripts that I make (and publish) do as much as they can with CSS rather than JavaScript, as it allows you to make changes before the page is actually rendered. $\endgroup$
    – trlkly
    Jun 10, 2023 at 23:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .