fixed button styles without preflight, fixed select menu in popup whe…

…n in portal

library/src/components/Button.tsx

@@ -184,6 +184,18 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "LPButton"
 export { Button }
 
+const loadingSpinnerClassNames: { [appearance in ButtonAppearance]: string } = {
+	primary: "border-t-text-inverse",
+	default: "border-t-border-bold",
+	subtle: "border-t-border-bold",
+	link: "border-t-border-bold",
+	"subtle-link": "border-t-border-bold",
+	warning: "border-t-text-inverse",
+	danger: "border-t-text-inverse",
+	success: "border-t-text-inverse",
+	information: "border-t-text-inverse",
+}
+
 export const LoadingButton = ({
 	loading = false,
 	iconAfter,
@@ -200,7 +212,13 @@ export const LoadingButton = ({
 			<div className={loading ? "opacity-0" : undefined}>{children}</div>
 			{loading && (
 				<div className="absolute inset-0 flex items-center justify-center">
-					<LoadingSpinner />
+					<LoadingSpinner
+						className={
+							loadingSpinnerClassNames[
+								props.appearance ?? "default"
+							]
+						}
+					/>
 				</div>
 			)}
 		</Button>
@@ -218,7 +236,6 @@ export const ButtonGroup = ({
 			{...props}
 			className={twMerge("inline-flex flex-wrap gap-2 p-2", className)} //gap-2 and p-2 are because of the button outlines on focus
 			style={style}
-
 		>
 			{children}
 		</div>

library/src/components/Popover.tsx

@@ -128,7 +128,7 @@ function Root({
 		return (
 			<RPo.Close
 				className={twMerge(
-					"text-text-subtlest hover:text-text",
+					"text-text-subtlest hover:text-text bg-transparent border-none",
 					closerClassName,
 				)}
 				style={closerStyle}

library/src/components/inputs/Select.tsx

@@ -53,8 +53,7 @@ import { SlidingErrorMessage } from "./ErrorHelpWrapper"
 import { IconSizeHelper } from "../IconSizeHelper"
 import { inputBaseStyles } from "../styleHelper"
 
-const menuStyles =
-	"bg-surface min-w-min z-10 shadow-overlay rounded overflow-hidden"
+const menuStyles = "bg-surface min-w-min shadow-overlay rounded overflow-hidden" // some styles like zIndex are overwritten by react-select, use the custom-styles below for those
 
 const optionStyles =
 	"py-2 px-3 border-l-2 border-l-transparent border-transparent border-solid"
@@ -212,6 +211,10 @@ const customStyles = {
 		minHeight: "2.25rem", // this is min-h-9 as set in the inputBaseStyle
 		flexWrap: "nowrap" as const,
 	}),
+	menuPortal: (provided: CSSObjectWithLabel) => ({
+		...provided,
+		zIndex: 51,
+	}),
 }
 
 //#endregion styles

library/src/tailwind.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/** Custom styles for running with preflight off */
+@layer base {
+	button {
+		@apply cursor-pointer disabled:cursor-not-allowed bg-transparent border-none box-border;
+	}
+}