feat(brand): BrandWordmark renders ∆I in petrol, lifts the logo
Adds a dedicated BrandWordmark widget that splits 'Recl∆Im'
into three TextSpans and tints the middle ∆I in the petrol
signal colour. The fai_web universe uses this same accent rule
for the F∆I and Ch∆In glyphs — Recl∆Im now follows it, so
the brand stays visually coherent across every F∆I surface.
Where it lands:
- Landing page: large DeltaMark (96 px) and BrandWordmark
(56 px) sit on a single row, the wordmark to the right of
the mark. The two together carry the brand identity that
a viewer sees first when opening the app.
- NavigationRail leading: the muted 'Recl∆Im' Text line is
replaced with the petrol-accented BrandWordmark (18 px),
keeping the vendor tag 'F∆I' as a small muted line under it.
widget_test.dart adapts: the literal 'Recl∆Im'-find no longer
matches because the wordmark is now three text spans, so the
test checks for BrandWordmark by type — equivalent assertion,
robust to glyph-level splits.
Signed-off-by: flemming-it <sf@flemming.it>
This commit is contained in:
parent
94f4473686
commit
c6400302dd
4 changed files with 73 additions and 13 deletions
|
|
@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
|
||||||
import '../data/repository.dart';
|
import '../data/repository.dart';
|
||||||
import '../theme/reclaim_theme.dart';
|
import '../theme/reclaim_theme.dart';
|
||||||
import '../theme/reclaim_tokens.dart';
|
import '../theme/reclaim_tokens.dart';
|
||||||
|
import '../widgets/brand_wordmark.dart';
|
||||||
import '../widgets/delta_mark.dart';
|
import '../widgets/delta_mark.dart';
|
||||||
import 'shell_page.dart';
|
import 'shell_page.dart';
|
||||||
|
|
||||||
|
|
@ -20,7 +21,7 @@ class LandingPage extends StatelessWidget {
|
||||||
body: SafeArea(
|
body: SafeArea(
|
||||||
child: Center(
|
child: Center(
|
||||||
child: ConstrainedBox(
|
child: ConstrainedBox(
|
||||||
constraints: const BoxConstraints(maxWidth: 720),
|
constraints: const BoxConstraints(maxWidth: 820),
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.symmetric(
|
padding: const EdgeInsets.symmetric(
|
||||||
horizontal: ReclaimSpace.xxl,
|
horizontal: ReclaimSpace.xxl,
|
||||||
|
|
@ -30,9 +31,18 @@ class LandingPage extends StatelessWidget {
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
const DeltaMark(size: 96),
|
const Row(
|
||||||
const SizedBox(height: ReclaimSpace.xxl),
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
Text('Recl∆Im', style: t.displaySmall),
|
children: [
|
||||||
|
DeltaMark(size: 96),
|
||||||
|
SizedBox(width: ReclaimSpace.xl),
|
||||||
|
BrandWordmark(
|
||||||
|
size: 56,
|
||||||
|
letterSpacing: -1.0,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: ReclaimSpace.xl),
|
||||||
const SizedBox(height: ReclaimSpace.sm),
|
const SizedBox(height: ReclaimSpace.sm),
|
||||||
Text(
|
Text(
|
||||||
'Pflicht-basierte Wirkungsanalyse von Rechtsnormen — '
|
'Pflicht-basierte Wirkungsanalyse von Rechtsnormen — '
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import '../data/repository.dart';
|
import '../data/repository.dart';
|
||||||
import '../theme/reclaim_tokens.dart';
|
import '../theme/reclaim_tokens.dart';
|
||||||
|
import '../widgets/brand_wordmark.dart';
|
||||||
import '../widgets/delta_mark.dart';
|
import '../widgets/delta_mark.dart';
|
||||||
import 'about_page.dart';
|
import 'about_page.dart';
|
||||||
import 'heatmap_page.dart';
|
import 'heatmap_page.dart';
|
||||||
|
|
@ -51,14 +52,7 @@ class _ShellPageState extends State<ShellPage> {
|
||||||
children: [
|
children: [
|
||||||
const DeltaMark(size: 36),
|
const DeltaMark(size: 36),
|
||||||
const SizedBox(height: ReclaimSpace.sm),
|
const SizedBox(height: ReclaimSpace.sm),
|
||||||
Text(
|
const BrandWordmark(size: 18),
|
||||||
'Recl∆Im',
|
|
||||||
style: t.labelLarge?.copyWith(
|
|
||||||
letterSpacing: 1.5,
|
|
||||||
color: ReclaimColors.signal,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Text(
|
Text(
|
||||||
'F∆I',
|
'F∆I',
|
||||||
style: t.labelSmall?.copyWith(
|
style: t.labelSmall?.copyWith(
|
||||||
|
|
|
||||||
55
app/lib/widgets/brand_wordmark.dart
Normal file
55
app/lib/widgets/brand_wordmark.dart
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import '../theme/reclaim_tokens.dart';
|
||||||
|
|
||||||
|
/// "Recl∆Im" wordmark with the ∆I glyphs petrol-coloured — the
|
||||||
|
/// brand rule of thumb in the fai_web universe: wherever the name
|
||||||
|
/// stands as a brand, the ∆I tinted petrol carries the F∆I-family
|
||||||
|
/// identity. As plain text it would all share the surrounding ink
|
||||||
|
/// colour.
|
||||||
|
///
|
||||||
|
/// Pass [size] for the base font size; the ∆I scales relative.
|
||||||
|
class BrandWordmark extends StatelessWidget {
|
||||||
|
const BrandWordmark({
|
||||||
|
super.key,
|
||||||
|
this.size = 24,
|
||||||
|
this.fontWeight = FontWeight.w600,
|
||||||
|
this.color,
|
||||||
|
this.letterSpacing = -0.5,
|
||||||
|
});
|
||||||
|
|
||||||
|
final double size;
|
||||||
|
final FontWeight fontWeight;
|
||||||
|
|
||||||
|
/// Color of the non-∆I letters. Defaults to the surface's
|
||||||
|
/// onSurface so the wordmark reads against whichever ink/paper
|
||||||
|
/// backdrop it sits on.
|
||||||
|
final Color? color;
|
||||||
|
final double letterSpacing;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final base = color ?? Theme.of(context).colorScheme.onSurface;
|
||||||
|
final style = TextStyle(
|
||||||
|
fontSize: size,
|
||||||
|
fontWeight: fontWeight,
|
||||||
|
fontFamily: ReclaimTypography.display,
|
||||||
|
color: base,
|
||||||
|
letterSpacing: letterSpacing,
|
||||||
|
height: 1.0,
|
||||||
|
);
|
||||||
|
return RichText(
|
||||||
|
text: TextSpan(
|
||||||
|
style: style,
|
||||||
|
children: [
|
||||||
|
const TextSpan(text: 'Recl'),
|
||||||
|
TextSpan(
|
||||||
|
text: '∆I',
|
||||||
|
style: style.copyWith(color: ReclaimColors.signal),
|
||||||
|
),
|
||||||
|
const TextSpan(text: 'm'),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_test/flutter_test.dart';
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
|
|
||||||
import 'package:reclaim_app/main.dart';
|
import 'package:reclaim_app/main.dart';
|
||||||
|
import 'package:reclaim_app/widgets/brand_wordmark.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
// Generous surface so NavigationRail + Heatmap fit without
|
// Generous surface so NavigationRail + Heatmap fit without
|
||||||
|
|
@ -20,7 +21,7 @@ void main() {
|
||||||
await tester.binding.setSurfaceSize(surfaceSize);
|
await tester.binding.setSurfaceSize(surfaceSize);
|
||||||
await tester.pumpWidget(const ReclaimApp());
|
await tester.pumpWidget(const ReclaimApp());
|
||||||
await tester.pump();
|
await tester.pump();
|
||||||
expect(find.text('Recl∆Im'), findsOneWidget);
|
expect(find.byType(BrandWordmark), findsWidgets);
|
||||||
expect(
|
expect(
|
||||||
find.widgetWithText(FilledButton, 'App öffnen (Demo-Modus)'),
|
find.widgetWithText(FilledButton, 'App öffnen (Demo-Modus)'),
|
||||||
findsOneWidget,
|
findsOneWidget,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue