From 98a985089d5125a762e5f8b67a6ebaee52653ee2 Mon Sep 17 00:00:00 2001
From: jgauffin <jonas@gauffin.org>
Date: Wed, 12 Feb 2020 19:38:16 +0100
Subject: [PATCH 1/2] started

---
 .../GetAccountEmailByIdHandler.cs             |   2 -
 .../analyze/incidents/incident.vue.html       |   6 +-
 .../components/discover/home/home.css         |  20 +-
 .../components/discover/home/home.vue.html    |  36 +--
 .../discover/incidents/incident.vue.html      |   4 +-
 .../components/discover/incidents/search.css  |  42 ++--
 .../components/discover/incidents/search.ts   |  23 +-
 .../discover/incidents/search.vue.html        | 235 +++++++++---------
 .../components/discover/menu.vue.html         |   4 +-
 .../environments/environments.vue.html        |   2 +-
 src/Server/Coderr.Server.Web/GulpFile.js      |   2 +-
 .../Views/Account/Login.cshtml                |  43 ++--
 .../wwwroot/scss/bootstrap-coderr.scss        |  34 +++
 .../wwwroot/scss/checkbox.scss                |  48 ++++
 .../wwwroot/scss/coderr-variables.scss        |   2 +-
 .../Coderr.Server.Web/wwwroot/scss/site.scss  |  86 +++++--
 16 files changed, 353 insertions(+), 236 deletions(-)
 create mode 100644 src/Server/Coderr.Server.Web/wwwroot/scss/checkbox.scss

diff --git a/src/Server/Coderr.Server.SqlServer/Core/Accounts/QueryHandlers/GetAccountEmailByIdHandler.cs b/src/Server/Coderr.Server.SqlServer/Core/Accounts/QueryHandlers/GetAccountEmailByIdHandler.cs
index 7b379eb9..8fa8d6e4 100644
--- a/src/Server/Coderr.Server.SqlServer/Core/Accounts/QueryHandlers/GetAccountEmailByIdHandler.cs
+++ b/src/Server/Coderr.Server.SqlServer/Core/Accounts/QueryHandlers/GetAccountEmailByIdHandler.cs
@@ -1,13 +1,11 @@
 using System;
 using System.Threading.Tasks;
-using Coderr.Server.Abstractions.Boot;
 using Coderr.Server.Api.Core.Accounts.Queries;
 using Coderr.Server.Domain.Core.Account;
 using DotNetCqs;
 
 namespace Coderr.Server.SqlServer.Core.Accounts.QueryHandlers
 {
-    [ContainerService]
     public class GetAccountEmailByIdHandler : IQueryHandler<GetAccountEmailById, string>
     {
         private readonly IAccountRepository _accountRepository;
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html
index 40f0e799..ff2aab98 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html
@@ -1,7 +1,7 @@
 <template>
     <div class="IncidentView">
         <div>
-            <div class="row minimal-gutters">
+            <div class="row">
                 <div class="col">
                     <div class="float-right">
                         <div class="btn-group" role="group">
@@ -26,7 +26,7 @@ <h3>
                     </div>
                 </div>
             </div>
-            <div class="row minimal-gutters" v-if="incident.Solution">
+            <div class="row" v-if="incident.Solution">
                 <div class="col">
                     <div class="card">
                         <div class="card-header">
@@ -39,7 +39,7 @@ <h3>
                 </div>
 
             </div>
-            <div class="row minimal-gutters">
+            <div class="row">
                 <div class="col-xl-8 col-lg-6">
                     <div class="card">
                         <div class="card-body">
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/home/home.css b/src/Server/Coderr.Server.Web/ClientApp/components/discover/home/home.css
index 7a637a88..d7a3f40c 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/home/home.css
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/home/home.css
@@ -1,15 +1,3 @@
-.tags button {
-    margin-right: 5px;
-}
-
-.more {
-    display: none;
-}
-
-/*.coderr-chart {
-    margin-right: 40px;
-}*/
-
 .coderr-chart .ct-chart-line {
     overflow: visible !important;
 }
@@ -69,7 +57,7 @@ svg.ct-chart-line, svg.ct-chart-line g.ct-labels, svg.ct-chart-line g.ct-labels
     overflow: visible;
 }
 
-
-#IncidentSearchView #SearchOptions input {
-    color: #000;
-}
\ No newline at end of file
+    svg.ct-chart-line g line.ct-grid {
+        stroke: #eee !important;
+        stroke-dasharray: 0 !important;
+    }
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/home/home.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/home/home.vue.html
index 7e5cbec0..fac8a046 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/home/home.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/home/home.vue.html
@@ -1,16 +1,16 @@
 <template>
     <div>
-        <div class="row minimal-gutters">
-            <div class="col-lg-3">
-                <div class="card mb-1">
+        <div class="row">
+            <div class="col-lg-4 col-md-5 card-col">
+                <div class="card">
                     <div class="card-header">
                         Summary (last 30 days)
                     </div>
                     <div class="card-body">
-                        <table class="table th-vertical">
+                        <table class="th-vertical">
                             <tbody>
                                 <tr>
-                                    <th width="30%">Number of incidents</th>
+                                    <th>Number of incidents</th>
                                     <td>{{ incidentCount }}</td>
                                 </tr>
                                 <tr style="white-space: nowrap">
@@ -30,36 +30,40 @@
 
                     </div>
                 </div>
-                <div class="card bg-blue p-2" v-if="reportCount == 0">
-                    <div class="">
-                        <h3>Report exceptions</h3>
-                        <p class="text-white">
+                <div class="card" v-if="reportCount == 0">
+                    <div class="card-header">
+                        Report exceptions
+                    </div>
+                    <div class="card-body">
+                        <p>
                             You have not reported any exceptions yet.
                         </p>
+                    </div>
+                    <div class="card-footer">
                         <router-link :to="{name: 'configureApplication', params: {applicationId: firstApplicationId }}" class="btn btn-dark">Configure your application</router-link>
                     </div>
                 </div>
             </div>
-            <div class="col-lg-9">
+            <div class="col-lg-8 col-md-7">
                 <div class="alert-dark" v-if="myBestSuggestion">
                     We suggest that you work with:
                     <router-link :to="{ name: 'analyzeIncident', params: { applicationId: myBestSuggestion.applicationId, myBestSuggestion: incident.Id }}">{{myBestSuggestion.Description}}</router-link>
                     <router-link class="btn btn-primary btn-sm" v-bind:click="assignBestToMe">{{myBestSuggestion.Description}}</router-link>
                 </div>
-                <div class="card bg-dark">
+                <div class="card">
+                    <div class="card-header">
+                        <span v-if="applicationId == 0">Incident trend per application</span>
+                        <span v-else>Incident trend</span>
+                    </div>
                     <div class="card-body trend">
                         <div class="position-relative coderr-chart" style="padding-left: 16px;">
-                            <h3>
-                                <span v-if="applicationId == 0">Incident trend per application</span>
-                                <span v-else>Incident trend</span>
-                            </h3>
                             <div class="ct-chart ct-major-twelfth">
 
                             </div>
                             <div class="legend">
                                 <div v-for="l in legend" :class="l.className">
                                     <svg width="10" height="10">
-                                        <rect width="10" height="10" class="ct-point" />
+                                        <rect width="10" height="10" class="ct-point"/>
                                     </svg>
                                     {{l.name}}
                                 </div>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.vue.html
index 356842d7..d249a4c7 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.vue.html
@@ -23,7 +23,7 @@ <h3>{{incident.Description}} <small class="text-muted">[{{incident.FullName}}]</
                 </div>
             </div>
         </div>
-        <div class="row minimal-gutters">
+        <div class="row">
             <div class="col-lg-12">
                 <div class="card  bg-dark">
                     <div class="card-body">
@@ -38,7 +38,7 @@ <h3 class="">Report history</h3>
                 </div>
             </div>
         </div>
-        <div class="row minimal-gutters">
+        <div class="row">
             <div class="col-lg-8">
                 <div class="card">
                     <div class="card-body">
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.css b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.css
index b3a7a02d..a2e0b140 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.css
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.css
@@ -1,8 +1,6 @@
-.bg-dark {
-    color: #fff;
-}
-.bg-dark *, .bg-dark * *, table.table thead.bg-dark th {
-    color: #ccc;
+
+#SearchOptions label {
+    color: #59C1D5;
 }
 
 .tags button, .apps button {
@@ -22,18 +20,15 @@
 
 }
 
+#SearchOptions * {
+    font-size: 0.7rem !important;
+}
+
 #SearchOptions .form-group {
     display: inline-block;
     vertical-align: top;
 }
 
-#SearchOptions label {
-    color: #ccc;
-}
-
-.btn.btn-blue {
-    color: #000;
-}
 #SearchOptions input {
     display: inline !important;
     width: inherit;
@@ -42,15 +37,21 @@
     padding: 2px 4px;
     border: 0;
     line-height: 1.5;
-    background-color: #ccc;
 }
 
-.btn.btn-black {
-    background-color: #000;
-    color: #999;
-    border: 1px solid #333;
+#SearchOptions .btn {
+    background-color: #59C1D5;
+    color: white;
+    border: 0;
+    opacity: 0.6;
+    border: 2px solid white;
 }
 
+    #SearchOptions .btn.active {
+        opacity: 1;
+        border: 2px solid #59C1D5;
+    }
+
 #IncidentSearchView .form-group {
     max-width: 16%;
 }
@@ -59,6 +60,13 @@
     max-width: 25vw;
 }
 
+#SearchOptions button[type=submit] {
+    opacity: 1;
+    font-size: 1.2rem !important;
+    box-shadow: 0px 3px 6px #eee;
+    border: 0;
+}
+
 @media screen and (max-width: 1600px) {
     #IncidentSearchView .context.form-group {
         max-width: 20vw;
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.ts b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.ts
index 5086d404..56f00e6d 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.ts
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.ts
@@ -68,8 +68,7 @@ export default class IncidentSearchComponent extends Vue {
     //for the close dialog
     currentIncidentId = 0;
 
-    private activeBtn$ = 'btn-blue';
-    private inactiveBtn$ = 'btn-black';
+    private activeBtn$ = 'active';
 
     created() {
         PubSubService.Instance.subscribe(MenuApi.MessagingTopics.ApplicationChanged, this.onApplicationChangedInNavMenu);
@@ -179,10 +178,10 @@ export default class IncidentSearchComponent extends Vue {
         var tag = <string>btn.getAttribute('data-tag');
 
         if (btn.className.indexOf(this.activeBtn$) === -1) {
-            btn.className = `btn btn-sm ${this.activeBtn$}`;
+            btn.className = `btn ${this.activeBtn$}`;
             this.activeTags.push(tag);
         } else {
-            btn.className = `btn btn-sm ${this.inactiveBtn$}`;
+            btn.className = `btn`;
             this.activeTags = this.activeTags.filter(itm => itm !== tag);
         }
     }
@@ -192,10 +191,10 @@ export default class IncidentSearchComponent extends Vue {
         var environmentId = parseInt(btn.getAttribute('data-environment'), 10);
 
         if (btn.className.indexOf(this.activeBtn$) === -1) {
-            btn.className = `btn btn-sm ${this.activeBtn$}`;
+            btn.className = `btn ${this.activeBtn$}`;
             this.activeEnvironment.push(environmentId);
         } else {
-            btn.className = `btn btn-sm ${this.inactiveBtn$}`;
+            btn.className = `btn`;
             this.activeEnvironment = this.activeEnvironment.filter(itm => itm !== environmentId);
         }
     }
@@ -206,10 +205,10 @@ export default class IncidentSearchComponent extends Vue {
         var applicationId = parseInt(<string>attr, 10);
 
         if (btn.className.indexOf(this.activeBtn$) === -1) {
-            btn.className = `btn btn-sm ${this.activeBtn$}`;
+            btn.className = `btn ${this.activeBtn$}`;
             this.activeApplications.push(applicationId);
         } else {
-            btn.className = `btn btn-sm ${this.inactiveBtn$}`;
+            btn.className = `btn`;
             this.activeApplications = this.activeApplications.filter(itm => {
                 return itm !== applicationId;
             });
@@ -401,7 +400,6 @@ export default class IncidentSearchComponent extends Vue {
                 this.activeTags.length = 0;
                 return;
             }
-            elem.classList.remove(this.inactiveBtn$);
             elem.classList.add(this.activeBtn$);
         });
     }
@@ -416,7 +414,6 @@ export default class IncidentSearchComponent extends Vue {
                 this.activeEnvironment.length = 0;
                 return;
             }
-            elem.classList.remove(this.inactiveBtn$);
             elem.classList.add(this.activeBtn$);
         });
     }
