Based on #92 and #271, @machinic designed a new UI for file uploads! @machinic, @catarak, @lmccart: I'm guessing this is the flow based on what I saw in Zeplin, but please correct me if I'm wrong about any of this.

Code

It seems like the preferred interaction is:

1. User drags a file anywhere on the editor
2. Dragging triggers file/file type detection, handling, and UI
3. On file drop, file gets added to project folder

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

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

Dialog box styling

Background

{
  width: 271px;
  height: 240px;
  border-radius: 2px;
  background-color: var(--white-three);
  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.16);
  border: solid 0.5px #b9d0e1;
}

Header

 {
  font-family: Montserrat;
  font-size: 21px;
  font-weight: bold;
  text-align: left;
  color: rgba(51, 51, 51, 0.87);
}

Body

{
  font-family: Montserrat;
  font-size: 16px;
  line-height: 1.25;
  text-align: left;
  color: var(--black);
}