Better scrollbars for desktop browsers

[katriellucas]

Add better UI style for scrollbars on Chromium and Firefox based browser. For Firefox:

html, .input, .header__nav, .flexList__inner {
  scrollbar-width: thin;
  scrollbar-color: $light transparent;
}

can also be made, avoiding the "*" selector, but I'm not sure if these are all the elements that use scrollbars, there is also the option of creating an entire new class just for scrollbars.

Here some images taken on Windows 10, OLD ➡️ NEW.

[coveralls]

Pull Request Test Coverage Report for Build 555

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 46.547%

---

Totals
Change from base Build 550:	0.0%
Covered Lines:	448
Relevant Lines:	772

---

💛 - Coveralls

[electerious]

Those scrollbars are terrible. Thanks for fixing them. Will take a closer look at it next week 😊

[electerious]

macOS/iOS only shows scrollbars when necessary. Custom styles force show the scrollbars making them always visible. That doesn't look good on Apple devices.

Before -> After the fix

I guess that the only way to fix this is to detect Windows, add a class to the html/body and then apply the custom styles: https://stackoverflow.com/questions/8493589/is-there-a-css-media-query-to-detect-windows/8494351

[katriellucas]

Oof, I was hoping Safari would still maintain his hiding behavior as it's just styling... well then, it's hard for me to test on, don't have the device, but I feel like it's easier to detect just Safari (or apple devices) instead of Windows, Linux and the other distros. Before going the JavaScript path, i will try something else with CSS, will keep you updated on this PR if i ever find any alternative solution.

Maybe something like:

• var not_apple
• if (not_apple = true) { add scrollbars }

---

@electerious do the always visible behavior also happens on iOS? It hides normally on my Android.

[katriellucas]

For the JS solution, the below code should do (if it's a Mac only thing), just not sure where I put it. 😅

void function scrollbars() {
  if (navigator.appVersion.indexOf("Mac")!=1) {
    var style = document.createElement('style');
    style.innerHTML = `
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, .5);
            border-radius: 3px;
        }
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, .5) transparent;
        }
    `;
    document.head.appendChild(style);
  }
}();

[electerious]

Info: The PR is still on my list, but I'm not sure when I have the time to implement it. Will do it like you suggested, but using a class added via JS.

[electerious]

It's on the develop branch. Please let me know if it's working because I can't test it on Windows!

I've ended up using the following JS:

useEffect(() => {
	const isWindows = navigator.platform.includes('Win') === true
	if (isWindows === false) return

	// Use custom scrollbars on Windows because they look ugly
	document.body.classList.add('customScrollbar')
	return () => document.body.classList.remove('customScrollbar')
}, [])

and CSS:

.customScrollbar {

	$size: 6px;

	::-webkit-scrollbar {
		width: $size;
		height: $size;
		z-index: 1000;
	}

	::-webkit-scrollbar-track {
		background: transparent;
	}

	::-webkit-scrollbar-thumb {
		background-color: rgba(255, 255, 255, .5);
		border-radius: $size/2;
	}

	::-webkit-scrollbar-corner {
		display: none;
	}

	* {
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, .5) transparent;
	}

}

[katriellucas]

For some reason, I can't deploy the develop branch on Heroku. Have tried different ways of doing it. Cloning, CLI, Heroku Button + changing to develop... this is really weird because I'm using the exactly same ENV VARS of my last test... Also, the Master Branch still builds normally, so I think something may have broke Heroku. Regard the code, it looks good. 👍

I will see if I made some error on the process, but I don't believe so, it would be nice if someone could also test this.

[electerious]

No problem! Just let me know when you get the same issue on master after the merge. Will do so this weekend.

[electerious]

Had the same issue. The Docker build was broken because the dist folder was part of the .dockerignore and Ackee failed to build the static files inside a container. The issue should be resolved now.