design:

lib/components/fluffy_banner.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class FluffyBanner extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Image.asset(Theme.of(context).brightness == Brightness.dark
+        ? 'assets/banner_dark.png'
+        : 'assets/banner.png');
+  }
+}

lib/components/one_page_card.dart

@@ -0,0 +1,40 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+class OnePageCard extends StatelessWidget {
+  final Widget child;
+
+  const OnePageCard({Key key, this.child}) : super(key: key);
+
+  static const int alpha = 64;
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).backgroundColor,
+        gradient: LinearGradient(
+          begin: Alignment.topRight,
+          end: Alignment.bottomLeft,
+          stops: [
+            0.1,
+            0.4,
+            0.6,
+            0.9,
+          ],
+          colors: [
+            Theme.of(context).secondaryHeaderColor.withAlpha(alpha),
+            Theme.of(context).primaryColor.withAlpha(alpha),
+            Theme.of(context).accentColor.withAlpha(alpha),
+            Theme.of(context).backgroundColor.withAlpha(alpha),
+          ],
+        ),
+      ),
+      padding: EdgeInsets.symmetric(
+        horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0),
+        vertical: max((MediaQuery.of(context).size.height - 800) / 2, 0),
+      ),
+      child: Card(child: child),
+    );
+  }
+}

lib/config/themes.dart

@@ -66,6 +66,13 @@ abstract class FluffyThemes {
         padding: EdgeInsets.all(12),
       ),
     ),
+    cardTheme: CardTheme(
+      elevation: 7,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+      ),
+      clipBehavior: Clip.hardEdge,
+    ),
     inputDecorationTheme: InputDecorationTheme(
       border: OutlineInputBorder(
           borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
@@ -112,6 +119,13 @@ abstract class FluffyThemes {
         borderRadius: BorderRadius.circular(AppConfig.borderRadius),
       ),
     ),
+    cardTheme: CardTheme(
+      elevation: 7,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+      ),
+      clipBehavior: Clip.hardEdge,
+    ),
     floatingActionButtonTheme: FloatingActionButtonThemeData(
       backgroundColor: AppConfig.primaryColor,
       foregroundColor: Colors.white,
@@ -128,6 +142,17 @@ abstract class FluffyThemes {
         ),
       ),
     ),
