Skip to content

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

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
    No fields configured for issues without a type.

    Projects

    Status
    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions