new ui/ui in remotestorage-widget?

[ghost]

Hi everyone.

concept

I would like to help the remote-storage community with a new ui/ux idea.

ui/ux

img-before

img-after

image-description: As we can see in the image we have a new ui/ux for widget: remote-storage

behavior

When clicking on the remote-storage button, the background has an effect called "light with blur overlay" that highlights the actions that the user must have to save their data

why?

1. Devzstudio/Web3UIKit is open source Web3 UI Components using ReactJs, Styled Components.
2. this improves remote-storage ux/ui
3. Would like to help the remote-storage community with a new ui/ux idea.

Links

• Demo
• source-code ui/ux

question/feedback

What do you all think of the idea?

[DougReeder]

It is certainly a handsome UI. The current dialog does not block any of the app's UI; does this effect block the apps' UI? Also, how many bytes will the download be for users?

[ghost]

Hi DougReeder.

It is certainly a handsome UI.

thank you for feedback. I did a redesign of the original project for the remote-storage-widget. Would like to help the remote-storage community with a new ui/ux idea.

The current dialog does not block any of the app's UI; does this effect block the apps' UI?

Yes.

Also, how many bytes will the download be for users?

the size difference is minimal, it's just css, html and a little bit of js.

[raucao]

Not sure I understand what's being proposed. Is it only about the blur on the modal backdrop?

[ghost]

Hi raucao, thank your for feedback.

Not sure I understand what's being proposed. Is it only about the blur on the modal backdrop?

Yes(only about the blur on the modal backdrop).

[raucao]

OK, then I don't see why we'd need a whole library for that. A couple of lines of CSS should do. Pull requests welcome!

(No need to ask beforehand in the future, just open PRs with what you propose, so it can be discussed based on working code.)

[ghost]

Hi raucao.

OK, then I don't see why we'd need a whole library for that. A couple of lines of CSS should do. Pull requests welcome! (No need to ask beforehand in the future, just open PRs with what you propose, so it can be discussed based on working code.)

thank you for feedback.

Update I'll send a pull-request with the light and blur effect. And with percentage:

img 1

img 2

why? Things in the cloud have information about the amount of data available. I'm thinking of adding this feature for anyone using remote-storage or a third-party service with remote-storage.

how? Please, see this: theus.github.io/chart.css - chart-css framework.

What do you all think of the idea?