Small tweaks to UI (#2816)

* Fix divider theme configuration

* Fix typo

* Use larger text in sample menu

* Remove dividers from sample dropdown

* Modify "new" menu labels

* Use Roboto Mono in console

* Fix button colors

* Update lightDividerColor

* remove codemirror themes directory

* Specify error and warning colors

* format

* Update keyboard shortcut button color and warning background color

* fix errors

pkgs/sketch_pad/lib/console.dart

@@ -49,7 +49,9 @@ class _ConsoleWidgetState extends State<ConsoleWidget> {
       decoration: BoxDecoration(
         color: theme.scaffoldBackgroundColor,
         border: widget.showDivider
-            ? Border(top: Divider.createBorderSide(context, width: 8.0))
+            ? Border(
+                top: Divider.createBorderSide(context,
+                    width: 8.0, color: theme.colorScheme.surface))
             : null,
       ),
       padding: const EdgeInsets.all(denseSpacing),
@@ -63,7 +65,8 @@ class _ConsoleWidgetState extends State<ConsoleWidget> {
             textInputAction: TextInputAction.newline,
             expands: true,
             decoration: null,
-            style: theme.textTheme.bodyMedium,
+            style:
+                theme.textTheme.bodyMedium!.copyWith(fontFamily: 'RobotoMono'),
             readOnly: true,
           ),
           Padding(

pkgs/sketch_pad/lib/main.dart

@@ -141,11 +141,14 @@ class _DartPadAppState extends State<DartPadApp> {
         colorScheme:
             ColorScheme.fromSeed(seedColor: lightPrimaryColor).copyWith(
           surface: lightSurfaceColor,
+          onSurface: Colors.black,
+          surfaceVariant: lightSurfaceVariantColor,
+          onPrimary: lightLinkButtonColor,
         ),
         brightness: Brightness.light,
-        dividerColor: lightSurfaceColor,
+        dividerColor: lightDividerColor,
         dividerTheme: DividerThemeData(
-          color: lightSurfaceColor,
+          color: lightDividerColor,
         ),
         scaffoldBackgroundColor: Colors.white,
         menuButtonTheme: MenuButtonThemeData(
@@ -156,15 +159,22 @@ class _DartPadAppState extends State<DartPadApp> {
       ),
       darkTheme: ThemeData(
         useMaterial3: true,
-        colorSchemeSeed: darkPrimaryColor,
+        colorScheme: ColorScheme.fromSeed(seedColor: darkPrimaryColor).copyWith(
+          brightness: Brightness.dark,
+          surface: darkSurfaceColor,
+          onSurface: Colors.white,
+          surfaceVariant: darkSurfaceVariantColor,
+          onSurfaceVariant: Colors.white,
+          onPrimary: darkLinkButtonColor,
+        ),
         brightness: Brightness.dark,
-        dividerColor: darkSurfaceColor,
+        dividerColor: darkDividerColor,
         dividerTheme: DividerThemeData(
-          color: darkSurfaceColor,
+          color: darkDividerColor,
         ),
         textButtonTheme: TextButtonThemeData(
           style: ButtonStyle(
-            foregroundColor: MaterialStateProperty.all(Colors.white),
+            foregroundColor: MaterialStatePropertyAll(darkLinkButtonColor),
           ),
         ),
         scaffoldBackgroundColor: darkScaffoldColor,
@@ -265,14 +275,16 @@ class _DartPadMainPageState extends State<DartPadMainPage> {
       appBar: widget.embedMode
           ? null
           : AppBar(
-              backgroundColor: theme.dividerColor,
+              backgroundColor: theme.colorScheme.surface,
               title: SizedBox(
                 height: toolbarItemHeight,
                 child: Row(
                   children: [
                     dartLogo(width: 32),
                     const SizedBox(width: denseSpacing),
-                    const Text(appName),
+                    Text(appName,
+                        style: TextStyle(
+                            color: Theme.of(context).colorScheme.onSurface)),
                     const SizedBox(width: defaultSpacing * 4),
                     NewSnippetWidget(appServices: appServices),
                     const SizedBox(width: denseSpacing),
@@ -320,8 +332,8 @@ class _DartPadMainPageState extends State<DartPadMainPage> {
             child: Center(
               child: SplitView(
                 viewMode: SplitViewMode.Horizontal,
-                gripColor: theme.dividerTheme.color!,
-                gripColorActive: theme.dividerTheme.color!,
+                gripColor: theme.colorScheme.surface,
+                gripColorActive: theme.colorScheme.surface,
                 gripSize: defaultGripSize,
                 controller: mainSplitter,
                 children: [
@@ -559,15 +571,12 @@ class StatusLineWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final colorScheme = Theme.of(context).colorScheme;
-
-    final textColor = colorScheme.onPrimaryContainer;
 
     final appModel = Provider.of<AppModel>(context);
 
     return Container(
       decoration: BoxDecoration(
-        color: theme.dividerColor,
+        color: theme.colorScheme.surface,
       ),
       padding: const EdgeInsets.symmetric(
         vertical: denseSpacing,
@@ -589,7 +598,7 @@ class StatusLineWidget extends StatelessWidget {
               ),
               child: Icon(
                 Icons.keyboard,
-                color: textColor,
+                color: Theme.of(context).colorScheme.onPrimary,
                 size: 20,
               ),
             ),
@@ -676,11 +685,11 @@ class NewSnippetWidget extends StatelessWidget {
 
   static final _menuItems = [
     (
-      label: 'New Dart snippet',
+      label: 'Dart snippet',
       icon: dartLogo(),
       kind: 'dart',
     ),
-    (label: 'New Flutter snippet', icon: flutterLogo(), kind: 'flutter'),
+    (label: 'Flutter snippet', icon: flutterLogo(), kind: 'flutter'),
   ];
 
   const NewSnippetWidget({
@@ -739,7 +748,10 @@ class ListSamplesWidget extends StatelessWidget {
       for (final category in categories) ...[
         MenuItemButton(
           onPressed: null,
-          child: Text(category),
+          child: Text(
+            category,
+            style: Theme.of(context).textTheme.bodyLarge,
+          ),
         ),
         for (final sample in Samples.categories[category]!)
           MenuItemButton(
@@ -751,7 +763,6 @@ class ListSamplesWidget extends StatelessWidget {
               child: Text(sample.name),
             ),
           ),
-        const Divider(),
       ]
     ];
 
@@ -817,7 +828,7 @@ class OverflowMenu extends StatelessWidget {
       uri: 'https://dart.dev',
     ),
     (
-      label: 'flutter.dec',
+      label: 'flutter.dev',
       uri: 'https://flutter.dev',
     ),
     (

pkgs/sketch_pad/lib/problems.dart

@@ -44,7 +44,6 @@ class ProblemsTableWidget extends StatelessWidget {
       child: Container(
         decoration: BoxDecoration(
           color: colorScheme.surfaceVariant,
-          border: Border(top: Divider.createBorderSide(context, width: 1.0)),
         ),
         padding: const EdgeInsets.all(denseSpacing),
         child: ListView.builder(
@@ -139,13 +138,13 @@ extension AnalysisIssueExtension on AnalysisIssue {
   Color colorFor({bool darkMode = true}) {
     switch (kind) {
       case 'error':
-        return darkMode ? Colors.red : Colors.red;
+        return darkMode ? darkErrorColor : lightErrorColor;
       case 'warning':
-        return darkMode ? Colors.yellow : Colors.yellow;
+        return darkMode ? darkWarningColor : lightWarningColor;
       case 'info':
-        return darkMode ? Colors.blue : Colors.blue.shade300;
+        return darkMode ? darkInfoColor : lightInfoColor;
       default:
-        return darkMode ? Colors.grey : Colors.grey;
+        return darkMode ? darkIssueColor : lightIssueColor;
     }
   }
 

pkgs/sketch_pad/lib/theme.dart

@@ -23,10 +23,24 @@ const double toolbarItemHeight = 40.0;
 
 Color lightPrimaryColor = const Color(0xff1967D2);
 Color lightSurfaceColor = const Color(0xFFF5F5F7);
+Color lightSurfaceVariantColor = const Color(0xFFECECF1);
+Color lightDividerColor = const Color(0xFFDCE2E8);
+Color lightLinkButtonColor = lightPrimaryColor;
+Color lightErrorColor = Colors.red.shade400;
+Color lightWarningColor = Colors.yellow.shade700;
+Color lightInfoColor = Colors.blue.shade400;
+Color lightIssueColor = Colors.grey.shade400;
 
 Color darkPrimaryColor = const Color(0xFF1c2834);
-Color darkSurfaceColor = const Color(0xFF1c2834);
+Color darkSurfaceColor = const Color(0xFF1C2834);
+Color darkSurfaceVariantColor = const Color(0xFF2B3B4F);
+Color darkDividerColor = const Color(0xFF1C2834);
 Color darkScaffoldColor = const Color(0xFF0C141D);
+Color darkLinkButtonColor = Colors.white;
+Color darkErrorColor = Colors.red.shade500;
+Color darkWarningColor = Colors.yellow.shade500;
+Color darkInfoColor = Colors.blue.shade500;
+Color darkIssueColor = Colors.grey.shade700;
 
 Color runButtonColor = const Color(0xFF168afd);
 

pkgs/sketch_pad/pubspec.yaml

@@ -34,6 +34,12 @@ flutter:
   assets:
     - assets/dart_logo_128.png
     - assets/flutter_logo_192.png
+  fonts:
+    - family: RobotoMono
+      fonts:
+        - asset: assets/fonts/RobotoMono-Regular.ttf
+        - asset: assets/fonts/RobotoMono-Bold.ttf
+          weight: 700
 
 dependency_overrides:
   dartpad_shared: