feat: text and word styles added

Author: Ishfaq-code

assets/css/udoit4-theme.css

@@ -187,6 +187,12 @@
       border: 1px solid var(--gray-lighter);
       box-shadow: 2px 2px 2px var(--gray-lighter);
     }
+
+    --text-spacing-percent: 0;
+    --app-letter-spacing: calc(var(--text-spacing-percent) * 0.0006em);
+    --app-word-spacing: calc(var(--text-spacing-percent) * 0.0014em);
+    letter-spacing: var(--app-letter-spacing);
+    word-spacing: var(--app-word-spacing);
   }
 
   h1, h2, h3, h4, h5, h6 {

assets/js/Components/App.js

@@ -30,6 +30,7 @@ export default function App(initialData) {
     { DEFAULT_USER_SETTINGS },
     { UFIXIT_OPTIONS },
   ))
+  const [textSpacing, setTextSpacing] = useState(settings?.user?.roles && ('text_spacing' in settings.user.roles) ? settings.user.roles.text_spacing: settings.DEFAULT_USER_SETTINGS.TEXT_SPACING) 
   const [sections, setSections] = useState([])
 
   const [navigation, setNavigation] = useState('summary')
@@ -366,6 +367,7 @@ export default function App(initialData) {
 
   return (
     <div id="app-container"
+         style={{ '--text-spacing-percent': Number(textSpacing) }}
          className={`flex-column flex-grow-1 `
           + `${settings?.user?.roles?.font_size || settings.DEFAULT_USER_SETTINGS.FONT_SIZE} `
           + `${settings?.user?.roles?.font_family || settings.DEFAULT_USER_SETTINGS.FONT_FAMILY} `
@@ -448,7 +450,9 @@ export default function App(initialData) {
                   settings={settings}
                   updateUserSettings={updateUserSettings}
                   syncComplete={syncComplete}
-                  handleFullCourseRescan={handleFullCourseRescan} />
+                  handleFullCourseRescan={handleFullCourseRescan}
+                  textSpacing={textSpacing}
+                  setTextSpacing={setTextSpacing} />
               }
               {('modal' === navigation) &&
                 <div className="modal">

assets/js/Components/SettingsPage.js

@@ -8,7 +8,9 @@ import './SettingsPage.css'
 export default function SettingsPage({
   t,
   settings,
-  updateUserSettings
+  updateUserSettings,
+  textSpacing,
+  setTextSpacing
 }) {
 
   const [alertOptions, setAlertOptions] = useState([])
@@ -55,7 +57,6 @@ export default function SettingsPage({
   // For new users, the 'dark_mode' attribute may not be set, so we need to check if it exists before using it
   // Because the values might be false, we need to differentiate between undefined and false
   const [darkMode, setDarkMode] = useState(settings?.user?.roles && ('dark_mode' in settings.user.roles) ? settings.user.roles.dark_mode : settings.DEFAULT_USER_SETTINGS.DARK_MODE)
-  const [textSpacing, setTextSpacing] = useState(settings?.user?.roles && ('text_spacing' in settings.user.roles) ? settings.user.roles.text_spacing: settings.DEFAULT_USER_SETTINGS.TEXT_SPACING)
 
   const handleDarkModeChange = (newValue) => {
     setDarkMode(newValue)