diff --git a/src/html/popup.html b/src/html/popup.html
index 38306f384..bf5fcbbef 100644
--- a/src/html/popup.html
+++ b/src/html/popup.html
@@ -43,6 +43,7 @@
+
diff --git a/src/scripts/popup.js b/src/scripts/popup.js
index f720cc822..ed2713016 100644
--- a/src/scripts/popup.js
+++ b/src/scripts/popup.js
@@ -550,6 +550,17 @@ document.addEventListener('DOMContentLoaded', function () {
browser.runtime.sendMessage(request);
});
+ document
+ .querySelector('.header .log-out')
+ .addEventListener('click', function () {
+ const request = {
+ type: 'logout',
+ respond: false
+ };
+
+ browser.runtime.sendMessage(request);
+ });
+
document
.querySelector('#workspace')
.addEventListener('submit', function (event) {
diff --git a/src/styles/popup.css b/src/styles/popup.css
index 0e6c54a13..894b6c5a5 100644
--- a/src/styles/popup.css
+++ b/src/styles/popup.css
@@ -207,6 +207,15 @@ p.form-row.first {
background-size: cover;
width: 24px;
height: 24px;
+ margin-right: .6rem;
+}
+
+.header .log-out {
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE3OTIiIHZpZXdCb3g9IjAgMCAxNzkyIDE3OTIiIHdpZHRoPSIxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im03MDQgMTQ0MHEwIDQgMSAyMHQuNSAyNi41LTMgMjMuNS0xMCAxOS41LTIwLjUgNi41aC0zMjBxLTExOSAwLTIwMy41LTg0LjV0LTg0LjUtMjAzLjV2LTcwNHEwLTExOSA4NC41LTIwMy41dDIwMy41LTg0LjVoMzIwcTEzIDAgMjIuNSA5LjV0OS41IDIyLjVxMCA0IDEgMjB0LjUgMjYuNS0zIDIzLjUtMTAgMTkuNS0yMC41IDYuNWgtMzIwcS02NiAwLTExMyA0N3QtNDcgMTEzdjcwNHEwIDY2IDQ3IDExM3QxMTMgNDdoMzEybDExLjUgMSAxMS41IDMgOCA1LjUgNyA5em05MjgtNTQ0cTAgMjYtMTkgNDVsLTU0NCA1NDRxLTE5IDE5LTQ1IDE5dC00NS0xOS0xOS00NXYtMjg4aC00NDhxLTI2IDAtNDUtMTl0LTE5LTQ1di0zODRxMC0yNiAxOS00NXQ0NS0xOWg0NDh2LTI4OHEwLTI2IDE5LTQ1dDQ1LTE5IDQ1IDE5bDU0NCA1NDRxMTkgMTkgMTkgNDV6IiBmaWxsPSIjY2VjZWNlIi8+PC9zdmc+);
+ background-repeat: no-repeat;
+ background-size: cover;
+ width: 24px;
+ height: 24px;
}
.views > div,