chore: use accentColor

schibsted · Dec 23, 2023 · 62c6b4e · 62c6b4e
1 parent 8823210
commit 62c6b4e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/frontend/src/components/Upload.astro b/frontend/src/components/Upload.astro
@@ -1,3 +1,11 @@
+---
+interface Props {
+  accentColor: string;
+}
+
+const { accentColor } = Astro.props;
+---
+
 <form class="upload-form">
   <legend>
     <h1>Let us transcribe</h1>
@@ -8,15 +16,19 @@
     </p>
 
     <p>
-      If you need to transcribe something extremely sensetive, you should run
-      the local <a
-        href="https://apps.apple.com/us/app/jojo-transcribe/id1659864300"
+      If you need to transcribe something very sensetive, you should run the
+      local <a href="https://apps.apple.com/us/app/jojo-transcribe/id1659864300"
         >MacOS app.</a
       >
     </p>
   </legend>
 
-  <label for="file-upload" id="file-upload-button" class="file-upload-button">
+  <label
+    for="file-upload"
+    id="file-upload-button"
+    style={`background-color: ${accentColor}`}
+    class="file-upload-button"
+  >
     <input
       id="file-upload"
       name="file-dropzone-upload"

diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
@@ -4,7 +4,7 @@ import type { Image } from "../components/BackgroundImages/credits";
 
 interface Props {
   title: string;
-  backgroundImage: Image | undefined;
+  backgroundImage: Image;
 }
 
 const { title, backgroundImage } = Astro.props;

diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
@@ -6,7 +6,7 @@ import Upload from "../components/Upload.astro";
 import ImageCredits from "../components/ImageCredits.astro";
 import { images } from "../components/BackgroundImages/credits";
 
-const image = images[Math.floor(Math.random() * images.length)];
+const image = images[Math.floor(Math.random() * images.length)]!;
 ---
 
 <Layout title="JoJo Transcribe" backgroundImage={image}>
@@ -16,7 +16,7 @@ const image = images[Math.floor(Math.random() * images.length)];
   <main>
     <Stats />
 
-    <Upload />
+    <Upload accentColor={image.accentColor} />
   </main>
 
   <footer>

diff --git a/frontend/src/pages/job/[jobId].astro b/frontend/src/pages/job/[jobId].astro
@@ -2,7 +2,7 @@
 import Layout from '../../layouts/Layout.astro';
 import { images } from "../../components/BackgroundImages/credits";
 
-const image = images[Math.floor(Math.random() * images.length)];
+const image = images[Math.floor(Math.random() * images.length)]!;
 
 const { jobId } = Astro.params;
 ---