From 92c2e8ffd607195b703e417abfd6b701b01d7683 Mon Sep 17 00:00:00 2001
From: Thomas Rupprecht <rupprecht.thomas@gmail.com>
Date: Thu, 27 Dec 2018 14:43:34 +0100
Subject: [PATCH] add icons and improve styling

---
 README.md                                 |  4 ++++
 icons/font-awesome/clock-regular.svg      |  1 +
 icons/font-awesome/cloud-solid.svg        |  1 +
 icons/font-awesome/gitlab-brands.svg      |  1 +
 icons/font-awesome/home-solid.svg         |  1 +
 icons/font-awesome/wikipedia-w-brands.svg |  1 +
 popup/index.css                           | 28 +++++++++++++++++++++++
 popup/index.html                          | 10 ++++----
 popup/index.js                            |  5 ++--
 9 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 icons/font-awesome/clock-regular.svg
 create mode 100644 icons/font-awesome/cloud-solid.svg
 create mode 100644 icons/font-awesome/gitlab-brands.svg
 create mode 100644 icons/font-awesome/home-solid.svg
 create mode 100644 icons/font-awesome/wikipedia-w-brands.svg

diff --git a/README.md b/README.md
index f64d2c9..821a6cf 100644
--- a/README.md
+++ b/README.md
@@ -18,5 +18,9 @@ $ git clone https://gitlab.usrspace.at/XimeX/usrspace-browser-addon.git
 - Open `manifest.json`
 - Use it
 
+## Credits
+Used icons from FontAwesome
+https://fontawesome.com/license
+
 ## License
 MIT
\ No newline at end of file
diff --git a/icons/font-awesome/clock-regular.svg b/icons/font-awesome/clock-regular.svg
new file mode 100644
index 0000000..6e75eee
--- /dev/null
+++ b/icons/font-awesome/clock-regular.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="far" data-icon="clock" class="svg-inline--fa fa-clock fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>
\ No newline at end of file
diff --git a/icons/font-awesome/cloud-solid.svg b/icons/font-awesome/cloud-solid.svg
new file mode 100644
index 0000000..4397aac
--- /dev/null
+++ b/icons/font-awesome/cloud-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="fas" data-icon="cloud" class="svg-inline--fa fa-cloud fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg>
\ No newline at end of file
diff --git a/icons/font-awesome/gitlab-brands.svg b/icons/font-awesome/gitlab-brands.svg
new file mode 100644
index 0000000..ad4c30c
--- /dev/null
+++ b/icons/font-awesome/gitlab-brands.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="fab" data-icon="gitlab" class="svg-inline--fa fa-gitlab fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"></path></svg>
\ No newline at end of file
diff --git a/icons/font-awesome/home-solid.svg b/icons/font-awesome/home-solid.svg
new file mode 100644
index 0000000..03ed5cf
--- /dev/null
+++ b/icons/font-awesome/home-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"></path></svg>
\ No newline at end of file
diff --git a/icons/font-awesome/wikipedia-w-brands.svg b/icons/font-awesome/wikipedia-w-brands.svg
new file mode 100644
index 0000000..e177eff
--- /dev/null
+++ b/icons/font-awesome/wikipedia-w-brands.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="fab" data-icon="wikipedia-w" class="svg-inline--fa fa-wikipedia-w fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M640 51.2l-.3 12.2c-28.1.8-45 15.8-55.8 40.3-25 57.8-103.3 240-155.3 358.6H415l-81.9-193.1c-32.5 63.6-68.3 130-99.2 193.1-.3.3-15 0-15-.3C172 352.3 122.8 243.4 75.8 133.4 64.4 106.7 26.4 63.4.2 63.7c0-3.1-.3-10-.3-14.2h161.9v13.9c-19.2 1.1-52.8 13.3-43.3 34.2 21.9 49.7 103.6 240.3 125.6 288.6 15-29.7 57.8-109.2 75.3-142.8-13.9-28.3-58.6-133.9-72.8-160-9.7-17.8-36.1-19.4-55.8-19.7V49.8l142.5.3v13.1c-19.4.6-38.1 7.8-29.4 26.1 18.9 40 30.6 68.1 48.1 104.7 5.6-10.8 34.7-69.4 48.1-100.8 8.9-20.6-3.9-28.6-38.6-29.4.3-3.6 0-10.3.3-13.6 44.4-.3 111.1-.3 123.1-.6v13.6c-22.5.8-45.8 12.8-58.1 31.7l-59.2 122.8c6.4 16.1 63.3 142.8 69.2 156.7L559.2 91.8c-8.6-23.1-36.4-28.1-47.2-28.3V49.6l127.8 1.1.2.5z"></path></svg>
\ No newline at end of file
diff --git a/popup/index.css b/popup/index.css
index c0f8eb0..2248776 100644
--- a/popup/index.css
+++ b/popup/index.css
@@ -1,4 +1,32 @@
+h2 {
+    margin-left: 8px;
+    margin-right: 8px;
+}
+
+.panel-list-item > .icon {
+    text-align: center;
+    width: 23px;
+    margin-right: 4px;
+}
+.panel-list-item > .icon > img {
+    vertical-align: text-bottom;
+}
+
+#calendar {
+    margin: 0 8px;
+}
+#calendar > img {
+    vertical-align: text-bottom;
+    margin-right: 4px;
+}
+
 #space-api {
