diff --git a/fonts/Inter-Medium.ttf b/fonts/Inter-Medium.ttf new file mode 100644 index 000000000..06ae9e9c4 Binary files /dev/null and b/fonts/Inter-Medium.ttf differ diff --git a/lib/app.dart b/lib/app.dart index d135e1f53..6c499604c 100644 --- a/lib/app.dart +++ b/lib/app.dart @@ -1,5 +1,8 @@ +import 'dart:io'; + import 'package:adaptive_theme/adaptive_theme.dart'; import 'package:background_fetch/background_fetch.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_easyloading/flutter_easyloading.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; @@ -15,19 +18,50 @@ final lightThemeData = ThemeData( fontFamily: 'Inter', brightness: Brightness.light, hintColor: Colors.grey, + primaryColor: Colors.deepOrangeAccent, iconTheme: IconThemeData(color: Colors.black), primaryIconTheme: IconThemeData(color: Colors.red, opacity: 1.0, size: 50.0), colorScheme: ColorScheme.light(primary: Colors.black), accentColor: Color.fromRGBO(45, 194, 98, 0.2), buttonColor: Color.fromRGBO(45, 194, 98, 1.0), - buttonTheme: ButtonThemeData().copyWith( - buttonColor: Color.fromRGBO(45, 194, 98, 1.0), + outlinedButtonTheme: OutlinedButtonThemeData( + style: OutlinedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + padding: EdgeInsets.fromLTRB(50, 16, 50, 16), + textStyle: TextStyle( + fontWeight: FontWeight.w600, + fontFamily: 'Inter-SemiBold', + fontSize: 18, + ), + ).copyWith( + backgroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.disabled)) { + return Colors.grey.shade500; + } + return Colors.black; + }, + ), + foregroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.disabled)) { + return Colors.white; + } + return Colors.white; + }, + ), + alignment: Alignment.center, + ), ), toggleableActiveColor: Colors.red[400], scaffoldBackgroundColor: Colors.white, bottomAppBarColor: Color.fromRGBO(196, 196, 196, 1.0), backgroundColor: Colors.white, - appBarTheme: AppBarTheme().copyWith(color: Colors.blue), + appBarTheme: AppBarTheme().copyWith( + backgroundColor: Colors.white, + iconTheme: IconThemeData(color: Colors.black)), //https://api.flutter.dev/flutter/material/TextTheme-class.html textTheme: TextTheme().copyWith( headline6: TextStyle( @@ -41,7 +75,6 @@ final lightThemeData = ThemeData( bodyText2: TextStyle(color: Colors.yellow), bodyText1: TextStyle(color: Colors.orange)), cardColor: Color.fromRGBO(250, 250, 250, 1.0), - // dialogTheme: DialogTheme().copyWith( backgroundColor: Color.fromRGBO(250, 250, 250, 1.0), // ), @@ -86,6 +119,37 @@ final darkThemeData = ThemeData( fontSize: 12, )), toggleableActiveColor: Colors.green[400], + outlinedButtonTheme: OutlinedButtonThemeData( + style: OutlinedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8), + ), + padding: EdgeInsets.fromLTRB(50, 16, 50, 16), + textStyle: TextStyle( + fontWeight: FontWeight.w600, + fontFamily: 'Inter-SemiBold', + fontSize: 18, + ), + ).copyWith( + backgroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.disabled)) { + return Colors.grey.shade500; + } + return Colors.white; + }, + ), + foregroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.disabled)) { + return Colors.white; + } + return Colors.black; + }, + ), + alignment: Alignment.center, + ), + ), scaffoldBackgroundColor: Colors.black, backgroundColor: Colors.black, appBarTheme: AppBarTheme().copyWith( @@ -107,11 +171,6 @@ final darkThemeData = ThemeData( ), ); -extension CustomColorScheme on ColorScheme { - Color get defaultTextColor => - brightness == Brightness.light ? Colors.black : Colors.white; -} - class EnteApp extends StatefulWidget { static const _homeWidget = HomeWidget(); @@ -139,14 +198,38 @@ class _EnteAppState extends State with WidgetsBindingObserver { _configureBackgroundFetch(); } + Widget debugBuild(BuildContext context) { + return MaterialApp( + title: "ente", + themeMode: ThemeMode.system, + theme: lightThemeData, + darkTheme: darkThemeData, + home: EnteApp._homeWidget, + debugShowCheckedModeBanner: false, + navigatorKey: Network.instance.getAlice().getNavigatorKey(), + builder: EasyLoading.init(), + supportedLocales: L10n.all, + localizationsDelegates: const [ + AppLocalizations.delegate, + GlobalMaterialLocalizations.delegate, + GlobalCupertinoLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + ); + } + @override Widget build(BuildContext context) { + if (kDebugMode && Platform.isIOS) { + return debugBuild(context); + } return AdaptiveTheme( light: lightThemeData, dark: darkThemeData, initial: AdaptiveThemeMode.dark, builder: (lightTheme, dartTheme) => MaterialApp( title: "ente", + themeMode: ThemeMode.system, theme: lightTheme, darkTheme: dartTheme, home: EnteApp._homeWidget, diff --git a/lib/ui/backup_folder_selection_page.dart b/lib/ui/backup_folder_selection_page.dart index cb4f5831b..787c99b9d 100644 --- a/lib/ui/backup_folder_selection_page.dart +++ b/lib/ui/backup_folder_selection_page.dart @@ -9,6 +9,7 @@ import 'package:photos/core/event_bus.dart'; import 'package:photos/db/files_db.dart'; import 'package:photos/events/backup_folders_updated_event.dart'; import 'package:photos/models/file.dart'; +import 'package:photos/ui/common/custom_color_scheme.dart'; import 'package:photos/ui/common_elements.dart'; import 'package:photos/ui/loading_widget.dart'; import 'package:photos/ui/thumbnail_widget.dart'; @@ -61,19 +62,29 @@ class _BackupFolderSelectionPageState extends State { @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar(title: Text("select folders to backup")), + appBar: AppBar( + title: Text(""), + ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Padding( - padding: EdgeInsets.all(12), + Container( + padding: EdgeInsets.all(24), + child: Text( + 'Select folders for backup', + textAlign: TextAlign.left, + style: TextStyle( + color: Theme.of(context).colorScheme.onSurface, + fontFamily: 'Inter-Bold', + fontSize: 32, + fontWeight: FontWeight.bold), + ), ), Padding( - padding: const EdgeInsets.only(left: 32, right: 32), + padding: const EdgeInsets.only(left: 24, right: 48), child: Text( - "the selected folders will be end-to-end encrypted and backed up", + "Selected folders will be end-to-end encrypted and backed up", style: Theme.of(context).textTheme.caption.copyWith(height: 1.3), - textAlign: TextAlign.center, ), ), Padding( @@ -84,15 +95,18 @@ class _BackupFolderSelectionPageState extends State { : GestureDetector( behavior: HitTestBehavior.translucent, child: Padding( - padding: const EdgeInsets.fromLTRB(6, 6, 64, 6), + padding: const EdgeInsets.fromLTRB(24, 6, 64, 12), child: Align( - alignment: Alignment.centerRight, + alignment: Alignment.centerLeft, child: Text( _selectedFolders.length == _allFolders.length - ? "unselect all" - : "select all", + ? "Unselect all" + : "Select all", textAlign: TextAlign.right, - style: Theme.of(context).textTheme.overline, + style: Theme.of(context) + .textTheme + .overline + .copyWith(decoration: TextDecoration.underline), ), ), ), @@ -119,11 +133,11 @@ class _BackupFolderSelectionPageState extends State { Hero( tag: "select_folders", child: Container( + width: double.infinity, padding: EdgeInsets.only( - left: 60, right: 60, bottom: Platform.isIOS ? 60 : 32), - child: button( - widget.buttonText, - fontSize: 18, + left: 24, right:24, bottom: Platform.isIOS ? 60 : 32), + child: OutlinedButton( + child: Text(widget.buttonText), onPressed: _selectedFolders.isEmpty ? null : () async { @@ -132,7 +146,7 @@ class _BackupFolderSelectionPageState extends State { Bus.instance.fire(BackupFoldersUpdatedEvent()); Navigator.of(context).pop(); }, - padding: EdgeInsets.fromLTRB(60, 20, 60, 20), + // padding: EdgeInsets.fromLTRB(12, 20, 12, 20), ), ), ), @@ -148,7 +162,7 @@ class _BackupFolderSelectionPageState extends State { _sortFiles(); final scrollController = ScrollController(); return Container( - padding: EdgeInsets.only(left: 40, right: 40), + padding: EdgeInsets.only(left: 20, right: 24), child: Scrollbar( controller: scrollController, isAlwaysShown: true, @@ -198,47 +212,63 @@ class _BackupFolderSelectionPageState extends State { Widget _getFileItem(File file) { final isSelected = _selectedFolders.contains(file.deviceFolder); return Padding( - padding: const EdgeInsets.only(bottom: 1, right: 4), + padding: const EdgeInsets.only(bottom: 1, right: 1), child: Container( decoration: BoxDecoration( border: Border.all( - color: Theme.of(context).primaryColor, + color: Theme.of(context).colorScheme.boxUnSelectColor, ), borderRadius: BorderRadius.all( - Radius.circular(10), + Radius.circular(12), ), color: isSelected - ? Color.fromRGBO(16, 32, 32, 1) - : Color.fromRGBO(8, 18, 18, 0.4), + ? Theme.of(context).colorScheme.boxSelectColor + : Theme.of(context).colorScheme.boxUnSelectColor, ), - padding: EdgeInsets.fromLTRB(20, 16, 20, 16), + padding: EdgeInsets.fromLTRB(8, 4, 4, 4), child: InkWell( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ - _getThumbnail(file), - Padding(padding: EdgeInsets.all(10)), + Checkbox( + checkColor: Colors.green, + activeColor: Colors.white, + value: isSelected, + onChanged: (value) { + if (value) { + _selectedFolders.add(file.deviceFolder); + } else { + _selectedFolders.remove(file.deviceFolder); + } + setState(() {}); + }, + ), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( - constraints: BoxConstraints(maxWidth: 140), + constraints: BoxConstraints(maxWidth: 180), child: Text( file.deviceFolder, + textAlign: TextAlign.left, style: TextStyle( - fontSize: 14, - height: 1.5, + fontFamily: 'Inter-Medium', + fontSize: 18, + fontWeight: FontWeight.w600, color: isSelected ? Colors.white - : Colors.white.withOpacity(0.7), + : Theme.of(context) + .colorScheme + .onSurface + .withOpacity(0.7), ), overflow: TextOverflow.ellipsis, maxLines: 2, ), ), - Padding(padding: EdgeInsets.all(2)), + Padding(padding: EdgeInsets.only(top: 2)), Text( _itemCount[file.deviceFolder].toString() + " item" + @@ -247,25 +277,19 @@ class _BackupFolderSelectionPageState extends State { style: TextStyle( fontSize: 12, color: isSelected - ? Colors.white.withOpacity(0.65) - : Colors.white.withOpacity(0.4), + ? Colors.white + + : Theme.of(context) + .colorScheme + .onSurface + , ), ), ], ), ], ), - Checkbox( - value: isSelected, - onChanged: (value) { - if (value) { - _selectedFolders.add(file.deviceFolder); - } else { - _selectedFolders.remove(file.deviceFolder); - } - setState(() {}); - }, - ), + _getThumbnail(file), ], ), onTap: () { @@ -309,8 +333,8 @@ class _BackupFolderSelectionPageState extends State { shouldShowSyncStatus: false, key: Key("backup_selection_widget" + file.tag()), ), - height: 60, - width: 60, + height: 88, + width: 88, ), ); } diff --git a/lib/ui/common/custom_color_scheme.dart b/lib/ui/common/custom_color_scheme.dart new file mode 100644 index 000000000..47b2c4ec0 --- /dev/null +++ b/lib/ui/common/custom_color_scheme.dart @@ -0,0 +1,16 @@ +import 'dart:ui'; + +import 'package:flutter/material.dart'; + +extension CustomColorScheme on ColorScheme { + Color get defaultTextColor => + brightness == Brightness.light ? Colors.black : Colors.white; + + Color get boxSelectColor => brightness == Brightness.light + ? Color.fromRGBO(67, 186, 108, 1) + : Color.fromRGBO(16, 32, 32, 1); + + Color get boxUnSelectColor => brightness == Brightness.light + ? Color.fromRGBO(240, 240, 240, 1) + : Color.fromRGBO(8, 18, 18, 0.4); +} diff --git a/lib/ui/common_elements.dart b/lib/ui/common_elements.dart index a42aac73c..51d4fe538 100644 --- a/lib/ui/common_elements.dart +++ b/lib/ui/common_elements.dart @@ -24,26 +24,36 @@ Widget button( child: OutlinedButton( style: OutlinedButton.styleFrom( shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), + borderRadius: BorderRadius.circular(8), ), padding: padding ?? EdgeInsets.fromLTRB(50, 16, 50, 16), - side: BorderSide( - width: onPressed == null ? 1 : 2, - color: onPressed == null - ? Colors.grey - : Color.fromRGBO(45, 194, 98, 1.0), - ), - ), - child: Text( - text, - style: TextStyle( - fontWeight: FontWeight.bold, + textStyle: TextStyle( + fontWeight: FontWeight.w600, + fontFamily: 'Inter-SemiBold', fontSize: fontSize, - color: onPressed == null ? Colors.grey : Colors.white, height: lineHeight, ), - textAlign: TextAlign.center, + ).copyWith( + backgroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.disabled)) { + return Colors.grey; + } + // return Color.fromRGBO(29, 184, 80, 1); + return Colors.white; + }, + ), + foregroundColor: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.disabled)) { + return Colors.white; + } + return Colors.black; + }, + ), + alignment: Alignment.center, ), + child: Text(text), onPressed: onPressed, ), ); diff --git a/pubspec.yaml b/pubspec.yaml index af5d86117..c551667f0 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -151,6 +151,7 @@ flutter: - family: Inter fonts: - asset: fonts/Inter-Regular.ttf + - asset: fonts/Inter-Medium.ttf - asset: fonts/Inter-Light.ttf - asset: fonts/Inter-SemiBold.ttf - asset: fonts/Inter-Bold.ttf