Fix and update customization docs

.gitignore

@@ -122,4 +122,5 @@ src/frontend/sass
 go-vendor-*.tgz
 
 website/build
-website/site-dist
+website/site-dist
+website/.docusaurus

docs/issue_template.md

@@ -26,11 +26,11 @@
 
 ### Actual behaviour
 
-### Steps to reproduce the behaviour
+### Steps to reproduce the behavior
 
 ### Log output covering before error and any error statements
 ```
-Insert your log here
+Insert log hereCopy
 ```
 
 

docs/pull_request_template.md

@@ -1,3 +1,9 @@
+---
+id: pull_request_template
+title: Pull request template for contributions to Stratos
+sidebar_label: PR template 
+---
+
 <!--- Provide a general summary of your changes in the Title above -->
 
 ## Description

src/frontend/packages/example-theme/_index.scss

@@ -2,8 +2,60 @@
 
 // Custom Theme
 @import './sass/custom';
+@import './sass/custom/acme-colors';
+
+// Style overrides
+@import './sass/custom/acme';
 
 @function stratos-theme() {
   $theme: stratos-theme-helper($stratos-theme);
-  @return $theme
-}
+  @return (
+    default: create-custom-theme($stratos-theme),
+    dark: create-dark-theme()
+  );
+}
+
+@function create-custom-theme($base-theme) {
+  $theme: stratos-theme-helper($base-theme);
+
+  // Modify some of the colors
+  $app-theme: map-get($theme, app-theme);
+  $app-theme: map-merge($app-theme, (
+    header-background-color: $acme-text,
+    header-foreground-color: $acme-dark-gray,
+    header-background-span: false,
+    stratos-title-show-text: true,
+    user-avatar-background-color: $acme-text,
+    user-avatar-foreground-color: $acme-primary-color,
+    user-avatar-header-invert-colors: false,
+    side-nav: (
+      background: $acme-dark-gray,
+      text: $acme-text-gray,
+      active: $acme-side-nav-active,
+      active-text: $acme-text-gray,
+      hover: $acme-side-nav-active,
+      hover-text: $acme-text-gray
+    )
+  ));
+
+  $theme: map-merge($theme, (
+    app-theme: $app-theme
+  ));
+
+  @return $theme;
+}
+
+@function create-dark-theme() {
+  $theme: create-custom-theme($stratos-dark-theme);
+
+  $app-theme: map-get($theme, app-theme);
+  $app-theme: map-merge($app-theme, (
+    header-background-color: $acme-dark-gray,
+    header-foreground-color: $acme-text,
+  ));
+
+  $theme: map-merge($theme, (
+    app-theme: $app-theme
+  ));
+  @return $theme;
+}

src/frontend/packages/example-theme/package.json

@@ -6,7 +6,7 @@
       "assets/core": "core/assets",
       "assets/favicon.ico": "favicon.ico"
     },
-    "theme":{
+    "theme": {
       "loadingCss": "loader/loading.css",
       "loadingHtml": "loader/loading.html"
     }

src/frontend/packages/example-theme/sass/custom.scss

@@ -14,5 +14,3 @@ $stratos-dark-theme: mat-dark-theme($acme-theme-primary, $acme-theme-primary, $a
 
 // Default Theme
 $stratos-theme: mat-light-theme($acme-theme-primary, $acme-theme-primary, $acme-theme-warn);
-
-@import 'custom/acme';

src/frontend/packages/example-theme/sass/custom/acme-colors.scss

@@ -1,7 +1,23 @@
+// These colors need tidying, some aren't used
+
 $acme-primary: #00c081;
 $acme-secondary: #00243e;
 $acme-text: #fff;
 $acme-text-gray: #ccc;
 $acme-button-gray: #888;
 $acme-dark-blue: #06253a;
 $acme-blue: #073155;
+
+// Acme Brand primary colour
+$acme-primary-color: #035a97;
+
+// Secondary blue colour
+$acme-secondary: #035a97;
+$acme-text: #fff;
+$acme-text-gray: #ccc;
+$acme-dark-blue: #06253a;
+$acme-blue: #073155;
+$acme-side-nav: $acme-secondary;
+$acme-side-nav-active: #003358;
+
+$acme-dark-gray: #333

src/frontend/packages/example-theme/sass/custom/acme.scss

@@ -1,71 +1,11 @@
-// Style overrides
-// Acme Brand primary colour
-$acme-primary-color: #035a97;
+@import './acme-colors';
 
-// Secondary blue colour
-$acme-secondary: #035a97;
-$acme-text: #fff;
-$acme-text-gray: #ccc;
-$acme-dark-blue: #06253a;
-$acme-blue: #073155;
-$acme-side-nav: $acme-secondary;
-$acme-side-nav-active: #003358;
+// Style overrides
 
 body.stratos {
-  app-page-subheader {
-    .page-subheader {
-      background-color: #fff;
-      color: #333;
-    }
-  }
-
-  .page-header__divider {
-    color: #333;
-  }
-
-  .page-header__menu-button-icon {
-    background-color: $acme-primary-color;
-    color: $acme-text;
-  }
-
-  .mat-tab-nav-bar.mat-primary.mat-background-primary {
-    .mat-tab-links {
-      background-color: #fff;
-      color: #333;
-    }
-    .mat-tab-link {
-      color: #333;
-    }
-    .mat-ink-bar {
-      background-color: $acme-primary-color;
+  .favorite-list {
+    .app-no-content-container {
+      color: $acme-dark-blue;
     }
   }
-
-  .stratos-title__logo {
-    width: 160px;
-  }
-
-  .page-header .mat-toolbar.mat-primary {
-    background-color: #fff;
-    color: #333;
-  }
-
-  // Use Acme Blue Side Navigation
-  .side-nav,
-  .side-nav__top,
-  .side-nav__item--active:hover {
-    background-color: $acme-side-nav;
-  }
-  .side-nav__item--active,
-  .side-nav__item:hover {
-    background-color: $acme-side-nav-active;
-  }
-  .side-nav__bottom {
-    color: $acme-text-gray;
-  }
-
-  // Show the text Stratos beneath the Acme logo
-  .stratos-title > .stratos-title__header {
-    display: inline-block;
-  }
 }

website/docs/extensions/backend.md

@@ -18,9 +18,9 @@ Currently, to create an extension to the backend:
 
 1. Build Jetstream
 
-> Note: There are a few plugins in the `src/jetstream/plugins` folder that should help serve as examples of how to write a plugin.
+> There are a few plugins in the `src/jetstream/plugins` folder that should help serve as examples of how to write a plugin.
 
-> Note: Jetstream uses the [Echo web server](https://echo.labstack.com/) from Labstack - some familiarity with this is required when developing backend plugins.
+> Jetstream uses the [Echo web server](https://echo.labstack.com/) from Labstack - some familiarity with this is required when developing backend plugins.
 ## Plugin Interface
 
 All plugins must implement the interface `interfaces.StratosPlugin` - this is defined in `src/jetstream/repository/interfaces/plugin.go`.