extension: Add the logo to multiple pages in the extension

4 files changed, 20 insertions, 1 deletions

diff --git a/packages/browser-extension/src/Logo.tsx b/packages/browser-extension/src/Logo.tsx
new file mode 100644
index 00000000..6b29e68c
--- /dev/null
+++ b/packages/browser-extension/src/Logo.tsx
@@ -0,0 +1,10 @@
+import { PackageOpen } from "lucide-react";
+
+export default function Logo() {
+  return (
+    <span className="mx-auto flex gap-2">
+      <PackageOpen size="40" className="my-auto" />
+      <p className="text-4xl">Hoarder</p>
+    </span>
+  );
+}
diff --git a/packages/browser-extension/src/NotConfiguredPage.tsx b/packages/browser-extension/src/NotConfiguredPage.tsx
index a5b9c734..f7a11106 100644
--- a/packages/browser-extension/src/NotConfiguredPage.tsx
+++ b/packages/browser-extension/src/NotConfiguredPage.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import usePluginSettings from "./utils/settings";
+import { PackageOpen } from "lucide-react";
+import Logo from "./Logo";
 
 export default function NotConfiguredPage() {
   const navigate = useNavigate();
@@ -24,7 +26,10 @@ export default function NotConfiguredPage() {
 
   return (
     <div className="flex flex-col space-y-2">
-      <span>To use the plugin, you need to configure it first.</span>
+      <Logo />
+      <span className="pt-3">
+        To use the plugin, you need to configure it first.
+      </span>
       <p className="text-red-500">{error}</p>
       <div className="flex gap-2">
         <label className="my-auto">Server Address</label>
diff --git a/packages/browser-extension/src/OptionsPage.tsx b/packages/browser-extension/src/OptionsPage.tsx
index 9a490995..74b2067e 100644
--- a/packages/browser-extension/src/OptionsPage.tsx
+++ b/packages/browser-extension/src/OptionsPage.tsx
@@ -3,6 +3,7 @@ import usePluginSettings from "./utils/settings";
 import { api } from "./utils/trpc";
 import Spinner from "./Spinner";
 import { useNavigate } from "react-router-dom";
+import Logo from "./Logo";
 
 export default function OptionsPage() {
   const navigate = useNavigate();
@@ -45,6 +46,7 @@ export default function OptionsPage() {
 
   return (
     <div className="flex flex-col space-y-2">
+      <Logo />
       <span className="text-lg">Settings</span>
       <hr />
       <div className="flex gap-2">
diff --git a/packages/browser-extension/src/SignInPage.tsx b/packages/browser-extension/src/SignInPage.tsx
index 203480f7..6db7c348 100644
--- a/packages/browser-extension/src/SignInPage.tsx
+++ b/packages/browser-extension/src/SignInPage.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { api } from "./utils/trpc";
 import usePluginSettings from "./utils/settings";
 import { useNavigate } from "react-router-dom";
+import Logo from "./Logo";
 
 export default function SignInPage() {
   const navigate = useNavigate();
@@ -44,6 +45,7 @@ export default function SignInPage() {
 
   return (
     <div className="flex flex-col space-y-2">
+      <Logo />
       <p className="text-lg">Login</p>
       <p className="text-red-500">{errorMessage}</p>
       <form className="flex flex-col gap-y-2" onSubmit={onSubmit}>