Mycelium Mobile: redesign the UI/UX

[iwanbk]

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

Tracker:

• [x] Initial UI implementation #41
• [x] UI improvement based on the feedback #42
• [x] add restart button on Android #45
• [x] add app icon #47
• [x] implement splash screen #49
• [x] 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

[iwanbk]

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

[iwanbk]

@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

[iwanbk]

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

[delandtj]

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

[ehab-hassan]

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

[iwanbk]

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

[iwanbk]

@ehab-hassan

1. 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

2. 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

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

[ehab-hassan]

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.

[iwanbk]

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

[iwanbk]

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

[iwanbk]

@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

please note this part as well

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.

I have no idea what it means by 4x pixel density

[ehab-hassan]

try these for icon

[iwanbk]

thanks @ehab-hassan

restart button has been added at #45 for Android. iOS will not implemented soon, tracked at #46

[iwanbk]

icon implemented at #47

[ehab-hassan]

@iwanbk Let's remove the gradient splash background and make white

[iwanbk]

splash screen added on #49

[iwanbk]

all are implemented. Waiting for feedback now. Feedbacks will be tracked on separate github issue

[iwanbk]

cc @ramezsaeed @xmonader