a. Instructions

1. Install https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld?hl=en
2. In JIRA, Add "Status" in the board -> settings -> card layout -> backlog
3. In the extension, add the code in the JS file below
4. In the extneions, add the CSS in the css file below
5. Reload the page

If you move something the styles will be reverted. So I suggest multi-moving tickets then reloading. It is probably fixable but I didn't do it yet.

b. JS.js

window.onload = function () { 
	console.log("loaded window");
	fix();
	
	var title = document.getElementById("ghx-view-pluggable")
	title.innerHTML = "<a class='aui-button ghx-actions-tools' onclick='fix()'>Fix labels</a>" + title.innerHTML;
}

function fix() {
	console.log("fixing");
	
var content = document.getElementById("ghx-content-group");
	console.log(content);
	
	var issueDivs = content.getElementsByClassName("ghx-issue-content")
	for( var i = 0; i < issueDivs.length; i++ ){
		var extraFields = issueDivs[i].getElementsByClassName("ghx-plan-extra-fields");
		extraFields[0].classList.add("ghx-plan-extra-fields-red");
		var extraContent = extraFields[0].innerText;

		extraContent = extraContent.replace(" weeks", "d");
		extraContent = extraContent.replace(" week", "d");		
		extraContent = extraContent.replace(" days", "d");
		extraContent = extraContent.replace(" day", "d");
		extraContent = extraContent.replace(" hours", "h");
		extraContent = extraContent.replace(" hour", "h");
		extraContent = extraContent.replace(" minutes", "m");
		extraContent = extraContent.replace(" minute", "m");
		extraContent = extraContent.replace(/\n/g, " ");
		console.log(extraContent);
		extraContent = extraContent.replace(/^0m · /, "");
		
		var spanClass = "";
		if( extraContent.includes("Ready To Test") ){
			spanClass = "readyToTest";
		}
		else if( extraContent.includes("In Production") ){
			spanClass = "inProduction";
		}
		else if( extraContent.includes("Open") ){
			spanClass = "open";
		}
		else if( extraContent.includes("For Release") ){
			spanClass = "forRelease";
		}
		else if( extraContent.includes("In Development") ){
			spanClass = "inDevelopment";
		}
		else if( extraContent.includes("Test Passed") ){
			spanClass = "testPassed";
		}
		else if( extraContent.includes("Failed Test") ){
			spanClass = "testFailed";
		}
		else if( extraContent.includes("In Code Review") ){
			spanClass = "codeReview";
		}
		else if( extraContent.includes("Blocked") ){
			spanClass = "blocked";
		}
		else{
			spanClass = "generic";
		}
		
		var child = " <span class='"+spanClass+"'>&nbsp;"+extraContent+"&nbsp;</span>";
		
		var mainField = issueDivs[i].getElementsByClassName("ghx-plan-main-fields");
		mainField[0].innerHTML += child;
		
		issueDivs[i].removeChild(extraFields[0]);
		
		if( spanClass == "inProduction" || 
			spanClass == "testPassed"   ||
			spanClass == "forRelease"   ){
			issueDivs[i].classList.add("muted");
		}
	}
}

c. css.css

.readyToTest{ 
	color: white;
	background-color: rgb(0, 82, 204);
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.inProduction, .forRelease{
	color: white;
	background-color: green;
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.inDevelopment{
	color: white;
	background-color: #B3C7B3;
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.testPassed{
	color: white;
	background-color: rgb(0, 82, 204);
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.testFailed, .blocked{
	color: white;
	background-color: #bc6060;
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.codeReview{
	color: white;
	background-color: #e88d25;
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.open{
	color: white;
	background-color: #c0c0c0;
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.generic{
	color: white;
	background-color: #c0c0c0;
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.inDevQueue{
	color: white;
	background-color: #c0c0c0;
	-webkit-border-radius: 4px;
	font-size: 10px;
	padding: 3px;
}

.muted{
	opacity: 0.25;
}

.muted:hover:{
	opacity: 1 !important;
}