Skip to content

Add size prop to Crosshair component #39

@imharrisonking

Description

@imharrisonking

Description

Add a size prop to the Crosshair component to support multiple crosshair sizes for different use cases throughout the app.

Current State

The Crosshair component has a fixed size of 20×21px with hardcoded position offsets. This limits its use in contexts where a larger or smaller visual indicator would be more appropriate.

Desired State

The Crosshair component accepts an optional size prop with 4 options:

  • sm - Smaller crosshair for compact UIs
  • (default) - Current 20×21px size (backwards compatible)
  • md - Larger crosshair for standard contexts
  • lg - Largest crosshair for emphasis

Acceptance Criteria

  • size prop is optional (backwards compatible - undefined = default)
  • Default behavior unchanged when size is not specified
  • All 4 sizes render correctly at all 4 positions (top-left, top-right, bottom-left, bottom-right)
  • Type definitions are complete
  • Uses cva (class-variance-authority) for variant handling, consistent with other UI components

Proposed Sizes

Size Dimensions Position Offset
sm 14×15px ~-8px
default 20×21px -11px/-10.5px (current)
md 28×29px ~-15px
lg 36×37px ~-19px

Implementation Details

  1. Add size prop to interface:

    interface CrosshairProps {
      position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
      size?: "sm" | "md" | "lg"; // undefined = default (current)
      className?: string;
    }
  2. Define size configurations:

    • Should scale both SVG dimensions (width, height, viewBox) and position offsets proportionally
    • Current default: 20×21px with position offsets of -11px/-10.5px
  3. Use cva (class-variance-authority) for variant handling, consistent with other UI components

File to Modify

File Action
packages/web/src/components/layout/Crosshair.tsx Modify

Metadata

Metadata

Assignees

No one assigned

    Labels

    polishUI/UX improvements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions