Design improvements

[Madis0]

The current Material design looks nice, but is a bit too space-wasting in my opinion. Here are my ideas to improve it:

Style creation

• The Add Style header could double as a text field to set or edit the style's name. The enabled checkbox could be a toggle on the right in header.
• Editor settings could be inside the Advanced card
• The advanced card should be below the code sections (it is advanced after all)
• Back to manage could be an arrow on the header
• Import/export from Mozilla format could be under advanced or on the bottom of sections
• Issues could be on the right as a separate sidebar
• If the last points are done, you can also remove the drawer (Save and Beautify exist elsewhere already)

Style management

• Write new style and Install from file could be shown as a FAB menu
• Backup import/export and Firefox import could be in the Cloud card, renamed as "Backup and sync"
• Update all styles and Help could be header bar icons
• Options and Cloud (Backup and sync) could be collapsible and perhaps aligned to the bottom
• If these points are done, you can also remove the drawer
• The style activated-deactivated button should be a toggle

[sylingd]

I think your advice is good and I will seriously consider them

[sylingd]

I tried to design a new interface, how do you think about this one?

[Madis0]

That looks good!

[sylingd]

How about this design? Could you give me some suggestions?

[sylingd]

Or, maybe this one is better? What do you think?

[Madis0]

I prefer the last one, as it uses space more efficiently.

In style cards the title could be a link to homepage; the export button could be in the edit view instead of the dashboard. Similarly "install from file" could be in export & import tab as it is basically an import feature. And don't forget to use a toggle instead of ✔️/🚫.

[sylingd]

I think, compared to import & export, "install from files" is more like "write a new style". Now there are two buttons in the upper right corner, one button can enable and disable a style, another can switch on/off automatic update. I can not find a good way to use a switcher instead of them.

[Madis0]

I meant you use a toggle instead of the enable/disable button, the automatic update button could be next to it (or maybe next to update button?).

[sylingd]

Do you mean that?

[Madis0]

Yes, the toggle is much more obvious as it is used in other Material projects too.