feat: Add Layout for Resources Page

visualization_tool/package.json

@@ -11,6 +11,10 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

visualization_tool/src/App.css

@@ -1,13 +1,59 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 15em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+/* Header Styling */
+
+header {
+  display: flex;
+  align-items: center;
+
+  padding: 8px 0;
+  border-bottom: 2px solid #dadce0;
+}
+
+header .logo {
+  margin-right: 10px;
+  margin-left: 30px;
+  width: 39px;
+}
+
+header p {
+  font-size: 20px;
+  font-weight: 300;
+}
+
+/* Pages Navbar*/
+.pages-nav {
+  display: flex;
+  padding: 17px 0;
+  border-bottom: 2px solid #dadce0;
+}
+
+.pages-nav a {
+  padding: 0 20px;
+  font-size: 16px;
+  text-decoration: none;
+  color: #000;
+}
+
+.pages-nav a:hover {
+  color: #3367d6;
+}
+
+.pages-nav a.active {
+  color: #3367d6;
+  font-weight: 500;
+}
+
+.pages-nav a.active::after {
+  content: '';
+  position: relative;
+  top: 19px;
+  left: -20px;
+  display: block;
+  width: calc(100% + 40px);
+  height: 2px;
+  background-color: #3367d6;
+}
+
+main {
+  margin-top: 55px;
+  display: flex;
 }

visualization_tool/src/App.tsx

@@ -1,19 +1,26 @@
+import ControlMenu from './components/ControlMenu/ControlMenu';
+import ResourcesList from './components/ResourcesList/ResourcesList';
+
 import logo from '/logo.png';
 import './App.css';
 
 function App() {
   return (
     <>
-      <div>
-        <a
-          href="https://github.com/google/gcp_scanner"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <img src={logo} className="logo" alt="GCP Scanner logo" />
+      <header>
+        <img src={logo} className="logo" alt="GCP Scanner logo" />
+        <p>Scanner</p>
+      </header>
+      <div className="pages-nav">
+        <a className="active" href="">
+          Resources
         </a>
+        <a href="">IAM Policy</a>
       </div>
-      <h1>Hello GCP Scanner!</h1>
+      <main>
+        <ControlMenu />
+        <ResourcesList />
+      </main>
     </>
   );
 }

visualization_tool/src/components/ControlMenu/ControlMenu.css

@@ -0,0 +1,24 @@
+.control-menu {
+  flex-basis: 350px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.search-bar {
+  background-color: #f4f4f4;
+  border: 0.5px solid #999999;
+  border-radius: 5px;
+  padding: 6px 15px;
+}
+
+#search-input {
+  background-color: #f4f4f4;
+  border: none;
+  font-size: 14px;
+}
+
+#search-input:focus {
+  outline: none;
+}

visualization_tool/src/components/ControlMenu/ControlMenu.tsx

@@ -0,0 +1,24 @@
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+
+import './ControlMenu.css';
+
+const ControlMenu = () => {
+  return (
+    <div className="control-menu">
+      <div className="search-bar">
+        <input
+          type="text"
+          name="search-input"
+          id="search-input"
+          placeholder="Resource Name"
+        />
+        <IconButton sx={{p: '0', color: '#3367D6'}} aria-label="search">
+          <SearchIcon />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
+
+export default ControlMenu;

visualization_tool/src/components/ResourcesList/ResourcesList.css

@@ -0,0 +1,11 @@
+.resources-list {
+  flex-grow: 1;
+}
+
+.resources-list h1 {
+  font-family: 'Inter';
+  font-weight: 200;
+  font-size: 38px;
+  line-height: 46px;
+  color: #000000;
+}

visualization_tool/src/components/ResourcesList/ResourcesList.tsx

@@ -0,0 +1,11 @@
+import './ResourcesList.css';
+
+const ResourcesList = () => {
+  return (
+    <div className="resources-list">
+      <h1>Found Resources</h1>
+    </div>
+  );
+};
+
+export default ResourcesList;

visualization_tool/src/index.css

@@ -1,18 +1,8 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
 
-body {
+* {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3em;
-  line-height: 1.1;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
 }