From a257c3a60d17b56a960712783cec02adfe1d27e3 Mon Sep 17 00:00:00 2001
From: nareh agazaryan <53708656+nareha@users.noreply.github.com>
Date: Sun, 11 Feb 2024 14:59:29 -0800
Subject: [PATCH] feat: add initial navbar and preliminary profile page (#38)

* feat: add skeleton navbar and routing capability

* style: add missing semicolon in index.tsx

* style: add missing semicolon in LandingPage.tsx

* feat: add styling for initial navbar

* feat: finalize preliminary profile page
---
 frontend/src/components/Navbar/Navbar.css     | 26 +++++++++++++++++++
 frontend/src/components/Navbar/Navbar.tsx     |  2 ++
 .../components/ProfilePage/ProfilePage.css    |  4 ++-
 .../components/ProfilePage/ProfilePage.tsx    |  2 ++
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Navbar/Navbar.css

diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
new file mode 100644
index 0000000..899c3ba
--- /dev/null
+++ b/frontend/src/components/Navbar/Navbar.css
@@ -0,0 +1,26 @@
+nav {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 2%;
+  box-sizing: border-box;
+  gap: 1.5rem;
+  margin-bottom: 15px;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
+}
+
+a {
+  text-decoration: none;
+}
+
+a:visited {
+  color: inherit;
+}
+
+/* 
+ * TODO: Update styling for hover and active links.
+ *       Just placeholders for now for differentiation.
+ */
+a:hover, a.active {
+  text-decoration: underline;
+}
diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx
index 254b943..011cc40 100644
--- a/frontend/src/components/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navbar/Navbar.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import './Navbar.css';
+
 const Navbar: React.FC = () => {
   return (
     <nav>
diff --git a/frontend/src/components/ProfilePage/ProfilePage.css b/frontend/src/components/ProfilePage/ProfilePage.css
index dd15743..ccf1f05 100644
--- a/frontend/src/components/ProfilePage/ProfilePage.css
+++ b/frontend/src/components/ProfilePage/ProfilePage.css
@@ -1,6 +1,8 @@
 .info-container {
   margin: auto;
   width: 50%;
+  /* Border is just for visualization of the div dimensions */
+  padding: 2rem;
   border-style: solid;
-  border-color: black;
+  border-color: rgba(0,0,0,.4);
 }
diff --git a/frontend/src/components/ProfilePage/ProfilePage.tsx b/frontend/src/components/ProfilePage/ProfilePage.tsx
index 0daf07f..81ac64a 100644
--- a/frontend/src/components/ProfilePage/ProfilePage.tsx
+++ b/frontend/src/components/ProfilePage/ProfilePage.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
+
 import './ProfilePage.css';
 
 const ProfilePage: React.FC = () => {
   return (
     <div className="info-container">
+      <b>User Information</b>
       <p>Name: Mickey Mouse</p>
       <p>Email: mickey@mouse.com</p>
     </div>