UI Redesign - Mobile - My Files

[ksanty]

Description
The task is to implement the new design for the Files menu in the mobile app.

Assets and Design Screens
All assets and design screens have already been created.

• The Figma design can be found here
• The Assets required can be found here 218.zip

Additional context
This work should be done on the UI_Redesign branch https://github.com/atsign-foundation/atmosphere_pro/tree/ui_redesign

[ruqaiyasattar]

interested

[ksanty]

interested

Great! Let us know if you have any questions.

[Ayush783]

Hey. Can I also work on this or is there a ticket reservation?

[AM1CODES]

I would love to contribute to this. Is there a way we can work on this together or we can all give this a shot and make a PR?

[tinashe404]

@Ayush783 yes you can work on it if you'd like. I've assigned it to you too

[tinashe404]

@AM1CODES that is allowed, however we wouldn't be able to make the connection for you. If you reach out to the other assignees and they are willing to work with you, or you have someone else in mind then please go ahead.

[Ayush783]

Great! Thanks

[AM1CODES]

Thank you!

[sonle-geekyants]

@Dariamarg I need you to help me some cases in the Files UI:

• The icons for type: ppt, pdf, excel, etc...

3 dots option is to resend (if its sent) and download either way

• I need the design for this.

File Type is a drop down select menu of all file types existing
Background is white
Lines between are # F2F2F2 and 1 thcikness
Roundness of 10 at bottom
DropShadow
0.25% #000000
y=4
Blur 15

• Can you design it?
• When I click on the search icon, how is the design changed?

Chat box is only apparent if there is a message assocaited

• If has many chats, how is the design changed? Will the screen change if I tap on to chat box?

[Dariamarg]

Hey @sonle-geekyants! I completely missed your message:

1. I adjusted (simplified) the design to not include icons

2. Here is the Figma File

3. On the same Figma file as above

4. Search Icon (same Figma):

5. Chat flow (same Figma):

• Icon only appears if there is a message associated
• Second screen is how it would look like