Add move tags in the chessboard

[franciscoBSalgueiro]

No description provided.

[dav1312]

The circle is sometimes cut and I'm also sometimes getting a weird underline in the moves
Also I don't like the tag itself being text... it looks bad imho
What about an svg?

[franciscoBSalgueiro]

is this on linux? I could make it an svg.

[dav1312]

Yes I'm testing on linux

[franciscoBSalgueiro]

Yeah, webkitgtk really sucks compared to the windows and mac native webviews unfortunately.

[franciscoBSalgueiro]

please let me know if 92a6210 helps

[dav1312]

please let me know if 92a6210 helps

Looks much better!! 😄

Perhaps add a little drop shadow too? wdyt? I think it gives it an interesting sense of depth

This is what I used trying to imitate Lichess but it might not be the best way to do it

           <Avatar
             sx={{
               transform: "translateY(-40%) translateX(-50%)",
               zIndex: 100,
+              filter: "url(#shadow)",
+              overflow: "initial"
             }}
             radius="xl"
             color={color}
             variant="filled"
           >
             <svg viewBox="0 0 100 100" width="100%" height="100%">
+              <defs>
+                <filter id="shadow">
+                  <feDropShadow dx="0" dy="1" floodOpacity="0.3" stdDeviation="0"></feDropShadow>
+                </filter>
+              </defs>
               <g>{glyphToSvg[annotation]}</g>
             </svg>
           </Avatar>

Also, it looks like the size of the icons is not changing with the board size which can look funny

[franciscoBSalgueiro]

that shadow looks good thanks! the app already looks scuffed when resized to small sizes so I'll probably fix those icons sizes later