Fix toggle, Button, and main license status icon

Author: ItsEeleeya

apps/desktop/src/components/Toggle.tsx

@@ -3,7 +3,7 @@ import { cva } from "cva";
 import { type ComponentProps, splitProps } from "solid-js";
 
 const toggleControlStyles = cva(
-	"rounded-full bg-gray-6 data-disabled:bg-gray-3 data-checked:bg-blue-500 transition-colors outline-2 outline-offset-2 outline-blue-300",
+	"rounded-full bg-gray-6 data-disabled:bg-gray-3 data-checked:bg-blue-500 transition-colors",
 	{
 		variants: {
 			size: {

apps/desktop/src/routes/(window-chrome)/new-main/index.tsx

@@ -1048,7 +1048,7 @@ function Page() {
 										}
 									}}
 									class={cx(
-										"text-[0.6rem] ml-2 rounded-lg px-1 py-0.5",
+										"text-[0.6rem] rounded-lg px-1 py-0.5",
 										license.data?.type === "pro"
 											? "bg-(--blue-400) text-gray-1 dark:text-gray-12"
 											: "bg-gray-3 cursor-pointer hover:bg-gray-5",

packages/ui-solid/src/Button.tsx

@@ -20,7 +20,7 @@ const styles = cva(
 				white:
 					"bg-gray-1 border border-gray-6 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
 				ghost: "hover:bg-white/20 hover:text-white",
-				gray: "bg-gray-5 data-[selected=true]:bg-gray-8! dark:data-[selected=true]:bg-gray-9! hover:bg-gray-7 border gray-button-border gray-button-shadow text-gray-12 disabled:bg-gray-8 disabled:text-gray-9",
+				gray: "bg-gray-5 data-[selected=true]:bg-gray-8! dark:data-[selected=true]:bg-gray-9! hover:bg-gray-7 gray-button-shadow text-gray-12 disabled:bg-gray-8 disabled:text-gray-9 outline-none",
 				dark: "bg-gray-12 dark-button-border dark-button-shadow hover:bg-gray-11 border text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
 				darkgradient:
 					"bg-linear-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",