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 ce7d9e28b..cf8dab9c9 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/base_page.dart b/lib/src/screens/base_page.dart index 309f0fe50..54521b7fe 100644 --- a/lib/src/screens/base_page.dart +++ b/lib/src/screens/base_page.dart @@ -81,9 +81,10 @@ abstract class BasePage extends StatelessWidget { leading: leading(context), middle: middle(context), trailing: trailing(context), - backgroundColor: _isDarkTheme + backgroundColor: backgroundColor); + /*backgroundColor: _isDarkTheme ? Theme.of(context).backgroundColor - : backgroundColor); + : backgroundColor);*/ case AppBarStyle.withShadow: return NavBar.withShadow( @@ -91,9 +92,10 @@ abstract class BasePage extends StatelessWidget { leading: leading(context), middle: middle(context), trailing: trailing(context), - backgroundColor: _isDarkTheme + backgroundColor: backgroundColor); + /*backgroundColor: _isDarkTheme ? Theme.of(context).backgroundColor - : backgroundColor); + : backgroundColor);*/ default: return NavBar( @@ -101,9 +103,10 @@ abstract class BasePage extends StatelessWidget { leading: leading(context), middle: middle(context), trailing: trailing(context), - backgroundColor: _isDarkTheme + backgroundColor: backgroundColor); + /*backgroundColor: _isDarkTheme ? Theme.of(context).backgroundColor - : backgroundColor); + : backgroundColor);*/ } } diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index 0a4e57a15..bd0cfb6db 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/lib/src/screens/dashboard/dashboard_page.dart @@ -9,7 +9,26 @@ 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: () {}, + child: menuButton), + ), + ); + } @override Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey); @@ -23,43 +42,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: () {}, - 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 3177e8abe..d3623e261 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; @@ -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, '...'); @@ -123,9 +138,10 @@ class WalletCardState extends State { height: cardHeight, child: Stack( children: [ - Container( + AnimatedContainer( + duration: Duration(milliseconds: 0), height: cardHeight, - width: progress * cardWidth, + width: indicatorWidth, decoration: BoxDecoration( borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), gradient: LinearGradient( diff --git a/lib/src/widgets/nav_bar.dart b/lib/src/widgets/nav_bar.dart index 5e540a09f..a46072615 100644 --- a/lib/src/widgets/nav_bar.dart +++ b/lib/src/widgets/nav_bar.dart @@ -19,8 +19,9 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { middle: middle, trailing: trailing, height: _height, - backgroundColor: - _isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor); + backgroundColor: backgroundColor); + /*backgroundColor: + _isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor);*/ } factory NavBar.withShadow( @@ -37,12 +38,14 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { middle: middle, trailing: trailing, height: 80, - backgroundColor: - _isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor, + backgroundColor: backgroundColor, + /*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),