public/global.css

@@ -1,63 +1,15 @@
-html, body {
+html,
-	position: relative;
+body {
-	width: 100%;
+  position: relative;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 body {
-	color: #333;
+  color: #333;
-	margin: 0;
+  margin: 0;
-	padding: 8px;
+  padding: 8px;
-	box-sizing: border-box;
+  box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-}
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
-}
-
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	-webkit-padding: 0.4em 0;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-
-input:disabled {
-	color: #ccc;
-}
-
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:disabled {
-	color: #999;
-}
-
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
 }

src/App.svelte

@@ -124,7 +124,7 @@
     <div class="flex flex-row items-center animate-fadeIn opacity-0">
       {#if $currentPage == Page.Settings}
         <Button
-          class="dark:active:!bg-gray-900 !ring-0 w-10 h-10 mr-1 rounded-lg animate-sideIn opacity-0 active:scale-95 transition-transform duration-75"
+          class="!ring-0 w-10 h-10 mr-1 rounded-lg animate-sideIn opacity-0 active:scale-95 transition-transform duration-75"
           color="light"
           on:click={() => {
             currentPage.set(Page.Launch);
@@ -174,7 +174,7 @@
           </span>
         </DropdownHeader>
         <DropdownItem
-          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+          class="flex flex-row gap-2 border-0 transition-colors"
           on:click={() => {
             if (!$launching) currentPage.set(Page.Settings);
           }}
@@ -185,7 +185,7 @@
         <DropdownDivider />
         {#if loggedIn}
           <DropdownItem
-            class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+            class="flex flex-row gap-2 border-0 transition-colors"
             on:click={() => {
               if (!$launching) logout();
             }}
@@ -197,7 +197,7 @@
           </DropdownItem>
         {:else}
           <DropdownItem
-            class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+            class="flex flex-row gap-2 border-0 transition-colors"
             on:click={() => {
               if (!$launching) currentPage.set(Page.Login);
             }}

src/pages/Launch.svelte

@@ -16,7 +16,9 @@
   const launch = () => {
     launching.set(true);
     const patching = $patch;
-    window.dispatchEvent(new CustomEvent("launch", { detail: { patch: patching } }));;
+    window.dispatchEvent(
+      new CustomEvent("launch", { detail: { patch: patching } })
+    );
   };
 </script>
 
@@ -29,7 +31,7 @@
     <Button
       color="light"
       size="xl"
-      class="dark:active:!bg-gray-900 {$launching
+      class="{$launching
         ? ''
         : 'active:scale-95 '}transition-transform duration-75"
       disabled={$launching}

src/pages/Login.svelte

@@ -59,7 +59,7 @@
       {
         loading: "Logging in...",
         success: "Successfully logged in!",
-        error: "Failed to login.",
+        error: "Invalid Username or Password!",
       },
       {
         position: "bottom-center",
@@ -198,7 +198,7 @@
     >
     <div class="flex flex-col justify-center items-center gap-2 mt-1">
       <Button
-        class="dark:active:!bg-gray-900  active:scale-95 transition-transform duration-75"
+        class="active:scale-95 transition-transform duration-75"
         color="light"
         disabled={loading}
         on:click={processLogin}

src/pages/Settings.svelte

@@ -63,21 +63,13 @@
         value={folderPath}
         readonly
       />
-      <Button
+      <Button color="light" on:click={detectFolderPath}>
-        color="light"
-        class="dark:active:!bg-gray-900"
-        on:click={detectFolderPath}
-      >
         <FileSearchSolid
           size="sm"
           class="dark:text-gray-300 text-gray-500 outline-none border-none select-none pointer-events-none"
         />
       </Button>
-      <Button
+      <Button color="light" class="active:!rounded-lg" on:click={setFolderPath}>
-        color="light"
-        class="dark:active:!bg-gray-900 active:!rounded-lg"
-        on:click={setFolderPath}
-      >
         <FolderSolid
           size="sm"
           class="dark:text-gray-300 text-gray-500 outline-none border-none select-none pointer-events-none"