From 3cd8af422814ca939e37387206eb40839d4a4959 Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Thu, 30 Apr 2020 20:35:06 +0300 Subject: [PATCH] CWA-198 | changed background color of dashboard page; added color of bounds and shadows to wallet card; changed color of buttons in the button_header --- assets/images/2.0x/header.png | Bin 0 -> 186 bytes assets/images/3.0x/header.png | Bin 0 -> 231 bytes assets/images/header.png | Bin 0 -> 153 bytes lib/palette.dart | 2 + lib/src/screens/base_page.dart | 15 +++--- lib/src/screens/dashboard/dashboard_page.dart | 51 ++++++++---------- .../dashboard/widgets/button_header.dart | 2 +- .../dashboard/widgets/wallet_card.dart | 48 +++++++++++------ lib/src/widgets/nav_bar.dart | 15 +++--- 9 files changed, 75 insertions(+), 58 deletions(-) create mode 100644 assets/images/2.0x/header.png create mode 100644 assets/images/3.0x/header.png create mode 100644 assets/images/header.png diff --git a/assets/images/2.0x/header.png b/assets/images/2.0x/header.png new file mode 100644 index 0000000000000000000000000000000000000000..192b343ffd684397d66e3e6d36cd29d0820e0407 GIT binary patch literal 186 zcmeAS@N?(olHy`uVBq!ia0vp^azM<+!3HF+Y}E?^Qk(@Ik;M!QVyYm_=ozH)0Vv2= z9OUlAuomgzpde#$ zkh>GZx^prwfgF}}M_)$E)e-c@N{2EUe$B+uft5X^|8w>=Pqt#y=D-|(+#Zfx> z$I&LPtVIu+8^u)~UJCjl;KMNKY)0_LRp0)L$erlD%*^^+D{GUaP5=M^ literal 0 HcmV?d00001 diff --git a/assets/images/header.png b/assets/images/header.png new file mode 100644 index 0000000000000000000000000000000000000000..a3e8169aa4d041d27f2c449b6d184c266018bb42 GIT binary patch literal 153 zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngi!3HFKL_!UL6lZ})WHAE+w=f7ZGR&GI0Tg5` z4sv&5Sa(k5C6L3C?&#~tz_78O`%fY(kgw 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),