Added token label size setting

src/components/map/MapInteraction.js

@@ -17,6 +17,7 @@ import MapStageContext, {
   MapStageProvider,
 } from "../../contexts/MapStageContext";
 import AuthContext from "../../contexts/AuthContext";
+import SettingsContext from "../../contexts/SettingsContext";
 
 const wheelZoomSpeed = -0.001;
 const touchZoomSpeed = 0.005;
@@ -313,6 +314,7 @@ function MapInteraction({
   const mapImageRef = useRef();
 
   const auth = useContext(AuthContext);
+  const settings = useContext(SettingsContext);
 
   const mapInteraction = {
     stageScale,
@@ -357,11 +359,13 @@ function MapInteraction({
             />
             {/* Forward auth context to konva elements */}
             <AuthContext.Provider value={auth}>
-              <MapInteractionProvider value={mapInteraction}>
+              <SettingsContext.Provider value={settings}>
-                <MapStageProvider value={mapStageRef}>
+                <MapInteractionProvider value={mapInteraction}>
-                  {mapLoaded && children}
+                  <MapStageProvider value={mapStageRef}>
-                </MapStageProvider>
+                    {mapLoaded && children}
-              </MapInteractionProvider>
+                  </MapStageProvider>
+                </MapInteractionProvider>
+              </SettingsContext.Provider>
             </AuthContext.Provider>
           </Layer>
         </Stage>

src/components/token/TokenLabel.js

@@ -1,15 +1,25 @@
 import React, { useRef, useEffect, useState } from "react";
 import { Rect, Text, Group } from "react-konva";
 
+import useSetting from "../../helpers/useSetting";
+
 const maxTokenSize = 3;
 
 function TokenLabel({ tokenState, width, height }) {
+  const [labelSize] = useSetting("map.labelSize");
+
   const fontSize =
-    (height / 6 / tokenState.size) * Math.min(tokenState.size, maxTokenSize);
+    (height / 6 / tokenState.size) *
+    Math.min(tokenState.size, maxTokenSize) *
+    labelSize;
   const paddingY =
-    (height / 16 / tokenState.size) * Math.min(tokenState.size, maxTokenSize);
+    (height / 16 / tokenState.size) *
+    Math.min(tokenState.size, maxTokenSize) *
+    labelSize;
   const paddingX =
-    (height / 8 / tokenState.size) * Math.min(tokenState.size, maxTokenSize);
+    (height / 8 / tokenState.size) *
+    Math.min(tokenState.size, maxTokenSize) *
+    labelSize;
 
   const [rectWidth, setRectWidth] = useState(0);
   useEffect(() => {

src/modals/SettingsModal.js

@@ -1,15 +1,27 @@
 import React, { useState, useContext } from "react";
-import { Box, Label, Flex, Button, useColorMode, Checkbox } from "theme-ui";
+import {
+  Box,
+  Label,
+  Flex,
+  Button,
+  useColorMode,
+  Checkbox,
+  Slider,
+  Divider,
+} from "theme-ui";
 
 import Modal from "../components/Modal";
 
 import AuthContext from "../contexts/AuthContext";
 import DatabaseContext from "../contexts/DatabaseContext";
 
+import useSetting from "../helpers/useSetting";
+
 function SettingsModal({ isOpen, onRequestClose }) {
   const { database } = useContext(DatabaseContext);
   const { userId } = useContext(AuthContext);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [labelSize, setLabelSize] = useSetting("map.labelSize");
 
   async function handleEraseAllData() {
     localStorage.clear();
@@ -52,16 +64,30 @@ function SettingsModal({ isOpen, onRequestClose }) {
       <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
         <Flex sx={{ flexDirection: "column" }}>
           <Label py={2}>Settings</Label>
+          <Divider bg="text" />
+          <Label py={2}>Accesibility:</Label>
           <Label py={2}>
-            Light theme
+            <span style={{ marginRight: "4px" }}>Light theme</span>
             <Checkbox
               checked={colorMode === "light"}
               onChange={(e) =>
                 setColorMode(e.target.checked ? "light" : "default")
               }
-              pl={1}
             />
           </Label>
+          <Label py={2}>
+            Token Label Size
+            <Slider
+              step={0.5}
+              min={1}
+              max={3}
+              ml={1}
+              sx={{ width: "initial" }}
+              value={labelSize}
+              onChange={(e) => setLabelSize(parseFloat(e.target.value))}
+            />
+          </Label>
+          <Divider bg="text" />
           <Flex py={2}>
             <Button sx={{ flexGrow: 1 }} onClick={handleClearCache}>
               Clear cache

src/settings.js

@@ -27,8 +27,11 @@ function loadVersions(settings) {
       style: "galaxy",
     },
   }));
-  // v1.5.2 - Added full screen support for map
+  // v1.5.2 - Added full screen support for map and label size
-  settings.version(2, (prev) => ({ ...prev, map: { fullScreen: false } }));
+  settings.version(2, (prev) => ({
+    ...prev,
+    map: { fullScreen: false, labelSize: 1 },
+  }));
 }
 
 export function getSettings() {