Removed single character limit for token labels and added sizing for token size

src/components/map/MapToken.js

@@ -66,10 +66,8 @@ function MapToken({ token, tokenState, tokenSizePercent, className }) {
             data-id={tokenState.id}
             ref={imageRef}
           />
-          {tokenState.statuses && (
-            <TokenStatus statuses={tokenState.statuses} />
-          )}
-          {tokenState.label && <TokenLabel label={tokenState.label} />}
+          {tokenState.statuses && <TokenStatus token={tokenState} />}
+          {tokenState.label && <TokenLabel token={tokenState} />}
         </Box>
       </Box>
     </Box>

src/components/token/ProxyToken.js

@@ -176,10 +176,10 @@ function ProxyToken({
           }}
         />
         {tokens[tokenId] && tokens[tokenId].statuses && (
-          <TokenStatus statuses={tokens[tokenId].statuses} />
+          <TokenStatus token={tokens[tokenId]} />
         )}
         {tokens[tokenId] && tokens[tokenId].label && (
-          <TokenLabel label={tokens[tokenId].label} />
+          <TokenLabel token={tokens[tokenId]} />
         )}
       </Box>
     </Box>,

src/components/token/TokenLabel.js

@@ -1,48 +1,57 @@
 import React from "react";
-import { Image, Box, Text } from "theme-ui";
+import { Box, Text } from "theme-ui";
 
-import tokenLabel from "../../images/TokenLabel.png";
-
-function TokenLabel({ label }) {
+function TokenLabel({ token }) {
   return (
     <Box
       sx={{
         position: "absolute",
-        transform: "scale(0.3) translate(0, 20%)",
+        transform: `scale(${0.3 / token.size}) translate(0, 20%)`,
         transformOrigin: "bottom center",
         pointerEvents: "none",
         width: "100%",
-        display: "flex", // Set display to flex to fix height being calculated wrong
-        flexDirection: "column",
+        height: "100%",
       }}
     >
-      <Image sx={{ width: "100%" }} src={tokenLabel} />
+      {/* Use SVG so text is scaled with token size */}
       <svg
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-        }}
         viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg"
+        width="100%"
+        height="100%"
+        style={{ overflow: "visible" }}
       >
-        <foreignObject width="100%" height="100%">
-          <Text
-            as="p"
-            variant="heading"
-            sx={{
-              // This value is actually 66%
-              fontSize: "66px",
-              width: "100px",
-              height: "100px",
-              textAlign: "center",
-              verticalAlign: "middle",
-              lineHeight: 1.4,
-            }}
-            color="hsl(210, 50%, 96%)"
-          >
-            {label}
-          </Text>
+        <foreignObject
+          width="100%"
+          height="100%"
+          style={{ overflow: "visible" }}
+        >
+          <Box sx={{ width: "100%", height: "100%", position: "relative" }}>
+            <Text
+              as="p"
+              variant="heading"
+              sx={{
+                fontSize: "66px",
+                textAlign: "center",
+                verticalAlign: "middle",
+                lineHeight: 1.4,
+                whiteSpace: "nowrap",
+                minWidth: "100%",
+                display: "inline-block",
+                position: "absolute",
+                top: 0,
+                left: "50%",
+                transform: "translateX(-50%)",
+                borderRadius: "66px",
+                border: "2px solid",
+                borderColor: "muted",
+              }}
+              bg="overlay"
+              px={4}
+            >
+              {token.label}
+            </Text>
+          </Box>
         </foreignObject>
       </svg>
     </Box>

src/components/token/TokenMenu.js

@@ -42,16 +42,13 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
   const [tokenMaxSize, setTokenMaxSize] = useState(defaultTokenMaxSize);
 
   function handleLabelChange(event) {
-    // Slice to remove Label: text
     const label = event.target.value;
-    if (label.length <= 1) {
-      setCurrentToken((prevToken) => ({
-        ...prevToken,
-        label: label,
-      }));
+    setCurrentToken((prevToken) => ({
+      ...prevToken,
+      label: label,
+    }));
 
-      onTokenChange({ ...currentToken, label: label });
-    }
+    onTokenChange({ ...currentToken, label: label });
   }
 
   function handleStatusChange(status) {
@@ -230,7 +227,7 @@ function TokenMenu({ tokenClassName, onTokenChange, tokens, disabledTokens }) {
             Size:
           </Text>
           <Slider
-            value={currentToken.size}
+            value={currentToken.size || 1}
             onChange={handleSizeChange}
             step={1}
             min={1}

src/components/token/TokenStatus.js

@@ -3,7 +3,7 @@ import { Box } from "theme-ui";
 
 import colors from "../../helpers/colors";
 
-function TokenStatus({ statuses }) {
+function TokenStatus({ token }) {
   return (
     <Box
       sx={{
@@ -13,7 +13,7 @@ function TokenStatus({ statuses }) {
         pointerEvents: "none",
       }}
     >
-      {statuses.map((status, index) => (
+      {token.statuses.map((status, index) => (
         <Box
           key={status}
           sx={{
@@ -21,7 +21,7 @@ function TokenStatus({ statuses }) {
             height: "100%",
             position: "absolute",
             opacity: 0.8,
-            transform: `scale(${1 - index / 10})`,
+            transform: `scale(${1 - index / 10 / token.size})`,
           }}
         >
           <svg
@@ -35,7 +35,7 @@ function TokenStatus({ statuses }) {
               cy={50}
               fill="none"
               stroke={colors[status]}
-              strokeWidth={4}
+              strokeWidth={4 / token.size}
             />
           </svg>
         </Box>