Merge pull request #377 from robintown/spatial-audio-copy

Tweak spatial audio copy

src/input/Input.jsx

@@ -39,7 +39,18 @@ export function Field({ children, className, ...rest }) {
 
 export const InputField = forwardRef(
   (
-    { id, label, className, type, checked, prefix, suffix, disabled, ...rest },
+    {
+      id,
+      label,
+      className,
+      type,
+      checked,
+      prefix,
+      suffix,
+      description,
+      disabled,
+      ...rest
+    },
     ref
   ) => {
     return (
@@ -82,6 +93,7 @@ export const InputField = forwardRef(
           {label}
         </label>
         {suffix && <span>{suffix}</span>}
+        {description && <p className={styles.description}>{description}</p>}
       </Field>
     );
   }

src/input/Input.module.css

@@ -118,13 +118,15 @@
 .checkboxField {
   display: flex;
   align-items: flex-start;
+  flex-wrap: wrap;
 }
 
 .checkboxField label {
   display: flex;
   align-items: center;
   flex-grow: 1;
-  font-size: 13px;
+  font-size: 15px;
+  line-height: 24px;
 }
 
 .checkboxField input {
@@ -176,3 +178,9 @@
   color: var(--alert);
   font-weight: 600;
 }
+
+.description {
+  color: var(--secondary-content);
+  margin-left: 26px;
+  width: 100%; /* Ensure that it breaks onto the next row */
+}

src/settings/SettingsModal.jsx

@@ -87,9 +87,10 @@ export const SettingsModal = (props) => {
           <FieldRow>
             <InputField
               id="spatialAudio"
-              label="Spatial audio (experimental)"
+              label="Spatial audio"
               type="checkbox"
               checked={spatialAudio}
+              description="This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
               onChange={(e) => setSpatialAudio(e.target.checked)}
             />
           </FieldRow>