Fix comment styles by adding prose-sm (#676)

codu-code · Dec 16, 2023 · c7b1b31 · c7b1b31
1 parent ba8559f
commit c7b1b31
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/components/Comments/CommentsArea.tsx b/components/Comments/CommentsArea.tsx
@@ -295,7 +295,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                 </div>
 
                 <div className="-mt-2 ml-4 border-l-2 border-neutral-400 pl-2 dark:border-neutral-700">
-                  <div className="prose overflow-x-hidden text-sm dark:prose-invert">
+                  <div className="prose-sm overflow-x-hidden text-sm dark:prose-invert">
                     {Markdoc.renderers.react(content, React, {
                       components: markdocComponents,
                     })}
@@ -413,7 +413,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
         )}
         {viewPreviewId === id ? (
           <article
-            className="prose prose-invert overflow-x-hidden text-sm"
+            className="prose-sm prose-invert overflow-x-hidden text-sm"
             style={{ whiteSpace: "pre-wrap" }}
           >
             {Markdoc.renderers.react(
@@ -439,11 +439,11 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
             />
           </>
         )}
-        <div className="flex items-center">
+        <div className="flex">
           <button
             disabled={createCommentStatus === "loading"}
             type="submit"
-            className=" primary-button border-2 text-sm text-neutral-300 hover:text-white"
+            className="primary-button border-2 text-sm text-neutral-300 hover:text-white"
           >
             {editMode ? "Update" : "Submit"}
           </button>

diff --git a/styles/globals.css b/styles/globals.css
@@ -59,7 +59,7 @@ body {
 }
 
 .primary-button {
-  @apply ml-4 inline-flex justify-center rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-white disabled:border-neutral-300 disabled:from-neutral-500 disabled:to-neutral-700 disabled:text-neutral-300  disabled:hover:text-neutral-300;
+  @apply inline-flex justify-center rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-white disabled:border-neutral-300 disabled:from-neutral-500 disabled:to-neutral-700 disabled:text-neutral-300  disabled:hover:text-neutral-300;
 }
 
 .secondary-button {