Skip to content

UI polish: softer border radius everywhere for friendlier feel #12219

@premiumjibles

Description

@premiumjibles

Summary

Round all UI edges into softer border radii across both codebases for a friendlier feel.

tk ticket: sa-zecq

Research Findings

Two centralized touch points cover 90%+ of the UI:

  1. shapeshift/src/theme/theme.tsx — Add radii override to Chakra's extendTheme(). Currently does NOT override defaults. ~527 borderRadius usages across ~293 files reference Chakra tokens — bumping token values cascades everywhere.
  2. shapeshift-agentic/apps/agentic-chat/src/styles.css — Change --radius: 0.5rem to larger value. Tailwind derives all radius sizes from this single variable.

16 component theme files (Card, Button, Input, Modal, Menu, etc.) set borderRadius using Chakra tokens — they auto-cascade. ~10 hardcoded pixel values need manual conversion.

Acceptance Criteria

  • Chakra radii tokens bumped in src/theme/theme.tsx
  • --radius CSS variable increased in agentic-chat styles.css
  • Hardcoded px values audited and converted to tokens
  • Visual QA pass confirms no layout breakage

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions