Adjust styling of cells and outputs

ekzhang · Nov 30, 2021 · 53a66b7 · 53a66b7
1 parent 591c34f
commit 53a66b7
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/src/components/Notebook.svelte b/src/components/Notebook.svelte
@@ -25,6 +25,7 @@
     />
   {/each}
   <CellDivider
+    visible={notebook.length === 0}
     on:create={(event) => {
       notebook.addCell({
         type: event.detail.type,

diff --git a/src/components/cell/CellDivider.svelte b/src/components/cell/CellDivider.svelte
@@ -3,9 +3,11 @@
   import FaPlus from "svelte-icons/fa/FaPlus.svelte";
 
   const dispatch = createEventDispatcher();
+
+  export let visible: boolean = false;
 </script>
 
-<div class="divider">
+<div class="divider" class:visible>
   <hr />
   <button on:click={() => dispatch("create", { type: "code" })} tabindex="-1">
     <div class="h-3 w-3 mr-[4px]"><FaPlus /></div>
@@ -23,10 +25,14 @@
 
 <style lang="postcss">
   .divider {
-    @apply relative flex justify-center items-center transition-opacity
+    @apply h-2 relative flex justify-center items-center transition-opacity
       opacity-0 hover:opacity-100 focus:opacity-100;
   }
 
+  .divider.visible {
+    @apply opacity-100;
+  }
+
   .divider > hr {
     @apply absolute w-full border-dotted border-gray-300;
   }

diff --git a/src/components/cell/CellOutput.svelte b/src/components/cell/CellOutput.svelte
@@ -36,11 +36,11 @@
 
 <style lang="postcss">
   .error {
-    @apply mb-1 p-3 rounded-sm bg-pink-100 border border-pink-300 font-mono;
+    @apply mb-1 p-3 rounded-sm bg-pink-100 font-mono;
   }
 
   .output {
-    @apply mb-1 p-3 rounded-sm border border-slate-200;
+    @apply p-3 rounded-sm;
   }
   .output.stale {
     @apply border-yellow-200 opacity-50;
@@ -77,7 +77,7 @@
   }
 
   .markdown-output {
-    @apply px-2.5 font-serif text-base max-w-2xl leading-snug;
+    @apply px-2.5 font-serif text-base text-[1.02rem] max-w-2xl leading-snug;
   }
 
   .markdown-output :global(h1) {

diff --git a/src/components/cell/output/FullView.svelte b/src/components/cell/output/FullView.svelte
@@ -7,5 +7,7 @@
 <div class="flex flex-col space-y-3">
   {#each Object.entries(value) as [name, values] (name)}
     <RelationView {name} {values} />
+  {:else}
+    <span class="italic text-sm font-light">(there's nothing here yet...)</span>
   {/each}
 </div>
diff --git a/src/components/cell/output/RelationView.svelte b/src/components/cell/output/RelationView.svelte
@@ -8,7 +8,7 @@
   $: displaying = Math.min(values.length, 5); // hide long lists
 </script>
 
-<div class="font-mono text-gray-700">
+<div class="font-mono text-[0.95rem] text-gray-700">
   <span class="text-gray-500">Table</span>&lbrace;<span class="font-bold"
     >{name}</span
   >&rbrace; <span class="text-gray-400">:=</span>