File upload UI: Status messages

[kaganjd]

Code

1. While file is uploading, show blue border and 'Uploading...' rectangle
2. When uploading is done, hide blue border and show 'File saved as...' rectangle

Design

The styling below is approximate and uses general variable names, units, font weights, and measurements, but the ultimate goal is to replicate the above design. Final styling should be in em units instead of px, color variables and font weights should use the existing SCSS names, etc.

Window styling

Same as #375

 {
  box-shadow: inset -4px -4px 4px 0 rgba(0, 0, 0, 0.5);
  border: solid 4px var(--bluish);
}

Rectangle

{
  width: 496px;
  height: 60px;
  background-color: #4a4a4a;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.1);
}

Clock icon

https://modernpictograms.com/

[plxity]

I will take a look at this issue.
But I just wanted to ask one thing,
@catarak @kaganjd, Is this the design when a user uploads a file while dragging it or something else?

[catarak]

this is the design while dragging: https://scene.zeplin.io/project/55f746c54a02e1e50e0632c3/screen/59413d7fd21d1d37bd2615ae

[plxity]

@catarak okay, then what is this design for? :)

[catarak]

the other two screens are for when the asset is uploading, and whether or not it has successfully been added.

[parteekcoder]

@catarak Can you please explain this issue, as it is not clear what to be done in this

And where is this option of upload files located as I am not able to find that

[Keshav-0907]

Hi @raclim @lindapaiste 👋
I want to work on this issue, can you please assign this to me