ARC-2046 - Update the design to use Atlaskit/AUI (#28)

Author: krazziekay

src/content/webhooks.md

@@ -20,5 +20,3 @@ Webhooks can be manually created in
 
 For more information about webhooks, and for a full list of available webhooks, please refer to our
 [documentation](https://developer.atlassian.com/cloud/jira/platform/webhooks/#registering-a-webhook-using-the-jira-rest-api--other-integrations-).
-
-## Example logs:

src/views/webhook-logs.squirrelly

@@ -7,15 +7,16 @@
         {{@includeFile('./partial/back-nav.squirrelly') /}}
         <div id="webhooks" data-page-content="{{ it.pageContent.toString() }}"></div>
 
-        <div class="flexed">
+        <div class="logs-title">
+            <h2>Example logs:</h2>
             <div>
                 <a class="aui-button" onclick="AP.navigator.reload();">
                     <span class="aui-icon aui-icon-small aui-iconfont-refresh">Refresh</span>
                     <span>Refresh</span>
                 </a>
             </div>
         </div>
-        <br>
+
         <div class="logs-container">
             {{@if(it.logs)}}
             {{@each(it.logs) => log}}

static/css/main.css

@@ -18,23 +18,28 @@ body {
     cursor: pointer;
 }
 
-.flexed {
+.logs-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 2.5em 0 1em;
 }
 
-.config-container {
+pre {
     background: #f4f5f7;
     padding: 0.75em;
     border-radius: 4px;
 }
 
 .logs-container {
+    width: calc(100vw - 340px);
     overflow: auto;
     background: #000;
     color: #fff;
     border-radius: 4px;
     padding: 0.3em 0.75em;
 }
+.logs-container > pre {
+    background: #000;
+}