docgen-tool 6.2.0 → 6.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/app/app.tsx +2 -1
  2. package/dist/app/pdf/pdf-generator/generate-pdf.tsx +4 -2
  3. package/dist/app/pdf/pdf-generator/generate-pdf.worker.tsx +3 -3
  4. package/dist/app/pdf/pdf-generator/pdf-page/pdf-html-block/pdf-html-block.tsx +3 -3
  5. package/dist/app/pdf/pdf-generator/pdf-page/pdf-page.tsx +12 -4
  6. package/dist/app/pdf/pdf-generator/pdf-styles/pdf-admonitions-styles.ts +35 -35
  7. package/dist/app/pdf/pdf-generator/pdf-styles/pdf-styles.ts +140 -136
  8. package/dist/app/pdf/pdf-generator/pdf-styles/pdf-table-styles.ts +18 -18
  9. package/dist/app/pdf/pdf-generator/react-pdf.tsx +2 -1
  10. package/dist/app/pdf/pdf-generator/use-generate.pdf.tsx +2 -1
  11. package/dist/app/pdf/pdf-viewer/pdf-controls/pdf-controls.module.css +7 -13
  12. package/dist/app/pdf/pdf-viewer/pdf-display/pdf-display.module.css +1 -1
  13. package/dist/app/pdf/pdf-viewer/{pdf-viewer.module.css → pdf-viewer/pdf-viewer.module.css} +0 -18
  14. package/dist/app/pdf/pdf-viewer/{pdf-viewer.tsx → pdf-viewer/pdf-viewer.tsx} +6 -5
  15. package/dist/app/styles/config.json +28 -0
  16. package/dist/app/styles/style-tokens/colors.json +145 -0
  17. package/dist/app/styles/style-tokens/size.json +108 -0
  18. package/dist/app/{style-variables → styles/style-variables}/css/style-variables.css +7 -0
  19. package/dist/app/styles/style-variables/js/style-variables.js +86 -0
  20. package/dist/app/views/assets/.DS_Store +0 -0
  21. package/dist/app/views/assets/styles/.DS_Store +0 -0
  22. package/dist/app/views/assets/styles/buttons.css +68 -0
  23. package/dist/app/views/assets/styles/fonts/.DS_Store +0 -0
  24. package/dist/app/views/assets/styles/global.css +9 -0
  25. package/dist/app/views/assets/styles/main.css +6 -0
  26. package/dist/app/views/assets/styles/normalize.css +351 -0
  27. package/dist/app/views/assets/styles/reset.css +21 -0
  28. package/dist/app/views/assets/styles/typography.css +99 -0
  29. package/dist/app/views/assets/styles/website-page-content/admonitions.css +48 -0
  30. package/dist/app/views/assets/styles/website-page-content/content.css +186 -0
  31. package/dist/app/views/assets/styles/website-page-content/docs.css +163 -0
  32. package/dist/app/views/assets/styles/website-page-content/images.css +4 -0
  33. package/dist/app/views/assets/styles/website-page-content/tables.css +20 -0
  34. package/dist/app/views/assets/styles/website-page-content/website-page-content.css +34 -0
  35. package/dist/app/views/components/card/card.module.css +21 -22
  36. package/dist/app/views/components/card/card.tsx +6 -4
  37. package/dist/app/views/components/copyright/copyright.tsx +1 -1
  38. package/dist/app/views/components/footer/footer.module.css +21 -0
  39. package/dist/app/views/components/footer/footer.tsx +3 -2
  40. package/dist/app/views/components/loader/loader.tsx +2 -3
  41. package/dist/app/views/components/page/page.module.css +27 -0
  42. package/dist/app/views/components/page/page.tsx +3 -1
  43. package/dist/app/views/components/side-bar/side-bar.module.css +168 -0
  44. package/dist/app/views/components/side-bar/side-bar.tsx +12 -12
  45. package/dist/app/views/components/top-bar/top-bar.module.css +86 -0
  46. package/dist/app/views/components/top-bar/top-bar.tsx +12 -11
  47. package/dist/app/views/content/code-block.module.css +4 -4
  48. package/dist/app/views/pages/cover/cover.tsx +81 -86
  49. package/dist/app/views/pages/main/main.tsx +2 -2
  50. package/dist/cli/cli.js +67 -20
  51. package/package.json +8 -8
  52. package/dist/app/style-variables/js/style-variables.js +0 -78
  53. package/dist/app/views/assets/styles/framework.css +0 -1393
  54. package/dist/app/views/components/logo/logo.tsx +0 -5
  55. package/dist/app/views/components/pdf-footer/pdf-footer.tsx +0 -28
  56. package/dist/app/views/components/pdf-header/pdf-header.tsx +0 -10
  57. package/dist/app/views/html.tsx +0 -5
  58. package/dist/app/views/pages/main/pdf-viewer.tsx +0 -17
  59. /package/dist/app/views/pages/cover/{cover.css → cover.module.css} +0 -0
