From 727570e34742408bf3d83a38b5f695192a5827e0 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Sat, 5 Aug 2023 04:50:18 +0530
Subject: [PATCH] fixed css for task lists and code with syntax highlighting

---
 apps/app/postcss.config.js  |  1 +
 apps/app/styles/editor.css  | 50 +++++++++++++++++++++----------------
 apps/app/tailwind.config.js |  5 +++-
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/apps/app/postcss.config.js b/apps/app/postcss.config.js
index 12a703d90..cbfea5ea2 100644
--- a/apps/app/postcss.config.js
+++ b/apps/app/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 6f45ecc2a..f8f91ca34 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -1,13 +1,3 @@
-.empty-node::after {
-  content: attr(data-placeholder);
-  color: rgb(var(--color-text-400));
-
-  position: absolute;
-  pointer-events: none;
-  top: 15px;
-  margin-left: 1px;
-}
-
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -42,38 +32,37 @@
 
 /* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
 
-ul[data-type="taskList"] li > label {
+ul[data-type="taskList"] li>label {
   margin-right: 0.2rem;
   user-select: none;
 }
 
 @media screen and (max-width: 768px) {
-  ul[data-type="taskList"] li > label {
+  ul[data-type="taskList"] li>label {
     margin-right: 0.5rem;
   }
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"] {
+ul[data-type="taskList"] li>label input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
-  background-color: var(--novel-white);
+  background-color: rgb(var(--color-background-100));
   margin: 0;
   cursor: pointer;
-  width: 1.2em;
-  height: 1.2em;
+  width: 1.2rem;
+  height: 1.2rem;
   position: relative;
-  top: 5px;
-  border: 2px solid var(--novel-stone-900);
+  border: 2px solid rgb(var(--color-text-100));
   margin-right: 0.3rem;
   display: grid;
   place-content: center;
 
   &:hover {
-    background-color: var(--novel-stone-50);
+    background-color: rgb(var(--color-background-80));
   }
 
   &:active {
-    background-color: var(--novel-stone-200);
+    background-color: rgb(var(--color-background-90));
   }
 
   &::before {
@@ -92,8 +81,8 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   }
 }
 
-ul[data-type="taskList"] li[data-checked="true"] > div > p {
-  color: var(--novel-stone-400);
+ul[data-type="taskList"] li[data-checked="true"]>div>p {
+  color: rgb(var(--color-text-200));
   text-decoration: line-through;
   text-decoration-thickness: 2px;
 }
@@ -103,6 +92,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 .tippy-box {
   max-width: 400px !important;
 }
+
 .ProseMirror {
   position: relative;
   word-wrap: break-word;
@@ -126,6 +116,22 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   -moz-appearance: textfield;
 }
 
+.ProseMirror pre {
+  background: #121212;
+  border-radius: 0.375rem;
+  border-color: rgba(var(--color-background-100));
+  border: 0.5px solid;
+  font-family: "JetBrainsMono", monospace;
+  padding: 0.75rem 1rem;
+}
+
+.ProseMirror pre code {
+  background: none;
+  color: inherit;
+  font-size: 0.8rem;
+  padding: 0;
+}
+
 .ProseMirror-icon {
   display: inline-block;
   line-height: 0.8;
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index fbe0994b4..11e1946a5 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -182,5 +182,8 @@ module.exports = {
       custom: ["Inter", "sans-serif"],
     },
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/typography")
+  ],
 };