From 6aef29487fe7d279497b0a1aa8185e7e81903167 Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Tue, 8 Oct 2024 15:22:31 -0300 Subject: [PATCH] fix small ui issues --- .../payment_method_selector_widget.dart | 6 +- lib/components/upload_form.dart | 111 ++++++++++++------ .../lib/src/components/check_box.dart | 13 +- 3 files changed, 86 insertions(+), 44 deletions(-) diff --git a/lib/components/payment_method_selector_widget.dart b/lib/components/payment_method_selector_widget.dart index 829d30107..4b7e6ba3e 100644 --- a/lib/components/payment_method_selector_widget.dart +++ b/lib/components/payment_method_selector_widget.dart @@ -115,7 +115,7 @@ class _PaymentMethodSelectorState extends State { children: [ Text( text, - style: typography.paragraphLarge( + style: typography.paragraphNormal( fontWeight: ArFontWeight.semiBold, ), ), @@ -150,7 +150,7 @@ class _PaymentMethodSelectorState extends State { children: [ Text( 'Cost: ${winstonToAr(widget.uploadMethodInfo.costEstimateAr.totalCost)} AR', - style: typography.paragraphLarge( + style: typography.paragraphNormal( fontWeight: ArFontWeight.semiBold, ), ), @@ -168,7 +168,7 @@ class _PaymentMethodSelectorState extends State { children: [ Text( 'Cost: ${winstonToAr(widget.uploadMethodInfo.costEstimateTurbo!.totalCost)} Credits', - style: typography.paragraphLarge( + style: typography.paragraphNormal( fontWeight: ArFontWeight.semiBold, ), ), diff --git a/lib/components/upload_form.dart b/lib/components/upload_form.dart index 10386153f..221582e06 100644 --- a/lib/components/upload_form.dart +++ b/lib/components/upload_form.dart @@ -339,6 +339,35 @@ class _StatsScreenState extends State { itemBuilder: (BuildContext context, int index) { final file = files![index]; if (file is FileV2UploadHandle) { + return Row( + children: [ + getIconForContentType( + file.entity.dataContentType ?? '', + size: 16, + ), + const SizedBox(width: 16), + Expanded( + child: Transform.translate( + offset: const Offset(0, -2), + child: Text( + file.entity.name!, + style: typography.paragraphNormal( + fontWeight: ArFontWeight.semiBold, + color: colorTokens.textMid, + ), + ), + ), + ), + const SizedBox(width: 16), + Text( + filesize(file.size), + style: typography.paragraphNormal( + fontWeight: ArFontWeight.semiBold, + color: colorTokens.textLow, + ), + ), + ], + ); return ListTile( contentPadding: EdgeInsets.zero, title: Text( @@ -355,7 +384,7 @@ class _StatsScreenState extends State { ), trailing: getIconForContentType( file.entity.dataContentType ?? '', - size: 20, + size: 16, ), ); } else { @@ -366,27 +395,34 @@ class _StatsScreenState extends State { shrinkWrap: true, children: bundle.fileEntities.map((e) { final file = e; - return ListTile( - contentPadding: EdgeInsets.zero, - title: Text( - file.name!, - style: typography.paragraphNormal( - fontWeight: ArFontWeight.bold, - color: colorTokens.textMid, + return Row( + children: [ + getIconForContentType( + file.dataContentType ?? '', + size: 16, ), - ), - trailing: Text( - filesize(file.size), - style: typography.paragraphNormal( - fontWeight: ArFontWeight.semiBold, - color: colorTokens.textMid, + const SizedBox(width: 16), + Expanded( + child: Transform.translate( + offset: const Offset(0, -2), + child: Text( + file.name!, + style: typography.paragraphNormal( + color: colorTokens.textMid, + fontWeight: ArFontWeight.semiBold, + ), + ), + ), ), - ), - leading: getIconForContentType( - file.dataContentType ?? '', - color: colorTokens.textMid, - size: 20, - ), + const SizedBox(width: 16), + Text( + filesize(file.size), + style: typography.paragraphNormal( + fontWeight: ArFontWeight.semiBold, + color: colorTokens.textLow, + ), + ), + ], ); }).toList()); } @@ -406,11 +442,9 @@ class _StatsScreenState extends State { ), ), TextSpan( - text: filesize( - widget.readyState.paymentInfo.totalSize, - ), + text: filesize(widget.readyState.totalSize), style: typography.paragraphNormal( - fontWeight: ArFontWeight.bold, + fontWeight: ArFontWeight.semiBold, color: colorTokens.textHigh, ), ), @@ -1159,7 +1193,9 @@ class _UploadReadyWidget extends StatelessWidget { .read() .config .uploadThumbnails, - titleStyle: typography.paragraphLarge(), + titleStyle: typography.paragraphLarge( + fontWeight: ArFontWeight.semiBold, + ), onChange: (value) { context .read() @@ -1186,7 +1222,7 @@ class _UploadReadyWidget extends StatelessWidget { children: [ Text( 'Error loading ARNS names', - style: typography.paragraphLarge( + style: typography.paragraphNormal( fontWeight: ArFontWeight.semiBold, color: colorTokens.textRed, ), @@ -1225,7 +1261,9 @@ class _UploadReadyWidget extends StatelessWidget { title: 'Assign an ARNS name', checked: state.arnsCheckboxChecked, useNewIcons: true, - titleStyle: typography.paragraphLarge(), + titleStyle: typography.paragraphNormal( + fontWeight: ArFontWeight.semiBold, + ), onChange: (value) { context .read() @@ -1241,11 +1279,11 @@ class _UploadReadyWidget extends StatelessWidget { children: [ Row( children: [ - ArDriveIcons.license1(), + ArDriveIcons.license1(size: 16), const SizedBox(width: 8), Text( 'License', - style: typography.paragraphLarge( + style: typography.paragraphNormal( fontWeight: ArFontWeight.semiBold, ), ), @@ -1258,13 +1296,14 @@ class _UploadReadyWidget extends StatelessWidget { }, child: ArDriveIcons.question( color: colorTokens.textLow, + size: 16, ), ), ), ], ), Padding( - padding: const EdgeInsets.only(left: 32.0), + padding: const EdgeInsets.only(left: 24.0), child: ReactiveForm( formGroup: context.watch().licenseCategoryForm, @@ -1289,7 +1328,7 @@ class _UploadReadyWidget extends StatelessWidget { value: value, child: Text( licenseCategoryNames[value] ?? 'None', - style: typography.paragraphNormal( + style: typography.paragraphSmall( fontWeight: ArFontWeight.semiBold, color: colorTokens.textMid, ), @@ -1588,12 +1627,12 @@ class _UploadFailureWidget extends StatelessWidget { leading: file is ARFSFileUploadMetadata ? getIconForContentType( file.dataContentType, - size: 20, + size: 16, ) : file is ARFSFolderUploadMetatadata ? getIconForContentType( 'folder', - size: 20, + size: 16, ) : null, contentPadding: EdgeInsets.zero, @@ -1902,12 +1941,12 @@ class _UploadInProgressWidget extends StatelessWidget { leading: file is ARFSFileUploadMetadata ? getIconForContentType( file.dataContentType, - size: 20, + size: 16, ) : file is ARFSFolderUploadMetatadata ? getIconForContentType( 'folder', - size: 20, + size: 16, ) : null, contentPadding: EdgeInsets.zero, @@ -1926,7 +1965,7 @@ class _UploadInProgressWidget extends StatelessWidget { Text( file.name, style: typography.paragraphNormal( - fontWeight: ArFontWeight.bold, + fontWeight: ArFontWeight.semiBold, color: colorTokens.textMid, ), ), diff --git a/packages/ardrive_ui/lib/src/components/check_box.dart b/packages/ardrive_ui/lib/src/components/check_box.dart index aefe95e22..c019ea01f 100644 --- a/packages/ardrive_ui/lib/src/components/check_box.dart +++ b/packages/ardrive_ui/lib/src/components/check_box.dart @@ -14,6 +14,7 @@ class ArDriveCheckBox extends StatefulWidget { this.onChange, this.titleWidget, this.useNewIcons = true, + this.iconSize = 18.5, }); /// Initial state of the checkbox. @@ -32,6 +33,8 @@ class ArDriveCheckBox extends StatefulWidget { final bool useNewIcons; + final double iconSize; + @override State createState() => ArDriveCheckBoxState(); } @@ -107,8 +110,8 @@ class ArDriveCheckBoxState extends State { .themeFgDefault, ) : AnimatedContainer( - height: 18.5, - width: 18.5, + height: widget.iconSize, + width: widget.iconSize, margin: const EdgeInsets.fromLTRB(3.25, 3.5, 5, 4), decoration: BoxDecoration( borderRadius: @@ -147,13 +150,13 @@ class ArDriveCheckBoxState extends State { state == CheckBoxState.indeterminate ? ArDriveIcon( icon: ArDriveIconsData.minus_rectangle, - size: 22, + size: widget.iconSize, color: ArDriveTheme.of(context).themeData.colors.themeFgDefault, ) : checked - ? ArDriveIcons.checked() - : ArDriveIcons.box(), + ? ArDriveIcons.checked(size: widget.iconSize) + : ArDriveIcons.box(size: widget.iconSize), if (_buildTitle() != null) ...[ const SizedBox(width: 8.0), _buildTitle()!,