Update editor styling

src/app.css

@@ -48,6 +48,11 @@
   }
 
   /* Content */
+  main.main-leather,
+  article.article-leather {
+    @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300;
+  }
+
   div.note-leather,
   p.note-leather,
   section.note-leather {
@@ -114,6 +119,25 @@
     @apply hover:bg-primary-100 dark:hover:bg-primary-800;
   }
 
+  /* Textarea */
+  div.textarea-leather {
+    @apply bg-gray-200 dark:bg-gray-800 border-gray-400 dark:border-gray-600;
+  }
+
+  div.textarea-leather > div:nth-child(1),
+  div.toolbar-leather {
+    @apply border-none;
+  }
+
+  div.textarea-leather > div:nth-child(2) {
+    @apply bg-gray-100 dark:bg-gray-900;
+  }
+
+  div.textarea-leather,
+  div.textarea-leather textarea {
+    @apply text-gray-800 dark:text-gray-300;
+  }
+
   /* Tooltip */
   div.tooltip-leather {
     @apply text-gray-800 dark:text-gray-300;

src/lib/components/Preview.svelte

@@ -2,6 +2,8 @@
   import Pharos from "$lib/parser";
   import { Heading, P } from "flowbite-svelte";
 
+  export let sectionClass: string = '';
+
   export let parser: Pharos;
   export let rootIndexId: string;
   export let depth: number = 0;
@@ -27,9 +29,9 @@
   };
 </script>
 
-<section class='note-leather flex flex-col space-y-2'>
+<section class={`note-leather flex flex-col space-y-2 ${sectionClass}`}>
   {#if depth < 4}
-    <Heading tag={getHeadingTag(depth)}>{title}</Heading>
+    <Heading tag={getHeadingTag(depth)} class='h-leather'>{title}</Heading>
     {#each orderedChildren as id, index}
       {#if childIndices.includes(id)}
         <svelte:self {parser} rootIndexId={id} depth={depth + 1} />

src/routes/new/edit/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Heading, Textarea, Toolbar, ToolbarButton } from "flowbite-svelte";
+  import { Button, Heading, Textarea, Toolbar, ToolbarButton, Tooltip } from "flowbite-svelte";
   import { CodeOutline, EyeSolid } from "flowbite-svelte-icons";
   import { editorText } from "$lib/stores";
   import Preview from "$lib/components/Preview.svelte";
@@ -22,13 +22,14 @@
   };
 </script>
 
-<main class='w-full flex justify-center'>
+<div class='w-full flex justify-center'>
-  <form class='max-w-2xl w-full'>
+  <main class='main-leather flex flex-col space-y-4 max-w-2xl w-full'>
-    <div class='flex flex-col space-y-4'>
+    <Heading tag='h1' class='h-leather mb-2'>New Article</Heading>
-      <Heading tag='h1' class='mb-2'>New Article</Heading>
+    {#if isEditing}
-      {#if isEditing}
+      <form>
         <Textarea
           id='article-content'
+          class='textarea-leather'
           rows=8
           placeholder='Write AsciiDoc content'
           bind:value={$editorText}
@@ -39,16 +40,18 @@
             </ToolbarButton>
           </Toolbar>
         </Textarea>
-      {:else}
+      </form>
-        <Toolbar>
+    {:else}
+      <form class='border border-gray-400 dark:border-gray-600 rounded-lg flex flex-col space-y-2 h-fit'>
+        <Toolbar class='toolbar-leather rounded-b-none bg-gray-200 dark:bg-gray-800'>
           <ToolbarButton name='Edit' on:click={hidePreview}>
             <CodeOutline class='w-6 h-6' />
           </ToolbarButton>
         </Toolbar>
         {#if rootIndexId}
-          <Preview {parser} {rootIndexId} />
+          <Preview sectionClass='m-2' {parser} {rootIndexId} />
         {/if}
-      {/if}
+      </form>
-    </div>
+    {/if}
-  </form>
+  </main>
-</main>
+</div>