From bf6b96a97da1d6d0771bbe5320ddaed1fa45e545 Mon Sep 17 00:00:00 2001
From: Martin Kleinschrodt <martin@maklesoft.com>
Date: Mon, 25 Jul 2022 07:24:38 +0200
Subject: [PATCH] Update support page with proper content and styling

---
 assets/support.md                  | 83 ++++++++++++++++++------------
 packages/app/src/styles/content.ts | 12 +++--
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/assets/support.md b/assets/support.md
index 2479edf1..826dbbdb 100644
--- a/assets/support.md
+++ b/assets/support.md
@@ -1,39 +1,54 @@
-<a href="#">
-    <button class="fill-horizontally">
-        <div class="horizontal spacing layout">
-            <i class="fa-user block"></i>
-            <div class="stretch">FAQs</div>
+<ul class="plain box">
+    <li class="list-item">
+        <a href="https://padloc.app/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
+            <i class="fa-globe block"></i>
+            <div class="stretch">Website</div>
             <i class="subtle block fa-external-link"></i>
-        </div>
-    </button>
-</a>
+        </a>
+    </li>
+    <li class="list-item">
+        <a href="https://padloc.app/blog/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
+            <i class="fa-megaphone block"></i>
+            <div class="stretch">Blog</div>
+            <i class="subtle block fa-external-link"></i>
+        </a>
+    </li>
+    <li class="list-item">
+        <a href="https://padloc.app/tos/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
+            <i class="fa-file-lines block"></i>
+            <div class="stretch">Terms of Service</div>
+            <i class="subtle block fa-external-link"></i>
+        </a>
+    </li>
+    <li class="list-item">
+        <a href="https://docs.padloc.app/privacy/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
+            <i class="fa-blinds block"></i>
+            <div class="stretch">Privacy Policy</div>
+            <i class="subtle block fa-external-link"></i>
+        </a>
+    </li>
+</ul>
 
-<a href="#">
-    <button class="fill-horizontally">
-        <div class="horizontal spacing layout">
-            <i class="fa-lock lock block"></i>
-            <div class="stretch">Support Ticket</div>
+<ul class="plain box">
+    <li class="list-item">
+        <a href="mailto:support@padloc.app" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
+            <i class="fa-envelope block"></i>
+            <div class="stretch">Contact Support</div>
             <i class="subtle block fa-external-link"></i>
-        </div>
-    </button>
-</a>
-
-<a href="#">
-    <button class="fill-horizontally">
-        <div class="horizontal spacing layout">
-            <i class="fa-comments-alt block"></i>
-            <div class="stretch">Live Chat</div>
+        </a>
+    </li>
+    <li class="list-item">
+        <a href="https://docs.padloc.app/manual/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
+            <i class="fa-book block"></i>
+            <div class="stretch">User Manual</div>
             <i class="subtle block fa-external-link"></i>
-        </div>
-    </button>
-</a>
-
-<a href="#">
-    <button class="fill-horizontally">
-        <div class="horizontal spacing layout">
-            <i class="fa-tools block"></i>
-            <div class="stretch">Support Center</div>
+        </a>
+    </li>
+    <li class="list-item">
+        <a href="https://docs.padloc.app/questions/" target="_blank" class="plain double-padded horizontal spacing center-aligning layout">
+            <i class="fa-comments-question block"></i>
+            <div class="stretch">Frequently Asked Questions</div>
             <i class="subtle block fa-external-link"></i>
-        </div>
-    </button>
-</a>
+        </a>
+    </li>
+</ul>
diff --git a/packages/app/src/styles/content.ts b/packages/app/src/styles/content.ts
index 4d02627e..47ae7994 100644
--- a/packages/app/src/styles/content.ts
+++ b/packages/app/src/styles/content.ts
@@ -65,7 +65,8 @@ export const content = css`
         list-style: square;
     }
 
-    ul.plain {
+    ul.plain,
+    ul.unstyled {
         list-style: none;
         padding: 0;
     }
@@ -96,10 +97,8 @@ export const content = css`
         color: var(--button-primary-color, var(--button-color));
     }
 
-    ${click("button")};
-    ${hover("button")};
-
-    a.plain {
+    a.plain,
+    a.unstyled {
         text-decoration: none !important;
     }
 
@@ -128,4 +127,7 @@ export const content = css`
         margin-bottom: 0.5em;
         overflow-x: auto;
     }
+
+    ${click("button")};
+    ${hover("button")};
 `;