onitama icon indicating copy to clipboard operation
onitama copied to clipboard

improve selected card visibility

Open jaythomas opened this issue 4 years ago • 3 comments
trafficstars

Resolves #3.

Add extra border around the selected card to improve visibility. I couldn't get the backend and frontend to talk via websocket in order to test this, but I believe this change should do the trick.

jaythomas avatar Aug 10 '21 04:08 jaythomas

Thank you for putting in a PR!
I just tried this change out locally, but found that the border radius didn't apply to the outline No border radius on outline

Would you be able to change it so that the corners of the box are still rounded?

PS. An easy way to check out the UI without getting the backend running is by using Local Multiplayer (http://localhost:3000/#/l/) where you control both players.

jackadamson avatar Aug 10 '21 08:08 jackadamson

Oh, and one thing that I noticed while initially trying out designs was that changing the border width when selected causes the div to grow, changing the layout of the cards. Make sure that selecting a card doesn't move it (or the other card)

jackadamson avatar Aug 10 '21 08:08 jackadamson

@jackadamson I considered this and that's why I added an outline instead of increasing the border. Same visual effect without mutating spacing.

jaythomas avatar Aug 10 '21 13:08 jaythomas