Increase border radius for modern rounded inputs and buttons

Makes form controls more rounded and polished instead of rectangular:

Form control updates:
- Increase border-radius from 0.5rem to 0.75rem for softer curves
- Increase border from 1px to 2px for better definition
- Adjust padding to 0.75rem 1rem for comfortable spacing
- Set font-size to 1rem for better readability

Button updates:
- Match border-radius at 0.75rem for consistency
- Increase font-weight to 600 for emphasis
- Add explicit padding (0.75rem 1.5rem)
- Stronger hover lift effect (translateY -2px)
- Enhanced shadow on hover (0 4px 12px)

Inputs and buttons now have modern, rounded appearance matching
the design system used throughout the application.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ken Johnson
2025-12-07 03:23:59 -05:00
parent 117203307d
commit c32ef4eb4f
+9 -8
View File
@@ -412,10 +412,10 @@ $(document).on('turbolinks:load', function() {
/* Clean, minimal form controls */ /* Clean, minimal form controls */
.form-control { .form-control {
border-radius: 0.5rem; border-radius: 0.75rem;
border: 1px solid #dee2e6; border: 2px solid #e9ecef;
padding: 0.625rem 0.875rem; padding: 0.75rem 1rem;
font-size: 0.95rem; font-size: 1rem;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@@ -444,13 +444,14 @@ $(document).on('turbolinks:load', function() {
/* Button styling */ /* Button styling */
.btn { .btn {
border-radius: 0.5rem; border-radius: 0.75rem;
font-weight: 500; font-weight: 600;
transition: all 0.2s ease; transition: all 0.2s ease;
padding: 0.75rem 1.5rem;
} }
.btn:hover { .btn:hover {
transform: translateY(-1px); transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
} }
</style> </style>