fix background on some pages

Author: jakmeier

bouncy_frontend/src/lib/components/activity/ActivityReview.svelte

@@ -28,7 +28,7 @@
 {#if !showResults}
   <LessonEnd bind:showResults></LessonEnd>
 {:else}
-  <StandardPage gray>
+  <StandardPage black>
     <div class="top-summary">
       <LessonEndResults {hitRate} {passed}></LessonEndResults>
       <div class="down-marker">

bouncy_frontend/src/lib/components/activity/LessonEnd.svelte

@@ -7,7 +7,7 @@
   let { showResults = $bindable() } = $props();
 </script>
 
-<StandardPage gray>
+<StandardPage black>
   <!-- <h3>That was fun, wasn't it?</h3> -->
   <div class="outer">
     <DarkSection>

bouncy_frontend/src/lib/components/ui/LogoHeader.svelte

@@ -6,7 +6,7 @@
    * @typedef {Object} Props
    * @property {string} [title]
    * @property {boolean} [white]
-   * @property {boolean} [gray]
+   * @property {boolean} [black]
    * @property {boolean} [accent]
    * @property {boolean} [mainColor]
    * @property {boolean} [backButton]
@@ -16,7 +16,7 @@
   /** @type {Props} */
   let {
     white = false,
-    gray = false,
+    black = false,
     accent = false,
     mainColor = false,
     title = '',
@@ -27,7 +27,7 @@
   let bgColor = $derived(
     white
       ? 'var(--theme-neutral-light)'
-      : gray
+      : black
         ? 'var(--theme-neutral-dark)'
         : accent
           ? 'var(--theme-accent)'

bouncy_frontend/src/lib/components/ui/StandardPage.svelte

@@ -8,12 +8,12 @@
    * @property {import('svelte').Snippet} [children]
    * @property {string} [title]
    * @property {boolean} [white]
-   * @property {boolean} [gray]
+   * @property {boolean} [black]
    * @property {boolean} [accent]
    * @property {boolean} [mainColor]
    */
   /** @type {Props} */
-  let { children, title, white, gray, accent, mainColor } = $props();
+  let { children, title, white, black, accent, mainColor } = $props();
 </script>
 
 {#if mainColor}
@@ -24,11 +24,16 @@
     bgColor="var(--theme-neutral-light)"
     color="var(--theme-neutral-black)"
   ></Background>
+{:else if black}
+  <Background
+    bgColor="var(--theme-neutral-black)"
+    color="var(--theme-neutral-white)"
+  ></Background>
 {/if}
 
 <div class="wrapper">
   <div>
-    <LogoHeader {white} {gray} {accent} {mainColor} {title} />
+    <LogoHeader {white} {black} {accent} {mainColor} {title} />
   </div>
 
   <div class="content">