From 739e308c0ea1fbae89ec7d3a5b22a86d8058aa05 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 6 Sep 2019 00:14:05 +0200
Subject: [PATCH] Make offline banner a link to the troubleshooting page

---
 src/index.html   | 2 +-
 src/logs.html    | 2 +-
 src/restore.html | 2 +-
 src/setup.html   | 2 +-
 src/theme.scss   | 5 +++++
 5 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/src/index.html b/src/index.html
index 9684059a6..cc82f1fea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -90,7 +90,7 @@
         </div>
     </script>
 
-    <div class="offline-banner animateMe" ng-show="client.offline" ng-cloak><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</div>
+    <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://cloudron.io/documentation/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>
 
     <!-- Modal setup subscription -->
     <div class="modal fade" id="setupSubscriptionModal" tabindex="-1" role="dialog">
diff --git a/src/logs.html b/src/logs.html
index e91ce9326..4c18c020a 100644
--- a/src/logs.html
+++ b/src/logs.html
@@ -49,7 +49,7 @@
 
 <body class="logs">
 
-    <div class="offline-banner animateMe" ng-show="client.offline" ng-cloak><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</div>
+        <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://cloudron.io/documentation/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>
 
     <div class="animateMe ng-hide layout-root" ng-show="initialized">
 
diff --git a/src/restore.html b/src/restore.html
index a57aba263..3fe5bc270 100644
--- a/src/restore.html
+++ b/src/restore.html
@@ -37,7 +37,7 @@
 
 <body class="setup" ng-app="Application" ng-controller="RestoreController">
 
-    <div class="offline-banner animateMe" ng-show="client.offline" ng-cloak><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</div>
+        <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://cloudron.io/documentation/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>
 
     <div class="main-container ng-cloak text-center" ng-show="busy">
         <div class="row">
diff --git a/src/setup.html b/src/setup.html
index 4f759d5b6..e2890bf1e 100644
--- a/src/setup.html
+++ b/src/setup.html
@@ -37,7 +37,7 @@
 
 <body class="setup" ng-app="Application" ng-controller="SetupController">
 
-    <div class="offline-banner animateMe" ng-show="client.offline" ng-cloak><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</div>
+        <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://cloudron.io/documentation/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>
 
     <div class="main-container ng-cloak text-center" ng-show="busy">
         <div class="row">
diff --git a/src/theme.scss b/src/theme.scss
index 8b1163937..5a08f2fcf 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -148,6 +148,11 @@ html, body {
     padding: 2px;
     text-align: center;
     color: white;
+
+    &:hover, &:focus {
+        color: white;
+        text-decoration: none;
+    }
 }
 
 .layout-root {
