diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index cc0d749..0b1aba5 100644
--- a/src/components/map/MapInteraction.js
+++ b/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 */}
-
-
- {mapLoaded && children}
-
-
+
+
+
+ {mapLoaded && children}
+
+
+
diff --git a/src/components/token/TokenLabel.js b/src/components/token/TokenLabel.js
index 74c5e9d..bc107fe 100644
--- a/src/components/token/TokenLabel.js
+++ b/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(() => {
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index 0a9316b..2cfde8c 100644
--- a/src/modals/SettingsModal.js
+++ b/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 }) {
+
+
+
+