Fixed missing frame lines in ReadCode

[ranbena]

What current issue(s) from Trello/Github does this address?
Noticed that in the sketch design file there should be markers in the send modal QR scan rubric AND that there are related DOM elements in the code, but the markers do not appear.

Before	After

What problem does this PR solve?

1. The existing DOM element classnames were in plain text instead of CSS module properties.
2. The design implementation wasn't totally accurate - the marker edges should be pointy.

How did you solve this problem?

1. Fixed classnames.
2. Implemented pointy edged with the css border transparent trick.

How did you make sure your solution works?
Manually gazed at it like a madman.

Are there any special changes in the code that we should be aware of?
Since Sass @extend is already used for this, I kicked it up a notch making it into placeholder classes (.frameLine -> %frameLine) which is better for perf in this case.

It all comes down to this. Ain't it nice? 😬

.frameLine {
  &TopLeft {
    @extend %frameLine, %frameLineTop, %frameLineLeft;
  }
  &TopRight {
    @extend %frameLine, %frameLineTop, %frameLineRight;
  }
  &BottomLeft {
    @extend %frameLine, %frameLineBottom, %frameLineLeft;
  }
  &BottomRight {
    @extend %frameLine, %frameLineBottom, %frameLineRight;
  }
}

[coveralls]

Pull Request Test Coverage Report for Build 5458

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 41.087%

---

Totals
Change from base Build 5454:	0.0%
Covered Lines:	1025
Relevant Lines:	2285

---

💛 - Coveralls

[evgenyboxer]

Very nice!!