add comment box
@@ -10,7 +10,7 @@ export class Note extends Component {
return (
- <div className="flex justify-center mt4 ph4 pb4">
+ <div className="flex justify-center overflow-y-scroll mt4 ph4 pb4">
<div className="w-100 mw6">
<div className="flex flex-column">
<h7 className="f9 mb1">Title</h7>
@@ -20,23 +20,31 @@ export class Note extends Component {
</div>
</div>
- <p className="f9 mt7 mb12">
+ <p className="f9 mt7 mb12 lh-solid">
I dreamt of urbit hardware - stars and galaxies and planets had differing forms and size - solid and friendly forms, non-illuminated, state clear, stone-like, -henge-like
</p>
<div className="flex mt4">
- <a href="" className="di flex-column w-50 pv6 bt br bb b--gray4">
+ <a href="" className="di flex-column w-50 pv6 bt br bb b--gray3">
<div className="f9 gray2 mb2">Previous</div>
<div className="f9 mb1">%loud</div>
<div className="f9 gray2">14d ago</div>
</span>
- <a href="" className="di flex-column tr w-50 pv6 bt bb b--gray4">
+ <a href="" className="di flex-column tr w-50 pv6 bt bb b--gray3">
<div className="f9 gray2 mb2">Next</div>
<div className="f9 mb1">+advent of %code ~2019.12</div>
<div className="f9 gray2">6d ago</div>
</div>
</div>
+ <form class="mt8">
+ <div>
+ <textarea id="comment" name="comment" placeHolder="Leave a comment here" class="f9 db border-box hover-black w-100 ba b--gray3 pt3 ph3 pb8 br1 mb2" aria-describedby="comment-desc"></textarea>
+ </div>
+ <button className="f9 pa2 bg-white ba b--gray2 gray2">
+ Add comment
+ </button>
+ </form>
</div>
</div>
