Redesign the UI after the fitness reference and replace the logo
Light sage-to-cream ambient backdrop, frosted glass controls and painted SceneArt landscapes in place of photography. Home becomes a dashboard with a two-tone greeting, a frosted summary ring, category portraits, an up-next rail of image-led cards and a floating glass tab bar. The routine library gets an image header and painted cards; the player gets a scene stage, steps on an arc, a dotted clock and a night pill with a lime spark. Goals become painted cards in their own colour. New logo: a lime sun resting on a ground line under two arcs. The splash raises the sun and lights the arcs; launcher icons and native splash are regenerated to match. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KhQh614DMeYoQEH9SoMRUw
This commit is contained in:
@@ -16,6 +16,7 @@ import '../../designs/Component.dart';
|
||||
import '../../designs/Responsive.dart';
|
||||
import '../../designs/Shell.dart';
|
||||
import '../../designs/buttons/Buttons.dart';
|
||||
import '../../designs/scene/SceneArt.dart';
|
||||
import '../../designs/text/Text.dart';
|
||||
import '../../utils/Colors.dart';
|
||||
import '../../utils/CommonUtils.dart';
|
||||
@@ -181,6 +182,8 @@ class GoalDetailState extends State<GoalDetail>
|
||||
title: _goal.title,
|
||||
onBack: _onBack,
|
||||
chrome: _goal.colourHex.isEmpty ? null : goalColor(_goal.colourHex),
|
||||
scene: goalScene(goalColor(_goal.colourHex)),
|
||||
sceneSeed: sceneSeed(_goal.title),
|
||||
action: chromeAction(CupertinoIcons.pencil, _onEditGoal),
|
||||
banner: _progressBanner(),
|
||||
child: Column(
|
||||
@@ -398,15 +401,19 @@ class GoalDetailState extends State<GoalDetail>
|
||||
onTap: () => _onEditRoutine(routine),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 48,
|
||||
height: 48,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: kindBackground(routine.kind),
|
||||
borderRadius: BorderRadius.circular(13),
|
||||
SizedBox(
|
||||
width: 58,
|
||||
height: 58,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: SceneArt(
|
||||
palette: scenePalette(routine.kind),
|
||||
seed: sceneSeed(routine.title),
|
||||
figure: kindIcon(routine.kind),
|
||||
figureScale: 0.46,
|
||||
figureAlignment: const Alignment(0, 0.1),
|
||||
),
|
||||
),
|
||||
child: Icon(kindIcon(routine.kind), size: 21, color: tone),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
|
||||
@@ -5,9 +5,11 @@ import '../../about/external/data/Goal.dart';
|
||||
import '../../about/internal/application/TextType.dart';
|
||||
import '../../configs/Navigator.dart';
|
||||
import '../../designs/Component.dart';
|
||||
import '../../designs/GlassSurface.dart';
|
||||
import '../../designs/Responsive.dart';
|
||||
import '../../designs/Shell.dart';
|
||||
import '../../designs/buttons/Buttons.dart';
|
||||
import '../../designs/scene/SceneArt.dart';
|
||||
import '../../designs/text/Text.dart';
|
||||
import '../../utils/Colors.dart';
|
||||
import '../../utils/CommonUtils.dart';
|
||||
@@ -104,112 +106,136 @@ class GoalsState extends State<Goals> implements ConnectGoals {
|
||||
);
|
||||
}
|
||||
|
||||
/// The goal as a painted card in its own colour: the ambition up top, the
|
||||
/// progress and the cost along the bottom.
|
||||
Widget _goalCard(Goal goal) {
|
||||
final Color accent =
|
||||
goal.slipping ? colorStandingGrounded : goalColor(goal.colourHex);
|
||||
final Color accent = goalColor(goal.colourHex);
|
||||
final Color soft = colorWhite.withValues(alpha: 0.78);
|
||||
final bool overdue = goal.targetDate != null &&
|
||||
goal.targetDate!.isBefore(DateTime.now());
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 12),
|
||||
child: card(
|
||||
onTap: () => _onOpenGoal(goal),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: goalColor(goal.colourHex),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
text(
|
||||
return GestureDetector(
|
||||
onTap: () => _onOpenGoal(goal),
|
||||
child: Container(
|
||||
height: 214,
|
||||
margin: const EdgeInsets.only(bottom: 14),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(26),
|
||||
boxShadow: const [
|
||||
BoxShadow(
|
||||
color: Color(0x262A3A30),
|
||||
blurRadius: 24,
|
||||
offset: Offset(0, 10),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(26),
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
SceneArt(
|
||||
palette: goalScene(accent),
|
||||
seed: sceneSeed(goal.title),
|
||||
figure: CupertinoIcons.flag_fill,
|
||||
figureScale: 0.4,
|
||||
figureAlignment: const Alignment(0.75, -0.35),
|
||||
shade: true,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(14),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
GlassSurface(
|
||||
onDark: true,
|
||||
radius: BorderRadius.circular(99),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10, vertical: 5),
|
||||
child: text(
|
||||
[
|
||||
if (goal.category.isNotEmpty) goal.category,
|
||||
goal.targetDate == null
|
||||
? "No deadline"
|
||||
: targetLabel(goal.targetDate),
|
||||
].join(" · ").toUpperCase(),
|
||||
9,
|
||||
TextType.Bold,
|
||||
color: goal.targetDate != null &&
|
||||
goal.targetDate!.isBefore(DateTime.now())
|
||||
? colorStandingGrounded
|
||||
: colorGrey2,
|
||||
letterSpacing: 1.0,
|
||||
].join(" · "),
|
||||
10,
|
||||
TextType.Medium,
|
||||
color: overdue ? colorTinted : colorWhite,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
text(goal.title, 19, TextType.Light,
|
||||
color: colorPrimaryDark,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis),
|
||||
if (goal.description.isNotEmpty) ...[
|
||||
const SizedBox(height: 6),
|
||||
text(goal.description, 12, TextType.Regular,
|
||||
color: colorGrey2,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis),
|
||||
),
|
||||
const Spacer(),
|
||||
if (goal.overdueTasks > 0)
|
||||
pill("${goal.overdueTasks} late", colorWhite,
|
||||
colorStandingGrounded,
|
||||
textSize: 9),
|
||||
],
|
||||
),
|
||||
const Spacer(),
|
||||
text(goal.title, 21, TextType.Medium,
|
||||
color: colorWhite,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis),
|
||||
if (goal.description.isNotEmpty) ...[
|
||||
const SizedBox(height: 3),
|
||||
text(goal.description, 12, TextType.Regular,
|
||||
color: soft,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
meter(goal.progress,
|
||||
fill: colorLime,
|
||||
track: colorWhite.withValues(alpha: 0.25),
|
||||
height: 5),
|
||||
const SizedBox(height: 10),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _cardStat(
|
||||
"${goal.completedTasks}/${goal.totalTasks}",
|
||||
"Done",
|
||||
soft),
|
||||
),
|
||||
Expanded(
|
||||
child: _cardStat(
|
||||
"${goal.remainingTasks}", "Remaining", soft),
|
||||
),
|
||||
Expanded(
|
||||
child: _cardStat(
|
||||
formatDebt(goal.debtContribution), "Debt", soft,
|
||||
alert: goal.debtContribution > 0),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
if (goal.overdueTasks > 0)
|
||||
pill("${goal.overdueTasks} late", colorStandingGrounded,
|
||||
colorStandingGroundedBg, textSize: 9),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
meter(goal.progress, fill: accent),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: labelled(
|
||||
"Done",
|
||||
"${goal.completedTasks} of ${goal.totalTasks}",
|
||||
valueSize: 13,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: labelled(
|
||||
"Remaining",
|
||||
"${goal.remainingTasks}",
|
||||
valueSize: 13,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: labelled(
|
||||
"Debt",
|
||||
formatDebt(goal.debtContribution),
|
||||
valueSize: 13,
|
||||
valueColor: goal.debtContribution > 0
|
||||
? colorStandingGrounded
|
||||
: colorPrimaryDark,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _cardStat(String value, String caption, Color tone,
|
||||
{bool alert = false}) {
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
text(value, 18, TextType.Light,
|
||||
color: alert ? colorTinted : colorWhite),
|
||||
const SizedBox(width: 5),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 2),
|
||||
child: text(caption, 10, TextType.Regular, color: tone),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void onGoalsLoaded(List<Goal> goals) {
|
||||
setState(() {
|
||||
|
||||
Reference in New Issue
Block a user