[2.5] Implement Font Size Adjustments

src/components/builder/right/RightSidebar.js

@@ -10,7 +10,7 @@ import Fonts from './sections/Fonts';
 import Layout from './sections/Layout';
 import Settings from './sections/Settings';
 import Templates from './sections/Templates';
-import FontSizes from './sections/FontSizes';
+import FontSize from './sections/FontSize';
 
 const getComponent = (id) => {
   switch (id) {
@@ -28,8 +28,8 @@ const getComponent = (id) => {
       return Settings;
     case 'about':
       return About;
-    case 'font-sizes':
-      return FontSizes;
+    case 'font-size':
+      return FontSize;
     default:
       throw new Error();
   }

src/components/builder/right/sections/FontSize.js

@@ -1,9 +1,9 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React, { memo, useState, useEffect } from 'react';
-import fontSizeVarsDefault from '../../../../data/fontSizeVarsDefault';
+import React, { memo, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import fontSizeOptions from '../../../../data/fontSizeOptions';
 import Heading from '../../../shared/Heading';
 
-/* font size control */
 const FontSizes = ({ id }) => {
   // precompute some stuff for the logarithmic slider
   const logMax = 2.5;
@@ -15,7 +15,10 @@ const FontSizes = ({ id }) => {
   const min = 0;
   const max = min + steps - 1;
   const scaleDefault = Math.log(logDefault / logMin) / Math.log(logStepSize);
-  const [fontScale, setFontScale] = useState(scaleDefault);
+
+  const dispatch = useDispatch();
+  const fontSize = useSelector('metadata.fontSize');
+  const [fontScale, setFontScale] = useState(fontSize || scaleDefault);
 
   // translate a linearly scaled value from the slider into a scale factor
   const scale = (value) => logStepSize ** (value - min) * logMin;
@@ -23,7 +26,7 @@ const FontSizes = ({ id }) => {
   useEffect(() => {
     /* loop through the css variables we need to set and set them to the default
        for that variable multiplied by the scale factor */
-    for (const [key, sizeDefault] of Object.entries(fontSizeVarsDefault)) {
+    for (const [key, sizeDefault] of Object.entries(fontSizeOptions)) {
       document.documentElement.style.setProperty(
         key,
         `${scale(fontScale) * sizeDefault}rem`,
@@ -31,19 +34,31 @@ const FontSizes = ({ id }) => {
     }
   }, [fontScale]);
 
-  const onChange = (event) => setFontScale(event.target.value);
+  const onChange = (event) => {
+    const { value } = event.target;
+
+    setFontScale(value);
+
+    dispatch({
+      type: 'on_input',
+      payload: {
+        path: 'metadata.fontSize',
+        value,
+      },
+    });
+  };
 
   return (
     <section>
       <Heading id={id} />
 
       <input
-        type="range"
-        onChange={onChange}
+        step={1}
         min={min}
         max={max}
-        step={1}
-        defaultValue={scaleDefault}
+        type="range"
+        onChange={onChange}
+        defaultValue={fontScale}
       />
     </section>
   );