4

This userscript, written for ViolentMonkey, reverts the question and answer upvotes on Stack Overflow so that they are almost identical to their previous design.

New Stack Overflow vote buttons: enter image description here

This user script changes them to: enter image description here

Link to userscript install: https://github.com/Tyler-H/SO-UserScripts/raw/master/OriginalVoteButtons.user.js

Raw code:

// ==UserScript==
// @name         Original Stack Overflow Vote Buttons
// @homepage     https://github.com/Tyler-H/SO-UserScripts/blob/master/OriginalVoteButtons.js
// @version      1.0
// @description  Reverts post vote buttons on Stack Overflow to the previous implementation, pre-2022-06-24
// @author       TylerH
// @match        https://stackoverflow.com/*
// ==/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>`);
})();

This is an inefficient implementation, I am sure; I rarely write JavaScript these days so there is undoubtedly room for improvement.

2
  • I just noticed this does not apply to posts in /review. I will try to update it in the future so that it affects those, too.
    – TylerH
    Jun 24 at 18:53
  • 1
    The relevant MSO post: Updated button styling for vote arrows: currently in A/B testing. Per the update there: "This experiment has concluded. We will update the community soon on next steps."
    – V2Blast Staff
    Jul 13 at 16:08

1 Answer 1

2

The arrows are too dark.

With the script:

1

Original arrows:

2


They also have a blue hover, which the original design didn't hove.

4
  • I did notice the darker color on light mode, I think that's a change on SO's side, since I think it's the a different color from what I applied while crafting it in dark mode (at least I think it is, I didn't confirm). The blue color hover is intentional for improving UX. These are both feature-requests rather than bugs, per se; I'll consider changing them. Considering the fact that SO's change of the styles in the first place is allegedly to comply with WCAG requirements, I'll probably check the contrast of the old vs the newer, darker buttons before changing them, as well.
    – TylerH
    Jun 24 at 20:04
  • That being said, do of course feel free to use a lighter value in your own copy of the script if that's the only thing you find issue with.
    – TylerH
    Jun 24 at 20:04
  • I don't think it's a change on SO's side... How could it be? The global colors haven't been redefined. Check what's happening on Meta, @TylerH; it seems the A/B test isn't applied there. I use the light mode, and I don't see any difference in color on the buttons on Meta.
    – Cody Gray
    Jun 25 at 0:11
  • @CodyGray Yes, it was the optical illusion of the color looking darker on a light background and lighter on a darker background. It has been fixed now.
    – TylerH
    Jul 4 at 14:58

You must log in to answer this question.

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