diff --git a/assets/images/2.0x/header.png b/assets/images/2.0x/header.png new file mode 100644 index 000000000..192b343ff Binary files /dev/null and b/assets/images/2.0x/header.png differ diff --git a/assets/images/3.0x/header.png b/assets/images/3.0x/header.png new file mode 100644 index 000000000..9a86d241a Binary files /dev/null and b/assets/images/3.0x/header.png differ diff --git a/assets/images/header.png b/assets/images/header.png new file mode 100644 index 000000000..a3e8169aa Binary files /dev/null and b/assets/images/header.png differ diff --git a/lib/palette.dart b/lib/palette.dart index 87a145367..5a6cfd414 100644 --- a/lib/palette.dart +++ b/lib/palette.dart @@ -74,6 +74,8 @@ class PaletteDark { static const Color backgroundStart = Color.fromRGBO(231, 240, 253, 1.0); static const Color backgroundEnd = Color.fromRGBO(172, 203, 238, 1.0); + static const Color mainBackgroundColor = Color.fromRGBO(70, 85, 133, 1.0); + static const Color borderCardColor = Color.fromRGBO(81, 96, 147, 1.0); static const Color walletCardTopStartSync = Color.fromRGBO(89, 104, 152, 1.0); static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0); static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0); diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index 792097214..b05bb8d9a 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/lib/src/screens/dashboard/dashboard_page.dart @@ -1,16 +1,40 @@ +import 'package:cake_wallet/src/screens/dashboard/widgets/menu_widget.dart'; import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/trade_history_panel.dart'; -import 'package:cake_wallet/src/screens/dashboard/widgets/menu_widget.dart'; class DashboardPage extends BasePage { final _bodyKey = GlobalKey(); @override - ObstructingPreferredSizeWidget appBar(BuildContext context) => null; + Color get backgroundColor => PaletteDark.mainBackgroundColor; + + @override + Widget trailing(BuildContext context) { + final menuButton = Image.asset('assets/images/header.png'); + + return SizedBox( + height: 37, + width: 37, + child: ButtonTheme( + minWidth: double.minPositive, + child: FlatButton( + highlightColor: Colors.transparent, + splashColor: Colors.transparent, + padding: EdgeInsets.all(0), + onPressed: () async { + await showDialog( + builder: (_) => MenuWidget(), + context: context + ); + }, + child: menuButton), + ), + ); + } @override Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey); @@ -24,46 +48,17 @@ class DashboardPageBody extends StatefulWidget { } class DashboardPageBodyState extends State { - final menuButton = Image.asset('assets/images/menu_button.png'); @override Widget build(BuildContext context) { - final List colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd]; return SafeArea( child: Container( - decoration: BoxDecoration( - gradient: LinearGradient( - colors: colors - ) - ), + color: PaletteDark.mainBackgroundColor, child: Column( children: [ Padding( - padding: EdgeInsets.only(top: 14), - child: Container( - width: double.infinity, - alignment: Alignment.centerRight, - child: SizedBox( - height: 37, - width: 37, - child: ButtonTheme( - minWidth: double.minPositive, - child: FlatButton( - highlightColor: Colors.transparent, - splashColor: Colors.transparent, - padding: EdgeInsets.all(0), - onPressed: () => showDialog( - builder: (_) => MenuWidget(), - context: context - ), - child: menuButton), - ), - ), - ) - ), - Padding( - padding: EdgeInsets.only(left: 20, top: 23), + padding: EdgeInsets.only(left: 20, top: 10), child: WalletCard(), ), SizedBox( diff --git a/lib/src/screens/dashboard/widgets/button_header.dart b/lib/src/screens/dashboard/widgets/button_header.dart index 3daa39ec7..71b8434e5 100644 --- a/lib/src/screens/dashboard/widgets/button_header.dart +++ b/lib/src/screens/dashboard/widgets/button_header.dart @@ -274,7 +274,7 @@ class ButtonHeader extends SliverPersistentHeaderDelegate { width: 48, alignment: Alignment.center, decoration: BoxDecoration( - color: Colors.white, + color: PaletteDark.borderCardColor, shape: BoxShape.circle ), child: image, diff --git a/lib/src/screens/dashboard/widgets/wallet_card.dart b/lib/src/screens/dashboard/widgets/wallet_card.dart index f1bfc374f..4c4f7a511 100644 --- a/lib/src/screens/dashboard/widgets/wallet_card.dart +++ b/lib/src/screens/dashboard/widgets/wallet_card.dart @@ -24,7 +24,7 @@ class WalletCardState extends State { final _balanceObserverKey = GlobalKey(); final _addressObserverKey = GlobalKey(); - final List colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync]; + final List colorsSync = [PaletteDark.walletCardSubAddressField, PaletteDark.walletCardBottomEndSync]; double cardWidth; double cardHeight; double screenWidth; @@ -45,12 +45,12 @@ class WalletCardState extends State { } void afterLayout(dynamic _) { - screenWidth = MediaQuery.of(context).size.width; + screenWidth = MediaQuery.of(context).size.width - 20; setState(() { cardWidth = screenWidth; opacity = 1; }); - Timer(Duration(milliseconds: 350), () => + Timer(Duration(milliseconds: 500), () => setState(() => isDraw = true) ); } @@ -67,20 +67,34 @@ class WalletCardState extends State { height: cardHeight, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn, - decoration: BoxDecoration( - borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), - gradient: LinearGradient( - colors: [PaletteDark.walletCardTopStartSync.withOpacity(opacity), - PaletteDark.walletCardBottomStartSync.withOpacity(opacity)], - begin: Alignment.topCenter, - end: Alignment.bottomCenter - ) + padding: EdgeInsets.only( + top: 1, + left: 1, + bottom: 1 ), - child: InkWell( - onTap: () => setState(() => isFrontSide = !isFrontSide), - child: isFrontSide - ? frontSide() - : backSide() + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), + color: PaletteDark.borderCardColor, + boxShadow: [ + BoxShadow( + color: PaletteDark.historyPanel.withOpacity(0.5), + blurRadius: 8, + offset: Offset(5, 5)) + ] + ), + child: Container( + width: cardWidth, + height: cardHeight, + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), + color: PaletteDark.historyPanel + ), + child: InkWell( + onTap: () => setState(() => isFrontSide = !isFrontSide), + child: isFrontSide + ? frontSide() + : backSide() + ), ), ), ); @@ -99,6 +113,7 @@ class WalletCardState extends State { final status = syncStore.status; final statusText = status.title(); final progress = syncStore.status.progress(); + final indicatorWidth = progress * cardWidth; String shortAddress = walletStore.subaddress.address; shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...'); @@ -125,7 +140,7 @@ class WalletCardState extends State { children: [ Container( height: cardHeight, - width: progress * cardWidth, + width: indicatorWidth, decoration: BoxDecoration( borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), gradient: LinearGradient( @@ -135,6 +150,18 @@ class WalletCardState extends State { ) ), ), + progress != 1 + ? Positioned( + left: indicatorWidth, + top: 0, + bottom: 0, + child: Container( + width: 1, + height: cardHeight, + color: PaletteDark.borderCardColor, + ) + ) + : Offstage(), isDraw ? Positioned( left: 20, right: 20, @@ -303,7 +330,7 @@ class WalletCardState extends State { final walletStore = Provider.of(context); final rightArrow = Image.asset('assets/images/right_arrow.png'); double messageBoxHeight = 0; - double messageBoxWidth = cardWidth - 30; + double messageBoxWidth = cardWidth - 10; return Observer( key: _addressObserverKey, @@ -358,7 +385,7 @@ class WalletCardState extends State { try { _addressObserverKey.currentState.setState(() { messageBoxHeight = 0; - messageBoxWidth = cardWidth - 30; + messageBoxWidth = cardWidth - 10; }); } catch(e) { print('${e.toString()}'); diff --git a/lib/src/widgets/nav_bar.dart b/lib/src/widgets/nav_bar.dart index 380fa6eab..a46072615 100644 --- a/lib/src/widgets/nav_bar.dart +++ b/lib/src/widgets/nav_bar.dart @@ -42,9 +42,10 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { /*backgroundColor: _isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor,*/ decoration: BoxDecoration( - color: _isDarkTheme + color: backgroundColor, + /*_isDarkTheme ? Theme.of(context).backgroundColor - : backgroundColor, + : backgroundColor,*/ boxShadow: [ BoxShadow( color: Color.fromRGBO(132, 141, 198, 0.11),