fix: UnoCSS issues

desktop/package.json

@@ -23,6 +23,7 @@
 		"@tauri-apps/api": "^2.0.0-beta",
 		"@tauri-apps/plugin-shell": "github:tauri-apps/tauri-plugin-shell#v2",
 		"@thisbeyond/solid-dnd": "^0.7.5",
+		"@unocss/reset": "^0.59.4",
 		"@untitled-theme/icons-solid": "^0.8.0",
 		"overlayscrollbars": "^2.7.3",
 		"overlayscrollbars-solid": "^0.5.5",

desktop/src-tauri/tauri.conf.json

@@ -44,8 +44,8 @@
 				"hiddenTitle": true,
 				"width": 1280,
 				"height": 802,
-				"minWidth": 700,
-				"minHeight": 1100,
+				"minWidth": 600,
+				"minHeight": 400,
 				"resizable": true,
 				"center": true,
 				"decorations": false,

desktop/src/globals.css

@@ -3,9 +3,20 @@ body {
 }
 
 /* start lynith's native experience (tm) */
-* { user-select: none; cursor: default !important; }
-*:hover { cursor: default !important; }
-img { -webkit-user-drag: none; }
+* { 
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: default !important; 
+    animation-duration: 150ms !important;
+}
+
+*:hover { 
+    cursor: default !important; 
+}
+
+img { 
+    -webkit-user-drag: none; 
+}
 /* end lynith's native experience (tm) */
 
 h1 { @apply text-2xl font-semibold; }
@@ -16,7 +27,7 @@ h4 { @apply text-lg font-medium; }
 .os-scrollbar {
     --os-size: 10px;
     --os-track-border-radius: theme(borderRadius.lg);
-    --os-handle-bg: theme(colors.gray[0.05]);
-    --os-handle-bg-hover: theme(colors.gray[0.10]);
-    --os-handle-bg-active: theme(colors.gray[0.05]);
+    /* --os-handle-bg: theme("colors.gray[0.05]");
+    --os-handle-bg-hover: theme(colors.gray[0.10]); */
+    /* --os-handle-bg-active: theme(colors.gray[0.05]); */
 }

desktop/src/imports.ts

@@ -1,6 +1,8 @@
+import '@unocss/reset/tailwind.css';
 import '@fontsource/poppins/400.css';
 import '@fontsource/poppins/500.css';
 import '@fontsource/poppins/600.css';
 
 import 'overlayscrollbars/overlayscrollbars.css';
 import 'virtual:uno.css';
+import './globals.css';

desktop/src/index.tsx

@@ -1,7 +1,7 @@
 /* @refresh reload */
 import { render } from 'solid-js/web';
 
-import './global_assets';
+import './imports';
 
 import { Route, Router } from '@solidjs/router';
 import App from './ui/App';

desktop/src/ui/components/Navbar.tsx

@@ -16,7 +16,7 @@ function NavbarLink(props: NavbarLinkProps) {
 	return (
 		<A
 			href={props.path}
-			class="text-lg px-4 py-1 hover:bg-component-bg-hover rounded-lg hover:text-fg-primary-hover"
+			class="text-lg px-4 py-2 hover:bg-component-bg-hover rounded-lg hover:text-fg-primary-hover"
 			inactiveClass="text-fg-secondary"
 			activeClass="text-fg-primary"
 			end
@@ -33,11 +33,11 @@ function Navbar() {
 	let profileButton!: HTMLButtonElement;
 
 	return (
-		<div class="flex flex-row *:flex-1 items-center min-h-[60px] h-15 mx-2">
+		<div class="flex flex-row justify-center items-center min-h-[60px] h-15 mx-2">
 			<div>
 				<PolyfrostFull />
 			</div>
-			<div class="flex flex-row items-center justify-center gap-x-10 py-1">
+			<div class="flex flex-1 flex-row items-center justify-center gap-x-10 py-1">
 				<NavbarLink path="/" label="Home" />
 				<NavbarLink path="/browser" label="Browser" />
 				<NavbarLink path="/updates" label="Updates" />

desktop/src/ui/components/overlay/Popup.tsx

@@ -54,7 +54,7 @@ function Popup(props: Popup.PopupProps) {
 	return (
 		<Show when={localVisible()}>
 			<Portal mount={props.mount || document.body}>
-				<div ref={popupRef} style={props.style || ''} class={`absolute z-[1000] ${animate()} ${props.class || ''}`}>
+				<div ref={popupRef} style={props.style || ''} class={`absolute z-[1000] animate-duration-150 ${animate()} ${props.class || ''}`}>
 					{props.children}
 				</div>
 			</Portal>

desktop/uno.config.ts

@@ -10,6 +10,15 @@ import {
 export default defineConfig({
 	rules: [],
 	shortcuts: {},
+	presets: [
+		presetUno(),
+		presetAttributify(),
+		presetIcons(),
+	],
+	transformers: [
+		transformerVariantGroup(),
+		transformerDirectives(),
+	],
 	theme: {
 		fontFamily: {
 			sans: 'Poppins',
@@ -100,30 +109,21 @@ export default defineConfig({
 				mdlg: '0.438rem',
 			},
 
-			animation: {
-				'fade-in': 'fadeIn 150ms easeOutExpo forwards',
-				'fade-out': 'fadeOut 150ms easeOutExpo forwards',
-			},
+			// animation: {
+			// 	'fade-in': 'fadeIn 150ms easeOutExpo forwards',
+			// 	'fade-out': 'fadeOut 150ms easeOutExpo forwards',
+			// },
 
-			keyframes: {
-				fadeIn: {
-					'0%': { opacity: '0' },
-					'100%': { opacity: '1' },
-				},
-				fadeOut: {
-					'0%': { opacity: '1' },
-					'100%': { opacity: '0' },
-				},
-			},
+			// keyframes: {
+			// 	fadeIn: {
+			// 		'0%': { opacity: '0' },
+			// 		'100%': { opacity: '1' },
+			// 	},
+			// 	fadeOut: {
+			// 		'0%': { opacity: '1' },
+			// 		'100%': { opacity: '0' },
+			// 	},
+			// },
 		},
 	},
-	presets: [
-		presetUno(),
-		presetAttributify(),
-		presetIcons(),
-	],
-	transformers: [
-		transformerVariantGroup(),
-		transformerDirectives(),
-	],
 });

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       '@thisbeyond/solid-dnd':
         specifier: ^0.7.5
         version: 0.7.5(solid-js@1.8.17)
+      '@unocss/reset':
+        specifier: ^0.59.4
+        version: 0.59.4
       '@untitled-theme/icons-solid':
         specifier: ^0.8.0
         version: 0.8.0(solid-js@1.8.17)