investor info display:

2 files changed, 72 insertions, 2 deletions

diff --git a/react-frontend/src/components/InvestorInfo.js b/react-frontend/src/components/InvestorInfo.js
index 703c4c6..562b912 100644
--- a/react-frontend/src/components/InvestorInfo.js
+++ b/react-frontend/src/components/InvestorInfo.js
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 // CSS import
 import "../css/UserCheckin.css";
+import "../css/InvesterInfo.css";
 
 /**
  * Componenet for checkins. Has a toggle to show more info.
@@ -20,7 +21,7 @@ function InvestorInfo(props) {
       end: toEpochMilli(props.dates.end),
     });
 
-    if (props.name === "Mathews Krista Jean") {
+    if (props.name === "") {
       return;
     }
 
@@ -54,11 +55,34 @@ function InvestorInfo(props) {
     </li>
   );*/
 
+  const stockTable = () => {
+    return (
+      <div id="stockTable">
+        <div className="tableHeader">
+          <div className="symbol-row">Symbol</div>
+          <div className="gain-row">Realized gain</div>
+          <div className="gain-row">Unrealized gain</div>
+        </div>
+      </div>
+    );
+  };
+
   useEffect(() => getInfo(), [props.name, props.isSelected, props.personId]);
 
   return (
     <div className="Chosen-user" hidden={false}>
-      hi
+      <h2 id="investerName">{"CRUTCHFIELD BRADFORD"}</h2>
+      <div id="top-bar">
+        <div id="gain-number">
+          <p className="bigNumber">{583}$</p> gain
+        </div>
+
+        <div>
+          <p className="bigNumber">{2.8}%</p>
+          compared to {1.2}% on SP500
+        </div>
+      </div>
+      {stockTable()}
     </div>
   );
 }
diff --git a/react-frontend/src/css/InvesterInfo.css b/react-frontend/src/css/InvesterInfo.css
new file mode 100644
index 0000000..5385965
--- /dev/null
+++ b/react-frontend/src/css/InvesterInfo.css
@@ -0,0 +1,46 @@
+#top-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
+  border-bottom: solid 1px white;
+  margin-top: 0px;
+}
+
+/* div {
+  border: solid white;
+} */
+
+/* p {
+  border: solid white;
+} */
+
+.bigNumber {
+  font-size: 25pt;
+  margin: 0;
+}
+
+.Chosen-user {
+  background-color: #333333;
+  color: lightgreen;
+  width: 350px;
+  border-radius: 10px;
+}
+
+.tableHeader {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.symbol-row {
+  margin-right: 20px;
+}
+
+.gain-row {
+  margin-right: 20px;
+}