Add missing design elements

[filoozom]

We're missing a few general design elements:

• [x] Disabled button
• [ ] Loading button
• [ ] Retry button
• [x] A full screen loading animation might be useful as well (while loading data if the connection is slow, encrypting stuff, …)
• [ ] General error states (could not communicate with RPC, device doesn't support required function, …)
• [ ] Global error states (device offline)

[lucille-bellepleure]

On it!

[kikipluche]

DISABLED BUTTON: looks like there is a veil over it, I've used it in boardwalk S01E01 see example, you can also find it in the sketch, maybe barbara needs to write the html for this first?

[kikipluche]

FULL SCREEN LOADING ANIMATION: there is the green loading screen with the 3 animated dots. I think in terminal this screen hasn't been with the animated loading dots, but that should change when we start with boardwalk, or change now.

[kikipluche]

LOADING BUTTON: where do we need this, except for the loading screen as above?

[kikipluche]

RETRY BUTTON: is there an example of where this is needed?

[kikipluche]

ERROR STATE: The red screen that I've spotted in the terminal figma

Or do you mean we need copy for these error states?

[sugarpusher]

I've created disabled styles but I could only find the round button in the design, so I used the same pattern for the other buttons. The pattern is: when disabled, the content of the button (the icon in the round buttons and the text in the rectangular buttons) is displayed at .25 opacity.

I also created a "loading" animation, I looked at the green screen mentioned above in sketch but the dots were just text and there wasn't an animation so I made something up. I can of course change it if desired.

Not sure what needs to be done in regards to the remaining items, do they exist or do they need to be designed?

I published the edits to my repo here (https://github.com/sugarpusher/sc-terminal), do you need me to provide them in a different way?