+    margin: 0;
+    padding: 0 8px;
+    height: 128px;
+    overflow-y: scroll;
+}
+#space-api code {
     font-family: monospace;
     font-size: 10px;
 }
\ No newline at end of file
diff --git a/popup/index.html b/popup/index.html
index 7251328..2becedb 100644
--- a/popup/index.html
+++ b/popup/index.html
@@ -13,22 +13,22 @@
   <h2>Links</h2>
   <div class="panel-section panel-section-list">
     <div class="panel-list-item link" data-url="https://usrspace.at/">
-      <div class="icon"><img src="../icons/logo.svg" width="19" height="19" alt="/usr/space" /></div>
+      <div class="icon"><img src="../icons/font-awesome/home-solid.svg" width="19" height="19" alt="Home" /></div>
       <div class="text">Homepage</div>
       <div class="text-shortcut"></div>
     </div>
     <div class="panel-list-item link" data-url="https://www.usrspace.at/w/">
-      <div class="icon"></div>
+      <div class="icon"><img src="../icons/font-awesome/wikipedia-w-brands.svg" width="19" height="19" alt="Wiki" /></div>
       <div class="text">Wiki</div>
       <div class="text-shortcut"></div>
     </div>
     <div class="panel-list-item link" data-url="https://gitlab.usrspace.at/">
-      <div class="icon"></div>
+      <div class="icon"><img src="../icons/font-awesome/gitlab-brands.svg" width="19" height="19" alt="Gitlab" /></div>
       <div class="text">Gitlab</div>
       <div class="text-shortcut"></div>
     </div>
     <div class="panel-list-item link" data-url="https://cloud.usrspace.at/">
-      <div class="icon"></div>
+      <div class="icon"><img src="../icons/font-awesome/cloud-solid.svg" width="19" height="19" alt="Cloud" /></div>
       <div class="text">NextCloud</div>
       <div class="text-shortcut"></div>
     </div>
@@ -36,7 +36,7 @@
   <h2>Nächster Termine</h2>
   <div id="calendar">loading...</div>
   <h2>Infos</h2>
-  <pre><code id="space-api">loading...</code></pre>
+  <pre id="space-api"><code>loading...</code></pre>
 
   <script src="index.js"></script>
 </body>
diff --git a/popup/index.js b/popup/index.js
index 290429d..47492b2 100644
--- a/popup/index.js
+++ b/popup/index.js
@@ -23,7 +23,8 @@ const updateNextEvent = (nextEvent) => {
   const strongElement = document.createElement('strong');
   strongElement.textContent = nextEvent.name;
   const dateNode = document.createTextNode(' ' + new Date(nextEvent.begin).toLocaleString());
-  calendarElement.innerText = '';
+  // calendarElement.innerText = '';
+  calendarElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
   calendarElement.append(strongElement);
   calendarElement.append(dateNode);
   if (nextEvent.location) {
@@ -33,7 +34,7 @@ const updateNextEvent = (nextEvent) => {
 };
 
 const updateSpaceApiJson = (spaceApi) => {
-  const spaceApiElement = document.getElementById('space-api');
+  const spaceApiElement = document.querySelector('#space-api code');
   const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, '&nbsp;').replace(/\n/g, '<br/>');
   spaceApiElement.innerHTML = json;
   // const jsonNode = document.createTextNode(json);