[dyad] Making the position grid more minimal - wrote 1 file(s)

src/components/object-position-control.tsx

@@ -26,20 +26,23 @@ interface ObjectPositionControlProps {
 
 export function ObjectPositionControl({ value, onChange }: ObjectPositionControlProps) {
   return (
-    <div className="grid grid-cols-3 gap-1 w-24 h-24 p-1 rounded-md bg-muted">
+    <div className="grid grid-cols-3 gap-px w-16 h-16 rounded-md border bg-border overflow-hidden">
       {positions.map((pos) => (
         <button
           key={pos}
           type="button"
           onClick={() => onChange(pos)}
           className={cn(
-            "rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-            value === pos
-              ? "bg-primary"
-              : "bg-muted-foreground/20 hover:bg-muted-foreground/40"
+            "flex items-center justify-center bg-background transition-colors focus:outline-none focus:z-10 focus:ring-2 focus:ring-ring",
+            "hover:bg-accent",
+            value === pos && "bg-accent"
           )}
           aria-label={`Set object position to ${pos.replace(' ', ' ')}`}
-        />
+        >
+          {value === pos && (
+            <div className="w-2 h-2 rounded-full bg-primary ring-1 ring-primary-foreground" />
+          )}
+        </button>
       ))}
     </div>
   );