Show user membership

lib/ui/widgets/tablet_mode/user_page_tablet.dart

@@ -10,6 +10,8 @@ import 'package:comunic/ui/widgets/post_create_form_widget.dart';
 import 'package:comunic/ui/widgets/posts_list_widget.dart';
 import 'package:comunic/utils/account_utils.dart';
 import 'package:comunic/utils/conversations_utils.dart';
+import 'package:comunic/utils/date_utils.dart';
+import 'package:comunic/utils/intl_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
@@ -138,7 +140,19 @@ class _UserPageTabletState extends State<UserPageTablet> {
       );
 
   /// Build user information card
-  Widget _buildAboutCard() => Container();
+  Widget _buildAboutCard() => _LeftPaneContainer(
+        child: Column(
+          children: <Widget>[
+            // User membership
+            _AboutUserEntry(
+                icon: Icons.access_time,
+                title: tr("Membership"),
+                value: tr("Member for %t%", args: {
+                  "t": diffTimeFromNowToStr(_userInfo.accountCreationTime)
+                })),
+          ],
+        ),
+      );
 }
 
 class _LeftPaneContainer extends StatelessWidget {
@@ -171,3 +185,42 @@ class _MainCardSpacer extends StatelessWidget {
   Widget build(BuildContext context) =>
       visible ? SizedBox(height: 10) : Container();
 }
+
+class _AboutUserEntry extends StatelessWidget {
+  final IconData icon;
+  final String title;
+  final String value;
+  final bool visible;
+
+  const _AboutUserEntry({
+    Key key,
+    @required this.icon,
+    @required this.title,
+    @required this.value,
+    this.visible = true,
+  })  : assert(icon != null),
+        assert(title != null),
+        assert(visible != null),
+        super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    if (!visible) return Container();
+
+    return ListTile(
+      title: RichText(
+        text: TextSpan(
+          children: [
+            WidgetSpan(
+              child: Icon(icon, size: 15),
+              alignment: PlaceholderAlignment.middle,
+            ),
+            TextSpan(text: " $title")
+          ],
+        ),
+      ),
+      subtitle: Text(value),
+      dense: true,
+    );
+  }
+}