Added css for invite notification

Author: johnwonghw

client/src/MainApp/MatchmakerPage.jsx

@@ -33,12 +33,23 @@ class MatchmakerPage extends Component {
   openPopupbox(senderData, receiverData) {
     const content = (
       <div>
-        <div>
-          {senderData.username + senderData.blurb + senderData.tagline}
+        <div className="notif-avatar-div">
+          <img className="notif-avatar" src={"https://api.adorable.io/avatars/285/" + senderData.username + "@adorable.io.png"} /> 
+        </div>
+        <div className="notif-username">
+          {senderData.username}
         </div>
+        <div className="notif-tagline">
+          {senderData.tagline}
+        </div>
+        <br/>
         <div>
-          <button onClick={(event) => { this.acceptInvitation(senderData, receiverData); this.closePopupBox() }}>Accept</button>
-          <button onClick={this.closePopupBox()}>Decline</button>
+          {senderData.blurb}
+        </div>
+        <br/>
+        <div className="notif-btn">
+          <button className="btn btn-lg" onClick={(event) => { this.acceptInvitation(senderData, receiverData); this.closePopupBox() }}>Accept</button>
+          <button className="btn btn-lg" onClick={(event) => { this.closePopupBox() }}>Decline</button>
         </div>
       </div>
     )

client/styles/main.scss

@@ -171,7 +171,8 @@
 }
 
 .popupbox-content {
-  overflow: hidden;
+  overflow: auto;
+  text-align: center;
 }
 
 .popupbox-wrapper {
@@ -214,8 +215,12 @@
 }
 
 .popupbox-content {
-  height: 300px;
+  height: 450px;
+  width: 350px;
   padding: 20px 24px 30px;
+  background: #3e4444;
+  color: white;
+  font-size: 1.25em;
 }
 
 .popupbox-titleBar {
@@ -246,6 +251,30 @@
   pointer-events: auto;
 }
 
+.notif-username {
+  font-size: 2em;
+}
+
+.notif-tagline {
+  font-size: 15px;
+}
+
+.notif-avatar-div {
+  text-align: center;
+  margin-bottom: 5px;
+}
+
+.notif-avatar {
+  height: 150px;
+  width: 150px;
+}
+
+.notif-btn {
+ text-align: center;
+ display: flex;
+ justify-content: space-evenly;
+}
+
 .popupbox[data-title='bottom'] .popupbox-content { box-shadow: 0 1px 1px rgba(0, 0, 0, .3) }
 .popupbox[data-title='bottom'] .popupbox-titleBar { box-shadow: none; border-top: 1px #ccc solid }