From 0baf7c3d785db872cdef1eec1c423163a5c107c8 Mon Sep 17 00:00:00 2001
From: hajola <hansjooseplahe@gmail.com>
Date: Fri, 14 Jun 2024 18:31:25 +0300
Subject: [PATCH] Added wave patterns, adjusted primary color, minor UI tweaks

---
 site/docusaurus.config.ts              |  1 -
 site/src/css/custom.css                | 11 ++++++++++-
 site/src/pages/index.module.css        |  2 +-
 site/src/pages/index.tsx               | 18 ++++++++++++++++++
 site/src/theme/Footer/index.tsx        | 22 ++++++++++++++++++++++
 site/static/img/hero-border-bottom.svg |  1 +
 site/static/img/hero-border-top.svg    |  1 +
 site/static/img/prefooter.svg          |  1 +
 8 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 site/src/theme/Footer/index.tsx
 create mode 100644 site/static/img/hero-border-bottom.svg
 create mode 100644 site/static/img/hero-border-top.svg
 create mode 100644 site/static/img/prefooter.svg

diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts
index 90e3abb..d869c74 100644
--- a/site/docusaurus.config.ts
+++ b/site/docusaurus.config.ts
@@ -75,7 +75,6 @@ const config: Config = {
             ],
         },
         footer: {
-            style: 'dark',
             links: [
                 {
                     title: 'Docs',
diff --git a/site/src/css/custom.css b/site/src/css/custom.css
index 2bc6a4c..dace290 100644
--- a/site/src/css/custom.css
+++ b/site/src/css/custom.css
@@ -6,7 +6,9 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
+  --ifm-background-color: #f1f6f8;
+
+  --ifm-color-primary: #3c647c;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
@@ -15,6 +17,13 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  --ifm-footer-background-color: #3c647c;
+  --ifm-footer-title-color: #fff;
+  --ifm-footer-link-color: #ffffffaa;
+  --ifm-footer-color:  #ffffffaa;
+
+  --ifm-footer-link-hover-color: #ffffffdd;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css
index 14337c2..d101b4a 100644
--- a/site/src/pages/index.module.css
+++ b/site/src/pages/index.module.css
@@ -4,7 +4,7 @@
  */
 
 .heroBanner {
-    background: #4391B2;
+  background: var(--ifm-color-primary);
   padding: 4rem 0;
   text-align: center;
   position: relative;
diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx
index b9509fc..8b01917 100644
--- a/site/src/pages/index.tsx
+++ b/site/src/pages/index.tsx
@@ -4,12 +4,26 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
+import { useColorMode } from '@docusaurus/theme-common';
+
 
 import styles from './index.module.css';
 
+import HeaderBorderTop from '@site/static/img/hero-border-top.svg';
+import HeaderBorderBottom from '@site/static/img/hero-border-bottom.svg';
+
+import HeaderBorderTopDark from '@site/static/img/hero-border-top.svg';
+import HeaderBorderBottomDark from '@site/static/img/hero-border-bottom.svg';
+
 function HomepageHeader() {
     const { siteConfig } = useDocusaurusContext();
+    const { isDarkTheme } = useColorMode();  
+    
     return (
+        <>
+         <div style={{width: "100%", display: "flex"}}>
+        {isDarkTheme ? <HeaderBorderTopDark style={{height: "auto", width: "inherit", marginBottom: "-1px"}} /> : <HeaderBorderTop style={{height: "auto", width: "inherit", marginBottom: "-1px"}}/>}
+        </div>
         <header className={clsx('hero hero--primary', styles.heroBanner)}>
             <div className="container">
                 <Heading as="h1" className="hero__title">
@@ -25,6 +39,10 @@ function HomepageHeader() {
                 </div>
             </div>
         </header>
+            <div style={{width: "100%", display: "flex"}}>
+                {isDarkTheme ? <HeaderBorderBottomDark style={{height: "auto", width: "inherit",  marginTop: "-1px"}} /> : <HeaderBorderBottom style={{height: "auto", width: "inherit",  marginTop: "-1px"}}/>}
+            </div>
+        </>
     );
 }
 
diff --git a/site/src/theme/Footer/index.tsx b/site/src/theme/Footer/index.tsx
new file mode 100644
index 0000000..f202374
--- /dev/null
+++ b/site/src/theme/Footer/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import Footer from '@theme-original/Footer';
+import type FooterType from '@theme/Footer';
+import type {WrapperProps} from '@docusaurus/types';
+import { useColorMode } from '@docusaurus/theme-common';
+
+import Prefooter from '@site/static/img/prefooter.svg';
+import PrefooterDark from '@site/static/img/prefooter.svg';
+
+type Props = WrapperProps<typeof FooterType>;
+
+export default function FooterWrapper(props: Props): JSX.Element {
+  const { isDarkTheme } = useColorMode();  
+  return (
+    <>
+      <div style={{width: "100%", display: "flex"}}>
+        {isDarkTheme ? <PrefooterDark style={{height: "auto", width: "inherit"}} /> : <Prefooter style={{height: "auto", width: "inherit"}}/>}
+      </div>
+      <Footer {...props} />
+    </>
+  );
+}
diff --git a/site/static/img/hero-border-bottom.svg b/site/static/img/hero-border-bottom.svg
new file mode 100644
index 0000000..5891d01
--- /dev/null
+++ b/site/static/img/hero-border-bottom.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 1920 100" width="1920" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="1920" height="100" fill="#f1f6f8"></rect><path d="M0 21L64 28.8C128 36.7 256 52.3 384 57.2C512 62 640 56 768 49.8C896 43.7 1024 37.3 1152 34.7C1280 32 1408 33 1536 40.2C1664 47.3 1792 60.7 1856 67.3L1920 74L1920 0L1856 0C1792 0 1664 0 1536 0C1408 0 1280 0 1152 0C1024 0 896 0 768 0C640 0 512 0 384 0C256 0 128 0 64 0L0 0Z" fill="#3c647c" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file
diff --git a/site/static/img/hero-border-top.svg b/site/static/img/hero-border-top.svg
new file mode 100644
index 0000000..d835364
--- /dev/null
+++ b/site/static/img/hero-border-top.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 1920 100" width="1920" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="1920" height="100" fill="#f1f6f8"></rect><path d="M0 22L64 30.3C128 38.7 256 55.3 384 58.8C512 62.3 640 52.7 768 45.3C896 38 1024 33 1152 38.2C1280 43.3 1408 58.7 1536 59.5C1664 60.3 1792 46.7 1856 39.8L1920 33L1920 101L1856 101C1792 101 1664 101 1536 101C1408 101 1280 101 1152 101C1024 101 896 101 768 101C640 101 512 101 384 101C256 101 128 101 64 101L0 101Z" fill="#3c647c" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file
diff --git a/site/static/img/prefooter.svg b/site/static/img/prefooter.svg
new file mode 100644
index 0000000..98e6a90
--- /dev/null
+++ b/site/static/img/prefooter.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 1920 100" width="1920" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="1920" height="100" fill="#f1f6f8"></rect><path d="M0 45L45.7 40C91.3 35 182.7 25 274.2 21.3C365.7 17.7 457.3 20.3 548.8 26.5C640.3 32.7 731.7 42.3 823 49.8C914.3 57.3 1005.7 62.7 1097 60.7C1188.3 58.7 1279.7 49.3 1371.2 41.7C1462.7 34 1554.3 28 1645.8 27C1737.3 26 1828.7 30 1874.3 32L1920 34L1920 101L1874.3 101C1828.7 101 1737.3 101 1645.8 101C1554.3 101 1462.7 101 1371.2 101C1279.7 101 1188.3 101 1097 101C1005.7 101 914.3 101 823 101C731.7 101 640.3 101 548.8 101C457.3 101 365.7 101 274.2 101C182.7 101 91.3 101 45.7 101L0 101Z" fill="#3c647c" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file