Add quit buttons

Author: Hacksore

apps/desktop/src/styles.css

@@ -89,7 +89,7 @@
 }
 
 ul {
-  list-style: circle;
+  list-style: inside;
 }
 
 .nice-scroll::-webkit-scrollbar {

apps/desktop/src/views/error.tsx

@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { useSetWindowSize } from "../hooks/use-set-size";
 import { useAppStore } from "../store";
+import { exit } from "@tauri-apps/api/process";
 
 export const ErrorView = () => {
   useSetWindowSize({ width: 400, height: 600 });
@@ -26,10 +27,18 @@ export const ErrorView = () => {
           <p className="py-8">Please try restarting discord then try again</p>
         </div>
       )}
-      <div className="pt-8 text-2xl flex items-center justify-center">
+      <div className="pt-8 text-2xl flex flex-col gap-4 items-center justify-center">
         <Link to="/">
-          <Button>Login to Discord</Button>
+          <Button>Connect to Discord</Button>
         </Link>
+        <Button
+          variant="ghost"
+          onClick={async () => {
+            await exit();
+          }}
+        >
+          Quit Overlayed
+        </Button>
       </div>
     </div>
   );

apps/desktop/src/views/main.tsx

@@ -1,6 +1,7 @@
 import { useAppStore } from "../store";
 import { useEffect } from "react";
 import { Button } from "@/components/ui/button";
+import { exit } from "@tauri-apps/api/process";
 
 export const MainView = () => {
   const { resetErrors } = useAppStore();
@@ -13,24 +14,25 @@ export const MainView = () => {
     <div className="h-screen p-2 bg-zinc-900">
       <div className="pt-1 mb-3 font-bold text-2xl text-center">
         <p className="mb-2">Authorize Discord</p>
-        <ul className="text-sm text-center">
-          <li className="text-zinc-400">
-            <p>Overlayed is not affiliated with Discord. Discord is a trademark of Discord Inc.</p>
-          </li>
-        </ul>
+        <p className="text-sm text-center text-zinc-400">
+          Overlayed is not affiliated with Discord. Discord is a trademark of Discord Inc.
+        </p>
         <ul className="flex flex-col pl-10 gap-4 p-4 mt-6 text-xl text-left">
           <li>
             <p className="leading-8">Discord should have opened a popup</p>
           </li>
           <li>
-            <p className="leading-8">Click &quot;Authorize&quot; within discord</p>
+            <p className="leading-8">Click &quot;Authorize&quot; within Discord</p>
           </li>
           <li>
             <p className="leading-8">Join a voice channel</p>
           </li>
+          <li>
+            <p className="leading-8">Enjoy 🥳</p>
+          </li>
         </ul>
 
-        <div className="pt-8 text-2xl flex items-center justify-center">
+        <div className="pt-8 text-2xl flex flex-col gap-4 items-center justify-center">
           <Button
             onClick={() => {
               // TODO: this is a hack, it should be handled better
@@ -39,6 +41,15 @@ export const MainView = () => {
           >
             Try Again
           </Button>
+
+          <Button
+            variant="ghost"
+            onClick={async () => {
+              await exit();
+            }}
+          >
+            Quit Overlayed
+          </Button>
         </div>
       </div>
     </div>