From 66b1f0845343bcb7a5b674276f4d02058eebc252 Mon Sep 17 00:00:00 2001
From: Donald Huh <don@livekit.io>
Date: Tue, 12 Dec 2023 16:16:44 +0900
Subject: [PATCH] fix: broken button background color

---
 postcss.config.js      | 3 ++-
 src/app/layout.tsx     | 4 ++--
 src/app/page.tsx       | 4 +++-
 src/styles/globals.css | 4 +++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..a5a6ff8 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 69efaf8..f82273a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -10,8 +10,8 @@ import { Inter } from "next/font/google";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Livestream with LiveKit",
+  description: "A sample full-stack application built with LiveKit",
 };
 
 export default function RootLayout({
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1cf60cc..658c247 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -22,7 +22,9 @@ export default function Home() {
           </Text>
           <Flex gap="2">
             <BroadcastDialog>
-              <Button size="3">Stream from browser</Button>
+              <Button variant="solid" size="3">
+                Stream from browser
+              </Button>
             </BroadcastDialog>
             <JoinDialog>
               <Button variant="outline" size="3">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c9..873dc34 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,5 @@
-@tailwind base;
+@import "tailwindcss/base";
+@import "@radix-ui/themes/styles.css";
+
 @tailwind components;
 @tailwind utilities;