Style buttons and dropdowns more consistently

Author: ch1bo

ui/src/components/Button.tsx

@@ -2,42 +2,38 @@ import { forwardRef, ButtonHTMLAttributes } from "react";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary" | "danger";
-  size?: "sm" | "md";
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
-  children,
-  className = "",
-  variant = "secondary",
-  size = "md",
-  disabled,
-  ...props
-}, ref) => {
-  const baseStyles = "rounded-md font-medium transition-all duration-150 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2";
-  
-  const variantStyles = {
-    primary: "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white focus:ring-blue-500 disabled:bg-gray-300 disabled:text-gray-500",
-    secondary: "bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white focus:ring-gray-500 disabled:bg-gray-300 disabled:text-gray-500", 
-    danger: "bg-red-600 hover:bg-red-700 active:bg-red-800 text-white focus:ring-red-500 disabled:bg-gray-300 disabled:text-gray-500"
-  };
-  
-  const sizeStyles = {
-    sm: "px-2 py-1 text-sm",
-    md: "px-4 py-2 text-sm"
-  };
-  
-  const disabledStyles = disabled ? "cursor-not-allowed" : "cursor-pointer";
-  
-  return (
-    <button
-      ref={ref}
-      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${disabledStyles} ${className}`}
-      disabled={disabled}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-});
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { children, className = "", variant = "secondary", disabled, ...props },
+    ref,
+  ) => {
+    const baseStyles =
+      "px-3 py-2 text-sm rounded-md font-medium transition-all duration-150 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2";
 
-Button.displayName = "Button";
+    const variantStyles = {
+      primary:
+        "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white focus:ring-blue-500 disabled:bg-gray-300 disabled:text-gray-500",
+      secondary:
+        "bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white focus:ring-gray-500 disabled:bg-gray-300 disabled:text-gray-500",
+      danger:
+        "bg-red-600 hover:bg-red-700 active:bg-red-800 text-white focus:ring-red-500 disabled:bg-gray-300 disabled:text-gray-500",
+    };
+
+    const disabledStyles = disabled ? "cursor-not-allowed" : "cursor-pointer";
+
+    return (
+      <button
+        ref={ref}
+        className={`${baseStyles} ${variantStyles[variant]} ${disabledStyles} ${className}`}
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";

ui/src/components/Sim/modules/Playback.tsx

@@ -257,11 +257,9 @@ export const Playback: FC = () => {
         onMouseLeave={stopSeeking}
         disabled={disabled}
         variant="secondary"
-        size="sm"
-        className="px-2"
         title={`Step backward ${1.0 * speedMultiplier}s (Ctrl + ←)`}
       >
-        <<
+        ◀◀
       </Button>
 
       <Button
@@ -278,11 +276,9 @@ export const Playback: FC = () => {
         onMouseLeave={stopSeeking}
         disabled={disabled}
         variant="secondary"
-        size="sm"
-        className="px-2"
         title={`Step backward ${0.1 * speedMultiplier}s (←)`}
       >
-        &lt;
+        ◀
       </Button>
 
       <Button
@@ -299,11 +295,9 @@ export const Playback: FC = () => {
         onMouseLeave={stopSeeking}
         disabled={disabled}
         variant="secondary"
-        size="sm"
-        className="px-2"
         title={`Step forward ${0.1 * speedMultiplier}s (→)`}
       >
-        &gt;
+        ▶
       </Button>
 
       <Button
@@ -320,33 +314,26 @@ export const Playback: FC = () => {
         onMouseLeave={stopSeeking}
         disabled={disabled}
         variant="secondary"
-        size="sm"
-        className="px-2"
         title={`Step forward ${1.0 * speedMultiplier}s (Ctrl + →)`}
       >
-        &gt;&gt;
+        ▶▶
       </Button>
 
-      <div className="min-w-16">
-        <label htmlFor="timelineSpeed" className="block text-xs text-gray-600">
-          Speed
-        </label>
-        <select
-          ref={speedSelectRef}
-          name="timelineSpeed"
-          className="mt-1 w-full text-sm"
-          value={speedMultiplier}
-          onChange={handleSpeedChange}
-          disabled={disabled}
-          title="Change speed (↑ / ↓)"
-        >
-          {SPEED_OPTIONS.map((speed) => (
-            <option key={speed} value={speed}>
-              {speed}x
-            </option>
-          ))}
-        </select>
-      </div>
+      <select
+        ref={speedSelectRef}
+        name="timelineSpeed"
+        className="min-w-16 rounded-md transition-all duration-150 bg-gray-600 hover:bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 disabled:bg-gray-300 disabled:text-gray-500 px-2 py-2 cursor-pointer disabled:cursor-not-allowed"
+        value={speedMultiplier}
+        onChange={handleSpeedChange}
+        disabled={disabled}
+        title="Change speed (↑ / ↓)"
+      >
+        {SPEED_OPTIONS.map((speed) => (
+          <option key={speed} value={speed}>
+            {speed}x
+          </option>
+        ))}
+      </select>
     </div>
   );
 };

ui/src/components/Sim/modules/Scenario.tsx

@@ -13,7 +13,7 @@ export const Scenario: FC = () => {
     dispatch,
   } = useSimContext();
   const { startStream, streaming, stopStream } = useStreamMessagesHandler();
-  const [includeTransactions, setIncludeTransactions] = useState(false);
+  const [includeTransactions, setIncludeTransactions] = useState(true);
 
   useEffect(() => {
     (async () => {
@@ -57,13 +57,13 @@ export const Scenario: FC = () => {
 
   return (
     <div className="flex items-center justify-start gap-4 border-2 rounded-md p-4 border-gray-200 bg-white/80 backdrop-blur-xs">
-      <div className="min-w-32">
-        <label htmlFor="scenario" className="block text-xs text-gray-600">
+      <div className="flex items-center gap-3">
+        <label htmlFor="scenario" className="text-gray-900">
           Scenario
         </label>
         <select
           id="scenario"
-          className="mt-1 w-full text-lg"
+          className="text-lg rounded-md font-medium transition-all duration-150 bg-transparent border border-gray-300 hover:border-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:text-gray-500 disabled:border-gray-200 px-3 py-2 cursor-pointer disabled:cursor-not-allowed"
           value={activeScenario}
           onChange={chooseScenario}
         >
@@ -74,7 +74,7 @@ export const Scenario: FC = () => {
       </div>
 
       <div className="flex flex-col gap-1">
-        <label className="flex items-center gap-2 text-sm">
+        <label className="flex items-center gap-2">
           <input
             type="checkbox"
             checked={includeTransactions}