From 97eb8d43d4dd15167e62ef5e82ca66ec0d8d4bd7 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 11 Nov 2024 16:10:47 +0530
Subject: [PATCH] style: updated margins and font styles for editor (#5978)

* style: updated margins and font styles for editor

* fix: code block font size in small font

* fix: remove duplicate code
---
 .../src/core/extensions/core-without-props.ts |  2 +-
 .../editor/src/core/extensions/extensions.tsx |  2 +-
 .../core/extensions/read-only-extensions.tsx  |  2 +-
 packages/editor/src/styles/editor.css         | 70 +++++++++++--------
 packages/editor/src/styles/variables.css      |  8 +--
 web/core/components/pages/editor/title.tsx    |  6 +-
 6 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/packages/editor/src/core/extensions/core-without-props.ts b/packages/editor/src/core/extensions/core-without-props.ts
index abceea4ff5..075d90f2df 100644
--- a/packages/editor/src/core/extensions/core-without-props.ts
+++ b/packages/editor/src/core/extensions/core-without-props.ts
@@ -46,7 +46,7 @@ export const CoreEditorExtensionsWithoutProps = [
   CustomQuoteExtension,
   CustomHorizontalRule.configure({
     HTMLAttributes: {
-      class: "my-4 border-custom-border-400",
+      class: "py-4 border-custom-border-400",
     },
   }),
   CustomLinkExtension.configure({
diff --git a/packages/editor/src/core/extensions/extensions.tsx b/packages/editor/src/core/extensions/extensions.tsx
index 3907e3b9d2..959d20e2ba 100644
--- a/packages/editor/src/core/extensions/extensions.tsx
+++ b/packages/editor/src/core/extensions/extensions.tsx
@@ -78,7 +78,7 @@ export const CoreEditorExtensions = (args: TArguments) => {
     DropHandlerExtension(),
     CustomHorizontalRule.configure({
       HTMLAttributes: {
-        class: "my-4 border-custom-border-400",
+        class: "py-4 border-custom-border-400",
       },
     }),
     CustomKeymap,
diff --git a/packages/editor/src/core/extensions/read-only-extensions.tsx b/packages/editor/src/core/extensions/read-only-extensions.tsx
index 31ae1d90a1..2d90592d68 100644
--- a/packages/editor/src/core/extensions/read-only-extensions.tsx
+++ b/packages/editor/src/core/extensions/read-only-extensions.tsx
@@ -67,7 +67,7 @@ export const CoreReadOnlyEditorExtensions = (props: Props) => {
     CustomQuoteExtension,
     CustomHorizontalRule.configure({
       HTMLAttributes: {
-        class: "my-4 border-custom-border-400",
+        class: "py-4 border-custom-border-400",
       },
     }),
     CustomLinkExtension.configure({
diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
index ae7256cf9a..fff3b533e8 100644
--- a/packages/editor/src/styles/editor.css
+++ b/packages/editor/src/styles/editor.css
@@ -12,7 +12,7 @@
   cursor: text;
   font-family: var(--font-style);
   font-size: var(--font-size-regular);
-  line-height: 1.2;
+  font-weight: 400;
   color: inherit;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -248,11 +248,6 @@ div[data-type="horizontalRule"] {
   }
 }
 
-/* image resizer */
-.moveable-control-box {
-  z-index: 10 !important;
-}
-
 /* Cursor styles for the inline code blocks */
 @keyframes blink {
   49% {
@@ -314,13 +309,23 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 }
 /* end numbered, bulleted and to-do lists spacing */
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0 !important;
+}
+
 /* tailwind typography */
 .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 2rem;
+    padding-top: 28px;
   }
 
-  margin-bottom: 4px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h1);
   line-height: var(--line-height-h1);
   font-weight: 600;
@@ -328,10 +333,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 
 .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1.4rem;
+    padding-top: 28px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h2);
   line-height: var(--line-height-h2);
   font-weight: 600;
@@ -339,10 +344,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 
 .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1rem;
+    padding-top: 28px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h3);
   line-height: var(--line-height-h3);
   font-weight: 600;
@@ -350,10 +355,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 
 .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1rem;
+    padding-top: 28px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h4);
   line-height: var(--line-height-h4);
   font-weight: 600;
@@ -361,10 +366,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 
 .prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1rem;
+    padding-top: 20px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h5);
   line-height: var(--line-height-h5);
   font-weight: 600;
@@ -372,30 +377,40 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 
 .prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   &:not(:first-child) {
-    margin-top: 1rem;
+    padding-top: 20px;
   }
 
-  margin-bottom: 1px;
+  padding-bottom: 4px;
   font-size: var(--font-size-h6);
   line-height: var(--line-height-h6);
   font-weight: 600;
 }
 
 .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  &:not(:first-child) {
-    margin-top: 0.25rem;
-  }
-
   &:first-child {
-    margin-top: 0;
+    padding-top: 0;
+  }
+
+  &:not(:first-child) {
+    padding-top: 4px;
+  }
+
+  &:last-child {
+    padding-bottom: 4px;
+  }
+
+  &:not(:last-child) {
+    padding-bottom: 8px;
   }
 
