added font-awesome icons

web/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

web/src/FilesTabsPanel.js

@@ -2,6 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import theme from "./theme";
 
+import { TableIcon } from "./icons";
+
 const files = [
   { name: "app.js" },
   { name: "BranchCategory", type: "table", selected: true },
@@ -22,6 +24,14 @@ const FileTabItem = styled.div`
     props.selected ? theme.mainArea.background : "inherit"};
 `;
 
+const FileNameWrapper = styled.span`
+  margin-left: 5px;
+`;
+
 export default function FilesTabsPanel() {
-  return files.map(file => <FileTabItem {...file}>{file.name}</FileTabItem>);
+  return files.map(file => (
+    <FileTabItem {...file}>
+      <TableIcon /><FileNameWrapper>{file.name}</FileNameWrapper>
+    </FileTabItem>
+  ));
 }

web/src/Screen.js

@@ -3,6 +3,10 @@ import theme from "./theme";
 import styled from "styled-components";
 import FilesTabsPanel from "./FilesTabsPanel";
 
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTable } from '@fortawesome/free-solid-svg-icons'
+
 const BodyDiv = styled.div`
   position: fixed;
   top: ${theme.tabsPanel.height}px;
@@ -52,7 +56,7 @@ const StausBar = styled.div`
 export default function Screen({ children }) {
   return (
     <>
-      <IconBar></IconBar>
+      <IconBar><FontAwesomeIcon icon={faTable} color='gray' size='2x'/></IconBar>
       <LeftPanel></LeftPanel>
       <TabsPanel>
         <FilesTabsPanel></FilesTabsPanel>

web/src/icons/TableIcon.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+export default function TableIcon({ size=16 }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 502 502"
+      enable-background="new 0 0 502 502"
+    >
+      <rect
+        x="10"
+        y="66.375"
+        style={{ fill: "#4EC9DC" }}
+        width="482"
+        height="73.896"
+      />
+      <rect
+        x="10"
+        y="140.039"
+        style={{ fill: "#D1DCEB" }}
+        width="482"
+        height="295.586"
+      />
+      <g>
+        <path
+          d="M492,445.625c5.522,0,10-4.477,10-10V66.375c0-5.523-4.478-10-10-10H10c-5.522,0-10,4.477-10,10v369.25
+			c0,5.523,4.478,10,10,10H492z M482,277.832H381.5v-53.896H482V277.832z M20,223.936h100.5v53.896H20V223.936z M361.5,150.271
+			v53.664H261v-53.664H361.5z M241,150.271v53.664H140.5v-53.664H241z M140.5,223.936H241v53.896H140.5V223.936z M261,223.936h100.5
+			v53.896H261V223.936z M381.5,203.936v-53.664H482v53.664H381.5z M120.5,150.271v53.664H20v-53.664H120.5z M20,297.832h100.5
+			v53.896H20V297.832z M140.5,297.832H241v53.896H140.5V297.832z M261,297.832h100.5v53.896H261V297.832z M381.5,297.832H482v53.896
+			H381.5V297.832z M20,130.039V76.375h462v53.664H20z M20,371.729h100.5v53.896H20V371.729z M140.5,371.729H241v53.896H140.5
+			V371.729z M261,371.729h100.5v53.896H261V371.729z M482,425.625H381.5v-53.896H482V425.625z"
+        />
+        <path d="M209,107.625h192c5.522,0,10-4.477,10-10s-4.478-10-10-10H209c-5.522,0-10,4.477-10,10S203.478,107.625,209,107.625z" />
+        <path d="M436,107.625h22c5.522,0,10-4.477,10-10s-4.478-10-10-10h-22c-5.522,0-10,4.477-10,10S430.478,107.625,436,107.625z" />
+      </g>
+    </svg>
+  );
+}

web/src/icons/index.js

@@ -0,0 +1,3 @@
+
+export { default as TableIcon } from "./TableIcon";
+

web/yarn.lock

@@ -988,6 +988,32 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@fortawesome/fontawesome-common-types@^0.2.26":
+  version "0.2.26"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.26.tgz#6e0b13a752676036f8196f8a1500d53a27b4adc1"
+  integrity sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A==
+
+"@fortawesome/fontawesome-svg-core@^1.2.26":
+  version "1.2.26"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.26.tgz#671569271d6b532cdea5e3deb8ff16f8b7ac251d"
+  integrity sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/free-solid-svg-icons@^5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.0.tgz#8decac5844e60453cc0c7c51437d1461df053a35"
+  integrity sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/react-fontawesome@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz#cb6d4dd3aeec45b6ff2d48c812317a6627618511"
+  integrity sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==
+  dependencies:
+    prop-types "^15.5.10"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -8203,7 +8229,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==