- Combine select and input styles

src/renderer/src/components/input/Input.tsx

@@ -1,19 +1,20 @@
 import { cva, VariantProps } from "class-variance-authority";
 import { Component, JSX, splitProps } from "solid-js";
 
-const inputStyles = cva(
+export const inputStyles = cva(
   [
-    "ring-offset-background placeholder:text-subtext flex h-[42px] w-full rounded-lg px-3.5 py-2 disabled:cursor-not-allowed disabled:opacity-50",
+    "ring-offset-background placeholder:text-subtext flex h-[42px] w-full rounded-lg px-3.5 py-2 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:bg-surface",
   ],
   {
     variants: {
       variant: {
         primary: "",
-        outlined: "border border-stroke bg-transparent border-solid block",
+        outlined:
+          "border border-stroke bg-transparent border-solid block focus-visible:border-grey-400",
       },
     },
     defaultVariants: {
-      variant: "primary",
+      variant: "outlined",
     },
   },
 );

src/renderer/src/components/popover/PopoverTrigger.tsx

@@ -2,13 +2,14 @@ import { usePopover } from "./Popover";
 import { Component } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
-type Props = JSX.IntrinsicElements["button"];
+export type Props = JSX.IntrinsicElements["button"];
 const PopoverTrigger: Component<Props> = (props) => {
   const state = usePopover();
 
   return (
     <button
       ref={state.setTriggerRef}
+      data-open={state.isOpen()}
       onClick={() => {
         state?.toggle();
       }}

src/renderer/src/components/select/Select.tsx

@@ -1,8 +1,12 @@
-import { Component, createMemo, JSX, ParentComponent } from "solid-js";
+import { Component, createMemo, ParentComponent, splitProps } from "solid-js";
 import Popover, { Props as PopoverProps, usePopover } from "../popover/Popover";
+import { Props as PopoverTriggerProps } from "../popover/PopoverTrigger";
 import { ChevronsUpDownIcon } from "lucide-solid";
 import SelectableList, { Props as ListProps } from "../selectable-list/SelectableList";
 import SelectableListItem, { Props as ListItemProps } from "../selectable-list/SelectableListItem";
+import { cn } from "@renderer/lib/css.utils";
+import { inputStyles } from "../input/Input";
+import { VariantProps } from "class-variance-authority";
 
 export const SelectContainer: ParentComponent<PopoverProps> = (props) => {
   return (
@@ -16,10 +20,17 @@ export const SelectContainer: ParentComponent<PopoverProps> = (props) => {
   );
 };
 
-type Props = JSX.IntrinsicElements["button"];
-export const SelectTrigger: ParentComponent<Props> = (props) => {
+type Props = PopoverTriggerProps & VariantProps<typeof inputStyles>;
+export const SelectTrigger: ParentComponent<Props> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class", "variant", "children"]);
   return (
-    <Popover.Trigger class="flex items-center justify-between gap-2 rounded bg-surface px-4 py-2.5 hover:bg-overlay">
+    <Popover.Trigger
+      {...rest}
+      class={cn(
+        inputStyles({ variant: props.variant, class: props.class }),
+        "flex items-center justify-between gap-2 box-border h-auto min-h-[42px] hover:bg-surface data-[open='true']:bg-surface",
+      )}
+    >
       <span class="text-base leading-6">{props.children}</span>
       <ChevronsUpDownIcon size={20} class="text-subtext flex-shrink-0" />
     </Popover.Trigger>

src/renderer/src/components/settings/Settings.tsx

@@ -79,7 +79,7 @@ const AudioDeviceSetting: Component = () => {
   return (
     <Setting name="audio-device" label="Choose audio device">
       <Select isOpen={isPopoverOpen} onValueChange={setIsPopoverOpen}>
-        <Select.Trigger class="w-full rounded border border-stroke bg-surface px-2 py-1 text-text hover:bg-danger">
+        <Select.Trigger variant="outlined">
           {selectedAudioDevice() || "No device selected"}
         </Select.Trigger>