+    elevatedButtonTheme: ElevatedButtonThemeData(
+      style: ElevatedButton.styleFrom(
+        primary: AppConfig.primaryColor,
+        onPrimary: Colors.white,
+        elevation: 7,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+        ),
+        padding: EdgeInsets.all(12),
+      ),
+    ),
     appBarTheme: AppBarTheme(
       brightness: Brightness.dark,
       color: Color(0xff1D1D1D),

lib/views/chat_list.dart

@@ -204,6 +204,9 @@ class _ChatListState extends State<ChatList> {
           return Scaffold(
             appBar: appBar ??
                 AppBar(
+                  elevation: AdaptivePageLayout.of(context).columnMode(context)
+                      ? 1
+                      : null,
                   leading: selectMode == SelectMode.normal
                       ? null
                       : IconButton(

lib/views/homeserver_picker.dart

@@ -1,11 +1,12 @@
 import 'dart:async';
-import 'dart:math';
 
 import 'package:adaptive_page_layout/adaptive_page_layout.dart';
 import 'package:famedlysdk/famedlysdk.dart';
 import 'package:fluffychat/components/default_app_bar_search_field.dart';
+import 'package:fluffychat/components/fluffy_banner.dart';
 import 'package:fluffychat/components/matrix.dart';
 import 'package:fluffychat/app_config.dart';
+import 'package:fluffychat/components/one_page_card.dart';
 import 'package:fluffychat/config/setting_keys.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 
@@ -120,9 +121,6 @@ class _HomeserverPickerState extends State<HomeserverPicker> {
 
   @override
   Widget build(BuildContext context) {
-    final padding = EdgeInsets.symmetric(
-      horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0),
-    );
     if (kIsWeb) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         final token =
@@ -130,14 +128,16 @@ class _HomeserverPickerState extends State<HomeserverPicker> {
         _loginWithToken(token);
       });
     }
-    return Scaffold(
+    return OnePageCard(
+      child: Scaffold(
         appBar: AppBar(
+          titleSpacing: 8,
           title: DefaultAppBarSearchField(
             prefixText: 'https://',
             hintText: L10n.of(context).enterYourHomeserver,
             searchController: _controller,
             suffix: Icon(Icons.edit_outlined),
-          padding: padding,
+            padding: EdgeInsets.zero,
             onChanged: (s) => _domain = s,
             readOnly: !AppConfig.allowOtherHomeservers,
             onSubmit: (_) => _checkHomeserverAction(context),
@@ -145,13 +145,11 @@ class _HomeserverPickerState extends State<HomeserverPicker> {
           elevation: 0,
         ),
         body: SafeArea(
-        child: Padding(
-          padding: padding,
           child: ListView(
             children: [
               Hero(
                 tag: 'loginBanner',
-                child: Image.asset('assets/banner.png'),
+                child: FluffyBanner(),
               ),
               Padding(
                 padding: const EdgeInsets.all(16.0),
@@ -167,10 +165,7 @@ class _HomeserverPickerState extends State<HomeserverPicker> {
             ],
           ),
         ),
-      ),
-      bottomNavigationBar: Padding(
-        padding: padding,
-        child: Column(
+        bottomNavigationBar: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
             Hero(

lib/views/login.dart

@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:math';
 
 import 'package:adaptive_dialog/adaptive_dialog.dart';
 import 'package:adaptive_page_layout/adaptive_page_layout.dart';
 import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/components/one_page_card.dart';
 import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:fluffychat/components/matrix.dart';
 
@@ -184,7 +184,8 @@ class _LoginState extends State<Login> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return OnePageCard(
+      child: Scaffold(
         appBar: AppBar(
           leading: loading ? Container() : BackButton(),
           elevation: 0,
@@ -198,9 +199,6 @@ class _LoginState extends State<Login> {
         ),
         body: Builder(builder: (context) {
           return ListView(
-          padding: EdgeInsets.symmetric(
-              horizontal:
-                  max((MediaQuery.of(context).size.width - 600) / 2, 0)),
             children: <Widget>[
               Padding(
                 padding: const EdgeInsets.all(12.0),
@@ -274,6 +272,7 @@ class _LoginState extends State<Login> {
             ],
           );
         }),
+      ),
     );
   }
 }

lib/views/sign_up.dart

@@ -1,10 +1,10 @@
-import 'dart:math';
-
 import 'package:adaptive_page_layout/adaptive_page_layout.dart';
 import 'package:famedlysdk/famedlysdk.dart';
 import 'package:file_picker_cross/file_picker_cross.dart';
+import 'package:fluffychat/components/fluffy_banner.dart';
 
 import 'package:fluffychat/components/matrix.dart';
+import 'package:fluffychat/components/one_page_card.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -67,7 +67,8 @@ class _SignUpState extends State<SignUp> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return OnePageCard(
+      child: Scaffold(
         appBar: AppBar(
           elevation: 0,
           leading: loading ? Container() : BackButton(),
@@ -79,14 +80,10 @@ class _SignUpState extends State<SignUp> {
                 .replaceFirst('https://', ''),
           ),
         ),
-      body: ListView(
-          padding: EdgeInsets.symmetric(
-              horizontal:
-                  max((MediaQuery.of(context).size.width - 600) / 2, 0)),
-          children: <Widget>[
+        body: ListView(children: <Widget>[
           Hero(
             tag: 'loginBanner',
-              child: Image.asset('assets/banner.png'),
+            child: FluffyBanner(),
           ),
           SizedBox(height: 16),
           Padding(
@@ -164,6 +161,7 @@ class _SignUpState extends State<SignUp> {
             ),
           ),
         ]),
+      ),
     );
   }
 }

lib/views/sign_up_password.dart

@@ -1,11 +1,10 @@
-import 'dart:math';
-
 import 'package:adaptive_dialog/adaptive_dialog.dart';
 import 'package:adaptive_page_layout/adaptive_page_layout.dart';
 
 import 'package:famedlysdk/famedlysdk.dart';
 
 import 'package:fluffychat/components/matrix.dart';
+import 'package:fluffychat/components/one_page_card.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -131,7 +130,8 @@ class _SignUpPasswordState extends State<SignUpPassword> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return OnePageCard(
+      child: Scaffold(
         appBar: AppBar(
           elevation: 0,
           leading: loading ? Container() : BackButton(),
@@ -140,8 +140,6 @@ class _SignUpPasswordState extends State<SignUpPassword> {
           ),
         ),
         body: ListView(
-        padding: EdgeInsets.symmetric(
-            horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0)),
           children: <Widget>[
             Padding(
               padding: const EdgeInsets.all(12.0),
@@ -186,6 +184,7 @@ class _SignUpPasswordState extends State<SignUpPassword> {
             ),
           ],
         ),
+      ),
     );
   }
 }