Mycelium Mobile: redesign the UI/UX

Question

Mycelium Mobile: redesign the UI/UX

Closed this issue a month ago · 19 comments

iwanbk commented 5 months ago

need to redesign the app with Good UI/UX and maybe splach screen with logo.

Tracker:

Initial UI implementation #41
UI improvement based on the feedback #42
add restart button on Android #45
add app icon #47
implement splash screen #49
add feature to copy paste peer config values from other app #39

Current UI

initial UI

4fa:210a:1ed7:1d52:2f9f:fb21:3f03:a419 is the IP address, user can't configure it

the peers,

it has default value.
user can modify it
it is multiline text edit

we can press the button to start mycelium

started mycelium

when we press the button:

mycelium started
the button text become stop mycelium
also there is mycelium started text below the button with green background

stopped mycelium

if mycelium failed to start, the below text become "mycelium failed to start" with yellow background

Answer 1 · 2024-05-28T10:39:46.000Z

if mycelium failed to start, the below text become "mycelium failed to start" with yellow background

maybe we can also show some alert box/pop up when it happens

Answer 2 · 2024-05-29T02:40:05.000Z

@ehab-hassan do you think we also need to show error message if the peers field is empty?
it has default value, but user can delete it

Answer 3 · 2024-05-29T07:04:40.000Z

@ehab-hassan
also need to add handler when the peers is invalid, for example

Answer 4 · 2024-05-29T09:38:41.000Z

a restart mycelium button would be cool too, as some quirks still do exist.
I'd rather have a monitor that verifies connectivity and ans restarts automagically, but the button will do for now

Answer 5 · 2024-05-29T12:05:33.000Z

To interact press the mouse and the start, and stop button
https://www.figma.com/proto/3Rl2jauNd9npzv9POYt5o7/Mycelium?node-id=1-320&t=SsjBtmKqu8mhw1uU-0&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A320

for invalid and failed to start screen

Figma file
https://www.figma.com/design/3Rl2jauNd9npzv9POYt5o7/Mycelium?node-id=7-177&t=SsjBtmKqu8mhw1uU-0

all fonts and color u can take it from Figma
Font: Roboto
color :
Dark_blue: #025996
Red: #EC3F09
green: #0D9C9E

Answer 6 · 2024-05-30T03:30:55.000Z

@ehab-hassan for this page, the button should be start instead of restart

Answer 7 · 2024-05-31T09:42:12.000Z

@ehab-hassan

got error when using .svg app bar logo

I/flutter (30118): unhandled element filter; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#8094d(), name: "assets/images/mycelium_top.svg", colorFilter: null)

and i got this from searching

The error message indicates that the SVG file contains an element () that is not supported by the flutter_svg package. The flutter_svg package does not support all SVG features, and is one of the unsupported features.

note: need external package to support SVG on Flutter.

So for now i convert the .svg to .png

about the IP address box

can't find:

box size (~~width~~ & height)
distance with the divider above & peers box below
font size & color
border color

looks like the border color of the peers box is darkBlue, CMIIW

Answer 8 · 2024-05-31T10:15:46.000Z

1- For logo you can use png no problem.
2- for IP address same width as button and for high you can use the default or 48px
3- distance between divider and peers 24px
4- font size 16px for filed header(peers) and inside any field 14px

U can click at any object at Figma to get the color.

Answer 9 · 2024-05-31T10:26:21.000Z

U can click at any object at Figma to get the color.

Oh, sorry, my mistake.

when i clicked one of IP box or peers box, it selected both elements

But after you said this, i just realize that i can click deeper to the object inside it

Answer 10 · 2024-06-04T06:59:08.000Z

hi @ehab-hassan
I think we need app icon as well.
Thanks

Answer 11 · 2024-06-04T07:03:04.000Z

@ehab-hassan
for the splash screen, i use flutter_native_splash package. And need your input on below configs

flutter_native_splash:
  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # dart run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # dart run flutter_native_splash:remove

  # IMPORTANT NOTE: These parameter do not affect the configuration of Android 12 and later, which
  # handle splash screens differently that prior versions of Android.  Android 12 and later must be
  # configured specifically in the android_12 section below.

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  #image: assets/splash.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  #branding: assets/dart.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png