Finalize UI for manually adding a book

shockbytes · Feb 24, 2024 · 67279b4 · 67279b4
1 parent 8014d9e
commit 67279b4
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 28 deletions.
diff --git a/lib/src/ui/add/book_cover_picker_widget.dart b/lib/src/ui/add/book_cover_picker_widget.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+class BookCoverPickerWidget extends StatelessWidget {
+  const BookCoverPickerWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    // TODO Handle book cover picks
+    return Container(
+      width: 100,
+      height: 100,
+      color: Colors.white,
+      child: const Center(
+        child: Text('Pick Image'),
+      ),
+    );
+  }
+}
diff --git a/lib/src/ui/add/date_picker_widget.dart b/lib/src/ui/add/date_picker_widget.dart
@@ -32,7 +32,9 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
       children: [
         Text(
           'date-picker.title'.tr(),
-          style: Theme.of(context).textTheme.titleMedium,
+          style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                color: Theme.of(context).colorScheme.onSurface,
+              ),
         ),
         Container(
           constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
@@ -42,7 +44,10 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
             borderRadius: const BorderRadius.all(
               Radius.circular(4),
             ),
-            border: Border.all(width: 0.7),
+            border: Border.all(
+              width: 0.7,
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
           ),
           child: InkWell(
             child: Row(
@@ -52,7 +57,9 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
                 Center(
                   child: Text(
                     _selectedDateTime?.formatDefault() ?? 'date-picker.empty'.tr(),
-                    style: Theme.of(context).textTheme.titleMedium,
+                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                      color: Theme.of(context).colorScheme.onSurface,
+                    ),
                   ),
                 ),
               ],

diff --git a/lib/src/ui/add/language_picker_widget.dart b/lib/src/ui/add/language_picker_widget.dart
@@ -34,7 +34,9 @@ class _LanguagePickerWidgetState extends State<LanguagePickerWidget> {
       children: [
         Text(
           'language-picker.title'.tr(),
-          style: Theme.of(context).textTheme.titleMedium,
+          style: Theme.of(context).textTheme.titleMedium?.copyWith(
+            color: Theme.of(context).colorScheme.onSurface,
+          ),
         ),
         Container(
           constraints: BoxConstraints(
@@ -45,14 +47,20 @@ class _LanguagePickerWidgetState extends State<LanguagePickerWidget> {
             borderRadius: const BorderRadius.all(
               Radius.circular(4),
             ),
-            border: Border.all(width: 0.7),
+            border: Border.all(
+              width: 0.7,
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
           ),
           child: DropdownButtonHideUnderline(
             child: DropdownButton<Language>(
               isExpanded: true,
               hint: Text(
                 'language-picker.empty'.tr(),
                 textAlign: TextAlign.center,
+                style: TextStyle(
+                  color: Theme.of(context).colorScheme.onSurface,
+                ),
               ),
               icon: Icon(
                 Icons.arrow_drop_down,
@@ -67,10 +75,13 @@ class _LanguagePickerWidgetState extends State<LanguagePickerWidget> {
                     child: Row(
                       children: [
                         const SizedBox(width: 12),
-                        _buildCountryFlag(language),
+                        _buildCountryFlag(context, language),
                         const SizedBox(width: 16),
                         Text(
                           language.translationKey.tr(),
+                          style: TextStyle(
+                            color: Theme.of(context).colorScheme.onSurface,
+                          ),
                         ),
                       ],
                     ),
@@ -93,12 +104,17 @@ class _LanguagePickerWidgetState extends State<LanguagePickerWidget> {
     );
   }
 
-  Widget _buildCountryFlag(Language language) {
+  Widget _buildCountryFlag(BuildContext context, Language language) {
     if (language.countryCode == null) {
-      return const SizedBox(
+      return SizedBox(
         width: 48,
         child: Center(
-          child: Text('NA'),
+          child: Text(
+            'NA',
+            style: TextStyle(
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
+          ),
         ),
       );
     }

diff --git a/lib/src/ui/add/manual_add_edit_book_page.dart b/lib/src/ui/add/manual_add_edit_book_page.dart
@@ -1,5 +1,6 @@
 import 'package:dantex/src/data/book/entity/book_state.dart';
 import 'package:dantex/src/data/core/language.dart';
+import 'package:dantex/src/ui/add/book_cover_picker_widget.dart';
 import 'package:dantex/src/ui/add/date_picker_widget.dart';
 import 'package:dantex/src/ui/add/language_picker_widget.dart';
 import 'package:dantex/src/ui/core/dante_components.dart';
@@ -9,13 +10,8 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
 /// TODO
-/// 2. Manual Add book UI
-///   -[x] Web
-///   -[x] Translations
-///   -[ ] App
-///   -[ ] Dark Mode
-/// 3. Upload image
-/// 4. Save manual book
+/// 3. Save manual book
+/// 4. Upload image
 /// 5. Entry points for edit book:
 ///   - Overflow
 ///   - Detail Page
@@ -48,13 +44,16 @@ class _ManualAddEditBookPageState extends State<ManualAddEditBookPage> {
           title: Text(_title ?? ''),
         ),
         Expanded(
-          child: LayoutBuilder(
-            builder: (context, constraints) {
-              return switch (getDeviceFormFactor(constraints)) {
-                DeviceFormFactor.desktop => _buildDesktopLayout(context),
-                _ => _buildMobileLayout(context),
-              };
-            },
+          child: Container(
+            color: Theme.of(context).colorScheme.surface,
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                return switch (getDeviceFormFactor(constraints)) {
+                  DeviceFormFactor.desktop => _buildDesktopLayout(context),
+                  _ => _buildMobileLayout(context),
+                };
+              },
+            ),
           ),
         ),
         Container(
@@ -101,9 +100,9 @@ class _ManualAddEditBookPageState extends State<ManualAddEditBookPage> {
       padding: const EdgeInsets.symmetric(horizontal: 16),
       child: ListView(
         shrinkWrap: true,
-        itemExtent: 16,
         children: [
           _buildRequiredInformationCard(isDesktop: false),
+          const SizedBox(height: 16),
           _buildOptionalInformationCard(
             context,
             isDesktop: false,
@@ -121,13 +120,13 @@ class _ManualAddEditBookPageState extends State<ManualAddEditBookPage> {
           children: [
             if (isDesktop) ...[
               const Spacer(),
-              Text('Image'),
+              BookCoverPickerWidget(),
               const Spacer(),
             ],
             Row(
               children: [
                 if (!isDesktop) ...[
-                  Text('Image'),
+                  BookCoverPickerWidget(),
                   const SizedBox(width: 16),
                 ],
                 Expanded(
@@ -169,7 +168,9 @@ class _ManualAddEditBookPageState extends State<ManualAddEditBookPage> {
           children: [
             Text(
               'add-manual.optional-info'.tr(),
-              style: Theme.of(context).textTheme.titleLarge,
+              style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                color: Theme.of(context).colorScheme.onSurface,
+              ),
             ),
             const SizedBox(height: 32),
             DanteTextField(
@@ -207,7 +208,7 @@ class _ManualAddEditBookPageState extends State<ManualAddEditBookPage> {
 
   Widget _buildStateButton(BookState state) {
     return SizedBox(
-      width: 140,
+      width: 120,
       child: OutlinedButton(
         onPressed: () {},
         // icon: state.icon,

diff --git a/lib/src/ui/core/dante_components.dart b/lib/src/ui/core/dante_components.dart
@@ -63,6 +63,9 @@ class DanteTextField extends StatelessWidget {
       maxLines: maxLines,
       onChanged: onChanged,
       inputFormatters: [if (formatter != null) formatter!],
+      style: TextStyle(
+        color: Theme.of(context).colorScheme.onSurface,
+      ),
       decoration: InputDecoration(
         label: label,
         errorText: errorText,