-  margin-bottom: 1px;
-  padding: 3px 0;
   font-size: var(--font-size-regular);
   line-height: var(--line-height-regular);
 }
 
+p + p {
+  padding-top: 8px !important;
+}
+
 .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p,
 .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p {
   font-size: var(--font-size-list);
@@ -432,11 +447,6 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 [data-text-color="purple"] {
   color: var(--editor-colors-purple-text);
 }
-/* [data-text-color="pink-blue-gradient"] {
-  background-clip: text;
-  color: transparent;
-  background-image: linear-gradient(90deg, #a961cd 50%, #e75962 100%);
-} */
 /* end text colors */
 
 /* background colors */
diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css
index 8b6595b871..d25500692b 100644
--- a/packages/editor/src/styles/variables.css
+++ b/packages/editor/src/styles/variables.css
@@ -46,8 +46,8 @@
     --font-size-h5: 1.125rem;
     --font-size-h6: 1rem;
     --font-size-regular: 1rem;
+    --font-size-code: 0.85rem;
     --font-size-list: var(--font-size-regular);
-    --font-size-code: var(--font-size-regular);
 
     --line-height-h1: 2.25rem;
     --line-height-h2: 2rem;
@@ -56,8 +56,8 @@
     --line-height-h5: 1.5rem;
     --line-height-h6: 1.5rem;
     --line-height-regular: 1.5rem;
+    --line-height-code: 1.5rem;
     --line-height-list: var(--line-height-regular);
-    --line-height-code: var(--line-height-regular);
   }
   &.small-font {
     --font-size-h1: 1.4rem;
@@ -67,8 +67,8 @@
     --font-size-h5: 0.9rem;
     --font-size-h6: 0.8rem;
     --font-size-regular: 0.8rem;
+    --font-size-code: 0.8rem;
     --font-size-list: var(--font-size-regular);
-    --font-size-code: var(--font-size-regular);
 
     --line-height-h1: 1.8rem;
     --line-height-h2: 1.6rem;
@@ -77,8 +77,8 @@
     --line-height-h5: 1.2rem;
     --line-height-h6: 1.2rem;
     --line-height-regular: 1.2rem;
+    --line-height-code: 1.2rem;
     --line-height-list: var(--line-height-regular);
-    --line-height-code: var(--line-height-regular);
   }
   /* end font sizes and line heights */
 
diff --git a/web/core/components/pages/editor/title.tsx b/web/core/components/pages/editor/title.tsx
index dafda1db3a..82f1696609 100644
--- a/web/core/components/pages/editor/title.tsx
+++ b/web/core/components/pages/editor/title.tsx
@@ -25,9 +25,9 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   // page filters
   const { fontSize } = usePageFilters();
   // ui
-  const titleClassName = cn("bg-transparent tracking-[-2%] font-semibold", {
-    "text-[1.6rem] leading-[1.8rem]": fontSize === "small-font",
-    "text-[2rem] leading-[2.25rem]": fontSize === "large-font",
+  const titleClassName = cn("bg-transparent tracking-[-2%] font-bold", {
+    "text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
+    "text-[2rem] leading-[2.375rem]": fontSize === "large-font",
   });
 
   return (