refactor: ➕ Switch to @mollersuite/mocha

mollersuite · May 13, 2023 · 66215e5 · 66215e5
1 parent 8542514
commit 66215e5
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -22,5 +22,8 @@
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@mollersuite/mocha": "^0.2.1"
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -6,6 +6,7 @@
 		<meta name="viewport" content="width=device-width,viewport-fit=cover,initial-scale=1" />
 		<meta name="color-scheme" content="light dark" />
 		<meta name="theme-color" content="#6acb5d" />
+		<meta name="generator" content="Oxymoron" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,10 +1,11 @@
 <script>
 	import { navigating } from "$app/stores"
-	import "$lib/mocha.css"
+	// import "$lib/mocha.css"
+	import "@mollersuite/mocha/theme.css"
 </script>
 
 {#if $navigating}
-	<div aria-hidden role="none" class="loading"  />
+	<div aria-hidden role="none" class="loading" />
 {/if}
 <slot />
 

diff --git a/src/routes/welcome/+page.svelte b/src/routes/welcome/+page.svelte
@@ -1,5 +1,8 @@
 <script>
+	// @ts-nocheck
+
 	import { enhance } from "$app/forms"
+	import { Button } from "@mollersuite/mocha"
 	import Circles from "./Circles.svelte"
 	import startup from "./startup.ogg?url"
 </script>
@@ -36,7 +39,8 @@
 			assholes, though, so you should be fine.
 		</li>
 	</ul>
-	<button>Continue</button>
+
+	<Button type="submit">Continue</Button>
 	<a href="/lag">click me</a>
 </form>
 
@@ -59,29 +63,6 @@
 </svg>
 
 <style>
-	button {
-		background-color: var(--surface0);
-		border-color: var(--surface1);
-		border-radius: 1ch;
-		border-style: solid;
-		border-width: 1px;
-		color: var(--text);
-		cursor: pointer;
-		font-weight: bold;
-		width: max-content;
-		padding-inline: 2ch;
-		padding-block: 1ch;
-		box-sizing: border-box;
-		transition: background-color 0.1s ease, transform 0.2s ease;
-	}
-	button:hover {
-		background-color: var(--surface1);
-	}
-	button:active {
-		background-color: var(--surface2);
-		transform: translateY(3px);
-	}
-
 	@keyframes bounce {
 		0% {
 			transform: translateY(0);