fix settings items border

Author: Brendonovich

apps/desktop/src/routes/(window-chrome)/settings.tsx

@@ -2,9 +2,10 @@ import { A, type RouteSectionProps, useLocation } from "@solidjs/router";
 import { cx } from "cva";
 import { createResource, For } from "solid-js";
 import { Button } from "@cap/ui-solid";
-import { commands } from "~/utils/tauri";
 import { getVersion } from "@tauri-apps/api/app";
 
+import { commands } from "~/utils/tauri";
+
 export default function (props: RouteSectionProps) {
   const location = useLocation();
 
@@ -42,10 +43,10 @@ export default function (props: RouteSectionProps) {
                   <A
                     href={item.href}
                     class={cx(
-                      "rounded-lg h-[2rem] px-[0.375rem] flex flex-row items-center gap-[0.375rem] transition-colors",
+                      "rounded-lg h-[2rem] px-[0.375rem] flex flex-row items-center gap-[0.375rem] transition-colors border",
                       isActive()
-                        ? "bg-blue-50 border border-blue-200 text-blue-700"
-                        : "hover:bg-gray-100"
+                        ? "bg-blue-50 border-blue-200 text-blue-700"
+                        : "hover:bg-gray-100 border-transparent"
                     )}
                   >
                     <item.icon class="size-[1.25rem]" />

packages/ui-solid/tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
   ],
   theme: {
     colors: {
+      transparent: "rgba(0,0,0,0)",
       gray: {
         50: "#FFFFFF",
         100: "#F7F8FA",