feat: Update color definitions and improve PlaceholderBanner widget styling

This commit is contained in:
Achintha Isuru
2026-02-18 23:43:33 -05:00
parent 3bda0cc0c3
commit f0453f267b
3 changed files with 23 additions and 13 deletions

View File

@@ -21,8 +21,8 @@ class UiColors {
/// Foreground color on primary background (#F7FAFC)
static const Color primaryForeground = Color(0xFFF7FAFC);
/// Inverse primary color (#9FABF1)
static const Color primaryInverse = Color(0xFF9FABF1);
/// Inverse primary color (#0A39DF)
static const Color primaryInverse = Color.fromARGB(29, 10, 56, 223);
/// Secondary background color (#F1F3F5)
static const Color secondary = Color(0xFFF1F3F5);

View File

@@ -67,7 +67,7 @@ class WorkerHomePage extends StatelessWidget {
return PlaceholderBanner(
title: bannersI18n.complete_profile_title,
subtitle: bannersI18n.complete_profile_subtitle,
bg: UiColors.bgHighlight,
bg: UiColors.primaryInverse,
accent: UiColors.primary,
onTap: () {
Modular.to.toProfile();

View File

@@ -1,24 +1,33 @@
import 'package:flutter/material.dart';
import 'package:design_system/design_system.dart';
/// Banner widget for placeholder actions, using design system tokens.
class PlaceholderBanner extends StatelessWidget {
/// Banner title
final String title;
/// Banner subtitle
final String subtitle;
/// Banner background color
final Color bg;
/// Banner accent color
final Color accent;
/// Optional tap callback
final VoidCallback? onTap;
/// Creates a [PlaceholderBanner].
const PlaceholderBanner({super.key, required this.title, required this.subtitle, required this.bg, required this.accent, this.onTap});
const PlaceholderBanner({
super.key,
required this.title,
required this.subtitle,
required this.bg,
required this.accent,
this.onTap,
});
@override
Widget build(BuildContext context) {
@@ -29,7 +38,7 @@ class PlaceholderBanner extends StatelessWidget {
decoration: BoxDecoration(
color: bg,
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
border: Border.all(color: accent.withValues(alpha: 0.3)),
border: Border.all(color: accent, width: 1),
),
child: Row(
children: [
@@ -41,7 +50,11 @@ class PlaceholderBanner extends StatelessWidget {
color: UiColors.bgBanner,
shape: BoxShape.circle,
),
child: Icon(UiIcons.sparkles, color: accent, size: UiConstants.space5),
child: Icon(
UiIcons.sparkles,
color: accent,
size: UiConstants.space5,
),
),
const SizedBox(width: UiConstants.space3),
Expanded(
@@ -50,12 +63,9 @@ class PlaceholderBanner extends StatelessWidget {
children: [
Text(
title,
style: UiTypography.body1b,
),
Text(
subtitle,
style: UiTypography.body3r.copyWith(color: UiColors.mutedForeground),
style: UiTypography.body1b.copyWith(color: accent),
),
Text(subtitle, style: UiTypography.body3r.textSecondary),
],
),
),