@@ -426,12 +423,11 @@ export default class IncidentSearchComponent extends Vue {
         for (var i = 0; i < buttons.length; ++i) {
             var button = <HTMLButtonElement>buttons[i];
 
-            button.classList.remove(this.inactiveBtn$);
             if (button.value === incidentState.toString()) {
-                button.classList.remove(this.inactiveBtn$);
                 button.classList.add(this.activeBtn$);
             } else {
-                button.classList.add(this.inactiveBtn$);
+                if (button.classList.contains(this.activeBtn$))
+                button.classList.remove(this.activeBtn$);
             }
         }
 
@@ -450,7 +446,6 @@ export default class IncidentSearchComponent extends Vue {
                 return;
             }
 
-            elem.classList.remove(this.inactiveBtn$);
             elem.classList.add(this.activeBtn$);
         });
     }
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.vue.html
index 7f369bab..5a7d4e3e 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.vue.html
@@ -2,131 +2,134 @@
     <div id="IncidentSearchView">
         <div class="row">
             <div class="col">
-                <div id="SearchOptions" class="bg-dark card-body">
-                    <div class="form-group input-group-sm">
-                        <label>Free text</label>
-                        <div>
-                            <input type="text" placeholder="Free text" class="form-control" v-model="freeText" />
+                <div class="card">
+                    <div class="card-body">
+                        <div id="SearchOptions" class="card-body">
+                            <div class="form-group">
+                                <label>Free text</label>
+                                <div>
+                                    <input type="text" placeholder="Free text" class="form-control" v-model="freeText" />
+                                </div>
+                            </div>
+                            <div class="apps form-group" v-if="showApplicationColumn">
+                                <label>Applications</label><br />
+                                <button class="btn" v-for="app in availableApplications" :data-app="app.id" @click="toggleApplication">
+                                    {{ app.name }}
+                                </button>
+                            </div>
+                            <div class="environments form-group">
+                                <label>Application environments</label>
+                                <div>
+                                    <button class="btn" v-for="env in availableEnvironments" :data-environment="env.id" @click="toggleEnvironment">
+                                        {{ env.name }}
+                                    </button>
+                                    <span v-if="availableEnvironments.length === 0">
+                                        No environment names could be found in reported errors.<br />
+                                        <em><a class="text-red" href="https://coderr.io/documentation/client/environments/">Learn how to an add environment name to your reports.</a></em>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="tags form-group">
+                                <label>Tags</label>
+                                <div>
+                                    <button class="btn" v-for="tag in availableTags" :data-tag="tag" @click="toggleTag">
+                                        {{ tag }}
+                                    </button>
+                                    <span v-if="availableTags.length === 0">
+                                        No tags could be found in reported errors.<br />
+                                        <em><a class="text-red" href="https://coderr.io/documentation/client/tags/">Learn how to add tags to your reports.</a></em>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="state form-group">
+                                <label>Incident state</label>
+                                <div>
+                                    <button class="btn active" v-model="incidentState" value="-1" v-on:click.prevent="toggleState(-1, $event)">
+                                        All
+                                    </button>
+                                    <button class="btn" v-model="incidentState" value="0" v-on:click.prevent="toggleState(0, $event)">
+                                        New
+                                    </button>
+                                    <button class="btn" v-model="incidentState" value="1" v-on:click.prevent="toggleState(1, $event)">
+                                        Assigned
+                                    </button>
+                                    <button class="btn" v-model="incidentState" value="3" v-on:click.prevent="toggleState(3, $event)">
+                                        Closed
+                                    </button>
+                                    <button class="btn" v-model="incidentState" value="2" v-on:click.prevent="toggleState(2, $event)">
+                                        Ignored
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="form-group context">
+                                <label>Context collection</label>
+                                <div>
+                                    <input name="CollectionName" type="text" class="form-control mb-1" placeholder="Collection name" v-model="contextCollectionName" />
+                                    <input name="PropertyName" type="text" class="form-control mb-1" placeholder="Property name" v-model="contextCollectionProperty" />
+                                    <input name="PropertyValue" type="text" class="form-control mb-1" placeholder="Property value" v-model="contextCollectionPropertyValue" />
+                                    <p>
+                                        <em><a class="text-red" href="https://coderr.io/documentation/client/contextcollections/">Learn how to add custom data to reports.</a></em>
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label>&nbsp;</label>
+                                <br />
+                                <button class="btn" style="float:right" type="submit" v-on:click="search" name="executeSearch">Search</button>
+                            </div>
                         </div>
                     </div>
-                    <div class="apps form-group ml-3" v-if="showApplicationColumn">
-                        <label>Applications</label><br />
-                        <button class="btn btn-black btn-sm" v-for="app in availableApplications" :data-app="app.id" @click="toggleApplication">
-                            {{ app.name }}
-                        </button>
-                    </div>
-                    <div class="environments form-group ml-3">
-                        <label>Application environments</label>
-                        <div>
-                            <button class="btn btn-black btn-sm" v-for="env in availableEnvironments" :data-environment="env.id" @click="toggleEnvironment">
-                                {{ env.name }}
-                            </button>
-                            <span v-if="availableEnvironments.length === 0">
-                                No environment names could be found in reported errors.<br />
-                                <em><a class="text-red" href="https://coderr.io/documentation/client/environments/">Learn how to an add environment name to your reports.</a></em>
-                            </span>
+                    <div v-if="incidents.length > 0">
+                        <div class="col">
+                            <table class="table w-100 table-striped checkboxes" id="searchTable" style="table-layout: fixed">
+                                <thead class="table-light search-head bg-blue">
+                                    <tr>
+                                        <th><input class="form-check-inline" type="checkbox" v-on:change="checkAll($event)" /> Name</th>
+                                        <th v-if="showApplicationColumn">Application</th>
+                                        <th style="width: 150px" class="sortable" v-on:click.prevent="sort($event)" data-value="0">Created <i class="fa"></i></th>
+                                        <th style="width: 130px" class="sortable" v-on:click.prevent="sort($event)" data-value="1">Last report <i class="fa fa-chevron-down"></i></th>
+                                        <th style="width: 130px" class="sortable" v-on:click.prevent="sort($event)" data-value="2">Report count <i class="fa"></i></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="incident in incidents">
+                                        <td style="overflow: hidden; max-width: 60%; white-space: nowrap; text-overflow: ellipsis;">
+                                            <input type="checkbox" :value="incident.Id" name="id" class="form-check-inline" v-model="checkedIncidents" />
+                                            <router-link :to="{ name: 'discoverIncident', params: { applicationId: incident.ApplicationId, incidentId: incident.Id }}">{{ incident.Name }}</router-link>
+                                        </td>
+                                        <td v-if="showApplicationColumn">
+                                            <router-link :to="{ name: 'application', params: { applicationId: incident.ApplicationId }}">{{incident.ApplicationName}}</router-link>
+                                        </td>
+                                        <td>
+                                            {{ incident.CreatedAtUtc | ago }}
+                                        </td>
+                                        <td>
+                                            {{ incident.LastReportReceivedAtUtc | ago }}
+                                        </td>
+                                        <td class="text-right">
+                                            {{ incident.ReportCount }}
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
                         </div>
-                    </div>
-                    <div class="tags form-group ml-3">
-                        <label>Tags</label>
-                        <div>
-                            <button class="btn btn-black btn-sm" v-for="tag in availableTags" :data-tag="tag" @click="toggleTag">
-                                {{ tag }}
-                            </button>
-                            <span v-if="availableTags.length === 0">
-                                No tags could be found in reported errors.<br />
-                                <em><a class="text-red" href="https://coderr.io/documentation/client/tags/">Learn how to add tags to your reports.</a></em>
-                            </span>
+                        <div id="CloseBody" style="display: none">
+                            <input type="text" name="version" class="form-control mb-3" size="10" placeholder="Which version is the error corrected in? (format: 1.2.10)" pattern="[0-9\.]*" title="You can use semantic versioning, including pre-releases, but must specify the release version here." />
+                            <textarea style="display: none" id="CloseArea" class="w-100" rows="10" placeholder="How did you solve the error?" autofocus="autofocus"></textarea>
+                            <em><router-link :to="{name: 'closeIncident', params: { incidentId: currentIncidentId }}">Go to full screen editor</router-link></em>
                         </div>
                     </div>
-                    <div class="state form-group ml-3">
-                        <label>Incident state</label>
-                        <div>
-                            <button class="btn btn-blue btn-sm" v-model="incidentState" value="-1" v-on:click.prevent="toggleState(-1, $event)">
-                                All
-                            </button>
-                            <button class="btn btn-black btn-sm" v-model="incidentState" value="0" v-on:click.prevent="toggleState(0, $event)">
-                                New
-                            </button>
-                            <button class="btn btn-black btn-sm" v-model="incidentState" value="1" v-on:click.prevent="toggleState(1, $event)">
-                                Assigned
-                            </button>
-                            <button class="btn btn-black btn-sm" v-model="incidentState" value="3" v-on:click.prevent="toggleState(3, $event)">
-                                Closed
-                            </button>
-                            <button class="btn btn-black btn-sm" v-model="incidentState" value="2" v-on:click.prevent="toggleState(2, $event)">
-                                Ignored
-                            </button>
+                    <div>
+                        <div v-if="incidents.length == 0" class="m-4">
+                            <em>No incidents have been reported (or nothing matched your search).</em>
                         </div>
-                    </div>
-                    <div class="form-group context ml-3 pl-2">
-                        <label>Context collection</label>
-                        <div>
-                            <input name="CollectionName" type="text" class="form-control mb-1" placeholder="Collection name" v-model="contextCollectionName" />
-                            <input name="PropertyName" type="text" class="form-control mb-1" placeholder="Property name" v-model="contextCollectionProperty" />
-                            <input name="PropertyValue" type="text" class="form-control mb-1" placeholder="Property value" v-model="contextCollectionPropertyValue" />
-                            <p>
-                                <em><a class="text-red" href="https://coderr.io/documentation/client/contextcollections/">Learn how to add custom data to reports.</a></em>
-                            </p>
+                        <div v-else>
+                            <button name="assignToMe" class="btn btn-blue" v-on:click.prevent="assignAllToMe">Assign selected incidents to me</button>
+                            <button name="deleteSelected" class="btn btn-light" v-on:click.prevent="deleteSelectedIncidents">Delete selected incidents</button>
                         </div>
                     </div>
-                    <div class="form-group ml-3" style="width: 150px">
-                        <label>&nbsp;</label>
-                        <br />
-                        <button class="btn btn-blue btn-lg" v-on:click="search" name="executeSearch">Search</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row pb-4" v-if="incidents.length > 0">
-            <div class="col">
-                <table class="table w-100 table-striped checkboxes" id="searchTable" style="table-layout: fixed">
-                    <thead class="table-light search-head bg-blue">
-                        <tr>
-                            <th><input class="form-check-inline" type="checkbox" v-on:change="checkAll($event)" /> Name</th>
-                            <th v-if="showApplicationColumn">Application</th>
-                            <th style="width: 150px" class="sortable" v-on:click.prevent="sort($event)" data-value="0">Created <i class="fa"></i></th>
-                            <th style="width: 130px" class="sortable" v-on:click.prevent="sort($event)" data-value="1">Last report <i class="fa fa-chevron-down"></i></th>
-                            <th style="width: 130px" class="sortable" v-on:click.prevent="sort($event)" data-value="2">Report count <i class="fa"></i></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="incident in incidents">
-                            <td style="overflow: hidden; max-width: 60%; white-space: nowrap;text-overflow: ellipsis;">
-                                <input type="checkbox" :value="incident.Id" name="id" class="form-check-inline" v-model="checkedIncidents" />
-                                <router-link :to="{ name: 'discoverIncident', params: { applicationId: incident.ApplicationId, incidentId: incident.Id }}">{{ incident.Name }}</router-link>
-                            </td>
-                            <td v-if="showApplicationColumn">
-                                <router-link :to="{ name: 'application', params: { applicationId: incident.ApplicationId }}">{{incident.ApplicationName}}</router-link>
-                            </td>
-                            <td>
-                                {{ incident.CreatedAtUtc | ago }}
-                            </td>
-                            <td>
-                                {{ incident.LastReportReceivedAtUtc | ago }}
-                            </td>
-                            <td class="text-right">
-                                {{ incident.ReportCount }}
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <div id="CloseBody" style="display: none">
-                <input type="text" name="version" class="form-control mb-3" size="10" placeholder="Which version is the error corrected in? (format: 1.2.10)" pattern="[0-9\.]*" title="You can use semantic versioning, including pre-releases, but must specify the release version here." />
-                <textarea style="display: none" id="CloseArea" class="w-100" rows="10" placeholder="How did you solve the error?" autofocus="autofocus"></textarea>
-                <em><router-link :to="{name: 'closeIncident', params: { incidentId: currentIncidentId }}">Go to full screen editor</router-link></em>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col bg-dark p-3">
-                <div v-if="incidents.length == 0" class="m-4">
-                    <em>No incidents have been reported (or nothing matched your search).</em>
-                </div>
-                <div v-else>
-                    <button name="assignToMe" class="btn btn-blue" v-on:click.prevent="assignAllToMe">Assign selected incidents to me</button>
-                    <button name="deleteSelected" class="btn btn-light" v-on:click.prevent="deleteSelectedIncidents">Delete selected incidents</button>
                 </div>
