selectedUnitColor (apache#23593)

akvelon · Oct 22, 2022 · 3863cc3 · 3863cc3
1 parent db75f11
commit 3863cc3
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 31 deletions.
diff --git a/learning/tour-of-beam/frontend/assets/svg/unit-progress-selected-0.svg b/learning/tour-of-beam/frontend/assets/svg/unit-progress-selected-0.svg
diff --git a/learning/tour-of-beam/frontend/lib/pages/tour/widgets/unit.dart b/learning/tour-of-beam/frontend/lib/pages/tour/widgets/unit.dart
@@ -56,23 +56,23 @@ class _UnitWidgetState extends State<UnitWidget> {
 
   @override
   Widget build(BuildContext context) {
+    final bool isSelected =
+        widget.contentTreeController.currentNode?.id == widget.unit.id;
     return ClickableWidget(
       onTap: () => widget.contentTreeController.onNodeTap(widget.unit),
-      child: Padding(
+      child: Container(
+        color: isSelected ? Theme.of(context).selectedRowColor : null,
         padding: const EdgeInsets.symmetric(vertical: BeamSizes.size10),
         child: Row(
           children: [
-            TourProgressIndicator(assetPath: Assets.svg.unitProgress0),
+            TourProgressIndicator(
+              // TODO(nausharipov): fix indicator colors in mockups
+              assetPath: isSelected
+                  ? Assets.svg.unitProgressSelected0
+                  : Assets.svg.unitProgress0,
+            ),
             Expanded(
-              child: Text(
-                widget.unit.title,
-                style: TextStyle(
-                  color: widget.contentTreeController.currentNode?.id ==
-                          widget.unit.id
-                      ? Theme.of(context).primaryColor
-                      : null,
-                ),
-              ),
+              child: Text(widget.unit.title),
             ),
           ],
         ),

diff --git a/playground/frontend/playground_components/lib/src/constants/colors.dart b/playground/frontend/playground_components/lib/src/constants/colors.dart
@@ -36,45 +36,47 @@ class BeamColors {
 
 class BeamGraphColors {
   static const node = BeamColors.grey3;
-  static const border = Color(0xFF45454E);
+  static const border = Color(0xff45454E);
   static const edge = BeamLightThemeColors.primary;
 }
 
 class BeamNotificationColors {
-  static const error = Color(0xFFE54545);
-  static const info = Color(0xFF3E67F6);
-  static const success = Color(0xFF37AC66);
-  static const warning = Color(0xFFEEAB00);
+  static const error = Color(0xffE54545);
+  static const info = Color(0xff3E67F6);
+  static const success = Color(0xff37AC66);
+  static const warning = Color(0xffEEAB00);
 }
 
 class BeamLightThemeColors {
-  static const border = Color(0xFFE5E5E5);
+  static const border = Color(0xffE5E5E5);
   static const primaryBackground = BeamColors.white;
   static const secondaryBackground = Color(0xffFCFCFC);
+  static const selectedUnitColor = Color(0xffE6E7E9);
   static const grey = Color(0xffE5E5E5);
-  static const listBackground = Color(0xFFA0A4AB);
+  static const listBackground = BeamColors.grey3;
   static const text = BeamColors.darkBlue;
   static const primary = Color(0xffE74D1A);
-  static const icon = Color(0xFFA0A4AB);
+  static const icon = BeamColors.grey3;
 
-  static const code1 = Color(0xFFDA2833);
-  static const code2 = Color(0xFF5929B4);
-  static const codeComment = Color(0xFF4C6B60);
-  static const codeBackground = Color(0xFFFEF6F3);
+  static const code1 = Color(0xffDA2833);
+  static const code2 = Color(0xff5929B4);
+  static const codeComment = Color(0xff4C6B60);
+  static const codeBackground = Color(0xffFEF6F3);
 }
 
 class BeamDarkThemeColors {
-  static const border = Color(0xFFA0A4AB);
+  static const border = BeamColors.grey3;
   static const primaryBackground = Color(0xff18181B);
   static const secondaryBackground = BeamColors.darkGrey;
+  static const selectedUnitColor = Color(0xff626267);
   static const grey = Color(0xff3F3F46);
-  static const listBackground = Color(0xFF606772);
-  static const text = Color(0xffFFFFFF);
+  static const listBackground = Color(0xff606772);
+  static const text = Color(0xffffffff);
   static const primary = Color(0xffF26628);
-  static const icon = Color(0xFF606772);
+  static const icon = Color(0xff606772);
 
-  static const code1 = Color(0xFFDA2833);
-  static const code2 = Color(0xFF5929B4);
-  static const codeComment = Color(0xFF4C6B60);
-  static const codeBackground = Color(0xFF231B1B);
+  static const code1 = Color(0xffDA2833);
+  static const code2 = Color(0xff5929B4);
+  static const codeComment = Color(0xff4C6B60);
+  static const codeBackground = Color(0xff231B1B);
 }
diff --git a/playground/frontend/playground_components/lib/src/theme/theme.dart b/playground/frontend/playground_components/lib/src/theme/theme.dart
@@ -121,6 +121,7 @@ final kLightTheme = ThemeData(
   ),
   primaryColor: BeamLightThemeColors.primary,
   scaffoldBackgroundColor: BeamLightThemeColors.secondaryBackground,
+  selectedRowColor: BeamLightThemeColors.selectedUnitColor,
   tabBarTheme: _getTabBarTheme(
     textColor: BeamLightThemeColors.text,
     indicatorColor: BeamLightThemeColors.primary,
@@ -195,6 +196,7 @@ final kDarkTheme = ThemeData(
   ),
   primaryColor: BeamDarkThemeColors.primary,
   scaffoldBackgroundColor: BeamDarkThemeColors.secondaryBackground,
+  selectedRowColor: BeamDarkThemeColors.selectedUnitColor,
   tabBarTheme: _getTabBarTheme(
     textColor: BeamDarkThemeColors.text,
     indicatorColor: BeamDarkThemeColors.primary,