overall better

src/App.svelte

@@ -3,20 +3,15 @@
   import ManipulationsPanel from "./ManipulationsPanel.svelte";
   
   import TextArea from "./components/TextArea.svelte";
+  import Heading from "./components/Heading.svelte";
 
-  let source = "Try me!\nPress \"Apply\""
+  let source = "Try me!\nResult will update automatically"
   let result = ""
   let manipulations: TManipulation[] = [{
     type: "replace",
-    from: "\\n", to: "--", id: "initial"
+    from: "\\n", to: " -- ", id: "initial"
   }]
 
-  function onApply(event: MouseEvent) {
-    if (event.type == "click") {
-      result = applyManipulations(source, manipulations)
-    }
-  }
-
   document.addEventListener("keydown", (event) => {
     if (event.ctrlKey && event.key === "Enter") {
       result = applyManipulations(source, manipulations)
@@ -28,26 +23,29 @@
 
 <div class="panels">
   <div class="panel">
-    <TextArea id="source" labelText="Source" bind:value={source} />
+    <Heading text="Source" />
+    <TextArea id="source" bind:value={source} />
   </div>
-  
+
   <div class="panel">
-    <TextArea id="result" labelText="Result" bind:value={result} />
+    <Heading text="Manipulations" />
+    <ManipulationsPanel bind:manipulations />
   </div>
 
   <div class="panel">
-    <ManipulationsPanel bind:manipulations />
-    <!-- <button on:click={onApply}>Apply</button> -->
+    <Heading text="Result" />
+    <TextArea id="result" bind:value={result} />
   </div>
-
 </div>
 
 
 <style>
   .panels {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
+
+    padding: 10px;
   }
 
   .panel {

src/ManipulationsPanel.svelte

@@ -3,11 +3,9 @@
   import { ManipulationsList } from "./manipulations";
 
   export let manipulations: TManipulation[] = []
-  // $: console.log(manipulations)
 </script>
 
 <div class="panel">
-  <label for="manipulations">Manipulations</label>
   <ManipulationsList bind:manipulations/>
 </div>
 

src/app.css

@@ -2,9 +2,10 @@ html {
   --bg-color-100: hsl(157, 100%, 90%);
   --border-color-100: hsl(157, 100%, 10%);
 
-  --text-color: #000
+  --text-color: hsl(157, 100%, 10%);
 }
 
 body {
   background-color: var(--bg-color-100);
+  font-family: monospace;
 }

src/components/Heading.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let text: string
+</script>
+
+<h1>{text}</h1>
+
+<style>
+  h1 {
+    color: var(--text-color);
+    font-family: monospace;
+  }
+</style>

src/components/TextArea.svelte

@@ -13,13 +13,13 @@
 
 <style>
   textarea {
-    height: 500px;
-    width: 300px;
-    /* background-color: #FFF; */
+    width: 100%;
     color: var(--text-color);
     border-radius: 10px;
-    border: 1px solid var(--border-color-100);
+    border: 2px solid var(--border-color-100);
     padding: 10px;
+
+    font-family: monospace;
   }
 
   textarea:focus {

src/manipulations/components/Manipulation.svelte

@@ -38,14 +38,6 @@
 </div>
 
 <style>
-  :global(.manipulation) {
-    /* default colors */
-    --manipulation-bg-color: grey;
-    --manipulation-border-color: white;
-
-    
-  }
-
   div {
     display: flex;
     flex-direction: row;
@@ -66,6 +58,8 @@
     padding: 0px;
     padding-left: 5px;
     padding-right: 5px;
+
+    margin-left: auto;
   }
 
   .delete:hover {