+
             </div>
         </div>
     </div>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/menu.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/menu.vue.html
index f7b164c4..e9cfc87e 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/menu.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/menu.vue.html
@@ -1,6 +1,6 @@
 <template>
-    <div class="discover-menu">
-        <div class="navbar-light navbar bg-light">
+    <div class="discover-menu submenu">
+        <div class="navbar-light navbar">
             <ul class="nav">
                 <li class="nav-item">
                     <router-link class="nav-link" :to="{name: 'discover', params: {applicationId: currentApplicationId }}" exact><i class="fa fa-tachometer-alt"></i> Overview</router-link>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/environments/environments.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/environments/environments.vue.html
index c3817396..823d2775 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/environments/environments.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/environments/environments.vue.html
@@ -1,6 +1,6 @@
 <template>
     <div class="">
-        <div class="row minimal-gutters">
+        <div class="row">
             <div class="col-lg-8 environments">
                 <div class="card">
                     <div class="card-header">
diff --git a/src/Server/Coderr.Server.Web/GulpFile.js b/src/Server/Coderr.Server.Web/GulpFile.js
index 8c15cb20..dd1e45c9 100644
--- a/src/Server/Coderr.Server.Web/GulpFile.js
+++ b/src/Server/Coderr.Server.Web/GulpFile.js
@@ -32,7 +32,7 @@ var config = {
         dest: 'wwwroot/dist/css/',
         src: [
             'wwwroot/scss/*.scss',
-            '!**/coderr-variables.scss'
+            '**/coderr-variables.scss'
         ],
         includePaths: ['./node_modules/bootstrap/scss']
     },
diff --git a/src/Server/Coderr.Server.Web/Views/Account/Login.cshtml b/src/Server/Coderr.Server.Web/Views/Account/Login.cshtml
index dcfd83eb..bde64c9f 100644
--- a/src/Server/Coderr.Server.Web/Views/Account/Login.cshtml
+++ b/src/Server/Coderr.Server.Web/Views/Account/Login.cshtml
@@ -11,14 +11,14 @@
 <![endif]-->
 <div classs="container">
     <div cslass="col-sm-12 col-md-6">
-        <div class="card">
-            <div class="card-header">
-                Login
-            </div>
-            <div class="card-body">
-                <form action="@Url.Action("Login")" method="post">
-                    @Html.AntiForgeryToken()
-                    @Html.ValidationSummary(true)
+        <form action="@Url.Action("Login")" method="post">
+            @Html.AntiForgeryToken()
+            @Html.ValidationSummary(true)
+            <div class="card">
+                <div class="card-header">
+                    Login
+                </div>
+                <div class="card-body">
                     <input type="hidden" asp-for="ReturnUrl" />
                     <div class="row" id="obsoleteLine" style="display: none">
                         <div class="col-lg-12 bg-warning text-white p-3">
@@ -37,24 +37,23 @@
                             <span asp-validation-for="Password"></span>
                         </div>
                     </div>
-                    <div class="form-check">
-                        <label asp-for="RememberMe" class="form-check-label">
-                            <input type="checkbox" asp-for="RememberMe" class="form-check-input" />
+                    <div class="form-group">
+                        <input type="checkbox" asp-for="RememberMe" />
+                        <label asp-for="RememberMe">
                             Remember me
                         </label>
                     </div>
-                    <div class="form-group mt-3">
-                        <input id="login-button" type="submit" class="btn btn-primary" value="Sign in" />
-                        <a asp-action="RequestPasswordReset" class="btn">Reset password</a>
-                        @if (Model.AllowRegistrations)
-                        {
-                            <a asp-action="Register" class="btn">Register</a>
-                        }
-                    </div>
-                </form>
-
+                </div>
+                <div class="card-footer">
+                    <input id="login-button" type="submit" class="btn btn-primary" value="Sign in" />
+                    <a asp-action="RequestPasswordReset">Reset password</a>
+                    @if (Model.AllowRegistrations)
+                    {
+                        <a asp-action="Register">Register</a>
+                    }
+                </div>
             </div>
-        </div>
+        </form>
     </div>
 </div>
 @section scripts
diff --git a/src/Server/Coderr.Server.Web/wwwroot/scss/bootstrap-coderr.scss b/src/Server/Coderr.Server.Web/wwwroot/scss/bootstrap-coderr.scss
index 0447c80d..8477b74a 100644
--- a/src/Server/Coderr.Server.Web/wwwroot/scss/bootstrap-coderr.scss
+++ b/src/Server/Coderr.Server.Web/wwwroot/scss/bootstrap-coderr.scss
@@ -3,6 +3,39 @@
 // Variable adaptations
 @import "coderr-variables.scss";
 
