ayushyaandClaude Opus 5.5
56784ef212
Replaces the Material 3 screens with the Noo design system: warm neutrals, one violet accent, pill controls, Schibsted Grotesk/ Instrument Sans, Lucide icons, no gradients/shadows. - New lib/widgets/noo/ component kit (core, lists, files, media, nav, overlays) plus lib/theme/design_tokens.dart for the color/type/space/ radius/motion tokens. - Rebuilt the app shell (top/bottom bars, drawer, desktop sidebar and toolbar), every tab (Files/Offline, Photos, Favorites, Recent, Activity, Trash, Shares), Settings, the lock and login screens, the media viewer, search, the details/share sheets, and the share-upload and move/copy destination pickers. - Added a design canvas (linked from DESIGN_SYSTEM.md) covering the screens the spec didn't already describe, with matching Android and iOS chrome; wrote up the approved recipes into DESIGN_SYSTEM.md §4. - Removed now-dead legacy widgets (media_grid_tile, swipeable_item, sync_status_badge, selectable_thumbnail) and updated architecture.md/styling.md/standards.md to describe the new structure and component/testing conventions. - Added widget tests for the noo/ component kit. This is a UI-only rework: no provider/model/service behavior changed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
62 lines
1.7 KiB
Dart
62 lines
1.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import '../../../theme/design_tokens.dart';
|
|
|
|
/// Initials circle on a secondary-palette colour; the current user uses
|
|
/// accent-soft (Noo Design System project, `components/core/Avatar.jsx`).
|
|
/// Sizes: 30-32 in bars, 36 in lists, 48 in the drawer, 52-56 on the
|
|
/// account card.
|
|
class NooAvatar extends StatelessWidget {
|
|
final String? initials;
|
|
final double size;
|
|
/// One of [NooColors.avatarPalette]; ignored when [current] or [icon] is set.
|
|
final Color? color;
|
|
final bool current;
|
|
/// Show an icon instead of initials (e.g. a group share).
|
|
final IconData? icon;
|
|
|
|
const NooAvatar({
|
|
super.key,
|
|
this.initials,
|
|
this.size = 36,
|
|
this.color,
|
|
this.current = false,
|
|
this.icon,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colors = context.nooColors;
|
|
final Color bg;
|
|
final Color fg;
|
|
if (current) {
|
|
bg = colors.accentSoft;
|
|
fg = colors.accentText;
|
|
} else if (icon != null) {
|
|
bg = colors.surface2;
|
|
fg = colors.fg2;
|
|
} else {
|
|
bg = color ?? NooColors.avatarPalette.first;
|
|
fg = NooColors.avatarTextColor;
|
|
}
|
|
|
|
return Container(
|
|
width: size,
|
|
height: size,
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(color: bg, shape: BoxShape.circle),
|
|
child: icon != null
|
|
? Icon(icon, size: (size * 0.5).round().toDouble(), color: fg)
|
|
: Text(
|
|
initials ?? '',
|
|
style: GoogleFonts.instrumentSans(
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: (size * 0.36).round().toDouble(),
|
|
height: 1,
|
|
color: fg,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|