diff --git a/apps/mobile/packages/features/staff/profile/lib/src/presentation/navigation/profile_navigator.dart b/apps/mobile/packages/features/staff/profile/lib/src/presentation/navigation/profile_navigator.dart index 286486a6..d9f46671 100644 --- a/apps/mobile/packages/features/staff/profile/lib/src/presentation/navigation/profile_navigator.dart +++ b/apps/mobile/packages/features/staff/profile/lib/src/presentation/navigation/profile_navigator.dart @@ -18,7 +18,7 @@ extension ProfileNavigator on IModularNavigator { /// Navigates to the experience page. void pushExperience() { - pushNamed('/profile/experience'); + pushNamed('./experience'); } /// Navigates to the attire page. diff --git a/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/pages/experience_page.dart b/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/pages/experience_page.dart index 719e3122..5e88170a 100644 --- a/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/pages/experience_page.dart +++ b/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/pages/experience_page.dart @@ -4,7 +4,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_modular/flutter_modular.dart'; import '../blocs/experience_bloc.dart'; -import '../widgets/experience_badge.dart'; import '../widgets/experience_custom_input.dart'; import '../widgets/experience_section_title.dart'; @@ -63,21 +62,9 @@ class _ExperienceView extends StatelessWidget { return Scaffold( backgroundColor: UiColors.background, - appBar: AppBar( - backgroundColor: UiColors.bgPopup, - elevation: 0, - leading: IconButton( - icon: Icon(UiIcons.chevronLeft, color: UiColors.textSecondary), - onPressed: () => Modular.to.pop(), - ), - title: Text( - i18n.title, - style: UiTypography.title1m.copyWith(color: UiColors.textPrimary), - ), - bottom: PreferredSize( - preferredSize: const Size.fromHeight(1.0), - child: Container(color: UiColors.border, height: 1.0), - ), + appBar: UiAppBar( + title: i18n.title, + onLeadingPressed: () => Modular.to.pop(), ), body: BlocConsumer( listener: (context, state) { @@ -105,12 +92,14 @@ class _ExperienceView extends StatelessWidget { runSpacing: UiConstants.space2, children: state.availableIndustries .map( - (i) => ExperienceBadge( + (i) => UiChip( label: _getIndustryLabel(i18n.industries, i), isSelected: state.selectedIndustries.contains(i), onTap: () => BlocProvider.of(context) .add(ExperienceIndustryToggled(i)), - isIndustry: true, + variant: state.selectedIndustries.contains(i) + ? UiChipVariant.primary + : UiChipVariant.secondary, ), ) .toList(), @@ -127,11 +116,14 @@ class _ExperienceView extends StatelessWidget { runSpacing: UiConstants.space2, children: state.availableSkills .map( - (s) => ExperienceBadge( + (s) => UiChip( label: _getSkillLabel(i18n.skills, s), isSelected: state.selectedSkills.contains(s), onTap: () => BlocProvider.of(context) .add(ExperienceSkillToggled(s)), + variant: state.selectedSkills.contains(s) + ? UiChipVariant.primary + : UiChipVariant.secondary, ), ) .toList(), @@ -171,24 +163,9 @@ class _ExperienceView extends StatelessWidget { spacing: UiConstants.space2, runSpacing: UiConstants.space2, children: customSkills.map((skill) { - return Container( - padding: EdgeInsets.symmetric( - horizontal: UiConstants.space3, - vertical: UiConstants.space2, - ), - decoration: BoxDecoration( - color: UiColors.accent, - borderRadius: UiConstants.radiusFull, - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - skill, - style: UiTypography.body2m.copyWith(color: UiColors.textPrimary), - ), - ], - ), + return UiChip( + label: skill, + variant: UiChipVariant.accent, ); }).toList(), ), @@ -206,32 +183,22 @@ class _ExperienceView extends StatelessWidget { child: SafeArea( child: SizedBox( width: double.infinity, - child: ElevatedButton( + child: UiButton.primary( onPressed: state.status == ExperienceStatus.loading ? null : () => BlocProvider.of(context).add(ExperienceSubmitted()), - style: ElevatedButton.styleFrom( - backgroundColor: UiColors.primary, - foregroundColor: UiColors.primaryForeground, - padding: EdgeInsets.symmetric(vertical: UiConstants.space4), - shape: RoundedRectangleBorder( - borderRadius: UiConstants.radiusFull, - ), - elevation: 0, - ), + fullWidth: true, + text: state.status == ExperienceStatus.loading ? null : i18n.save_button, child: state.status == ExperienceStatus.loading ? SizedBox( height: 20.0, width: 20.0, child: CircularProgressIndicator( strokeWidth: 2, - valueColor: AlwaysStoppedAnimation(UiColors.primaryForeground), + valueColor: AlwaysStoppedAnimation(UiColors.white), // UiColors.primaryForeground is white mostly ), ) - : Text( - i18n.save_button, - style: UiTypography.title2b, - ), + : null, ), ), ), diff --git a/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/widgets/experience_badge.dart b/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/widgets/experience_badge.dart deleted file mode 100644 index 2daf994c..00000000 --- a/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/widgets/experience_badge.dart +++ /dev/null @@ -1,43 +0,0 @@ -import 'package:design_system/design_system.dart'; -import 'package:flutter/material.dart'; - -class ExperienceBadge extends StatelessWidget { - final String label; - final bool isSelected; - final VoidCallback onTap; - final bool isIndustry; - - const ExperienceBadge({ - super.key, - required this.label, - required this.isSelected, - required this.onTap, - this.isIndustry = false, - }); - - @override - Widget build(BuildContext context) { - return GestureDetector( - onTap: onTap, - child: Container( - padding: EdgeInsets.symmetric( - horizontal: UiConstants.space3, - vertical: UiConstants.space2, - ), - decoration: BoxDecoration( - color: isSelected ? UiColors.primary : Colors.transparent, - borderRadius: UiConstants.radiusFull, - border: Border.all( - color: isSelected ? UiColors.primary : UiColors.border, - ), - ), - child: Text( - label, - style: UiTypography.body2m.copyWith( - color: isSelected ? UiColors.primaryForeground : UiColors.textSecondary, - ), - ), - ), - ); - } -} diff --git a/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/widgets/experience_custom_input.dart b/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/widgets/experience_custom_input.dart index 7d00c299..c6d21cd0 100644 --- a/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/widgets/experience_custom_input.dart +++ b/apps/mobile/packages/features/staff/profile_sections/onboarding/experience/lib/src/presentation/widgets/experience_custom_input.dart @@ -33,49 +33,16 @@ class _ExperienceCustomInputState extends State { return Row( children: [ Expanded( - child: TextField( + child: UiTextField( controller: _controller, onSubmitted: (_) => _addSkill(), - style: UiTypography.body1r.copyWith(color: UiColors.textPrimary), - decoration: InputDecoration( - hintText: t.staff.onboarding.experience.custom_skill_hint, - hintStyle: UiTypography.body1r.copyWith(color: UiColors.textPlaceholder), - contentPadding: EdgeInsets.symmetric( - horizontal: UiConstants.space3, - vertical: UiConstants.space3, - ), - border: OutlineInputBorder( - borderRadius: UiConstants.radiusMd, - borderSide: BorderSide(color: UiColors.border), - ), - enabledBorder: OutlineInputBorder( - borderRadius: UiConstants.radiusMd, - borderSide: BorderSide(color: UiColors.border), - ), - focusedBorder: OutlineInputBorder( - borderRadius: UiConstants.radiusMd, - borderSide: BorderSide(color: UiColors.primary), - ), - ), - fillColor: UiColors.bgPopup, - filled: true, - ), + hintText: t.staff.onboarding.experience.custom_skill_hint, ), ), SizedBox(width: UiConstants.space2), - InkWell( + UiIconButton.primary( + icon: UiIcons.add, onTap: _addSkill, - child: Container( - width: 48, - height: 48, - decoration: BoxDecoration( - color: UiColors.primary, - borderRadius: BorderRadius.circular(UiConstants.radiusMd), - ), - child: Center( - child: Icon(UiIcons.add, color: UiColors.primaryForeground), - ), - ), ), ], );