frontend: cleanup support page

src/components/sidebar/Sidebar.svelte

@@ -67,7 +67,7 @@
         use:link
       >
         <Icon icon="material-symbols:settings" width={36} height={36} />
-        <Tooltip rounded={false} arrow={false} placement="right" style="dark"
+        <Tooltip placement="right" style="dark"
           >Settings</Tooltip
         >
       </a>
@@ -80,8 +80,8 @@
         use:link
       >
         <Icon icon="material-symbols:contact-support" width={36} height={36} />
-        <Tooltip rounded={false} arrow={false} placement="right" style="dark"
-          >FAQ</Tooltip
+        <Tooltip placement="right" style="dark"
+          >Support&nbsp;&&nbsp;FAQ</Tooltip
         >
       </a>
     </li>

src/routes/FAQ.svelte

@@ -1,48 +1,52 @@
 <script>
-  import { Alert, Button } from "flowbite-svelte";
+  import { Button } from "flowbite-svelte";
+  import Icon from '@iconify/svelte';
 </script>
 
 <div class="ml-20">
-  <div class="flex flex-col h-5/6 p-8">
-    <Alert color="dark" rounded={false} accent>
-      <span class="text-lg font-medium text-black-900 dark:text-blue-800"
-        >Help & Support</span
+  <!-- TODO - the static height here is kinda a hack, it's because the
+    header and the rest of the layout aren't within a shared container -->
+  <div class="flex flex-col h-[544px] bg-slate-900 p-4 gap-3">
+    <h1 class="font-semibold text-xl text-orange-500">Support & FAQ</h1>
+    <p class="text-sm">
+      If you are reporting an issue or asking for help, download the following
+      support package and attach it in your Discord thread or GitHub issue.
+    </p>
+    <div class="flex flex-row mt-1">
+      <Button
+        btnClass="border-solid rounded bg-orange-400 hover:bg-orange-600 text-sm text-slate-900 font-semibold px-5 py-2"
+        href="https://github.com/open-goal/launcher/issues/new"
+        target="_blank"
+        rel="noreferrer noopener">Download Support Package</Button
       >
-      <div slot="extra">
-        <div class="mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800">
-          Please use the discord search feature to see if your question has
-          already been answered
     </div>
-        <div class="flex flex-col gap-2">
+    <p class="mt-3 text-sm">
+      You can either ask a question on our Discord, or create a GitHub issue
+      with as much detail as possible.
+    </p>
+    <p class="text-sm">
+      In either location, please do a quick search to see if the question has
+      already been answered before
+    </p>
+    <div class="flex flex-row gap-2">
       <Button
-            class="!rounded-none"
-            href="https://github.com/open-goal/launcher/issues"
-            target="_blank"
-            rel="noreferrer noopener"
-            size="md"
-            outline
-            color="blue">Report Launcher Issue</Button
-          >
-          <Button
-            class="!rounded-none"
-            href="https://github.com/open-goal/jak-project/issues"
-            target="_blank"
-            rel="noreferrer noopener"
-            size="md"
-            outline
-            color="blue">Report Game Issue</Button
-          >
-          <Button
-            class="!rounded-none"
+        btnClass="flex items-center border-solid rounded bg-white hover:bg-orange-400 text-sm text-slate-900 font-semibold px-5 py-2"
         href="https://discord.gg/VZbXMHXzWv"
         target="_blank"
-            rel="noreferrer noopener"
-            size="md"
-            outline
-            color="blue">Discord</Button
+        rel="noreferrer noopener"><Icon class="inline-block" icon="ic:baseline-discord" width={20} />&nbsp;Discord</Button
+      >
+      <Button
+        btnClass="flex items-center border-solid rounded bg-white hover:bg-orange-400 text-sm text-slate-900 font-semibold px-5 py-2"
+        href="https://github.com/open-goal/launcher/issues/new"
+        target="_blank"
+        rel="noreferrer noopener"><Icon class="inline-block" icon="mdi:github"  width={20}/>&nbsp;Report Launcher Issue</Button
+      >
+      <Button
+        btnClass="flex items-center border-solid rounded bg-white hover:bg-orange-400 text-sm text-slate-900 font-semibold px-5 py-2"
+        href="https://github.com/open-goal/jak-project/issues/new/choose"
+        target="_blank"
+        rel="noreferrer noopener"><Icon class="inline-block" icon="mdi:github"  width={20}/>&nbsp;Report Game Issue</Button
       >
     </div>
   </div>
-    </Alert>
-  </div>
 </div>

src/routes/settings/General.svelte

@@ -1,4 +1,4 @@
 <script>
 </script>
 
-<p class="text-sm text-slate-100 dark:text-gray-00 mt-2">Nothing yet</p>
+<p class="text-sm text-slate-100 dark:text-gray-00 mt-2">Nothing here yet</p>