feat: Update typography styles and improve layout in coverage components
This commit is contained in:
@@ -322,7 +322,7 @@ class UiTypography {
|
|||||||
|
|
||||||
/// Body 1 Medium - Font: Instrument Sans, Size: 16, Height: 1.5 (#121826)
|
/// Body 1 Medium - Font: Instrument Sans, Size: 16, Height: 1.5 (#121826)
|
||||||
static final TextStyle body1m = _primaryBase.copyWith(
|
static final TextStyle body1m = _primaryBase.copyWith(
|
||||||
fontWeight: FontWeight.w500,
|
fontWeight: FontWeight.w600,
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
height: 1.5,
|
height: 1.5,
|
||||||
letterSpacing: -0.025,
|
letterSpacing: -0.025,
|
||||||
|
|||||||
@@ -59,7 +59,8 @@ class _CoveragePageState extends State<CoveragePage> {
|
|||||||
child: Scaffold(
|
child: Scaffold(
|
||||||
body: BlocConsumer<CoverageBloc, CoverageState>(
|
body: BlocConsumer<CoverageBloc, CoverageState>(
|
||||||
listener: (BuildContext context, CoverageState state) {
|
listener: (BuildContext context, CoverageState state) {
|
||||||
if (state.status == CoverageStatus.failure && state.errorMessage != null) {
|
if (state.status == CoverageStatus.failure &&
|
||||||
|
state.errorMessage != null) {
|
||||||
UiSnackbar.show(
|
UiSnackbar.show(
|
||||||
context,
|
context,
|
||||||
message: translateErrorKey(state.errorMessage!),
|
message: translateErrorKey(state.errorMessage!),
|
||||||
@@ -265,22 +266,25 @@ class _CoveragePageState extends State<CoveragePage> {
|
|||||||
padding: const EdgeInsets.all(UiConstants.space5),
|
padding: const EdgeInsets.all(UiConstants.space5),
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
spacing: UiConstants.space6,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
if (state.stats != null) ...<Widget>[
|
Column(
|
||||||
CoverageQuickStats(stats: state.stats!),
|
spacing: UiConstants.space2,
|
||||||
const SizedBox(height: UiConstants.space5),
|
children: [
|
||||||
],
|
|
||||||
if (state.stats != null && state.stats!.late > 0) ...<Widget>[
|
if (state.stats != null && state.stats!.late > 0) ...<Widget>[
|
||||||
LateWorkersAlert(lateCount: state.stats!.late),
|
LateWorkersAlert(lateCount: state.stats!.late),
|
||||||
const SizedBox(height: UiConstants.space5),
|
|
||||||
],
|
],
|
||||||
|
if (state.stats != null) ...<Widget>[
|
||||||
|
CoverageQuickStats(stats: state.stats!),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
),
|
||||||
Text(
|
Text(
|
||||||
'Shifts (${state.shifts.length})',
|
'Shifts (${state.shifts.length})',
|
||||||
style: UiTypography.title2b.copyWith(
|
style: UiTypography.title2b.copyWith(
|
||||||
color: UiColors.textPrimary,
|
color: UiColors.textPrimary,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(height: UiConstants.space3),
|
|
||||||
CoverageShiftList(shifts: state.shifts),
|
CoverageShiftList(shifts: state.shifts),
|
||||||
const SizedBox(
|
const SizedBox(
|
||||||
height: UiConstants.space24,
|
height: UiConstants.space24,
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ class CoverageQuickStats extends StatelessWidget {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Row(
|
return Row(
|
||||||
|
spacing: UiConstants.space2,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Expanded(
|
Expanded(
|
||||||
child: _StatCard(
|
child: _StatCard(
|
||||||
@@ -27,7 +28,6 @@ class CoverageQuickStats extends StatelessWidget {
|
|||||||
color: UiColors.iconSuccess,
|
color: UiColors.iconSuccess,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(width: UiConstants.space3),
|
|
||||||
Expanded(
|
Expanded(
|
||||||
child: _StatCard(
|
child: _StatCard(
|
||||||
icon: UiIcons.clock,
|
icon: UiIcons.clock,
|
||||||
@@ -36,15 +36,6 @@ class CoverageQuickStats extends StatelessWidget {
|
|||||||
color: UiColors.textWarning,
|
color: UiColors.textWarning,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(width: UiConstants.space3),
|
|
||||||
Expanded(
|
|
||||||
child: _StatCard(
|
|
||||||
icon: UiIcons.warning,
|
|
||||||
label: 'Late',
|
|
||||||
value: stats.late.toString(),
|
|
||||||
color: UiColors.destructive,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -84,27 +75,30 @@ class _StatCard extends StatelessWidget {
|
|||||||
width: 0.75,
|
width: 0.75,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
child: Column(
|
child: Row(
|
||||||
|
spacing: UiConstants.space2,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Icon(
|
Icon(
|
||||||
icon,
|
icon,
|
||||||
color: color,
|
color: color,
|
||||||
size: UiConstants.space6,
|
size: UiConstants.space6,
|
||||||
),
|
),
|
||||||
const SizedBox(height: UiConstants.space2),
|
Row(
|
||||||
|
spacing: UiConstants.space1,
|
||||||
|
children: [
|
||||||
Text(
|
Text(
|
||||||
value,
|
value,
|
||||||
style: UiTypography.title1m.copyWith(
|
style: UiTypography.title1b.copyWith(
|
||||||
color: UiColors.textPrimary,
|
color: color,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(height: UiConstants.space1),
|
|
||||||
Text(
|
Text(
|
||||||
label,
|
label,
|
||||||
style: UiTypography.body3r.copyWith(
|
style: UiTypography.body3r.copyWith(
|
||||||
color: UiColors.mutedForeground,
|
color: color,
|
||||||
),
|
),
|
||||||
textAlign: TextAlign.center,
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -22,32 +22,29 @@ class LateWorkersAlert extends StatelessWidget {
|
|||||||
color: UiColors.destructive.withValues(alpha: 0.1),
|
color: UiColors.destructive.withValues(alpha: 0.1),
|
||||||
borderRadius: UiConstants.radiusLg,
|
borderRadius: UiConstants.radiusLg,
|
||||||
border: Border.all(
|
border: Border.all(
|
||||||
color: UiColors.destructive.withValues(alpha: 0.3),
|
color: UiColors.destructive,
|
||||||
|
width: 0.5,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
child: Row(
|
child: Row(
|
||||||
|
spacing: UiConstants.space4,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
const Icon(
|
const Icon(
|
||||||
UiIcons.warning,
|
UiIcons.warning,
|
||||||
color: UiColors.destructive,
|
color: UiColors.destructive,
|
||||||
size: UiConstants.space5,
|
|
||||||
),
|
),
|
||||||
const SizedBox(width: UiConstants.space3),
|
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Text(
|
|
||||||
'Late Workers Alert',
|
|
||||||
style: UiTypography.body1b.copyWith(
|
|
||||||
color: UiColors.destructive,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: UiConstants.space1),
|
|
||||||
Text(
|
Text(
|
||||||
'$lateCount ${lateCount == 1 ? 'worker is' : 'workers are'} running late',
|
'$lateCount ${lateCount == 1 ? 'worker is' : 'workers are'} running late',
|
||||||
|
style: UiTypography.body1b.textError,
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
'Auto-backup system system is searching for replacements.',
|
||||||
style: UiTypography.body3r.copyWith(
|
style: UiTypography.body3r.copyWith(
|
||||||
color: UiColors.destructiveForeground,
|
color: UiColors.textError.withValues(alpha: 0.7),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user