feat: start stubbing main features

src/containers/UserHeader/UserHeader.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+interface UserHeaderProps {
+  username?: string;
+  avatarUrl?: string;
+}
+
+const AVATAR_SIZE = 50;
+
+const UserHeader: React.FC<UserHeaderProps> = ({ username, avatarUrl }) => {
+  if (username && avatarUrl) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'row',
+          flex: 1,
+          flexGrow: 1,
+          margin: '0 10px',
+          padding: '5px 0px',
+        }}
+      >
+        <div style={{ width: '100%', marginRight: '10px' }}>
+          <p>{username}</p>
+        </div>
+        <div
+          style={{
+            width: AVATAR_SIZE,
+            height: AVATAR_SIZE,
+            minWidth: AVATAR_SIZE,
+            minHeight: AVATAR_SIZE,
+            maxWidth: AVATAR_SIZE,
+            maxHeight: AVATAR_SIZE,
+            borderRadius: '50%',
+            overflow: 'hidden',
+            marginLeft: '10px',
+          }}
+        >
+          <img
+            style={{ width: AVATAR_SIZE, height: AVATAR_SIZE }}
+            src={avatarUrl}
+            alt="User Avatar"
+          />
+        </div>
+      </div>
+    );
+  } else {
+    return <span>Login/Sign up</span>;
+  }
+};
+
+export default UserHeader;

src/pages/Popup/Popup.css

@@ -1,20 +1,56 @@
+/* 
+equalify colors:
+primary green: #2C5E24
+secondary white: #ffffff
+tertiary off-white: #C1C6C1
+ */
+
+* {
+  font-family: 'Source Sans 3', sans-serif;
+}
+
+div {
+  display: flex;
+  flex: 1;
+}
+
+p {
+  text-align: start;
+  /* color is complement of off-white */
+  color: #3e393e;
+  font-weight: 400;
+  font-size: calc(10px + 2vmin);
+}
+
 .App {
   position: absolute;
+  display: block;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   text-align: center;
   height: 100%;
   padding: 10px;
-  background-color: #282c34;
+  /* white */
+  background-color: #ffffff;
 }
 
 .App-logo {
   height: 30vmin;
   pointer-events: none;
 }
 
+.border-green {
+  border: 1px solid green;
+}
+.border-red {
+  border: 1px solid red;
+}
+.border-blue {
+  border: 1px solid blue;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
@@ -24,15 +60,63 @@
 .App-header {
   height: 100%;
   display: flex;
-  flex-direction: column;
+  flex: 1;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  /* equalify green */
+  border-bottom: 3px solid #2c5e24;
+}
+
+.App-content {
+  display: flex;
+  flex: 1;
+  overflow-y: scroll;
+  flex-direction: column;
 }
 
-.App-link {
-  color: #61dafb;
+.main-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* background: #f0f; */
+}
+
+.section {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  padding: 20px 5px;
+  /* equalify green */
+  border-bottom: #2c5e24 1px solid;
+}
+/* disable bottom border for last .section */
+.section:last-child {
+  border-bottom: none;
+}
+
+/* define what a <button/> in .section looks like */
+.section button {
+  display: flex;
+  flex: 1;
+  width: 90%;
+  margin: 5px;
+  padding: 15px;
+  border: none;
+  border-radius: 5px;
+  background-color: #2c5e24;
+  color: white;
+  font-weight: 600;
+  font-size: calc(10px + 2vmin);
+  cursor: pointer;
 }
 
 @keyframes App-logo-spin {

src/pages/Popup/Popup.jsx

@@ -1,25 +1,47 @@
 import React from 'react';
 import logo from '../../assets/img/logo.svg';
-import Greetings from '../../containers/Greetings/Greetings';
+import icon from '../../assets/img/icon-128.png';
+import UserHeader from '../../containers/UserHeader/UserHeader';
 import './Popup.css';
 
+// define a Section that receives a title and onClick function
+const Section = ({ title, onClick }) => {
+  return (
+    <div className="section">
+      <button onClick={onClick}>{title}</button>
+    </div>
+  );
+};
+
+/**
+ * TODO:
+ *
+ * Decide if we're using:
+ * - React Router
+ * - Redux
+ * - Context API
+ *
+ * add provider for:
+ * - handling Auth
+ * - submitting issues
+ *
+ */
+
 const Popup = () => {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/pages/Popup/Popup.jsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React!
-        </a>
-      </header>
+      <div className="App-content">
+        <div className="App-header">
+          <UserHeader username={'Morgan Smith'} avatarUrl={icon} />
+        </div>
+        <div className="main-content">
+          <Section title="Meta Page Issue" onClick={() => alert('meta page')} />
+          <Section
+            title="Specific Issue"
+            onClick={() => alert('specific issue')}
+          />
+        </div>
+      </div>
     </div>
   );
 };