fix: optimize comment style

Signed-off-by: Innei <i@innei.in>
Innei · Apr 28, 2024 · c1a738b · c1a738b
1 parent cd4ee10
commit c1a738b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/src/components/modules/comment/Comment.module.css b/src/components/modules/comment/Comment.module.css
@@ -40,7 +40,8 @@
 
   img,
   video {
-    @apply rounded-md;
+    @apply my-2 rounded-md;
+
     max-height: 350px;
   }
 
@@ -50,11 +51,11 @@
 
   pre,
   code:not([class^='language-']) {
-    @apply rounded bg-zinc-700/10 px-1 py-0.5 text-zinc-900;
+    @apply rounded-md bg-zinc-700/10 px-1.5 py-0.5 text-zinc-900;
   }
 
   pre > code {
-    @apply bg-transparent px-0 py-0 !important;
+    @apply my-1 rounded-xl bg-zinc-100 p-2 !important;
   }
 }
 
@@ -73,6 +74,6 @@
   }
 
   pre > code {
-    @apply bg-transparent !important;
+    @apply bg-zinc-900 !important;
   }
 }
diff --git a/src/components/modules/comment/CommentBox/AuthedInput.tsx b/src/components/modules/comment/CommentBox/AuthedInput.tsx
@@ -35,7 +35,7 @@ export const CommentBoxAuthedInput = () => {
         className={clsx(
           'mb-2 shrink-0 select-none self-end overflow-hidden rounded-full',
           'dark:ring-zinc-800" bg-zinc-200 ring-2 ring-zinc-200 dark:bg-zinc-800',
-          'ml-[2px] backface-hidden',
+          'backface-hidden ml-[2px]',
         )}
       >
         <img
@@ -50,7 +50,7 @@ export const CommentBoxAuthedInput = () => {
         <UniversalTextArea className="pb-5" />
       </div>
 
-      <CommentBoxActionBar className="absolute bottom-0 left-12 right-0 mb-2 ml-4 w-auto px-4" />
+      <CommentBoxActionBar className="absolute bottom-0 left-14 right-0 mb-2 ml-4 w-auto px-4" />
     </div>
   )
 }
diff --git a/src/components/modules/comment/CommentBox/CommentBoxLegacyForm.tsx b/src/components/modules/comment/CommentBox/CommentBoxLegacyForm.tsx
@@ -72,7 +72,7 @@ const FormWithUserInfo = () => {
         <UniversalTextArea className="pb-8" />
       </div>
 
-      <CommentBoxActionBar className="absolute bottom-4 left-0 right-4 mb-2 ml-4 w-auto px-4" />
+      <CommentBoxActionBar className="absolute bottom-4 left-0 right-4 mb-2 ml-2 w-auto px-4" />
     </Form>
   )
 }
@@ -86,7 +86,7 @@ const LoggedForm = () => {
         className={clsx(
           'mb-2 shrink-0 select-none self-end overflow-hidden rounded-full',
           'dark:ring-zinc-800" bg-zinc-200 ring-2 ring-zinc-200 dark:bg-zinc-800',
-          'ml-[2px] backface-hidden',
+          'backface-hidden ml-[2px]',
         )}
       >
         <Image
@@ -101,7 +101,7 @@ const LoggedForm = () => {
         <UniversalTextArea className="pb-5" />
       </div>
 
-      <CommentBoxActionBar className="absolute bottom-0 left-12 right-0 mb-2 ml-4 w-auto px-4" />
+      <CommentBoxActionBar className="absolute bottom-0 left-14 right-0 mb-2 ml-4 w-auto px-4" />
     </div>
   )
 }
diff --git a/src/components/modules/comment/CommentMarkdown.tsx b/src/components/modules/comment/CommentMarkdown.tsx
@@ -7,8 +7,6 @@ const disabledTypes = [
   'footnote',
   'footnoteReference',
 
-  'image',
-
   'htmlComment',
   'htmlSelfClosing',
   'htmlBlock',