From 1c97559151995625771d8ed894108326d0a2f53c Mon Sep 17 00:00:00 2001
From: Lea Anthony <lea.anthony@gmail.com>
Date: Tue, 13 Oct 2020 06:43:38 +1100
Subject: [PATCH] logging: slight refactor

---
 v2/test/kitchensink/frontend/src/App.css      |  2 +-
 .../frontend/src/components/CodeBlock.svelte  | 35 ++++++++++---------
 .../src/components/CodeSnippet.svelte         |  2 +-
 .../frontend/src/pages/logging/Logging.svelte |  8 +++--
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/v2/test/kitchensink/frontend/src/App.css b/v2/test/kitchensink/frontend/src/App.css
index ff0b549d..986946cc 100644
--- a/v2/test/kitchensink/frontend/src/App.css
+++ b/v2/test/kitchensink/frontend/src/App.css
@@ -15,7 +15,7 @@
     --sidebar-title-font-size: 1.75rem;
     --sidebar-brand-font-size: 2.3rem;
 
-    --base-font-size: 1.6rem;
+    --base-font-size: 1.5rem;
 
     /* Switch */
     --dm-switch-bg-color: rgb(28,173,213);
diff --git a/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte b/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
index 26a2381d..ee23561d 100644
--- a/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
+++ b/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
@@ -38,21 +38,21 @@
 
 <div data-wails-no-drag class={$darkMode ? "codeblock" : "codeblock-light"}>
     <div class="header">
-            <span class="title">{title}</span>
-            <span class="toggle">
-                <span>Go</span>
-                <span class="custom-switch">
-                    <input type="checkbox" {id} value="" bind:checked={isJs}>
-                    <label for={id}>Javascript</label>
-                </span>
+        <span class="title">{title}</span>
+        <span class="toggle">
+            <span>Go</span>
+            <span class="custom-switch">
+                <input type="checkbox" {id} value="" bind:checked={isJs}>
+                <label for={id}>Javascript</label>
             </span>
+        </span>
         {#if description}
         <div class="description">{description}</div>
         {/if}
     </div>
     <div class="run"> 
         <div class="{showRun ? 'run-title-open' : 'run-title-closed'}" on:click="{toggleRun}">
-            <span style="display: inline-block; width: 10px; font-size: 11px">{showRun?'▼':'▶'}</span>
+            <span class="arrow">{showRun?'▼':'▶'}</span>
             Try Me!
         </div>
         {#if showRun}
@@ -63,17 +63,23 @@
     </div>
     <div class="example"> 
         <div class="{showCode ? 'code-title-open' : 'code-title-closed'}" on:click="{toggleExample}" >
-            <span style="display: inline-block; width: 10px; font-size: 11px">{showCode?'▼':'▶'}</span>
+            <span class="arrow">{showCode?'▼':'▶'}</span>
             Example Code
         </div>
         {#if showCode}
-        <Highlight class="allow-select" language="{lang}" {code}/>
+        <Highlight style="margin-bottom: 0" language="{lang}" {code}/>
         {/if}
     </div>
 </div>
 
 <style>
 
+    .arrow {
+        display: inline-block; 
+        width: calc(var(--base-font-size));
+        padding: 2px;
+    }
+
     .header {
         display: flex;
         justify-content: space-between;
@@ -86,7 +92,7 @@
     }
 
     .title {
-        font-size: 2rem;
+        font-size: calc(var(--base-font-size) * 1.1);
     }
 
     .code-title-open {
@@ -94,14 +100,13 @@
         margin-bottom: -5px;
         padding-left: 5px;
         cursor: pointer;
-        font-size: 1.5rem;
     }
 
     .code-title-closed {
         margin-top: 5px;
         padding-left: 5px;
+        padding-bottom: 5px;
         cursor: pointer;
-        font-size: 1.5rem;
     }
 
     .run-content-dark {
@@ -120,7 +125,6 @@
         padding-bottom: 0;
         padding-left: 5px;
         cursor: pointer;
-        font-size: 1.5rem;
     }
 
     .run-title-closed {
@@ -128,16 +132,15 @@
         margin-bottom: 5px;
         padding-left: 5px;
         cursor: pointer;
-        font-size: 1.5rem;
     }
 
     .toggle {
         float: right;
         margin-top: 2px;
+        font-size: calc(var(--base-font-size) * 0.9);
     }
 
     .example {
-        padding-right: 5px;
         border-top: 1px solid #5555;
     }
     
diff --git a/v2/test/kitchensink/frontend/src/components/CodeSnippet.svelte b/v2/test/kitchensink/frontend/src/components/CodeSnippet.svelte
index 4468c3b8..21e20dfc 100644
--- a/v2/test/kitchensink/frontend/src/components/CodeSnippet.svelte
+++ b/v2/test/kitchensink/frontend/src/components/CodeSnippet.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <div data-wails-no-drag class={$darkMode ? "codeblock" : "codeblock-light"}>
-    <Highlight class="allow-select" language="{lang}" {code} style="margin: -5px; font-size: 13px"/>
+    <Highlight language="{lang}" {code} style="margin: -5px;"/>
 </div>
 
 <style>
diff --git a/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte b/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte
index e3be9795..d572b37a 100644
--- a/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte
+++ b/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte
@@ -28,9 +28,13 @@
 
     The default logger will log messages to the console in the following format:<br/>
     <FakeTerm>
+TRACE | I am a Trace message
+DEBUG | I am a Debug message
 INFO  | I am an Info message
-ERROR | I am an Error message
 WARN  | I am a Warning message
+ERROR | I am an Error message
+FATAL | I am a Fatal message
+I am a Print message
     </FakeTerm>
     <br/>
     Custom loggers may be given to your Wails application. More details <Link href="https://wails.app">here</Link>.
@@ -38,7 +42,7 @@ WARN  | I am a Warning message
     <br/><br/>
     
     <Log></Log>
-    <br/><br/>
+    <br/>
     <SetLogLevel></SetLogLevel>
 
 </div>