Update package version and apply styling changes

tomfanhm · Apr 29, 2024 · ae88666 · ae88666
1 parent aadddf4
commit ae88666
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -213,12 +213,18 @@ This library uses Tailwind CSS and Shadcn UI for styling. Ensure you have Tailwi
 
 2. **tailwind.config.js**
 
+- Remember to apply "./node_modules/firebase-discussion/\*_/_.{js,ts,jsx,tsx}"
+
 ```javascript
 /** @type {import('tailwindcss').Config} */
 import Typography from "@tailwindcss/typography";
 
 export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/firebase-discussion/**/*.{js,ts,jsx,tsx}",
+  ],
   darkMode: ["class"],
   theme: {
     extend: {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "firebase-discussion",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "Tom Fan",
   "license": "MIT",
   "repository": {

diff --git a/src/components/atom-dark.ts b/src/components/atom-dark.ts
@@ -43,10 +43,8 @@ export const atomDark: {
     margin: ".5em 0",
     overflow: "auto",
     borderRadius: "0.3em",
-    background: "transparent",
   },
   ':not(pre) > code[class*="language-"]': {
-    background: "transparent",
     padding: ".1em",
     borderRadius: ".3em",
   },

diff --git a/src/components/comment-card.tsx b/src/components/comment-card.tsx
@@ -9,7 +9,7 @@ import MarkdownRenderer from "./markdown-renderer";
 import Replies from "./replies";
 import ReplyInput from "./reply-input";
 import Share from "./share";
-import { Card, CardContent, CardFooter, CardHeader } from "./ui/card";
+import { Card, CardContent, CardHeader } from "./ui/card";
 import UserReactions from "./user-reactions";
 
 type CommentCardProps = {
@@ -92,9 +92,7 @@ const CommentCard: React.FC<CommentCardProps> = ({ data }) => {
         </CardContent>
       )}
       {/* Input */}
-      <CardFooter className="border-t py-4">
-        <ReplyInput identifier={{ discussion: identifier, comment: data.id }} />
-      </CardFooter>
+      <ReplyInput identifier={{ discussion: identifier, comment: data.id }} />
     </Card>
   );
 };

diff --git a/src/components/markdown-renderer.tsx b/src/components/markdown-renderer.tsx
@@ -70,7 +70,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content }) => {
           return (
             <div className="relative" style={style}>
               <CopyButton>{children}</CopyButton>
-              <pre>{children}</pre>
+              <pre className="bg-slate-900">{children}</pre>
             </div>
           );
         },

diff --git a/src/components/reactions-popover.tsx b/src/components/reactions-popover.tsx
@@ -36,7 +36,11 @@ const ReactionsPopover: React.FC<ReactionsPopoverProps> = ({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="icon" className="rounded-full">
+        <Button
+          variant="outline"
+          size="icon"
+          className="rounded-full text-foreground"
+        >
           <SmileSvg className="h-4 w-4 fill-current" />
         </Button>
       </PopoverTrigger>

diff --git a/src/components/reply-input.tsx b/src/components/reply-input.tsx
@@ -59,76 +59,80 @@ const ReplyInput: React.FC<ReplyInputProps> = ({ identifier }) => {
 
   if (!focus)
     return (
-      <Input
-        placeholder="Write a reply"
-        readOnly
-        onClick={() => setFocus(true)}
-      />
+      <CardFooter className="border-t py-4">
+        <Input
+          placeholder="Write a reply"
+          readOnly
+          onClick={() => setFocus(true)}
+        />
+      </CardFooter>
     );
 
   return (
-    <form className="w-full" onSubmit={handleSubmit}>
-      <Tabs defaultValue="write" className="w-full">
-        <Card className="border-none shadow-none">
-          {/* Header */}
-          <CardHeader className="px-0 pb-0">
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="write">Write</TabsTrigger>
-              <TabsTrigger value="preview">Preview</TabsTrigger>
-            </TabsList>
-          </CardHeader>
-          {/* Content */}
-          <CardContent className="px-0 py-2">
-            <TabsContent value="write">
-              <div className="rounded-md focus-within:ring-1 focus-within:ring-ring">
-                <Textarea
-                  ref={textareaRef}
-                  placeholder="Write a reply"
-                  disabled={!user}
-                  className="max-h-[500px] min-h-[100px] focus-visible:ring-0"
-                  value={reply}
-                  onChange={handleInputChange}
-                />
-                <div className="flex justify-end rounded-b-md border border-t-0 px-2.5 py-2 align-middle">
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://guides.github.com/features/mastering-markdown/"
-                  >
-                    <MarkdownSvg
-                      className="h-4 w-4 fill-current"
-                      aria-label="hidden"
-                    />
-                  </a>
+    <CardFooter className="border-t py-4">
+      <form className="w-full" onSubmit={handleSubmit}>
+        <Tabs defaultValue="write" className="w-full">
+          <Card className="border-none shadow-none">
+            {/* Header */}
+            <CardHeader className="px-0 pb-0">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="write">Write</TabsTrigger>
+                <TabsTrigger value="preview">Preview</TabsTrigger>
+              </TabsList>
+            </CardHeader>
+            {/* Content */}
+            <CardContent className="px-0 py-2">
+              <TabsContent value="write">
+                <div className="rounded-md focus-within:ring-1 focus-within:ring-ring">
+                  <Textarea
+                    ref={textareaRef}
+                    placeholder="Write a reply"
+                    disabled={!user}
+                    className="max-h-[500px] min-h-[100px] focus-visible:ring-0"
+                    value={reply}
+                    onChange={handleInputChange}
+                  />
+                  <div className="flex justify-end rounded-b-md border border-t-0 px-2.5 py-2 align-middle">
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://guides.github.com/features/mastering-markdown/"
+                    >
+                      <MarkdownSvg
+                        className="h-4 w-4 fill-current"
+                        aria-label="hidden"
+                      />
+                    </a>
+                  </div>
                 </div>
+              </TabsContent>
+              <TabsContent value="preview">
+                <div className="min-h-[100px] border-b-2 px-2 py-4">
+                  <MarkdownRenderer content={reply} />
+                </div>
+              </TabsContent>
+            </CardContent>
+            <CardFooter className="px-0">
+              <div className="flex flex-1 items-center justify-end gap-2">
+                <Button
+                  variant="outline"
+                  type="button"
+                  onClick={() => {
+                    setFocus(false);
+                    setReply("");
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={!reply || loading}>
+                  Reply
+                </Button>
               </div>
-            </TabsContent>
-            <TabsContent value="preview">
-              <div className="min-h-[100px] border-b-2 px-2 py-4">
-                <MarkdownRenderer content={reply} />
-              </div>
-            </TabsContent>
-          </CardContent>
-          <CardFooter className="px-0">
-            <div className="flex flex-1 items-center justify-end gap-2">
-              <Button
-                variant="outline"
-                type="button"
-                onClick={() => {
-                  setFocus(false);
-                  setReply("");
-                }}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={!reply || loading}>
-                Reply
-              </Button>
-            </div>
-          </CardFooter>
-        </Card>
-      </Tabs>
-    </form>
+            </CardFooter>
+          </Card>
+        </Tabs>
+      </form>
+    </CardFooter>
   );
 };
 export default ReplyInput;
diff --git a/src/components/user-reactions.tsx b/src/components/user-reactions.tsx
@@ -67,7 +67,7 @@ const UserReactions: React.FC<UserReactionsProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-wrap items-center gap-2",
+        "flex flex-wrap items-center gap-2 text-foreground",
         category === "discussion" ? "justify-center" : "justify-start"
       )}
     >

diff --git a/src/example/index.tsx b/src/example/index.tsx
@@ -1,9 +1,12 @@
 import React from "react";
 import FirebaseDiscussion from "@/components";
 
+import { cn } from "@/lib/utils";
+
 import { auth, firestore } from "./firebase";
 
 type ExampleProps = {
+  theme: "light" | "dark";
   appleProvider: boolean;
   facebookProvider: boolean;
   githubProvider: boolean;
@@ -13,6 +16,7 @@ type ExampleProps = {
 };
 
 const Example: React.FC<ExampleProps> = ({
+  theme = "light",
   appleProvider,
   facebookProvider,
   githubProvider,
@@ -21,17 +25,19 @@ const Example: React.FC<ExampleProps> = ({
   twitterProvider,
 }) => {
   return (
-    <FirebaseDiscussion
-      firestore={firestore}
-      auth={auth}
-      identifier="test-discussion"
-      appleProvider={appleProvider}
-      facebookProvider={facebookProvider}
-      githubProvider={githubProvider}
-      googleProvider={googleProvider}
-      microsoftProvider={microsoftProvider}
-      twitterProvider={twitterProvider}
-    />
+    <div className={cn(theme, "relative")}>
+      <FirebaseDiscussion
+        firestore={firestore}
+        auth={auth}
+        identifier="test-discussion"
+        appleProvider={appleProvider}
+        facebookProvider={facebookProvider}
+        githubProvider={githubProvider}
+        googleProvider={googleProvider}
+        microsoftProvider={microsoftProvider}
+        twitterProvider={twitterProvider}
+      />
+    </div>
   );
 };
 export default Example;