Minor UI improvements (#5)

* Added wave patterns, adjusted primary color, minor UI tweaks

* Added greek pattern, edited colors, minor UI fixes

site/docusaurus.config.ts

@@ -83,7 +83,6 @@ const config: Config = {
             ],
         },
         footer: {
-            style: 'dark',
             links: [
                 {
                     title: 'Docs',

site/src/css/custom.css

@@ -4,27 +4,41 @@
  * work well for content-centric websites.
  */
 
+ /*@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Quicksand:[email protected]&display=swap");
+*/
+
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+ /* --ifm-font-family-base: "Quicksand", sans-serif; */
+
+  --ifm-background-color: #f1f6f8;
+
+  --ifm-color-primary: #326C85;
+  --ifm-color-primary-dark: #29586C;
+  --ifm-color-primary-darker: #275468;
+  --ifm-color-primary-darkest: #224859;
+  --ifm-color-primary-light: #97C3D8;
+  --ifm-color-primary-lighter: #A6CCDD;
+  --ifm-color-primary-lightest: #B5D4E3;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  --ifm-footer-background-color: #29586C;
+  --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. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary: #6BA8C7;
+  --ifm-color-primary-dark: #5CA0C1;
+  --ifm-color-primary-darker: #4E97BC;
   --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary-lighter:#438DB1;
+  --ifm-color-primary-lighter: #A6CCDD;
+  --ifm-color-primary-lightest: #B5D4E3;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

site/src/pages/index.module.css

@@ -1,14 +1,14 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
 .heroBanner {
-    background: #4391B2;
   padding: 4rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  background-image: url("/static/img/wave-pattern-flipped.svg"),url("/static/img/wave-pattern.svg"); 
+  background-repeat: repeat-x, repeat-x;
+  background-position: top, bottom;
+
+  background-size: 50px 50px; 
+
 }
 
 @media screen and (max-width: 996px) {

site/src/pages/index.tsx

@@ -4,12 +4,23 @@ 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 (
+        <>
         <header className={clsx('hero hero--primary', styles.heroBanner)}>
             <div className="container">
                 <Heading as="h1" className="hero__title">
@@ -25,6 +36,7 @@ function HomepageHeader() {
                 </div>
             </div>
         </header>
+        </>
     );
 }
 

site/src/theme/Footer/index.module.css

@@ -0,0 +1,14 @@
+
+.preFooter{
+    height: 50px;
+    background-color: transparent;
+
+    /* This fixes some overalp due to the bottom of the wave pattern not being perfectly straight*/
+    margin-bottom: -3px;
+
+    background-image: url("/static/img/wave-pattern.svg"); 
+    background-repeat: repeat-x;
+    background-position: bottom;
+
+    background-size: 50px 50px;
+}

site/src/theme/Footer/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Footer from '@theme-original/Footer';
+import type FooterType from '@theme/Footer';
+import type {WrapperProps} from '@docusaurus/types';
+import styles from './index.module.css';
+import clsx from 'clsx';
+
+
+type Props = WrapperProps<typeof FooterType>;
+
+export default function FooterWrapper(props: Props): JSX.Element {
+  return (
+    <div  className={clsx(styles.footerWrapper)}>
+      <div className={clsx(styles.preFooter)} />
+      <Footer {...props} />
+    </div>
+  );
+}