feat(techdocs): use text size addon

Signed-off-by: Camila Belo <camilaibs@gmail.com>

packages/app/src/App.tsx

@@ -70,7 +70,10 @@ import {
   techdocsPlugin,
 } from '@backstage/plugin-techdocs';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
-import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import {
+  ReportIssue,
+  TextSize,
+} from '@backstage/plugin-techdocs-module-addons-contrib';
 import {
   UserSettingsPage,
   UserSettingsTab,
@@ -183,6 +186,7 @@ const routes = (
       {techDocsPage}
       <TechDocsAddons>
         <ReportIssue />
+        <TextSize />
       </TechDocsAddons>
     </Route>
     <Route

plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx

@@ -27,7 +27,6 @@ import {
   withStyles,
   makeStyles,
   useTheme,
-  Theme,
   Box,
   MenuItem,
   ListItemText,
@@ -95,7 +94,7 @@ const StyledSlider = withStyles(theme => ({
 }))(Slider);
 
 const settings = {
-  key: 'techdocs.addons.settings',
+  key: 'techdocs.addons.settings.textsize',
   defaultValue: 100,
 };
 
@@ -183,8 +182,8 @@ export const TextSizeAddon = () => {
     if (!body) return;
     const htmlFontSize =
       (
-        theme.typography as Theme['typography'] & {
-          htmlFontSize: number;
+        theme.typography as BackstageTheme['typography'] & {
+          htmlFontSize?: number;
         }
       )?.htmlFontSize ?? 16;
     body.style.setProperty(

plugins/techdocs-module-addons-contrib/src/plugin.ts

@@ -50,8 +50,7 @@ export const ReportIssue = techdocsModuleAddonsContribPlugin.provide(
  * This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons.
  *
  * @remarks
- * The default value for font size is 100% of the HTML font size and, if the theme does not have an htmlFontSize value in its typography object,
- * the Addon will assume 16px as 100% and this setting is kept in the browser's local storage.
+ * The default value for the font size is 100% of the HTML font size, if the theme does not have a `htmlFontSize` in its typography object, the addon will assume 16px as 100%, and remember, this setting is kept in the browser local storage.
  *
  * @example
  * Here's a simple example: