From ac1cf0002527b26ddafdf0c715b73f8a63921379 Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Sat, 8 Jun 2024 11:32:29 +0200
Subject: [PATCH 1/2] feat: use progress on scroll for all documents

---
 .../Pages/DocumentsPage/AboutPage/index.tsx   |  7 ++----
 .../Pages/DocumentsPage/BicyclePage/index.tsx |  7 ++----
 .../DocumentsPage/ElectronicsPage/index.tsx   |  7 ++----
 .../DocumentsPage/FootballPage/index.tsx      |  7 ++----
 .../Pages/DocumentsPage/GuitarPage/index.tsx  |  7 ++----
 .../LegalPage/PolicyPage/index.tsx            |  7 ++----
 .../LegalPage/TermsPage/index.tsx             |  7 ++----
 .../DocumentsPage/PhotographyPage/index.tsx   |  7 ++----
 .../DocumentsPage/ShowcasePage/index.tsx      |  7 ++----
 .../Pages/DocumentsPage/StoryPage/index.tsx   |  7 ++----
 .../DocumentContentWrapper/index.tsx          | 22 +++++++++++++++++++
 .../src/Shared/Components/index.ts            |  1 +
 12 files changed, 43 insertions(+), 50 deletions(-)
 create mode 100644 TokanPages.ClientApp/src/Shared/Components/DocumentContentWrapper/index.tsx

diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/AboutPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/AboutPage/index.tsx
index 2138bb131..6753362e8 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/AboutPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/AboutPage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../Store/Configuration";
 import { Navigation, Footer } from "../../../Components/Layout";
-import { DocumentContent } from "../../../Components/Document";
+import { DocumentContentWrapper } from "../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const AboutPage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/BicyclePage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/BicyclePage/index.tsx
index 22d89c8e3..125c851c8 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/BicyclePage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/BicyclePage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../Store/Configuration";
 import { Navigation, Footer } from "../../../Components/Layout";
-import { DocumentContent } from "../../../Components/Document";
+import { DocumentContentWrapper } from "../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const BicyclePage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/ElectronicsPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/ElectronicsPage/index.tsx
index 7e78b1b1b..610602d58 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/ElectronicsPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/ElectronicsPage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../Store/Configuration";
 import { Navigation, Footer } from "../../../Components/Layout";
-import { DocumentContent } from "../../../Components/Document";
+import { DocumentContentWrapper } from "../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const ElectronicsPage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/FootballPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/FootballPage/index.tsx
index 797815f64..1150527f1 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/FootballPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/FootballPage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../Store/Configuration";
 import { Navigation, Footer } from "../../../Components/Layout";
-import { DocumentContent } from "../../../Components/Document";
+import { DocumentContentWrapper } from "../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const FootballPage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/GuitarPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/GuitarPage/index.tsx
index cbc9a7138..4f7bf395b 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/GuitarPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/GuitarPage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../Store/Configuration";
 import { Navigation, Footer } from "../../../Components/Layout";
-import { DocumentContent } from "../../../Components/Document";
+import { DocumentContentWrapper } from "../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const GuitarPage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/LegalPage/PolicyPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/LegalPage/PolicyPage/index.tsx
index 3bbd62702..5a0edecfb 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/LegalPage/PolicyPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/LegalPage/PolicyPage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../../Store/Configuration";
 import { Navigation, Footer } from "../../../../Components/Layout";
-import { DocumentContent } from "../../../../Components/Document";
+import { DocumentContentWrapper } from "../../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const PolicyPage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/LegalPage/TermsPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/LegalPage/TermsPage/index.tsx
index c96dff964..de2476f22 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/LegalPage/TermsPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/LegalPage/TermsPage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../../Store/Configuration";
 import { Navigation, Footer } from "../../../../Components/Layout";
-import { DocumentContent } from "../../../../Components/Document";
+import { DocumentContentWrapper } from "../../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const TermsPage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/PhotographyPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/PhotographyPage/index.tsx
index 511b2d83d..a408c5226 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/PhotographyPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/PhotographyPage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../Store/Configuration";
 import { Navigation, Footer } from "../../../Components/Layout";
-import { DocumentContent } from "../../../Components/Document";
+import { DocumentContentWrapper } from "../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const PhotographyPage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/ShowcasePage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/ShowcasePage/index.tsx
index 2aec86054..3dd7baeca 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/ShowcasePage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/ShowcasePage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../Store/Configuration";
 import { Navigation, Footer } from "../../../Components/Layout";
-import { DocumentContent } from "../../../Components/Document";
+import { DocumentContentWrapper } from "../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const ShowcasePage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/StoryPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/StoryPage/index.tsx
index 950b28861..e180397c0 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/StoryPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/DocumentsPage/StoryPage/index.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "@material-ui/core/Container";
 import { ApplicationState } from "../../../Store/Configuration";
 import { Navigation, Footer } from "../../../Components/Layout";
-import { DocumentContent } from "../../../Components/Document";
+import { DocumentContentWrapper } from "../../../Shared/Components";
 
 import {
     ContentNavigationAction,
@@ -30,9 +29,7 @@ export const StoryPage = (): JSX.Element => {
     return (
         <>
             <Navigation />
-            <Container>
-                <DocumentContent isLoading={isLoading} items={items} />
-            </Container>
+            <DocumentContentWrapper isLoading={isLoading} items={items} />
             <Footer />
         </>
     );
diff --git a/TokanPages.ClientApp/src/Shared/Components/DocumentContentWrapper/index.tsx b/TokanPages.ClientApp/src/Shared/Components/DocumentContentWrapper/index.tsx
new file mode 100644
index 000000000..ce179c50b
--- /dev/null
+++ b/TokanPages.ClientApp/src/Shared/Components/DocumentContentWrapper/index.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Container } from "@material-ui/core";
+import { ProgressOnScroll } from "../Scroll";
+import { DocumentContent } from "../../../Components/Document";
+import { Colours } from "../../../Theme";
+import { TextItemDto } from "../../../Api/Models";
+
+interface DocumentContentWrapperProps {
+    isLoading: boolean;
+    items: TextItemDto[];
+}
+
+export const DocumentContentWrapper = (props: DocumentContentWrapperProps): JSX.Element => {
+    return (
+        <>
+            <ProgressOnScroll height={3} bgcolor={Colours.application.navigation} duration={0.1} />
+            <Container>
+                <DocumentContent isLoading={props.isLoading} items={props.items} />
+            </Container>
+        </>
+    );
+}
diff --git a/TokanPages.ClientApp/src/Shared/Components/index.ts b/TokanPages.ClientApp/src/Shared/Components/index.ts
index 9adcf89f5..99313e6ec 100644
--- a/TokanPages.ClientApp/src/Shared/Components/index.ts
+++ b/TokanPages.ClientApp/src/Shared/Components/index.ts
@@ -1,5 +1,6 @@
 export { ApplicationDialogBox } from "./ApplicationDialogBox/applicationDialogBox";
 export { ApplicationUserInfo } from "./ApplicationUserInfo/applicationUserInfo";
+export { DocumentContentWrapper } from "./DocumentContentWrapper";
 export { RenderContent } from "./RenderContent/renderContent";
 export { RenderCardMedia } from "./CustomCardMedia/customCardMedia";
 export { RenderImage } from "./CustomImage/customImage";

From 47eef54280755e2ca080fa248df7444077619ea5 Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Sat, 8 Jun 2024 12:05:50 +0200
Subject: [PATCH 2/2] feat: relocate sub components, update style

---
 .../Renderers/RenderText/renderText.tsx       | 106 ++++++++++--------
 1 file changed, 57 insertions(+), 49 deletions(-)

diff --git a/TokanPages.ClientApp/src/Shared/Components/RenderContent/Renderers/RenderText/renderText.tsx b/TokanPages.ClientApp/src/Shared/Components/RenderContent/Renderers/RenderText/renderText.tsx
index 9bae57e50..10ef38aeb 100644
--- a/TokanPages.ClientApp/src/Shared/Components/RenderContent/Renderers/RenderText/renderText.tsx
+++ b/TokanPages.ClientApp/src/Shared/Components/RenderContent/Renderers/RenderText/renderText.tsx
@@ -5,67 +5,75 @@ import { RenderTextStyle } from "./renderTextStyle";
 import { ReactHtmlParser } from "../../../../../Shared/Services/Renderers";
 import "../../../../../Theme/Css/customDropCap.css";
 
-export const RenderText = (props: TextItem): JSX.Element => {
+interface DataProps { 
+    data: string 
+}
+
+const RenderTitle = (props: DataProps): JSX.Element => {
     const classes = RenderTextStyle();
-    const data: string = props.value as string;
+    return (
+        <Box mt={7} mb={0}>
+            <Typography variant="body1" component="span" className={`${classes.common} ${classes.title}`}>
+                <ReactHtmlParser html={props.data} />
+            </Typography>
+        </Box>
+    );
+};
 
-    const renderTitle = (): JSX.Element => {
-        return (
-            <Box mt={7}>
-                <Typography variant="body1" component="span" className={`${classes.common} ${classes.title}`}>
-                    <ReactHtmlParser html={data} />
-                </Typography>
-            </Box>
-        );
-    };
+const RenderSubtitle = (props: DataProps): JSX.Element => {
+    const classes = RenderTextStyle();
+    return (
+        <Box mt={1} mb={5}>
+            <Typography variant="body1" component="span" className={`${classes.common} ${classes.subTitle}`}>
+                <ReactHtmlParser html={props.data} />
+            </Typography>
+        </Box>
+    );
+};
 
-    const renderSubtitle = (): JSX.Element => {
-        return (
-            <Box mt={-1} mb={7}>
-                <Typography variant="body1" component="span" className={`${classes.common} ${classes.subTitle}`}>
-                    <ReactHtmlParser html={data} />
-                </Typography>
-            </Box>
-        );
-    };
+const RenderHeader = (props: DataProps): JSX.Element => {
+    const classes = RenderTextStyle();
+    return (
+        <Box mt={7} mb={2}>
+            <Typography variant="body1" component="span" className={`${classes.common} ${classes.header}`}>
+                <ReactHtmlParser html={props.data} />
+            </Typography>
+        </Box>
+    );
+};
 
-    const renderHeader = (): JSX.Element => {
-        return (
-            <Box mt={7} mb={2}>
-                <Typography variant="body1" component="span" className={`${classes.common} ${classes.header}`}>
-                    <ReactHtmlParser html={data} />
-                </Typography>
-            </Box>
-        );
-    };
+const RenderParagraph = (props: DataProps): JSX.Element => {
+    const classes = RenderTextStyle();
+    return (
+        <Typography variant="body1" component="span" className={`${classes.common} ${classes.paragraph}`}>
+            <ReactHtmlParser html={props.data} />
+        </Typography>
+    );
+};
 
-    const renderParagraph = (): JSX.Element => {
-        return (
-            <Typography variant="body1" component="span" className={`${classes.common} ${classes.paragraph}`}>
-                <ReactHtmlParser html={data} />
-            </Typography>
-        );
-    };
+const RenderParagraphWithDropCap = (props: DataProps): JSX.Element => {
+    const classes = RenderTextStyle();
+    const replaced = props.data.replace("<p>", "<p class='custom-drop-cap'>");
+    return (
+        <Typography variant="body1" component="span" className={`${classes.common} ${classes.paragraph}`}>
+            <ReactHtmlParser html={replaced} />
+        </Typography>
+    );
+};
 
-    const renderParagraphWithDropCap = (): JSX.Element => {
-        const replaced = data.replace("<p>", "<p class='custom-drop-cap'>");
-        return (
-            <Typography variant="body1" component="span" className={`${classes.common} ${classes.paragraph}`}>
-                <ReactHtmlParser html={replaced} />
-            </Typography>
-        );
-    };
+export const RenderText = (props: TextItem): JSX.Element => {
+    const data: string = props.value as string;
 
     switch (props.prop) {
         case "title":
-            return renderTitle();
+            return <RenderTitle data={data} />;
         case "subtitle":
-            return renderSubtitle();
+            return <RenderSubtitle data={data} />;
         case "header":
-            return renderHeader();
+            return <RenderHeader data={data} />;
         case "dropcap":
-            return renderParagraphWithDropCap();
+            return <RenderParagraphWithDropCap data={data} />;
         default:
-            return renderParagraph();
+            return <RenderParagraph data={data} />;
     }
 };