3505 make level bar and search bar have same background and hover color (#3516)

* chore: made progress bar background match search bar and add hover indicator

* formatting

---------

Co-authored-by: ggurdin <ggurdin@gmail.com>
This commit is contained in:
avashilling 2025-07-21 16:58:11 -04:00 committed by GitHub
parent f96cdf067e
commit b06d368058
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 53 additions and 31 deletions

View file

@ -12,6 +12,7 @@ import 'package:fluffychat/pangea/analytics_summary/learning_progress_indicator_
import 'package:fluffychat/pangea/analytics_summary/progress_indicator.dart';
import 'package:fluffychat/pangea/analytics_summary/progress_indicators_enum.dart';
import 'package:fluffychat/pangea/learning_settings/pages/settings_learning.dart';
import 'package:fluffychat/widgets/hover_builder.dart';
import 'package:fluffychat/widgets/matrix.dart';
/// A summary of "My Analytics" shown at the top of the chat list
@ -166,37 +167,58 @@ class LearningProgressIndicatorsState
const SizedBox(height: 6),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
context.go("/rooms/analytics?mode=level");
},
child: Row(
spacing: 8.0,
children: [
Expanded(
child: LearningProgressBar(
level: _constructsModel.level,
totalXP: _constructsModel.totalXP,
height: 24.0,
loading: _loading,
child: HoverBuilder(
builder: (context, hovered) {
return Container(
decoration: BoxDecoration(
color: hovered
? Theme.of(context)
.colorScheme
.primary
.withAlpha((0.2 * 255).round())
: Colors.transparent,
borderRadius: BorderRadius.circular(36.0),
),
padding: const EdgeInsets.symmetric(
vertical: 2.0,
horizontal: 4.0,
),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
context.go("/rooms/analytics?mode=level");
},
child: Row(
spacing: 8.0,
children: [
Expanded(
child: LearningProgressBar(
level: _constructsModel.level,
totalXP: _constructsModel.totalXP,
height: 24.0,
loading: _loading,
),
),
if (!_loading)
Text(
"${_constructsModel.level}",
style: Theme.of(context)
.textTheme
.titleLarge
?.copyWith(
fontWeight: FontWeight.bold,
color: Theme.of(context)
.colorScheme
.primary,
),
),
],
),
),
if (!_loading)
Text(
"${_constructsModel.level}",
style: Theme.of(context)
.textTheme
.titleLarge
?.copyWith(
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.primary,
),
),
],
),
),
),
);
},
),
),
const SizedBox(height: 16.0),

View file

@ -31,7 +31,7 @@ class ProgressBarState extends State<ProgressBar> {
get progressBarDetails => ProgressBarDetails(
totalWidth: width,
borderColor: Theme.of(context).colorScheme.primary.withAlpha(128),
borderColor: Theme.of(context).colorScheme.secondaryContainer,
height: widget.height ?? 14,
);

View file

@ -22,7 +22,7 @@ class ProgressBarBackground extends StatelessWidget {
borderRadius: const BorderRadius.all(
Radius.circular(AppConfig.borderRadius),
),
color: details.borderColor.withAlpha(50),
color: details.borderColor,
),
),
);