+$card-cap-bg: white;
+$card-border-color: white;
+
+.card {
+    box-shadow: 0px 3px 6px #00000029;
+    border-radius: 5px;
+    background-color: white;
+    color: $gray-500;
+
+    > .card-header {
+        background: transparent;
+        color: $blue;
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+
+    > .card-body {
+    }
+
+    > .card-footer {
+        a {
+            padding-left: 0.8rem;
+        }
+    }
+}
+
+
+$input-border-radius: 0;
+$input-color: $gray-600;
+$input-bg: $gray-100;
+$input-padding-y: 5px;
+$input-padding-x: 5px;
+$input-placeholder-color: $gray-300;
 
 @import "functions";
 @import "variables";
@@ -42,3 +75,4 @@ $theme-colors: map-remove($theme-colors, "success", "info", "danger", "warning",
 //@import "carousel";
 @import "utilities";
 //@import "print";
+
diff --git a/src/Server/Coderr.Server.Web/wwwroot/scss/checkbox.scss b/src/Server/Coderr.Server.Web/wwwroot/scss/checkbox.scss
new file mode 100644
index 00000000..63c52138
--- /dev/null
+++ b/src/Server/Coderr.Server.Web/wwwroot/scss/checkbox.scss
@@ -0,0 +1,48 @@
+@import "coderr-variables.scss";
+
+.card {
+    input[type="checkbox"] {
+        cursor: pointer;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        outline: 0;
+        background: $gray-300;
+        height: 16px;
+        width: 16px;
+        border: 1px solid white;
+    }
+
+    input[type="checkbox"]:checked {
+        background: $blue;
+        color: $blue !important;
+    }
+
+    input[type="checkbox"]:hover {
+        filter: brightness(90%);
+    }
+
+    input[type="checkbox"]:disabled {
+        background: $gray-700;
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    input[type="checkbox"]:after {
+        content: '';
+        position: relative;
+        left: 40%;
+        top: 20%;
+        width: 15%;
+        height: 40%;
+        display: none;
+    }
+
+    input[type="checkbox"]:checked:after {
+        display: block;
+    }
+
+    input[type="checkbox"]:disabled:after {
+        border-color: $gray-100;
+    }
+}
diff --git a/src/Server/Coderr.Server.Web/wwwroot/scss/coderr-variables.scss b/src/Server/Coderr.Server.Web/wwwroot/scss/coderr-variables.scss
index df21d9cb..837e6dc6 100644
--- a/src/Server/Coderr.Server.Web/wwwroot/scss/coderr-variables.scss
+++ b/src/Server/Coderr.Server.Web/wwwroot/scss/coderr-variables.scss
@@ -47,4 +47,4 @@ $h2-font-size:                $font-size-base * 2.5;
 $h3-font-size:                $font-size-base * 2;
 $h4-font-size:                $font-size-base * 1.75;
 $h5-font-size:                $font-size-base * 1.5;
-$h6-font-size:                $font-size-base * 1.25;
\ No newline at end of file
+$h6-font-size:                $font-size-base * 1.25;
diff --git a/src/Server/Coderr.Server.Web/wwwroot/scss/site.scss b/src/Server/Coderr.Server.Web/wwwroot/scss/site.scss
index 2f0469d2..58029682 100644
--- a/src/Server/Coderr.Server.Web/wwwroot/scss/site.scss
+++ b/src/Server/Coderr.Server.Web/wwwroot/scss/site.scss
@@ -1,22 +1,72 @@
 @import "coderr-variables.scss";
 @import "mixins/_breakpoints.scss";
+@import "checkbox.scss";
 
-.btn.btn-outline-primary{
-    color:#fff;
+.bg-dark {
+    h1, h2, h3, h4, a, span {
+        color: $light;
+    }
 }
-.minimal-gutters {
-    margin-right: 1px;
-    margin-left: 1px;
+
+.navbar-dark .navbar-nav .nav-link {
+    color: $blue;
 }
 
-.minimal-gutters > .col,
-.minimal-gutters > [class*="col-"] {
-    padding-right: 1px;
-    padding-left: 1px;
+.submenu {
+    > div {
+        background-color: white !important;
+
+        ul li a {
+            color: $gray-500 !important;
+        }
+    }
+    // The view main element
+    + div {
+        input[type=text]{
+            background-color: $gray-100 !important;
+        }
+
+        .card-col > div {
+            margin-right: -20px;
+        }
+
+        .card {
+            padding: 0;
+            margin: 20px;
+
+            .card-header{
+                margin-bottom: 0;
+                padding-bottom: 0;
+            }
+            .card-body {
+                margin-top: 0;
+                padding-top: 10px;
+                color: $gray-500;
+
+                table {
+                    width: 100%;
+
+                    tr {
+                        th {
+                            color: $gray-500;
+                            padding-right: 20px;
+                            min-width: 70%;
+                        }
+
+                        td {
+                            max-width: 100px;
+                            padding-left: 10px;
+                            text-align: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
-.minimal-gutters .card {
-    margin-bottom: 1px;
+.btn.btn-outline-primary {
+    color: #fff;
 }
 
 .card .card-body ul {
@@ -54,15 +104,6 @@ pre {
     }
 }
 
-.bg-dark {
-    h1, h2, h3, h4, a, span {
-        color: $light;
-    }
-}
-
-.navbar-dark .navbar-nav .nav-link {
-    color: white;
-}
 
 .submenu {
     background-color: $gray-400;
@@ -113,7 +154,7 @@ button.btn-light, a.btn-light {
 }
 
 .card {
-    border: 0;
+    /*border: 0;
     background-color: white;
     border-radius: 0;
 
@@ -122,8 +163,7 @@ button.btn-light, a.btn-light {
         background-color: $dark;
         color: $light;
         border-bottom: 0;
-    }
-
+    }*/
     .btn-primary {
         background-color: $blue;
         border-color: $blue;

From 2f9f81eba0b16d37faa3760de02574d83e1690f1 Mon Sep 17 00:00:00 2001
From: Jonas Gauffin <jonas@gauffin.org>
Date: Fri, 14 Feb 2020 10:45:10 +0100
Subject: [PATCH 2/2] UI refresh

---
 .../ApiKeys/Queries/ListApiKeysHandler.cs     |   2 +-
 .../components/analyze/analyze.vue.html       |   2 +-
 .../analyze/incidents/close.vue.html          |   4 +-
 .../analyze/incidents/feedback.vue.html       |  64 ++++----
 .../analyze/incidents/incident.vue.html       | 140 ++++++++----------
 .../components/analyze/incidents/report.ts    |  26 +++-
 .../analyze/incidents/report.vue.html         |  99 +++++--------
 .../analyze/incidents/status.vue.html         |   2 +-
 .../components/analyze/menu.vue.html          |   8 +-
 .../discover/application/configure.css        |   8 +-
 .../discover/application/configure.ts         |   7 +-
 .../discover/application/configure.vue.html   |  94 +++++-------
 .../discover/feedback/feedback.vue.html       |  67 ++++-----
 .../discover/incidents/incident.css           |   4 +
 .../discover/incidents/incident.vue.html      |  65 ++++----
 .../components/discover/incidents/search.css  |  24 ++-
 .../discover/incidents/search.vue.html        |  10 +-
 .../components/discover/menu.vue.html         |   2 +-
 .../components/home/navmenu/navmenu.vue.html  |   7 +-
 .../components/manage/account/home/home.ts    |   3 +
 .../manage/account/home/home.vue.html         |   9 +-
 .../manage/application/menu.vue.html          |   2 +-
 .../application/security/security.vue.html    |   2 +-
 .../system/apikeys/apikey-create.vue.html     |  34 ++---
 .../system/apikeys/apikey-edit.vue.html       |  68 ++++-----
 .../manage/system/apikeys/apikeys.vue.html    |   2 +-
 .../manage/system/home/home.vue.html          |   4 +-
 .../components/manage/system/menu.vue.html    |   2 +-
 .../manage/system/whitelist/home.vue.html     |   2 +-
 .../incidents/ContextNavigator.vue.html       |  35 ++---
 .../wwwroot/images/navico.png                 | Bin 0 -> 1257 bytes
 .../wwwroot/scss/bootstrap-coderr.scss        |  40 ++++-
 .../wwwroot/scss/coderr-variables.scss        |  65 ++++----
 .../Coderr.Server.Web/wwwroot/scss/radio.scss |  48 ++++++
 .../Coderr.Server.Web/wwwroot/scss/site.scss  |  10 ++
 35 files changed, 489 insertions(+), 472 deletions(-)
 create mode 100644 src/Server/Coderr.Server.Web/wwwroot/images/navico.png
 create mode 100644 src/Server/Coderr.Server.Web/wwwroot/scss/radio.scss

diff --git a/src/Server/Coderr.Server.SqlServer/Core/ApiKeys/Queries/ListApiKeysHandler.cs b/src/Server/Coderr.Server.SqlServer/Core/ApiKeys/Queries/ListApiKeysHandler.cs
index 3b390f05..d623f899 100644
--- a/src/Server/Coderr.Server.SqlServer/Core/ApiKeys/Queries/ListApiKeysHandler.cs
+++ b/src/Server/Coderr.Server.SqlServer/Core/ApiKeys/Queries/ListApiKeysHandler.cs
@@ -23,7 +23,7 @@ public async Task<ListApiKeysResult> HandleAsync(IMessageContext context, ListAp
             var keys =
                 await
                     _unitOfWork.ToListAsync(_mapper,
-                        "SELECT ID, GeneratedKey ApiKey, ApplicationName FROM ApiKeys ORDER BY ApplicationName");
+                        "SELECT Id, GeneratedKey ApiKey, ApplicationName FROM ApiKeys ORDER BY ApplicationName");
             return new ListApiKeysResult {Keys = keys.ToArray()};
         }
     }
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/analyze.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/analyze.vue.html
index 4ce43a1f..59313d34 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/analyze.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/analyze.vue.html
@@ -2,7 +2,7 @@
     <div>
         <analyze-menu />
         <div class="cold">
-            <router-view></router-view>
+            <router-view class="main-view"></router-view>
         </div>
     </div>
 </template>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/close.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/close.vue.html
index 15922b02..2894e547 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/close.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/close.vue.html
@@ -2,8 +2,10 @@
     <div class="CloseView">
         <div class="row">
             <div class="col">
-                <h2>Close incident</h2>
                 <div class="card">
+                    <div class="card-header">
+                        Close incident
+                    </div>
                     <div class="card-body rounded">
                         <textarea class="form-control" v-model="solution" placeholder="How did you solve this error?" rows="10" id="solution" autofocus=""></textarea>
                         <button class="btn btn-primary" v-on:click.prevent="close">Close incident</button>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/feedback.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/feedback.vue.html
index 15329ddd..d26c7a36 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/feedback.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/feedback.vue.html
@@ -1,49 +1,37 @@
 <template>
     <div class="FeedbackView">
-        <div class="row">
-            <div class="col">
-                <h2>
-                    Feedback
-                </h2>
+        <div class="card" v-show="feedbackList.length == 0" style="display: none">
+            <div class="card-header">
+                Feedback
             </div>
-            <hr />
-        </div>
-        <div class="row mb-2">
-            <div class="col">
-                <router-link :to="{ name: 'analyzeIncident', params: { incidentId: incidentId }}" class="btn btn-light">&lt;&lt; Back to incident..</router-link>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col" v-show="feedbackList.length == 0" style="display: none">
-                <div class="card">
-                    <div class="card-body">
-                        <h3>No feedback has been given.</h3>
-                        <p>This page can contain error descriptions written by your users when this error occur.</p>
-                        <p>Either write your own error page or activate one of our built in ones.</p>
-                        <pre><code>//Example for ASP.NET MVC5
+            <div class="card-body">
+                <h6>No feedback has been given.</h6>
+                <p>This page can contain error descriptions written by your users when this error occur.</p>
+                <p>Either write your own error page or activate one of our built in ones.</p>
+                <pre><code>//Example for ASP.NET MVC5
 Err.Configuration.UserInteraction.AskForFeedback = true;
 Err.Configuration.DisplayErrorPages();
 </code></pre>
-                        <p>You can read more in our <a href="">documentation</a>.</p>
-                    </div>
-                </div>
+                <p>You can read more in our <a href="">documentation</a>.</p>
             </div>
-            <div class="feedback col" v-for="feedback in feedbackList">
-                <div class="card">
-                    <div class="card-header">
-                        Written {{feedback.writtenAtUtc|ago}}
-                    </div>
-                    <div class="card-body">
-                        <div>
-                            {{feedback.description}}
-                        </div>
-                        <div>
-                        </div>
-                    </div>
-                    <div class="card-footer" v-if="feedback.email">
-                        <a :href="'mailto:' + feedback.email">{{feedback.email}}</a>
-                    </div>
+        </div>
+        <div class="card" v-for="feedback in feedbackList">
+            <div class="card-header">
+                Written {{feedback.writtenAtUtc|ago}} for
+                <span v-if="feedback.incidentId">
+                    <router-link :to="{name: 'discoverIncident', params: { incidentId: feedback.incidentId }}">{{feedback.incidentName}}</router-link>
+                </span>
+                <span v-else> <router-link :to="{name: 'discoverFeedback', params: { applicationId: feedback.applicationId }}">{{feedback.applicationName}}</router-link></span>
+            </div>
+            <div class="card-body">
+                <div>
+                    {{feedback.description}}
                 </div>
+                <div>
+                </div>
+            </div>
+            <div class="card-footer" v-if="feedback.email">
+                <a :href="'mailto:' + feedback.email">{{feedback.email}}</a>
             </div>
         </div>
     </div>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html
index ff2aab98..27dabceb 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html
@@ -1,102 +1,84 @@
 <template>
     <div class="IncidentView">
-        <div>
-            <div class="row">
-                <div class="col">
-                    <div class="float-right">
-                        <div class="btn-group" role="group">
-                            <a class="btn btn-primary text-light" v-on:click="closeIncident">Close incident</a>
-                            <div class="dropdown" style="display: inline-block">
-                                <button type="button" class="btn btn-outline-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-                                <div class="dropdown-menu dropdown-menu-right">
-                                    <span class="dropdown-item" v-on:click="reAssign"><i class="fa-redo fa text-muted"></i> Re-assign</span>
-                                    <!--<span class="dropdown-item" v-on:click="addToTfs"><i class="fa-code-branch fa text-muted"></i> Add to TFS/VSTS</span>-->
-
-                                </div>
+        <div class="row" style="margin-bottom: 20px">
+            <div class="col">
+                <div class="float-right">
+                    <div class="btn-group" role="group">
+                        <a class="btn btn-blue shadow" href="#" v-if="incident.IncidentState == 0" v-on:click.prevent="assignToMe">Assign to me</a>
+                        <div class="dropdown" style="display: inline-block">
+                            <button class="btn btn-white shadow dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                <span class="dropdown-item" v-on:click="reAssign"><i class="fa-redo fa text-muted"></i> Re-assign</span>
                             </div>
                         </div>
                     </div>
-
-                    <h3>
-                        {{incident.Description}} 
-                        <span class="lead text-muted">[{{incident.FullName}}] </span>
-                    </h3>
-                    <div class="tags">
-                        <span v-for="tag in incident.Tags" class="badge badge-dark">{{tag}}</span>
-                    </div>
                 </div>
+                <h3 class="text-gray">{{incident.Description}} <small class="text-gray4">[{{incident.FullName}}]</small></h3>
             </div>
-            <div class="row" v-if="incident.Solution">
-                <div class="col">
-                    <div class="card">
-                        <div class="card-header">
-                            Previous solution ({{incident.SolvedAtUtc|ago}})
+        </div>
+        <div class="row">
+            <div class="col-xl-8 col-lg-6">
+                <div class="card">
+                    <div class="card-header">
+                        Stack trace
+                    </div>
+                    <div class="card-body pt-0">
+                        <div class="tags">
+                            <span v-for="tag in incident.Tags" class="badge badge-dark">{{tag}}</span>
                         </div>
-                        <div class="card-body">
-                            <div v-html="incident.Solution"></div>
+                        <div v-if="highlights.length > 0" class="p-3">
+                            <table class="w-100">
+                                <tr>
+                                    <th>Application</th>
+                                    <td>{{applicationName}}</td>
+                                </tr>
+                                <tr v-for="high in highlights">
+                                    <th>{{high.name}}</th>
+                                    <td style="width: 100%">{{high.value}}</td>
+                                </tr>
+                            </table>
                         </div>
+                        <pre style="min-height: 200px"><code>{{incident.StackTrace}}</code></pre>
                     </div>
                 </div>
-
             </div>
-            <div class="row">
-                <div class="col-xl-8 col-lg-6">
-                    <div class="card">
-                        <div class="card-body">
-
-                            <div v-if="highlights.length > 0" class="p-3">
-                                <table class="w-100">
-                                    <tr>
-                                        <th>Application</th>
-                                        <td>{{applicationName}}</td>
-                                    </tr>
-                                    <tr v-for="high in highlights">
-                                        <th>{{high.name}}</th>
-                                        <td style="width: 100%">{{high.value}}</td>
-                                    </tr>
-                                </table>
-                            </div>
-
-                            <h3>Stack trace</h3>
-                            <pre style="min-height: 200px"><code>{{incident.StackTrace}}</code></pre>
-                        </div>
+            <div class="col-xl-4 col-lg-6">
+                <div class="card" v-if="incident.Solution">
+                    <div class="card-header">
+                        Previous solution ({{incident.SolvedAtUtc|ago}})
+                    </div>
+                    <div class="card-body">
+                        <div v-html="incident.Solution"></div>
                     </div>
                 </div>
-                <div class="col-xl-4 col-lg-6">
-                    <div class="card" v-if="incident.Facts && incident.Facts.length > 0">
-                        <div class="card-body">
-                            <h3>Quick facts</h3>
-                            <div>
-                                <table class="table table-borderless">
-                                    <tbody>
-                                    <tr v-for="prop in incident.Facts" v-if="prop.Value != '0'">
-                                        <td>{{prop.Title}}</td>
-                                        <td><span v-html="prop.Value"></span></td>
-                                    </tr>
-                                    <tr v-for="rel in incident.RelatedIncidents">
-                                        <td>Related Incident</td>
-                                        <td><a class="text-red" :href="'/discover/incidents/' + rel.ApplicationId + '/incident/' + rel.IncidentId">{{rel.Title}}</a></td>
-                                    </tr>
+                <div class="card" v-if="incident.Facts && incident.Facts.length > 0">
+                    <div class="card-header">
+                        Quick facts
+                    </div>
+                    <div class="card-body">
+                        <table class="table">
+                            <tbody>
+                            <tr v-for="prop in incident.Facts" v-if="prop.Value != '0'">
+                                <td>{{prop.Title}}</td>
+                                <td><span v-html="prop.Value"></span></td>
+                            </tr>
+                            <tr v-for="rel in incident.RelatedIncidents">
+                                <td>Related Incident</td>
+                                <td><a class="text-red" :href="'/discover/incidents/' + rel.ApplicationId + '/incident/' + rel.IncidentId">{{rel.Title}}</a></td>
+                            </tr>
 
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
+                            </tbody>
+                        </table>
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col">
-                    <div class="card">
-                        <div class="card-body">
-                            <context-navigator :incidentId="incidentId" :showAnalyzeFooter="true" />
-                        </div>
-                    </div>
-                </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <context-navigator :incidentId="incidentId" :showAnalyzeFooter="true"/>
             </div>
-
         </div>
-        <div id="assignToModal" style="display:none">
+        <div id="assignToModal" style="display: none">
             <div class="modal-body">
                 <div v-for="user in team" class="mb-2">
                     <button class="btn btn-primary btn-block" v-on:click.prevent="assignTo(user.id, $event)" :value="user.id" data-dismiss="modal">
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.ts b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.ts
index 053fc59e..6a659f05 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.ts
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.ts
@@ -24,12 +24,12 @@ export default class AnalyzeReportComponent extends Vue {
     reportId: number;
     incidentId: number;
 
-    userFeedback: string|null = null;
+    userFeedback: string | null = null;
     userOrEmail = 'user';
 
     reports: GetReportListResultItem[] = [];
-    showNextButton= true;
-    showPrevButton=false;
+    showNextButton = true;
+    showPrevButton = false;
 
     contextCollections: GetReportResultContextCollection[] = [];
     currentCollectionName = '';
@@ -62,7 +62,7 @@ export default class AnalyzeReportComponent extends Vue {
             this.loadReport(this.reports[this.currentIndex].Id);
         }
     }
-    
+
     nextReport() {
         this.currentIndex++;
         this.indexInTotalSet++;
@@ -76,7 +76,7 @@ export default class AnalyzeReportComponent extends Vue {
             this.loadReport(this.reports[this.currentIndex].Id);
         }
 
-        
+
     }
 
     private checkNavigationLinks() {
@@ -122,7 +122,7 @@ export default class AnalyzeReportComponent extends Vue {
                     if (!isFound) {
                         this.currentCollectionName = report.ContextCollections[0].Name;
                     }
-                    
+
                     this.loadCollection(this.currentCollectionName);
                 } else {
                     this.currentCollection = new GetReportResultContextCollection();
@@ -144,7 +144,7 @@ export default class AnalyzeReportComponent extends Vue {
         q.PageSize = this.pageSize;
         if (pageNumber) {
             q.PageNumber = pageNumber;
-            
+
         }
 
         AppRoot.Instance.apiClient.query<GetReportListResult>(q)
@@ -172,7 +172,7 @@ export default class AnalyzeReportComponent extends Vue {
 
                     this.checkNavigationLinks();
                 }
-                
+
             });
     }
 
@@ -199,6 +199,16 @@ export default class AnalyzeReportComponent extends Vue {
                         if (kvp.Value.substr(0, 1) !== '<') {
                             kvp.Value = '<img src="data:image/png;base64, ' + kvp.Value + '" />';
                         }
+                        if (kvp.Key === 'Cookie') {
+                            if (kvp.Value.length > 1000)
+                                kvp.Value = kvp.Value.substring(0, 1000) + "[...]";
+                        }
+                    }
+                } else {
+                    for (var j = 0; j < this.currentCollection.Properties.length; j++) {
+                        var kvp = this.currentCollection.Properties[j];
+                        if (kvp.Value.length > 100)
+                            kvp.Value = kvp.Value.replace(/(.{100})/g, "$1<br>");
                     }
                 }
                 return;
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.vue.html
index 3f9a0f6d..7d0c32aa 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.vue.html
@@ -1,51 +1,32 @@
 <template>
     <div class="ReportsView">
-        <div class="row">
-                <div class="col m-2">
-                    <h3>
-                        Report from {{reportedAt|niceTime}}
-                    </h3>
-
-            </div>
-            <hr />
-        </div>
-        <div class="row mb-2">
-            <div class="col-lg-2">
-                <button class="btn btn-blue" v-on:click="prevReport" v-if="showPrevButton">&lt;&lt; Previous report</button>
+        <div class="card">
+            <div class="card-header">
+                Analyze reports, current: {{reportedAt|niceTime}}
             </div>
-            <div class="col-lg-8 text-center">
-                <span>{{reportedAt|ago}}</span> <span class="text-muted">(report {{indexInTotalSet+1}} of {{totalCount}})</span>
-            </div>
-            <div class="col-lg-2 text-right">
-                <button class="btn btn-blue" v-on:click="nextReport" v-if="showNextButton">Next report &gt;&gt;</button>
-            </div>
-        </div>
-        <div class="row" v-if="userFeedback != null">
-            <div class="col">
-                <div class="card">
-                    <div class="card-body">
-                        <h3>Error report from {{userOrEmail}}</h3>
-                        <div class="card-body">
-                            <pre style="min-height: 200px"><code>{{userFeedback}}</code></pre>
+            <div class="card-body">
+                <div v-if="userFeedback != null">
+                    <div class="col">
+                        <div class="card">
+                            <div class="card-body">
+                                <h3>Error report from {{userOrEmail}}</h3>
+                                <div class="card-body">
+                                    <pre style="min-height: 200px"><code>{{userFeedback}}</code></pre>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
-        <div class="row">
-
-            <div class="col contextCollections">
-                <div class="card">
-                    <div class="card-body">
-                        <div v-if="this.contextCollections.length == 0">
-                            <em>No context collections were attached to this error report.</em>
-                            <p>
-                                <em>Our documentation demonstrates how you can <a href="http://coderr.io/documentation/client/manual-reporting/">manually add context information</a> or <a href="http://coderr.io/documentation/client/context-provider/">create custom collections</a>.</em>
-                            </p>
-                        </div>
-                        <div v-else class="row">
+                <div class="contextCollections">
+                    <div v-if="this.contextCollections.length == 0">
+                        <em>No context collections were attached to this error report.</em>
+                        <p>
+                            <em>Our documentation demonstrates how you can <a href="http://coderr.io/documentation/client/manual-reporting/">manually add context information</a> or <a href="http://coderr.io/documentation/client/context-provider/">create custom collections</a>.</em>
+                        </p>
+                    </div>
+                    <div v-else>
+                        <div class="row">
                             <div class="col-md-auto col-sm-6 collection">
-                                <h5>Select collection</h5>
                                 <div v-for="collection in contextCollections">
                                     <a href="#"
                                        :class="{'active': collection.Name === currentCollection.Name }"
@@ -53,14 +34,13 @@ <h5>Select collection</h5>
                                        v-on:click.prevent="loadCollection(collection.Name)">{{collection.Name}}</a>
                                 </div>
                             </div>
-                            <div class="col">
+                            <div class="col pt-3">
                                 <div v-if="currentCollection">
-                                    <h4>{{currentCollection.Name}}</h4>
-                                    <table class="table th-vertical">
+                                    <table class="table" style="overflow: scroll; max-width: 100%;">
                                         <tbody>
                                             <tr v-for="prop in currentCollection.Properties">
-                                                <th style="white-space: nowrap;">{{prop.Key}}</th>
-                                                <td style="width: 100%;" class="value" v-html="prop.Value"></td>
+                                                <th style="white-space: nowrap; width: 300px">{{prop.Key}}</th>
+                                                <td style="max-width: 100%; overflow: auto;" class="value" v-html="prop.Value"></td>
                                             </tr>
                                         </tbody>
                                     </table>
@@ -69,24 +49,23 @@ <h4>{{currentCollection.Name}}</h4>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="col-lg-12 col-xl-4" v-if="userFeedback != null">
-                <div class="card">
-                    <div class="card-body">
-                        <h3>Error report from {{userOrEmail}}</h3>
-                        <div class="card-body">
-                            <pre style="min-height: 200px"><code>{{userFeedback}}</code></pre>
-                        </div>
+
+
+            </div>
+            <div class="card-footer">
+                <div class="row">
+                    <div class="col-lg-2">
+                        <button class="btn btn-blue" v-on:click="prevReport" v-if="showPrevButton">&lt;&lt; Previous report</button>
+                    </div>
+                    <div class="col-lg-8 text-center">
+                        <span>{{reportedAt|ago}}</span> <span class="text-muted">(report {{indexInTotalSet+1}} of {{totalCount}})</span>
+                    </div>
+                    <div class="col-lg-2 text-right">
+                        <button class="btn btn-blue" v-on:click="nextReport" v-if="showNextButton">Next report &gt;&gt;</button>
                     </div>
                 </div>
             </div>
-
-        </div>
-        <div class="row">
-            <div class="col">
-                <router-link :to="{ name: 'analyzeIncident', params: { incidentId: incidentId }}" class="btn btn-dark">&lt;&lt; Back to incident..</router-link>
-            </div>
         </div>
     </div>
 </template>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/status.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/status.vue.html
index a8855932..794311cf 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/status.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/status.vue.html
@@ -1,5 +1,5 @@
 <template>
-    <div class="StatusUpdateView mt-4">
+    <div class="StatusUpdateView">
         <div class="container">
             <div class="row">
                 <div class="col">
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/menu.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/menu.vue.html
index b11140cf..96c89c79 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/analyze/menu.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/analyze/menu.vue.html
@@ -31,8 +31,8 @@
                 </ul>
             </div>
         </div>
-        <div v-show="toggleMenu" class="bg-dark text-blue mt-0 p-5 my-incidents">
-            <h3 class="text-blue">My incidents</h3>
+        <div v-show="toggleMenu" class="text-blue bg-white mt-0 p-5 my-incidents">
+            <h5 class="text-blue">My incidents</h5>
             <table>
                 <tr>
                     <th>Name</th>
@@ -40,9 +40,9 @@ <h3 class="text-blue">My incidents</h3>
                     <th>Created</th>
                     <th>Assigned since</th>
                 </tr>
-                <tr v-for="item in incidents">
+                <tr v-for="item in incidents" class="text-black-50">
                     <td class="text-left">
-                        <router-link :to="{ name: 'analyzeIncident', params: {incidentId: item.incidentId.toString() }}" :key="item.incidentId">
+                        <router-link :to="{ name: 'analyzeIncident', params: {incidentId: item.incidentId.toString() }}" :key="item.incidentId" class="text-black-50">
                             {{item.title}}
                         </router-link>
                     </td>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.css b/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.css
index 0d43ba1f..b1876e27 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.css
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.css
@@ -1,7 +1,3 @@
-.more {
-    display: none;
-}
-
 .buttons {
     padding-top: 1px;
 }
@@ -11,3 +7,7 @@
         display: block;
         width: 100%
     }
+
+.configure-view btn.active {
+    color: #59c1d5;
+}
\ No newline at end of file
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.ts b/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.ts
index 3f1ec58f..2b9b2baa 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.ts
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.ts
@@ -84,14 +84,13 @@ export default class ConfigureClientComponent extends Vue {
             });
         var buttons = document.querySelectorAll('.buttons button');
         for (var i = 0; i < buttons.length; i++) {
-            if (buttons[i].className.indexOf('btn-red') !== -1) {
-                buttons[i].classList.remove('btn-red');
-                buttons[i].classList.add('btn-light');
+            if (buttons[i].className.indexOf('active') !== -1) {
+                buttons[i].classList.remove('active');
             }
 
         }
         var button = <HTMLElement>document.querySelector(`.buttons [data-lib="${libName}"]`);
-        button.classList.add('btn-red');
+        button.classList.add('active');
     }
 
     completedConfiguration() {
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.vue.html
index 6e55ed52..26e536b8 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/application/configure.vue.html
@@ -1,64 +1,52 @@
 <template>
-    <div class="m-2 configure-view">
-        <div class="row">
-            <div class="col">
-                <h1>Configure your application</h1>
-                <p>
-                    To get started, you need to configure your application.
-                    Select the .NET library that you are going to use.
-                </p>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-4">
-                <div class="card">
-                    <div class="card-header">
-                        Available .NET libraries
-                    </div>
-                    <div class="buttons">
-                        <button class="btn btn-light" v-for="lib in libraries" :data-lib="lib.libraryName" v-on:click.prevent="select(lib.libraryName)">
-                            {{lib.clientFolderName}}
-                        </button>
-                    </div>
-                </div>
-                <button class="btn btn-blue btn-block" v-on:click.prevent="completedConfiguration">Configuration is complete &gt;&gt;</button>
-            </div>
-            <div class="col-md-8">
-                <div class="alert alert-warning" v-if="weAreInTrouble">
-                    <h3 class="alert-heading">No errors have been reported.</h3>
-                    <div>
-                        <p>We could not find any reported errors in our database. </p>
-                        <p>Do you want our help to troubleshoot the issue?</p>
-                        <button id="configureHelpButton" class="btn btn-light" v-on:click="goToSupport">Get help from our developers</button>
-                        <a class="btn  btn-light" href="https://coderr.io/guides-and-support/">Guides and support</a>
-                        <router-link class="btn  btn-light" :to="{ name: 'root' }">Exit onboarding</router-link>
+    <div class="configure-view">
+        <div class="card">
+            <div class="card-header">Configure application</div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-lg-2 col-md-4">
+                        <div class="buttons">
+                            <button class="btn btn-light" v-for="lib in libraries" :data-lib="lib.libraryName" v-on:click.prevent="select(lib.libraryName)">
+                                {{lib.clientFolderName}}
+                            </button>
+                        </div>
                     </div>
-                </div>
-                <div class="alert alert-warning" v-if="noConnection">
-                    <h3 class="alert-heading">No internet connection</h3>
-                    <div>
-                        <p>An internet connection is required to load the configuration guides.</p>
-                        <p>As we could not download them, you need to visit <a target="_blank" href="https://coderr.io/guides-and-support/">our documentation</a> by yourself.</p>
-                        <hr />
-                        <h5>
-                            Your credentials (copy/paste into your application)
-                        </h5>
-                        <pre><code class="lang-c#">var url = new Uri("{{reportUrl}}");
+                    <div class="col">
+                        <div class="alert alert-warning" v-if="weAreInTrouble">
+                            <h3 class="alert-heading">No errors have been reported.</h3>
+                            <div>
+                                <p>We could not find any reported errors in our database. </p>
+                                <p>Do you want our help to troubleshoot the issue?</p>
+                                <button id="configureHelpButton" class="btn btn-light" v-on:click="goToSupport">Get help from our developers</button>
+                                <a class="btn  btn-light" href="https://coderr.io/guides-and-support/">Guides and support</a>
+                                <router-link class="btn  btn-light" :to="{ name: 'root' }">Exit onboarding</router-link>
+                            </div>
+                        </div>
+                        <div class="alert alert-warning" v-if="noConnection">
+                            <h3 class="alert-heading">No internet connection</h3>
+                            <div>
+                                <p>An internet connection is required to load the configuration guides.</p>
+                                <p>As we could not download them, you need to visit <a target="_blank" href="https://coderr.io/guides-and-support/">our documentation</a> by yourself.</p>
+                                <hr />
+                                <h5>
+                                    Your credentials (copy/paste into your application)
+                                </h5>
+                                <pre><code class="lang-c#">var url = new Uri("{{reportUrl}}");
 Err.Configuration.Credentials(url,
                               "{{appKey}}", 
                               "{{sharedSecret}}");
 </code></pre>
+                            </div>
+                        </div>
+                        <div v-if="!noConnection">
+                            <em v-if="!instruction">Select a library to the left</em>
+                            <div v-html="instruction"></div>
+                        </div>
                     </div>
                 </div>
-                <div class="card" v-if="!noConnection">
-                    <div class="card-header">
-                        Configuration instruction
-                    </div>
-                    <div class="card-body">
-                        <em v-if="!instruction">Select a library to the left</em>
-                        <div v-html="instruction"></div>
-                    </div>
-                </div>
+            </div>
+            <div class="card-footer">
+                <button class="btn btn-blue" v-on:click.prevent="completedConfiguration">Configuration is complete &gt;&gt;</button>
             </div>
         </div>
     </div>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/feedback/feedback.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/feedback/feedback.vue.html
index 1c14b0af..5f2445f6 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/feedback/feedback.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/feedback/feedback.vue.html
@@ -1,51 +1,38 @@
 <template>
-    <div class="FeedbackView">
-        <div class="row">
-            <div class="col">
-                <h2>
-                    Feedback
-                </h2>
+    <div class="FeedbackView" style="padding: 10px 20px;">
+        <div class="card" v-show="feedbackList.length == 0" style="display: none">
+            <div class="card-header">
+                Feedback
             </div>
-            <hr />
-        </div>
-        <div class="row mb-2">
-        </div>
-        <div class="row">
-            <div class="col" v-show="feedbackList.length == 0" style="display: none">
-                <div class="card">
-                    <div class="card-body">
-                        <h3>No feedback has been given.</h3>
-                        <p>This page can contain error descriptions written by your users when this error occur.</p>
-                        <p>Either write your own error page or activate one of our built in ones.</p>
-                        <pre><code>//Example for ASP.NET MVC5
+            <div class="card-body">
+                <h6>No feedback has been given.</h6>
+                <p>This page can contain error descriptions written by your users when this error occur.</p>
+                <p>Either write your own error page or activate one of our built in ones.</p>
+                <pre><code>//Example for ASP.NET MVC5
 Err.Configuration.UserInteraction.AskForFeedback = true;
 Err.Configuration.DisplayErrorPages();
 </code></pre>
-                        <p>You can read more in our <a href="">documentation</a>.</p>
-                    </div>
-                </div>
+                <p>You can read more in our <a href="">documentation</a>.</p>
             </div>
-            <div class="feedback col" v-for="feedback in feedbackList">
-                <div class="card">
-                    <div class="card-header">
-                        Written {{feedback.writtenAtUtc|ago}} for 
-                        <span v-if="feedback.incidentId">
-                            <router-link :to="{name: 'discoverIncident', params: { incidentId: feedback.incidentId }}">{{feedback.incidentName}}</router-link>
-                        </span>
-                        <span v-else> <router-link :to="{name: 'discoverFeedback', params: { applicationId: feedback.applicationId }}">{{feedback.applicationName}}</router-link></span>
-                    </div>
-                    <div class="card-body">
-                        <div>
-                            {{feedback.description}}
-                        </div>
-                        <div>
-                        </div>
-                    </div>
-                    <div class="card-footer" v-if="feedback.email">
-                        <a :href="'mailto:' + feedback.email">{{feedback.email}}</a>
-                    </div>
+        </div>
+        <div class="card" v-for="feedback in feedbackList">
+            <div class="card-header">
+                Written {{feedback.writtenAtUtc|ago}} for
+                <span v-if="feedback.incidentId">
+                    <router-link :to="{name: 'discoverIncident', params: { incidentId: feedback.incidentId }}">{{feedback.incidentName}}</router-link>
+                </span>
+                <span v-else> <router-link :to="{name: 'discoverFeedback', params: { applicationId: feedback.applicationId }}">{{feedback.applicationName}}</router-link></span>
+            </div>
+            <div class="card-body">
+                <div>
+                    {{feedback.description}}
+                </div>
+                <div>
                 </div>
             </div>
+            <div class="card-footer" v-if="feedback.email">
+                <a :href="'mailto:' + feedback.email">{{feedback.email}}</a>
+            </div>
         </div>
     </div>
 </template>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.css b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.css
index 1f50f00a..f32f603f 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.css
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.css
@@ -34,6 +34,10 @@
     stroke: #1EC2A3 !important;
 }
 
+.coderr-chart .ct-grid.ct-horizontal, .coderr-chart .ct-grid.ct-vertical {
+    stroke: #515151;
+    stroke-dasharray: 4;
+}
 /*.ct-label.ct-label.ct-horizontal {
     position: relative;
     justify-content: flex-end;
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.vue.html
index d249a4c7..84e6b1e9 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/incident.vue.html
@@ -1,38 +1,36 @@
 <template>
-    <div id="IncidentSearchView">
-        <div class="row mb-2 mt-2">
-            <div class="col-lg-12 pl-4">
-                <h3>{{incident.Description}} <small class="text-muted">[{{incident.FullName}}]</small></h3>
-
-                <div>
-                    <a href="#" class="btn btn-light" v-on:click.prevent="$router.back()">&lt;&lt; Back ...</a>
-                    <div class="float-right">
-                        <div class="btn-group" role="group">
-                            <a class="btn btn-primary" href="#" v-if="incident.IncidentState == 0" v-on:click.prevent="assignToMe">Assign to me</a>
-                            <div class="dropdown" style="display: inline-block">
-                                <button class="btn btn-outline-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                                    <a class="dropdown-item" href="#" v-if="incident.IncidentState == 0" v-on:click.prevent="assignToSomeoneElse">Assign to ..</a>
-                                    <a class="dropdown-item" href="#" v-if="!isClosed && !isIgnored" v-on:click.prevent="ignore">Ignore</a>
-                                    <a class="dropdown-item" href="#" v-if="!isClosed" v-on:click.prevent="close">Close</a>
-                                    <a class="dropdown-item" href="#" v-on:click.prevent="deleteIncident">Delete</a>
-                                </div>
+    <div id="IncidentSearchView" class="main-view" style="padding-top: 20px">
+        <div class="row" style="padding-left: 20px;padding-right: 20px">
+            <div class="col">
+                <div class="float-right">
+                    <div class="btn-group" role="group">
+                        <a class="btn btn-blue shadow" href="#" v-if="incident.IncidentState == 0" v-on:click.prevent="assignToMe">Assign to me</a>
+                        <div class="dropdown" style="display: inline-block">
+                            <button class="btn btn-white shadow dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                <a class="dropdown-item" href="#" v-if="incident.IncidentState == 0" v-on:click.prevent="assignToSomeoneElse">Assign to ..</a>
+                                <a class="dropdown-item" href="#" v-if="!isClosed && !isIgnored" v-on:click.prevent="ignore">Ignore</a>
+                                <a class="dropdown-item" href="#" v-if="!isClosed" v-on:click.prevent="close">Close</a>
+                                <a class="dropdown-item" href="#" v-on:click.prevent="deleteIncident">Delete</a>
                             </div>
                         </div>
                     </div>
                 </div>
+                <h3 class="text-gray">{{incident.Description}} <small class="text-gray4">[{{incident.FullName}}]</small></h3>
             </div>
         </div>
         <div class="row">
-            <div class="col-lg-12">
-                <div class="card  bg-dark">
+            <div class="col-lg-12 m-0">
+                <div class="card">
+                    <div class="card-header">
+                        Report history
+                      
+                    </div>
                     <div class="card-body">
+
                         <div class="position-relative">
-                            <h3 class="">Report history</h3>
                             <div class="ct-chart incident-chart">
-
                             </div>
-
                         </div>
                     </div>
                 </div>
@@ -40,7 +38,10 @@ <h3 class="">Report history</h3>
         </div>
         <div class="row">
             <div class="col-lg-8">
-                <div class="card">
+                <div class="card p-0 m-0" style="margin-left: 20px !important">
+                    <div class="card-header">
+                       Stack trace
+                    </div>
                     <div class="card-body">
 
                         <div v-if="highlights.length > 0" class="p-3">
@@ -61,19 +62,11 @@ <h3 class="">Report history</h3>
                     </div>
 
                 </div>
-                <div class="row">
-                    <div class="col">
-                        <div class="card">
-                            <div class="card-body">
-                                <context-navigator :incidentId="incidentId" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <context-navigator :incidentId="incidentId" style="margin-right: 0"/>
 
             </div>
             <div class="col-lg-4">
-                <div class="card">
+                <div class="card p-0 m-0" style="margin-right: 20px !important;">
                     <div class="card-header">
                         Quick facts
                     </div>
@@ -89,7 +82,7 @@ <h3 class="">Report history</h3>
             </div>
         </div>
 
-        <div id="assignToModal" style="display:none">
+        <div id="assignToModal" style="display: none">
             <div class="modal-body">
                 <div v-for="user in team" class="mb-2">
                     <button class="btn btn-primary btn-block" v-on:click.prevent="assignTo(user.id, $event)" :value="user.id" data-dismiss="modal">
@@ -100,7 +93,7 @@ <h3 class="">Report history</h3>
         </div>
         <div id="CloseBody" style="display: none">
             <textarea id="CloseArea" class="w-100" rows="10" placeholder="How did you solve the error?" autofocus="autofocus"></textarea>
-            <input type="text" name="version" class="form-control mb-3" size="10" placeholder="Which version is the error corrected in? (format: 1.2.10)" pattern="[0-9\.]*" title="You can use semantic versioning, including pre-releases, but must specify the release version here." />
+            <input type="text" name="version" class="form-control mb-3" size="10" placeholder="Which version is the error corrected in? (format: 1.2.10)" pattern="[0-9\.]*" title="You can use semantic versioning, including pre-releases, but must specify the release version here."/>
             <div>
                 <em data-target="footerHint"><a href="https://coderr.io/documentation/features/incidents/close/">Learn more about this feature</a></em>
                 <em class="float-right"><router-link :to="{name: 'closeIncident', params: { incidentId: incidentId }}">Go to full screen editor</router-link></em>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.css b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.css
index a2e0b140..048064ca 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.css
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.css
@@ -20,15 +20,33 @@
 
 }
 
+#searchTable {
+    margin-bottom: 20px;
+}
+#searchTable th {
+    font-weight: normal;
+    color: white;
+}
+
 #SearchOptions * {
     font-size: 0.7rem !important;
+    text-transform: inherit;
+}
+
+#SearchOptions label {
+    font-size: 1rem !important;
 }
 
 #SearchOptions .form-group {
     display: inline-block;
     vertical-align: top;
+    margin-left: 10px;
 }
 
+    #SearchOptions .form-group:first-child {
+        margin-left: 0;
+    }
+
 #SearchOptions input {
     display: inline !important;
     width: inherit;
@@ -60,11 +78,13 @@
     max-width: 25vw;
 }
 
+
 #SearchOptions button[type=submit] {
     opacity: 1;
-    font-size: 1.2rem !important;
-    box-shadow: 0px 3px 6px #eee;
+    box-shadow: 0px 3px 6px #ccc;
+    padding: 10px 20px;
     border: 0;
+    text-transform: uppercase;
 }
 
 @media screen and (max-width: 1600px) {
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.vue.html
index 5a7d4e3e..e35e68e4 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/incidents/search.vue.html
@@ -64,8 +64,8 @@
                             <div class="form-group context">
                                 <label>Context collection</label>
                                 <div>
-                                    <input name="CollectionName" type="text" class="form-control mb-1" placeholder="Collection name" v-model="contextCollectionName" />
-                                    <input name="PropertyName" type="text" class="form-control mb-1" placeholder="Property name" v-model="contextCollectionProperty" />
+                                    <input name="CollectionName" type="text" class="form-control mb-1" placeholder="Collection name" v-model="contextCollectionName" /><br/>
+                                    <input name="PropertyName" type="text" class="form-control mb-1" placeholder="Property name" v-model="contextCollectionProperty" /><br />
                                     <input name="PropertyValue" type="text" class="form-control mb-1" placeholder="Property value" v-model="contextCollectionPropertyValue" />
                                     <p>
                                         <em><a class="text-red" href="https://coderr.io/documentation/client/contextcollections/">Learn how to add custom data to reports.</a></em>
@@ -124,8 +124,10 @@
                             <em>No incidents have been reported (or nothing matched your search).</em>
                         </div>
                         <div v-else>
-                            <button name="assignToMe" class="btn btn-blue" v-on:click.prevent="assignAllToMe">Assign selected incidents to me</button>
-                            <button name="deleteSelected" class="btn btn-light" v-on:click.prevent="deleteSelectedIncidents">Delete selected incidents</button>
+                            <div class="card-body">
+                                <button name="assignToMe" class="btn btn-blue" v-on:click.prevent="assignAllToMe">Assign selected incidents to me</button>
+                                <button name="deleteSelected" class="btn btn-light" v-on:click.prevent="deleteSelectedIncidents">Delete selected incidents</button>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/discover/menu.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/discover/menu.vue.html
index e9cfc87e..aed85b93 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/discover/menu.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/discover/menu.vue.html
@@ -9,7 +9,7 @@
                     <router-link class="nav-link" :to="{name: 'findIncidents', params: {applicationId: currentApplicationId }}"><i class="fa fa-table"></i> Incidents</router-link>
                 </li>
                 <li class="nav-item">
-                    <router-link class="nav-link" :to="{name: 'discoverFeedback', params: {applicationId: currentApplicationId }}"><i class="fa fa-table"></i> Feedback</router-link>
+                    <router-link class="nav-link" :to="{name: 'discoverFeedback', params: {applicationId: currentApplicationId }}"><i class="fa fa-comments"></i> Feedback</router-link>
                 </li>
                 <li class="nav-item">
                     <router-link class="nav-link" :to="{name: 'configureApplication', params: {applicationId: currentApplicationId }}" v-if="currentApplicationId"><i class="fa fa-cog"></i> Configure your application</router-link>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/home/navmenu/navmenu.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/home/navmenu/navmenu.vue.html
index 28ee3a00..5d542c42 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/home/navmenu/navmenu.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/home/navmenu/navmenu.vue.html
@@ -1,7 +1,8 @@
 <template>
     <div class="navmenu">
-        <div class="navbar navbar-expand-md navbar-dark bg-primary">
+        <div class="navbar navbar-expand-md navbar-dark bg-dark">
             <!--<a class="navbar-brand" href="#">Coderr</a>-->
+            <img src="images/navico.png" height="25px"/>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -18,12 +19,12 @@
             <div class="navbar-collapse collapse" v-if="!onboarding">
                 <ul class="navbar-nav mr-auto" id="mainMenu">
                     <li class="nav-item dropdown">
-                        <a class="btn btn-primary nav-link dropdown-toggle" id="mnuCurrentApplication" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{currentApplicationName}}</a>
+                        <a class="nav-link dropdown-toggle" id="mnuCurrentApplication" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{currentApplicationName}}</a>
                         <div class="dropdown-menu">
                             <a v-on:click.prevent="changeApplication(null)" class="dropdown-item"><i class="fa fa-home"></i> All applications</a>
                             <div class="dropdown-divider"></div>
                             <div v-for="item in myApplications">
-                                <a href="#" v-on:click.prevent="changeApplication(item.tag)" class="dropdown-item"><i class="fa-desktop fa"></i> {{item.title}}</a>
+                                <a href="#" v-on:click.prevent="changeApplication(item.tag)" class="dropdown-item text-black-50"><i class="fa-desktop fa"></i> {{item.title}}</a>
                             </div>
                         </div>
                     </li>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/account/home/home.ts b/src/Server/Coderr.Server.Web/ClientApp/components/manage/account/home/home.ts
index 7c2ea4d5..63b1efff 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/account/home/home.ts
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/account/home/home.ts
@@ -69,8 +69,10 @@ export default class ManageHomeComponent extends Vue {
                 return;
             }
 
+            console.log('registwer');
             this.registerPushSubscription();
         } else {
+            console.log('delete');
             this.deleteSubscription();
         }
 
@@ -113,6 +115,7 @@ export default class ManageHomeComponent extends Vue {
         const registration = await navigator.serviceWorker.ready;
         let subscription = await registration.pushManager.getSubscription();
         if (subscription) {
+            this.storeBrowserSubscription(subscription);
             return subscription;
         }
 
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/account/home/home.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/account/home/home.vue.html
index 071e96d7..7fcbfdc1 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/account/home/home.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/account/home/home.vue.html
@@ -74,15 +74,12 @@ <h5>New user feedback</h5>
                                     </div>
                                 </div>
                             </div>
-                            <div class="form-group">
-                                <hr />
-                                <button class="btn btn-block btn-blue" @click.prevent="save">Save changes</button>
-                            </div>
+                        </div>
+                        <div class="card-footer">
+                            <button class="btn btn-blue" @click.prevent="save">Save changes</button>
                         </div>
                     </div>
-
                 </form>
-
             </div>
         </div>
     </div>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/menu.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/menu.vue.html
index 52207f4f..fac7b7d9 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/menu.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/menu.vue.html
@@ -1,5 +1,5 @@
 <template>
-    <div class="mb-3" id="manageMenu" v-if="currentApplicationId">
+    <div class="mb-3 submenu" id="manageMenu" v-if="currentApplicationId">
         <div class="navbar-light navbar bg-light mr-auto">
             <ul class="nav">
                 <router-link tag="li" class="nav-item" :to="{name: 'manageHome' }" exact>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/security/security.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/security/security.vue.html
index a12557bb..2445fe18 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/security/security.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/application/security/security.vue.html
@@ -47,7 +47,7 @@ <h3>Members</h3>
                                     {{member.EmailAddress}}
                                 </td>
                                 <td>
-                                    <a href="#" @click.prevent="removeInvitation(member.EmailAddress)"><i class="fa fa-trash"></i></a>
+                                    <a href="#" @click.prevent="removeInvitation(member.EmailAddress)"><i class="text-red fa fa-trash"></i></a>
                                 </td>
                             </tr>
                         </table>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikey-create.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikey-create.vue.html
index 1800ce88..dc447d62 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikey-create.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikey-create.vue.html
@@ -1,34 +1,29 @@
 <template>
     <div class="mt-4">
         <form @submit.prevent="saveKey">
-            <div class="row">
-                <div class="col-md-12">
-                    <h3>
-                        Create api key
-                    </h3>
-
-                </div>
-            </div>
             <div class="row">
                 <div class="col-md-4">
                     <div class="card">
                         <div class="card-header">
-                            Settings
+                            Create api key
                         </div>
                         <div class="card-body">
                             <table class="w-100">
                                 <tbody>
-                                    <tr>
-                                        <td>
-                                            Name
-                                        </td>
-                                        <td>
-                                            <input class="form-control" type="text" v-model="forApplicationName" required="required" autofocus="autofocus" />
-                                        </td>
-                                    </tr>
+                                <tr>
+                                    <td>
+                                        Name
+                                    </td>
+                                    <td>
+                                        <input class="form-control" type="text" v-model="forApplicationName" required="required" autofocus="autofocus" />
+                                    </td>
+                                </tr>
                                 </tbody>
                             </table>
                         </div>
+                        <div class="card-footer text-right">
+                            <button class="btn btn-blue">Save</button>
+                        </div>
                     </div>
                 </div>
                 <div class="col-md-8">
@@ -54,11 +49,6 @@ <h3>
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-md-12">
-                    <button class="btn btn-blue">Save</button>
-                </div>
-            </div>
         </form>
     </div>
 </template>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikey-edit.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikey-edit.vue.html
index 664d60eb..04c3b01d 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikey-edit.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikey-edit.vue.html
@@ -1,50 +1,46 @@
 <template>
     <div class="mt-4">
         <form @submit.prevent="saveKey">
-            <div class="row">
-                <div class="col-md-12">
-                    <h3>
-                        Edit api key
-                    </h3>
-
-                </div>
-            </div>
             <div class="row">
                 <div class="col-md-4">
                     <div class="card">
                         <div class="card-header">
-                            Settings
+                            Edit api key
                         </div>
                         <div class="card-body">
                             <table class="table">
                                 <tbody>
-                                    <tr>
-                                        <td>
-                                            Name
-                                        </td>
-                                        <td>
-                                            <input class="form-control" type="text" v-model="forApplicationName" required="required" autofocus="autofocus" />
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            ApiKey
-                                        </td>
-                                        <td>
-                                            <input class="form-control" type="text" v-model="key" required="required" />
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            SharedSecret
-                                        </td>
-                                        <td>
-                                            <input class="form-control" type="text" v-model="sharedSecret" required="required" />
-                                        </td>
-                                    </tr>
+                                <tr>
+                                    <td>
+                                        Name
+                                    </td>
+                                    <td>
+                                        <input class="form-control" type="text" v-model="forApplicationName" required="required" autofocus="autofocus" />
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        ApiKey
+                                    </td>
+                                    <td>
+                                        <input class="form-control" type="text" v-model="key" required="required" />
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        SharedSecret
+                                    </td>
+                                    <td>
+                                        <input class="form-control" type="text" v-model="sharedSecret" required="required" />
+                                    </td>
+                                </tr>
                                 </tbody>
                             </table>
                         </div>
+                        <div class="card-header">
+                            <button class="btn btn-blue ">Save</button>
+                            <button class="btn btn-red" v-on:click.prevent="deleteKey">Delete</button>
+                        </div>
                     </div>
                 </div>
                 <div class="col-md-8">
@@ -70,12 +66,6 @@ <h3>
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-md-12">
-                    <button class="btn btn-blue ">Save</button>
-                    <button class="btn btn-danger" v-on:click.prevent="deleteKey">Delete</button>
-                </div>
-            </div>
         </form>
     </div>
 </template>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikeys.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikeys.vue.html
index 2c17b2c4..c13fe2ab 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikeys.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/apikeys/apikeys.vue.html
@@ -6,7 +6,7 @@
                     <div class="card-header">
                         Api keys
                         <div class="float-right">
-                            <router-link class="btn-sm btn btn-outline-primary text-blue" :to="{ name: 'createApiKey' }">Create new key</router-link>
+                            <router-link class="btn-sm btn btn-primary text-white" :to="{ name: 'createApiKey' }">Create new key</router-link>
                         </div>
                     </div>
                     <div class="card-body">
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/home/home.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/home/home.vue.html
index 009b5ee2..eed225d4 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/home/home.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/home/home.vue.html
@@ -2,14 +2,14 @@
     <div class="mt-4" id="ManageView">
         <div class="row">
             <div class="col-sm-12">
-                <p class="lead">Welcome to the administration area.</p>
+                <h4>Welcome to the administration area.</h4>
                 <p>
                     Here you can configure most of the aspects in Coderr. To manage an application, select to the application that you want to manage in the top left menu.
                     <br />
                     <img src="/images/admin/change-app.png" width="184" height="" />
                 </p>
                 <p>You can also create a new application by pressing the button below.</p>
-                <router-link :to="{ name: 'createApp' }" class="btn btn-blue text-white">
+                <router-link :to="{ name: 'createApp' }" class="btn btn-blue shadow">
                     Create application
                 </router-link>
             </div>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/menu.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/menu.vue.html
index d736beb6..369a36aa 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/menu.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/menu.vue.html
@@ -1,5 +1,5 @@
 <template>
-    <div class="mb-3" id="manageMenu">
+    <div class="mb-3 submenu" id="manageMenu">
         <div class="navbar-light navbar bg-light mr-auto">
             <ul class="nav">
                 <router-link tag="li" class="nav-item" :to="{name: 'manageHome' }" exact>
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/whitelist/home.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/whitelist/home.vue.html
index ffdd19d0..0719343f 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/whitelist/home.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/manage/system/whitelist/home.vue.html
@@ -6,7 +6,7 @@
                     <div class="card-header">
                         Whitelisted domains
                         <div class="float-right">
-                            <router-link class="btn-sm btn btn-outline-primary text-blue" :to="{name: 'addWhitelistedDomain' }">Add domain</router-link>
+                            <router-link class="btn-sm btn btn-blue" :to="{name: 'addWhitelistedDomain' }">Add domain</router-link>
                         </div>
                     </div>
                     <div class="card-body">
diff --git a/src/Server/Coderr.Server.Web/ClientApp/components/shared/incidents/ContextNavigator.vue.html b/src/Server/Coderr.Server.Web/ClientApp/components/shared/incidents/ContextNavigator.vue.html
index 99ebf970..6f8cf61d 100644
--- a/src/Server/Coderr.Server.Web/ClientApp/components/shared/incidents/ContextNavigator.vue.html
+++ b/src/Server/Coderr.Server.Web/ClientApp/components/shared/incidents/ContextNavigator.vue.html
@@ -1,9 +1,12 @@
 <template>
-    <div>
-        <h3>Context collections</h3>
-        <div>
+    <div class="card">
+        <div class="card-header">
+            Context collections
+        </div>
+        
+        <div class="card-body">
             <div class="dropdown" style="display: inline">
-                <button type="button" class="btn btn-light dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <button type="button" class="btn btn-light text-black-50 dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     {{currentReportName}}
                 </button>
                 <div class="dropdown-menu">
@@ -14,7 +17,7 @@ <h6 class="dropdown-header">Select report</h6>
                 </div>
             </div>
             <div class="dropdown" style="display: inline">
-                <button type="button" class="btn btn-light dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="reportChooser">
+                <button type="button" class="btn btn-light text-black-50 dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="reportChooser">
                     {{currentCollectionName}}
                 </button>
                 <div class="dropdown-menu">
@@ -24,26 +27,20 @@ <h6 class="dropdown-header">Select context collection</h6>
                     </div>
                 </div>
             </div>
-        </div>
-        <div v-if="currentReport.Id > 0" style="overflow: auto">
-            <table class="table mt-3 mb-3">
-                <tbody>
+            <div v-if="currentReport.Id > 0" style="overflow: auto">
+                <table class="table mt-3 mb-3">
+                    <tbody>
                     <tr v-for="prop in currentCollectionProperties">
                         <th>{{prop.name}}</th>
-                        <td style="width: 90%">
+                        <td style="width: 90%" class="text-left">
                             <span v-if="prop.htmlValue" v-html="prop.htmlValue"></span>
                             <span v-else>{{prop.value}}</span>
-                            
+
                         </td>
                     </tr>
-                </tbody>
-            </table>
-        </div>
-        <div v-if="showAnalyzeFooter">
-            <hr />
-            <em>
-                <router-link class="btn btn-primary btn-block" :to="{ name: 'analyzeReport', params: { reportId: currentReport.Id, incidentId: incidentId}}">Report browser</router-link>
-            </em>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </template>
diff --git a/src/Server/Coderr.Server.Web/wwwroot/images/navico.png b/src/Server/Coderr.Server.Web/wwwroot/images/navico.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5b945536bf866fd7ce5a71c171ab1676399c4c9
GIT binary patch
literal 1257
zcmV<F1Qz>=P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1b#_GK~z{r-I#qy
z6nPlOw~ns6>Y(VK<09~n?&8h^IWjYGJIanMvD>5Uw6;3MuA+mZ`=^Tn$+*Oq*zzUv
zCA2>*a7|<h198)Yw2eBivpb5CGSO4ST;2EgzR&n<pzhAh>h22nfiJGk^L?JLGdnZC
z8O8sa+S=NccDsGI&1Sm*-LhJ(t<W7-8~%13Ist7(?MG~jJSLMVb8>RB+v#+gy<V>k
zazbv%!$19>U638JqIP6rV&W#e+qg~m85<kRb-7&6FwjB)d?CVtO>VclYjkw<du}^_
zbUNK;?18(~oM+7o`sbi=1a0c*==hw+%#Hs3{*%~iuh7uV{lf-&IuY`@Ua!yMaiQVy
zcrK#J825`9nDeH+z5O_kl?R8L;2seNvxa1c92gk*6^6I$jT)Fah>&WI5tx>imSl&+
z@rpfB2O;}fTU$TlIMc!QMJTvCRl0B>gO(#r$80v|VxxuYWCPEi(7DFO#yu%1DckGo
z>v!Py!%!LYhRb9F4`onstSK5A8a}|a?m0Gkr^=*3>A!V#bw8)4r^jYwWUSy;?@_5#
ztE;Q4H=ynmG{iPp;8yvN+f0E5KSEC4E(vOzFg$_nq9FW-rKP25@H}9<B)IlEo12?A
zaSMgQXf$@AfvnpX>a+;Aj;*rMXf#{k?cz3~P!>od7|Y7aR^!Yy^EOdn>aDD-+$b35
zKyh(#I(iIqyP%+k7!pkQKqfnH6Q#Vo{3t9-1mhe?O-)^jSq0oq62V04IhZ8Bf2jE@
zF)=aZLpu|E9~01Pl-r6T7-+ExgXCfWHTi0_dbwbl2XS$6YtZX9w-rS&&`MZNz?zzx
zJ%S+&VBRTiD~eD|OLRE_V`5^y6$~P*ij7|zmwWPuuMQl|`uafbzM1+G+I8l_!6!!R
zWy~}{kHsW3l^d|Cs%nQ|5P`z|GVFbw{r9jbr+0XKrm~?!Jwv7=E%zT478b@A6%}n3
zlhBkNaO4C;&EdSfyv2ek2(juTnc2M~maLAazF<;6=<_K{uTQ^Ih=G%&4#QoXBPggT
zPfku=#kPRZVWd43D41XB?w7vruHH1TMH+fE#Bj;$AZq$bN=m+ATR<Wb5QDcu4$dJ8
z>Q2+Wm94XgNI*QbEu-gF&L9c`zAh*zNMq|PA`+0GhiVL$JW&YLb>nWJWa~5{77)vu
zZ5S+T!9bwaP*G8lmXwtA3AYefmzljc=jllJ0}=>HOD@?9R$xSVKCKItO66MIr$63x
z_7C;Jp8sqVBA9;a8T9SE*7StO$_IyeHwKRLaM{3Pg>=wwFC5;>Il6m~wqLnnpuH4G
zJFnd`B>aB9mdAz$hS0(x<o7Oq;QdFFpTC~lg`dvO&Mz?J8P5wDcptyNMMVm|UccYt
z@eJ_Hkcdh^qOGm%nA`0R=}C-;T0nx{mEg=C<k_-_YCwVxH$wJdu;gNbh<ZQ*d-78p
zZY_q><wW!hUyy))EEbCjE1!o5>p&2C4?XLmzMuj9Xtml+2yzLUbrOX)phEEuod?06
TgADt*00000NkvXXu0mjfb2(jJ

literal 0
HcmV?d00001

diff --git a/src/Server/Coderr.Server.Web/wwwroot/scss/bootstrap-coderr.scss b/src/Server/Coderr.Server.Web/wwwroot/scss/bootstrap-coderr.scss
index 8477b74a..bc03b612 100644
--- a/src/Server/Coderr.Server.Web/wwwroot/scss/bootstrap-coderr.scss
+++ b/src/Server/Coderr.Server.Web/wwwroot/scss/bootstrap-coderr.scss
@@ -6,8 +6,19 @@
 $card-cap-bg: white;
 $card-border-color: white;
 
+.text-gray4 {
+    color: $gray-400;
+}
+
+.text-gray6 {
+    color: $gray-600;
+}
+.text-gray7 {
+    color: $gray-700;
+}
+
 .card {
-    box-shadow: 0px 3px 6px #00000029;
+    box-shadow: 0px 3px 6px $gray-400;
     border-radius: 5px;
     background-color: white;
     color: $gray-500;
@@ -24,18 +35,37 @@ $card-border-color: white;
 
     > .card-footer {
         a {
-            padding-left: 0.8rem;
+            padding-left: 10px;
         }
     }
 }
 
+.btn {
+    text-transform: uppercase;
+}
+
+.btn.btn-blue {
+    color: white;
+    font-size: 0.875rem;
+}
+
+.btn.btn-light {
+    color: $blue;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+/*$input-btn-padding-y: .675rem;
+$input-btn-padding-x: 3.05rem;*/
 
 $input-border-radius: 0;
 $input-color: $gray-600;
 $input-bg: $gray-100;
-$input-padding-y: 5px;
-$input-padding-x: 5px;
-$input-placeholder-color: $gray-300;
+$input-padding-y: .375rem;
+$input-padding-x: .75rem;
+$input-placeholder-color: $gray-500;
+
+$text-muted: rgba(0,0,0,50);
 
 @import "functions";
 @import "variables";
diff --git a/src/Server/Coderr.Server.Web/wwwroot/scss/coderr-variables.scss b/src/Server/Coderr.Server.Web/wwwroot/scss/coderr-variables.scss
index 837e6dc6..107f19ca 100644
--- a/src/Server/Coderr.Server.Web/wwwroot/scss/coderr-variables.scss
+++ b/src/Server/Coderr.Server.Web/wwwroot/scss/coderr-variables.scss
@@ -8,43 +8,40 @@ $gray-700: #393938;
 $gray-800: #2e2d2c;
 $gray-900: #141414;
 
-$blue:    #59c1d5;
-$blue-60:  #abdbe7;
-$blue-30:  #d8eef4;
+$blue: #59c1d5;
+$blue-60: #abdbe7;
+$blue-30: #d8eef4;
 
-$red:     #f18c65;
-$red-60:     #fac981;
-$red-30:     #feede5;
+$red: #f18c65;
+$red-60: #fac981;
+$red-30: #feede5;
 
-$theme-colors: (
-  "red": $red,
-  "blue": $blue
-);
+$theme-colors: ( "red": $red, "blue": $blue, "white": #fff, "gray": $gray-500 );
 
 
 $gray: $gray-700;
 
-$primary:       $gray;
-$secondary:     $red;
-$light:         $gray-200;
-$middle:        $gray-400;
-$dark:          $gray-700;
-
-$font-family-sans-serif:      "SofiaProRegular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-size-base:			  1.0rem;
-
-
-$btn-border-radius:           0;
-$btn-border-radius-lg:        0;
-$btn-border-radius-sm:		  0;
-$btn-padding-y:               .400rem;
-$btn-padding-x:				  .80rem;
-$btn-padding-y-lg:            0.75rem;
-$btn-padding-x-lg:            1.5rem;
-
-$h1-font-size:                $font-size-base * 3;
-$h2-font-size:                $font-size-base * 2.5;
-$h3-font-size:                $font-size-base * 2;
-$h4-font-size:                $font-size-base * 1.75;
-$h5-font-size:                $font-size-base * 1.5;
-$h6-font-size:                $font-size-base * 1.25;
+$primary: $blue;
+$secondary: $gray-500;
+$light: $gray-100;
+$middle: $gray-400;
+$dark: $gray-700;
+
+$font-family-sans-serif: "SofiaProRegular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-size-base: 0.9rem;
+
+
+$btn-border-radius: 0;
+$btn-border-radius-lg: 0;
+$btn-border-radius-sm: 0;
+$btn-padding-y: .500rem;
+$btn-padding-x: .90rem;
+$btn-padding-y-lg: 0.75rem;
+$btn-padding-x-lg: 1.5rem;
+
+$h1-font-size: $font-size-base * 3;
+$h2-font-size: $font-size-base * 2.5;
+$h3-font-size: $font-size-base * 2;
+$h4-font-size: $font-size-base * 1.75;
+$h5-font-size: $font-size-base * 1.5;
+$h6-font-size: $font-size-base * 1.25;
diff --git a/src/Server/Coderr.Server.Web/wwwroot/scss/radio.scss b/src/Server/Coderr.Server.Web/wwwroot/scss/radio.scss
new file mode 100644
index 00000000..4b512f2b
--- /dev/null
+++ b/src/Server/Coderr.Server.Web/wwwroot/scss/radio.scss
@@ -0,0 +1,48 @@
+@import "coderr-variables.scss";
+
+.card {
+    input[type="radio"] {
+        cursor: pointer;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        outline: 0;
+        background: $gray-300;
+        height: 16px;
+        width: 16px;
+        border: 1px solid white;
+    }
+
+    input[type="radio"]:checked {
+        background: $blue;
+        color: $blue !important;
+    }
+
+    input[type="radio"]:hover {
+        filter: brightness(90%);
+    }
+
+    input[type="radio"]:disabled {
+        background: $gray-700;
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    input[type="radio"]:after {
+        content: '';
+        position: relative;
+        left: 40%;
+        top: 20%;
+        width: 15%;
+        height: 40%;
+        display: none;
+    }
+
+    input[type="radio"]:checked:after {
+        display: block;
+    }
+
+    input[type="radio"]:disabled:after {
+        border-color: $gray-100;
+    }
+}
diff --git a/src/Server/Coderr.Server.Web/wwwroot/scss/site.scss b/src/Server/Coderr.Server.Web/wwwroot/scss/site.scss
index 58029682..7798dcbd 100644
--- a/src/Server/Coderr.Server.Web/wwwroot/scss/site.scss
+++ b/src/Server/Coderr.Server.Web/wwwroot/scss/site.scss
@@ -1,6 +1,7 @@
 @import "coderr-variables.scss";
 @import "mixins/_breakpoints.scss";
 @import "checkbox.scss";
+@import "radio.scss";
 
 .bg-dark {
     h1, h2, h3, h4, a, span {
@@ -12,10 +13,19 @@
     color: $blue;
 }
 
+.btn.shadow {
+    box-shadow: 0px 3px 6px rgba(0,0,0,30);
+}
+
+.main-view {
+    padding: 10px 20px;
+}
+
 .submenu {
     > div {
         background-color: white !important;
 
+
         ul li a {
             color: $gray-500 !important;
         }