[2.5] Implement Font Size Adjustments

gatsby-config.js

@@ -6,7 +6,7 @@ module.exports = {
     title: 'Reactive Resume',
     siteUrl: 'https://rxresu.me',
     description: 'A free and open source resume builder.',
-    version: '2.4.3',
+    version: '2.5',
   },
   plugins: [
     'gatsby-plugin-react-helmet',

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':
+    case 'font-size':
-      return FontSizes;
+      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 React, { memo, useEffect, useState } from 'react';
-import fontSizeVarsDefault from '../../../../data/fontSizeVarsDefault';
+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"
+        step={1}
-        onChange={onChange}
         min={min}
         max={max}
-        step={1}
+        type="range"
-        defaultValue={scaleDefault}
+        onChange={onChange}
+        defaultValue={fontScale}
       />
     </section>
   );

src/data/demoState.json

@@ -138,6 +138,7 @@
       "text": "#212121"
     },
     "font": "Open Sans",
+    "fontSize": 12,
     "language": "en",
     "layout": {
       "castform": [

src/data/fontSizeOptions.js

@@ -1,4 +1,4 @@
-const fontSizeVarsDefault = {
+const fontSizeOptions = {
   '--text-xs-size': 0.75,
   '--text-sm-size': 0.875,
   '--text-lg-size': 1.125,
@@ -15,4 +15,4 @@ const fontSizeVarsDefault = {
   '--text-4xl-line-height': 2.5,
 };
 
-export default fontSizeVarsDefault;
+export default fontSizeOptions;

src/data/initialState.json

@@ -74,6 +74,7 @@
     "language": "en",
     "template": "onyx",
     "font": "Montserrat",
+    "fontSize": 12,
     "layout": {
       "onyx": [
         ["objective", "work", "education", "projects"],

src/data/rightSections.js

@@ -27,7 +27,7 @@ export default [
     icon: MdFontDownload,
   },
   {
-    id: 'font-sizes',
+    id: 'font-size',
     icon: MdFormatSize,
   },
   {

src/i18n/locales/en.json

@@ -87,7 +87,7 @@
       "templates": "Templates",
       "layout": "Layout",
       "colors": "Colors",
-      "font-sizes": "Font Sizes",
+      "font-size": "Font Size",
       "fonts": "Fonts",
       "actions": "Actions",
       "settings": "Settings",