Plain text: Improve design of split text section

eliandoran · Dec 16, 2023 · 6841d43 · 6841d43
1 parent 66003d8
commit 6841d43
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/src/lib/components/sidebar-view.svelte b/src/lib/components/sidebar-view.svelte
@@ -49,7 +49,7 @@
 
     .main-container > aside :global(nav) {
         background: var(--content-background-color);
-        padding: 0.5em;
+        padding: 0;
         border-radius: 12px;
     }
 

diff --git a/src/routes/plain-text/split-join.svelte b/src/routes/plain-text/split-join.svelte
@@ -2,6 +2,9 @@
 	import ActionCardItem from "$lib/components/action-card-item.svelte";
   import ActionCard from "$lib/components/action-card.svelte";
 
+  import SetSplit from "svelte-material-icons/SetSplit.svelte";
+  import SetMerge from "svelte-material-icons/SetMerge.svelte";
+
   export let text;
   let separator = "";
 
@@ -19,15 +22,27 @@
 
   <label>
     Separator:
-    <input type="text" bind:value={separator} />
+    <input class="separator-input" type="text" bind:value={separator} />
   </label>
 
+  <hr />
+
   <ActionCardItem
     label="Join"
+    icon={SetSplit}
     on:click={join} />
 
   <ActionCardItem
     label="Split"
+    icon={SetMerge}
     on:click={split} />
 
-</ActionCard>
+</ActionCard>
+
+<style>
+  .separator-input {
+    width: 50px; 
+    margin-left: 0.25em;
+  }
+
+</style>
diff --git a/static/style.css b/static/style.css
@@ -145,6 +145,19 @@ input:disabled {
     padding: 0;
 }    
 
+.nav label {
+    font-size: 0.9em;
+    padding: 0.5em 1em;
+    display: block;
+}
+
+.nav hr {
+    height: 1px;
+    border: none;
+    background: var(--border-color);
+    margin: 0.75em -0.75em;
+}   
+
 .nav ul li {
     margin: 1px 0;
 }