package/dist/app/app.tsx CHANGED
@@ -2,7 +2,8 @@ import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
3
  import { RouterProvider } from '@tanstack/react-router';
4
4
  import { router } from './views/router.tsx';
5
- import './views/assets/styles/framework.css';
5
+ import 'virtual:style-variables.css';
6
+ import './views/assets/styles/main.css';
6
7
 
7
8
  const app = () => {
8
9
  const rootElement = document.getElementById('root');
@@ -2,8 +2,10 @@ import React from 'react';
2
2
  import { pdf } from '@react-pdf/renderer';
3
3
  import { Pdf } from './react-pdf.tsx';
4
4
 
5
- export const generatePdf = async (loadedPages) => {
6
- const instance = await pdf(<Pdf loadedPages={loadedPages} />);
5
+ export const generatePdf = async (loadedPages, styleVariables) => {
6
+ const instance = await pdf(
7
+ <Pdf loadedPages={loadedPages} styleVariables={styleVariables} />,
8
+ );
7
9
  const blob = await instance.toBlob();
8
10
  return blob;
9
11
  };
@@ -30,11 +30,11 @@ const loadPdfPages = async (
30
30
  return pages;
31
31
  };
32
32
 
33
- const slowTask = async () => {
33
+ const slowTask = async (styleVariables) => {
34
34
  let data;
35
35
  try {
36
36
  const loadedPages = await loadPdfPages(__DOCGEN_PAGES__);
37
- data = await generatePdf(loadedPages);
37
+ data = await generatePdf(loadedPages, styleVariables);
38
38
  } catch (error) {
39
39
  console.error(error);
40
40
  }
@@ -49,7 +49,7 @@ const slowTask = async () => {
49
49
  self.onmessage = ({ data: message }) => {
50
50
  switch (message.type) {
51
51
  case 'start':
52
- slowTask();
52
+ slowTask(message.styleVariables);
53
53
  break;
54
54
  default:
55
55
  }
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  import Html from 'react-pdf-html-simple';
3
- import { fontSize, htmlStyleSheet } from '../../pdf-styles/pdf-styles.ts';
3
+ import { fontSize } from '../../pdf-styles/pdf-styles.ts';
4
4
  import { customRenderers } from './custom-renderers/custom-renderers.tsx';
5
5
 
6
- export const PdfHtmlBlock = ({ page, options }) => {
6
+ export const PdfHtmlBlock = ({ page, options, stylesheet }) => {
7
7
  return (
8
8
  <Html
9
9
  style={{ fontSize }}
10
- stylesheet={htmlStyleSheet}
10
+ stylesheet={stylesheet}
11
11
  renderers={customRenderers({ options })}
12
12
  >
13
13
  {page}
@@ -2,15 +2,23 @@ import React from 'react';
2
2
  import { Page, View, StyleSheet } from '@react-pdf/renderer';
3
3
  import { PdfHtmlBlock } from './pdf-html-block/pdf-html-block.tsx';
4
4
  import { PdfFooter } from './pdf-footer/pdf-footer.tsx';
5
- import { pdfStyleSheet } from '../pdf-styles/pdf-styles.ts';
5
+ import {
6
+ getPdfStyleSheet,
7
+ getHtmlStyleSheet,
8
+ } from '../pdf-styles/pdf-styles.ts';
6
9
 
7
- export const reactPdfStyles = StyleSheet.create(pdfStyleSheet);
10
+ export const PdfPage = ({ page, parameters, options, styleVariables }) => {
11
+ const reactPdfStyles = StyleSheet.create(getPdfStyleSheet(styleVariables));
12
+ const htmlStylesheet = getHtmlStyleSheet(styleVariables);
8
13
 
9
- export const PdfPage = ({ page, parameters, options }) => {
10
14
  return (
11
15
  <Page size="A4" style={reactPdfStyles.page}>
12
16
  <View>
13
- <PdfHtmlBlock page={page} options={options} />
17
+ <PdfHtmlBlock
18
+ page={page}
19
+ options={options}
20
+ stylesheet={htmlStylesheet}
21
+ />
14
22
  </View>
15
23
  <PdfFooter parameters={parameters} />
16
24
  </Page>
@@ -1,37 +1,37 @@
1
- import * as styles from '../../../style-variables/js/style-variables';
1
+ export const getPdfAdmonitionsStyles = (styles: any) => {
2
+ const admonitionBaseStyle = {
3
+ padding: styles.SizeContentBlockPaddingPdf,
4
+ margin: styles.SizeContentBlockMarginPdf,
5
+ };
2
6
 
3
- const admonitionBaseStyle = {
4
- padding: styles.SizeContentBlockPaddingPdf,
5
- margin: styles.SizeContentBlockMarginPdf,
6
- };
7
-
8
- export const pdfAdmonitionsStyles = {
9
- blockquote: {
10
- ...admonitionBaseStyle,
11
- backgroundColor: styles.ColorBackgroundNeutral,
12
- borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderNeutral}`,
13
- color: styles.ColorBorderNeutral,
14
- fontStyle: 'italic',
15
- },
16
- ['.admonition']: admonitionBaseStyle,
17
- ['.admonition-title']: {
18
- margin: styles.SizeAdmonitionTitleMarginPdf,
19
- fontWeight: 'bold',
20
- },
21
- ['.admonition.information']: {
22
- backgroundColor: styles.ColorBackgroundInfo,
23
- borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderInfo}`,
24
- },
25
- ['.admonition.success']: {
26
- backgroundColor: styles.ColorBackgroundSuccess,
27
- borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderSuccess}`,
28
- },
29
- ['.admonition.warning']: {
30
- backgroundColor: styles.ColorBackgroundWarning,
31
- borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderWarning}`,
32
- },
33
- ['.admonition.error']: {
34
- backgroundColor: styles.ColorBackgroundError,
35
- borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderError}`,
36
- },
7
+ return {
8
+ blockquote: {
9
+ ...admonitionBaseStyle,
10
+ backgroundColor: styles.ColorBackgroundNeutral,
11
+ borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderNeutral}`,
12
+ color: styles.ColorBorderNeutral,
13
+ fontStyle: 'italic',
14
+ },
15
+ ['.admonition']: admonitionBaseStyle,
16
+ ['.admonition-title']: {
17
+ margin: styles.SizeAdmonitionTitleMarginPdf,
18
+ fontWeight: 'bold',
19
+ },
20
+ ['.admonition.information']: {
21
+ backgroundColor: styles.ColorBackgroundInfo,
22
+ borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderInfo}`,
23
+ },
24
+ ['.admonition.success']: {
25
+ backgroundColor: styles.ColorBackgroundSuccess,
26
+ borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderSuccess}`,
27
+ },
28
+ ['.admonition.warning']: {
29
+ backgroundColor: styles.ColorBackgroundWarning,
30
+ borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderWarning}`,
31
+ },
32
+ ['.admonition.error']: {
33
+ backgroundColor: styles.ColorBackgroundError,
34
+ borderLeft: `${styles.SizeAdmonitionBorderLeftPdf} solid ${styles.ColorBorderError}`,
35
+ },
36
+ };
37
37
  };
@@ -1,11 +1,10 @@
1
- import * as styles from '../../../style-variables/js/style-variables';
2
1
  import { docsStyleSheet } from './pdf-docs-styles.ts';
3
- import { pdfAdmonitionsStyles } from './pdf-admonitions-styles.ts';
4
- import { pdfTableStyles } from './pdf-table-styles.js';
2
+ import { getPdfAdmonitionsStyles } from './pdf-admonitions-styles.ts';
3
+ import { getPdfTableStyles } from './pdf-table-styles.ts';
5
4
 
6
5
  export const fontSize = 10;
7
6
 
8
- export const pdfStyleSheet = {
7
+ export const getPdfStyleSheet = (styles: any) => ({
9
8
  page: {
10
9
  paddingTop: 35,
11
10
  paddingBottom: 65,
@@ -13,142 +12,147 @@ export const pdfStyleSheet = {
13
12
  fontSize,
14
13
  fontFamily: 'archivo',
15
14
  },
16
- };
17
-
18
- export const em = (em: number, relativeSize: number = fontSize) =>
19
- em * relativeSize;
15
+ });
20
16
 
21
- const styleInfo = {
22
- color: styles.ColorTextInfo,
23
- backgroundColor: styles.ColorBackgroundInfo,
24
- borderLeft: `5px solid ${styles.ColorBorderInfo}`,
25
- padding: styles.SizeMessagePadding,
26
- marginLeft: 0,
27
- marginRight: 0,
28
- };
17
+ export const em = (val: number, relativeSize: number = fontSize) =>
18
+ val * relativeSize;
29
19
 
30
20
  /*
31
21
  See also the base styles set by react-pdf-html, which are being overridden here
32
22
  https://github.com/danomatic/react-pdf-html/blob/main/src/styles.ts
33
23
  */
34
- export const htmlStyleSheet = {
35
- 'h1, h2, h3, h4, h5, h6': {
36
- fontWeight: 'bold',
37
- },
38
- h1: {
39
- fontSize: styles.SizeFontH1Pdf,
40
- marginVertical: em(0.67, em(2)),
41
- },
42
- h2: {
43
- fontSize: styles.SizeFontH2Pdf,
44
- marginVertical: em(0.83, em(1.5)),
45
- },
46
- h3: {
47
- fontSize: styles.SizeFontH3Pdf,
48
- marginVertical: em(1, em(1.17)),
49
- },
50
- h4: {
51
- fontSize: styles.SizeFontH4Pdf,
52
- marginVertical: em(1.33, em(1)),
53
- },
54
- h5: {
55
- fontSize: styles.SizeFontH5Pdf,
56
- marginVertical: em(1.67, em(0.83)),
57
- },
58
- h6: {
59
- fontSize: styles.SizeFontH6Pdf,
60
- marginVertical: em(2.33, em(0.67)),
61
- },
62
- p: {
63
- color: styles.ColorText,
64
- fontSize: em(1),
65
- marginVertical: em(1),
66
- },
67
- hr: {
68
- marginVertical: em(0.5),
69
- borderBottomWidth: 1,
70
- borderBottomColor: '#000',
71
- },
72
- address: {
73
- fontStyle: 'italic',
74
- },
75
- pre: {
76
- fontSize: '10pt',
77
- fontFamily: 'space-mono',
78
- backgroundColor: '#f5f5f5',
79
- color: '#333333',
80
- borderRadius: '4pt',
81
- padding: '8pt',
82
- borderLeft: '4pt solid #cccccc',
83
- marginVertical: em(1),
84
- whiteSpace: 'pre-wrap',
85
- },
86
- b: {
87
- fontWeight: 'bold',
88
- },
89
- strong: {
90
- fontWeight: 'bold',
91
- },
92
- i: {
93
- fontStyle: 'italic',
94
- },
95
- em: {
96
- fontStyle: 'italic',
97
- },
98
- s: {
99
- textDecoration: 'line-through',
100
- },
101
- u: {
102
- textDecoration: 'underline',
103
- },
104
- cite: {
105
- fontStyle: 'italic',
106
- },
107
- code: {
108
- fontFamily: 'space-mono',
109
- },
110
- a: {
111
- textDecoration: 'underline',
112
- },
113
- ul: {
114
- marginVertical: em(1),
115
- },
116
- ol: {
117
- marginVertical: em(1),
118
- },
119
- li: {
120
- display: 'flex',
121
- flexDirection: 'row',
122
- },
123
- li_bullet: {
124
- width: 30,
125
- textAlign: 'right',
126
- flexShrink: 0,
127
- flexGrow: 0,
128
- paddingRight: 5,
129
- },
130
- li_content: {
131
- textAlign: 'left',
132
- flexGrow: 1,
133
- flexBasis: 1,
134
- },
135
- thead: {
136
- display: 'flex',
137
- flexDirection: 'column',
138
- },
139
- tbody: {
140
- display: 'flex',
141
- flexDirection: 'column',
142
- },
143
- tr: {
144
- display: 'flex',
145
- flexDirection: 'row',
146
- flexShrink: 1,
147
- },
148
- ['.button']: {
149
- textAlign: 'center',
150
- },
151
- ...pdfAdmonitionsStyles,
152
- ...pdfTableStyles,
153
- ...docsStyleSheet,
24
+ export const getHtmlStyleSheet = (styles: any) => {
25
+ const pdfAdmonitionsStyles = getPdfAdmonitionsStyles(styles);
26
+ const pdfTableStyles = getPdfTableStyles(styles);
27
+
28
+ const styleInfo = {
29
+ color: styles.ColorTextInfo,
30
+ backgroundColor: styles.ColorBackgroundInfo,
31
+ borderLeft: `5px solid ${styles.ColorBorderInfo}`,
32
+ padding: styles.SizeMessagePadding,
33
+ marginLeft: 0,
34
+ marginRight: 0,
35
+ };
36
+
37
+ return {
38
+ 'h1, h2, h3, h4, h5, h6': {
39
+ fontWeight: 'bold',
40
+ },
41
+ h1: {
42
+ fontSize: styles.SizeFontH1Pdf,
43
+ marginVertical: em(0.67, em(2)),
44
+ },
45
+ h2: {
46
+ fontSize: styles.SizeFontH2Pdf,
47
+ marginVertical: em(0.83, em(1.5)),
48
+ },
49
+ h3: {
50
+ fontSize: styles.SizeFontH3Pdf,
51
+ marginVertical: em(1, em(1.17)),
52
+ },
53
+ h4: {
54
+ fontSize: styles.SizeFontH4Pdf,
55
+ marginVertical: em(1.33, em(1)),
56
+ },
57
+ h5: {
58
+ fontSize: styles.SizeFontH5Pdf,
59
+ marginVertical: em(1.67, em(0.83)),
60
+ },
61
+ h6: {
62
+ fontSize: styles.SizeFontH6Pdf,
63
+ marginVertical: em(2.33, em(0.67)),
64
+ },
65
+ p: {
66
+ color: styles.ColorText,
67
+ fontSize: em(1),
68
+ marginVertical: em(1),
69
+ },
70
+ hr: {
71
+ marginVertical: em(0.5),
72
+ borderBottomWidth: 1,
73
+ borderBottomColor: '#000',
74
+ },
75
+ address: {
76
+ fontStyle: 'italic',
77
+ },
78
+ pre: {
79
+ fontSize: '10pt',
80
+ fontFamily: 'space-mono',
81
+ backgroundColor: '#f5f5f5',
82
+ color: '#333333',
83
+ borderRadius: '4pt',
84
+ padding: '8pt',
85
+ borderLeft: '4pt solid #cccccc',
86
+ marginVertical: em(1),
87
+ whiteSpace: 'pre-wrap',
88
+ },
89
+ b: {
90
+ fontWeight: 'bold',
91
+ },
92
+ strong: {
93
+ fontWeight: 'bold',
94
+ },
95
+ i: {
96
+ fontStyle: 'italic',
97
+ },
98
+ em: {
99
+ fontStyle: 'italic',
100
+ },
101
+ s: {
102
+ textDecoration: 'line-through',
103
+ },
104
+ u: {
105
+ textDecoration: 'underline',
106
+ },
107
+ cite: {
108
+ fontStyle: 'italic',
109
+ },
110
+ code: {
111
+ fontFamily: 'space-mono',
112
+ },
113
+ a: {
114
+ textDecoration: 'underline',
115
+ },
116
+ ul: {
117
+ marginVertical: em(1),
118
+ },
119
+ ol: {
120
+ marginVertical: em(1),
121
+ },
122
+ li: {
123
+ display: 'flex',
124
+ flexDirection: 'row',
125
+ },
126
+ li_bullet: {
127
+ width: 30,
128
+ textAlign: 'right',
129
+ flexShrink: 0,
130
+ flexGrow: 0,
131
+ paddingRight: 5,
132
+ },
133
+ li_content: {
134
+ textAlign: 'left',
135
+ flexGrow: 1,
136
+ flexBasis: 1,
137
+ },
138
+ thead: {
139
+ display: 'flex',
140
+ flexDirection: 'column',
141
+ },
142
+ tbody: {
143
+ display: 'flex',
144
+ flexDirection: 'column',
145
+ },
146
+ tr: {
147
+ display: 'flex',
148
+ flexDirection: 'row',
149
+ flexShrink: 1,
150
+ },
151
+ ['.button']: {
152
+ textAlign: 'center',
153
+ },
154
+ ...pdfAdmonitionsStyles,
155
+ ...pdfTableStyles,
156
+ ...docsStyleSheet,
157
+ };
154
158
  };
@@ -1,21 +1,21 @@
1
- import * as styles from '../../../style-variables/js/style-variables';
1
+ export const getPdfTableStyles = (styles: any) => {
2
+ const tableCellStyle = {
3
+ padding: styles.SizeTableCellPaddingPdf,
4
+ border: `${styles.SizeBorderWidthPdf} solid ${styles.ColorBorder}`,
5
+ };
2
6
 
3
- const tableCellStyle = {
4
- padding: styles.SizeTableCellPaddingPdf,
5
- border: `${styles.SizeBorderWidthPdf} solid ${styles.ColorBorder}`,
6
- };
7
-
8
- const tableHeaderFooterStyle = {
9
- ...tableCellStyle,
10
- backgroundColor: styles.ColorTableBackgroundHeaderFooterPdf,
11
- fontWeight: 'bold',
12
- };
7
+ const tableHeaderFooterStyle = {
8
+ ...tableCellStyle,
9
+ backgroundColor: styles.ColorTableBackgroundHeaderFooterPdf,
10
+ fontWeight: 'bold',
11
+ };
13
12
 
14
- export const pdfTableStyles = {
15
- table: {
16
- border: '1px solid #ccc',
17
- },
18
- td: tableCellStyle,
19
- th: tableHeaderFooterStyle,
20
- ['tfoot td']: tableHeaderFooterStyle,
13
+ return {
14
+ table: {
15
+ border: '1px solid #ccc',
16
+ },
17
+ td: tableCellStyle,
18
+ th: tableHeaderFooterStyle,
19
+ ['tfoot td']: tableHeaderFooterStyle,
20
+ };
21
21
  };
@@ -51,7 +51,7 @@ Font.register({
51
51
 
52
52
  // Async loader for PDF pages
53
53
 
54
- export const Pdf = ({ loadedPages }) => {
54
+ export const Pdf = ({ loadedPages, styleVariables }) => {
55
55
  const parameters = __DOCGEN_PARAMETERS__;
56
56
  const options = {};
57
57
  const allSources = Object.values(__DOCGEN_PAGES__).flatMap((columns) =>
@@ -68,6 +68,7 @@ export const Pdf = ({ loadedPages }) => {
68
68
  page={html}
69
69
  parameters={parameters}
70
70
  options={options}
71
+ styleVariables={styleVariables}
71
72
  />
72
73
  );
73
74
  })}
@@ -1,4 +1,5 @@
1
1
  import { useState, useEffect } from 'react';
2
+ import * as styles from 'virtual:style-variables.js';
2
3
  import WorkerURL from './generate-pdf.worker.tsx?worker';
3
4
 
4
5
  export type TGeneratedPdf = {
@@ -37,7 +38,7 @@ export const useGeneratePdf = () => {
37
38
  }
38
39
  };
39
40
 
40
- worker.postMessage({ type: 'start' });
41
+ worker.postMessage({ type: 'start', styleVariables: { ...styles } });
41
42
 
42
43
  return () => worker.terminate();
43
44
  }, []);
@@ -1,7 +1,6 @@
1
1
  .pdfControlsContainer {
2
2
  display: flex;
3
3
  justify-content: space-between;
4
- /* Push items to edges */
5
4
  align-items: center;
6
5
  width: 100%;
7
6
  gap: 16px;
@@ -11,7 +10,6 @@
11
10
  display: flex;
12
11
  gap: 4px;
13
12
  align-items: center;
14
- /* Removed flex: 1 and justify-content: center to keep it on the left */
15
13
  }
16
14
 
17
15
  .actionButtons {
@@ -28,27 +26,23 @@
28
26
  height: 32px;
29
27
  padding: 0;
30
28
  border: none;
31
- background-color: transparent;
32
- color: #f1f3f4;
33
- /* Light grey/white text */
29
+ background: transparent !important;
30
+ color: #f1f3f4 !important;
34
31
  border-radius: 16px;
35
- /* Rounded for hover effect */
36
32
  cursor: pointer;
37
33
  transition: background-color 0.1s ease;
38
34
  font-size: 20px;
39
- /* Icon size */
40
35
  }
41
36
 
42
37
  .controlButton:hover {
43
- background-color: rgba(255, 255, 255, 0.1);
44
- /* Subtle grey highlight */
38
+ background: rgba(255, 255, 255, 0.1) !important;
45
39
  }
46
40
 
47
- .controlButton:disabled {
48
- color: #5f6368;
49
- /* Dimmed icon color */
41
+ .controlButton:disabled,
42
+ .controlButton:disabled:hover {
43
+ color: #5f6368 !important;
50
44
  cursor: default;
51
- background-color: transparent;
45
+ background: transparent !important;
52
46
  }
53
47
 
54
48
  .pageText {
@@ -1,6 +1,6 @@
1
1
  .pdfDisplayWrapper {
2
2
  > div div {
3
- /* Override global rule from page.scss that interferes with the text highlighting layer in the react-pdf viewer */
3
+ /* Override global rule from page.css that interferes with the text highlighting layer in the react-pdf viewer */
4
4
  margin: 0;
5
5
  }
6
6
 
@@ -25,30 +25,12 @@
25
25
  overflow: hidden;
26
26
  }
27
27
 
28
- .cardContent {
29
- flex-grow: 1;
30
- overflow-y: auto;
31
- scrollbar-width: none;
32
- -ms-overflow-style: none;
33
- }
34
-
35
- .cardContent::-webkit-scrollbar {
36
- display: none;
37
- }
38
-
39
28
  .loaderWrapper {
40
29
  position: relative;
41
30
  width: 100%;
42
31
  aspect-ratio: 210 / 297;
43
32
  }
44
33
 
45
- .pdfHeader {
46
- background-color: #323639 !important;
47
- color: white;
48
- border-bottom: 1px solid #323639;
49
- padding: 4px 12px !important;
50
- }
51
-
52
34
  @media (max-width: 600px) {
53
35
  .loaderWrapper {
54
36
  height: 100% !important;
@@ -1,10 +1,10 @@
1
1
  import React, { useState } from 'react';
2
- import { useGeneratePdf } from '../pdf-generator/use-generate.pdf.tsx';
3
- import { PdfDisplay } from './pdf-display/pdf-display.tsx';
4
- import { PdfControls } from './pdf-controls/pdf-controls.tsx';
2
+ import { useGeneratePdf } from '../../pdf-generator/use-generate.pdf.tsx';
3
+ import { PdfDisplay } from '../pdf-display/pdf-display.tsx';
4
+ import { PdfControls } from '../pdf-controls/pdf-controls.tsx';
5
5
  import styles from './pdf-viewer.module.css';
6
- import { PdfLoader } from './pdf-loader/pdf-loader.tsx';
7
- import { Card } from '../../views/components/card/card.tsx';
6
+ import { PdfLoader } from '../pdf-loader/pdf-loader.tsx';
7
+ import { Card } from '../../../views/components/card/card.tsx';
8
8
 
9
9
  export const PdfViewer = () => {
10
10
  const { pdfUrl } = useGeneratePdf();
@@ -41,6 +41,7 @@ export const PdfViewer = () => {
41
41
  headerClassName={styles.pdfHeader}
42
42
  className={styles.card}
43
43
  contentClassName={styles.cardContent}
44
+ dark
44
45
  heading={
45
46
  <PdfControls
46
47
  pageNumber={pageNumber}