feat: list group style

lib/screens/notifications.dart

@@ -119,41 +119,42 @@ $key: pullRequest(number: ${item.number}) {
     var group = entry.value;
     var repo = group.repo;
     return ListGroup(
-        title: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: <Widget>[
-            Text(
-              repo,
-              style: TextStyle(color: Colors.black, fontSize: 16),
-            ),
-            Link(
-              material: false,
-              onTap: () async {
-                await SettingsProvider.of(context)
-                    .putWithCredentials('/repos/$repo/notifications');
-                await _onSwitchTab();
-              },
-              child: Icon(
-                Octicons.check,
-                color: Colors.black45,
-                size: 24,
-              ),
-            ),
-          ],
-        ),
-        items: group.items,
-        itemBuilder: (item, index) {
-          return NotificationItem(
-            payload: item,
-            markAsRead: () {
-              if (mounted) {
-                setState(() {
-                  groupMap[entry.key].items[index].unread = false;
-                });
-              }
+      title: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: <Widget>[
+          Text(
+            repo,
+            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
+          ),
+          Link(
+            material: false,
+            onTap: () async {
+              await SettingsProvider.of(context)
+                  .putWithCredentials('/repos/$repo/notifications');
+              await _onSwitchTab();
             },
-          );
-        });
+            child: Icon(
+              Octicons.check,
+              color: Colors.black45,
+              size: 24,
+            ),
+          ),
+        ],
+      ),
+      items: group.items,
+      itemBuilder: (item, index) {
+        return NotificationItem(
+          payload: item,
+          markAsRead: () {
+            if (mounted) {
+              setState(() {
+                groupMap[entry.key].items[index].unread = false;
+              });
+            }
+          },
+        );
+      },
+    );
   }
 
   Future<void> _onSwitchTab([int index]) async {
@@ -257,9 +258,10 @@ $key: pullRequest(number: ${item.number}) {
         return groupMap.isEmpty
             ? EmptyWidget()
             : Column(
-                children: groupMap.entries
-                    .map((entry) => _buildGroupItem(context, entry))
-                    .toList());
+                children: [Padding(padding: EdgeInsets.only(top: 10))]..addAll(
+                    groupMap.entries
+                        .map((entry) => _buildGroupItem(context, entry))
+                        .toList()));
       },
     );
   }

lib/screens/user.dart

@@ -79,17 +79,18 @@ class _UserScreenState extends State<UserScreen> {
     }
 
     return ListGroup(
-        title: Text(
-          title,
-          style: TextStyle(fontSize: 16),
-        ),
-        items: items,
-        itemBuilder: (item, _) {
-          return RepoItem(
-            item,
-            showOwner: item['owner']['login'] != widget.login,
-          );
-        });
+      title: Text(
+        title,
+        style: TextStyle(fontSize: 16),
+      ),
+      items: items,
+      itemBuilder: (item, _) {
+        return RepoItem(
+          item,
+          showOwner: item['owner']['login'] != widget.login,
+        );
+      },
+    );
   }
 
   Widget _buildEmail(payload) {

lib/widgets/list_group.dart

@@ -1,17 +1,25 @@
 import 'package:flutter/material.dart';
 import '../widgets/empty.dart';
 
+var borderColor = Color.fromRGBO(27, 31, 35, .15);
+
 class ListGroup<T> extends StatelessWidget {
   final Widget title;
   final List<T> items;
   final Widget Function(T item, int index) itemBuilder;
+  final EdgeInsetsGeometry padding;
 
-  ListGroup({this.title, this.items, this.itemBuilder});
+  ListGroup({
+    @required this.title,
+    @required this.items,
+    @required this.itemBuilder,
+    this.padding = const EdgeInsets.only(left: 10, right: 10, bottom: 10),
+  });
 
   Widget _buildItem(MapEntry<int, T> entry) {
     return Container(
       decoration: BoxDecoration(
-        border: Border(bottom: BorderSide(color: Colors.black12)),
+        border: Border(top: BorderSide(color: borderColor)),
       ),
       child: itemBuilder(entry.value, entry.key),
     );
@@ -19,16 +27,19 @@ class ListGroup<T> extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: EdgeInsets.all(10),
+    return Container(
+      padding: padding,
       child: Container(
-        decoration: BoxDecoration(border: Border.all(color: Colors.black12)),
+        decoration: BoxDecoration(
+          border: Border.all(color: borderColor),
+          borderRadius: BorderRadius.all(Radius.circular(3)),
+        ),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
             Container(
+              color: Color(0xfff6f8fa),
               padding: EdgeInsets.all(8),
-              color: Color(0x10000000),
               child: title,
             ),
             items.isEmpty