fix(extension): Fix ugly looking popup in dark mode. Fixes #30

2 files changed, 8 insertions, 10 deletions

diff --git a/apps/browser-extension/src/Layout.tsx b/apps/browser-extension/src/Layout.tsx
index 6ca05fdd..3eb85abd 100644
--- a/apps/browser-extension/src/Layout.tsx
+++ b/apps/browser-extension/src/Layout.tsx
@@ -17,14 +17,14 @@ export default function Layout() {
 
   return (
     <div className="flex flex-col space-y-2">
-      <div className="rounded-md bg-yellow-100 p-4">
+      <div className="rounded-md bg-yellow-100 p-4 text-black">
         <Outlet />
       </div>
       <hr />
       <div className="flex justify-between space-x-3">
         <div className="my-auto">
           <a
-            className="flex gap-2 text-black"
+            className="flex gap-2 text-foreground"
             target="_blank"
             rel="noreferrer"
             href={`${settings.address}/dashboard/bookmarks`}
diff --git a/apps/browser-extension/tailwind.config.js b/apps/browser-extension/tailwind.config.js
index 1c0c7c87..e8f2d639 100644
--- a/apps/browser-extension/tailwind.config.js
+++ b/apps/browser-extension/tailwind.config.js
@@ -1,10 +1,8 @@
-/** @type {import('tailwindcss').Config} */
-const tailwindConfig = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+import web from "@hoarder/tailwind-config/web";
+
+const config = {
+  content: web.content,
+  presets: [web],
 };
 
-export default tailwindConfig;
+export default config;