left menu icon design

web/src/Screen.js

@@ -2,10 +2,7 @@ import React from "react";
 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'
+import SideIconPanel from "./SideIconPanel";
 
 const BodyDiv = styled.div`
   position: fixed;
@@ -56,7 +53,9 @@ const StausBar = styled.div`
 export default function Screen({ children }) {
   return (
     <>
-      <IconBar><FontAwesomeIcon icon={faTable} color='gray' size='2x'/></IconBar>
+      <IconBar>
+        <SideIconPanel />
+      </IconBar>
       <LeftPanel></LeftPanel>
       <TabsPanel>
         <FilesTabsPanel></FilesTabsPanel>

web/src/SideIconPanel.js

@@ -0,0 +1,47 @@
+import React from "react";
+import theme from "./theme";
+import styled from "styled-components";
+import { FontIcon } from "./icons";
+
+const IconWrapper = styled.div`
+  color: ${theme.widgetMenu.iconFontColor};
+  font-size: ${theme.widgetMenu.iconFontSize};
+  height: ${theme.widgetMenu.iconSize}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    background-color: ${theme.widgetMenu.backgroundHover};
+  }
+  background-color: ${props =>
+    props.isSelected ? theme.widgetMenu.backgroundSelected : "inherit"};
+`;
+
+export default function SideIconPanel() {
+  const widgets = [
+    {
+      icon: "fa-database"
+    },
+    {
+      icon: "fa-table",
+      isSelected: true
+    },
+    {
+      icon: "fa-file-alt"
+    },
+    {
+      icon: "fa-cog"
+    },
+    {
+      icon: "fa-check"
+    }
+  ];
+
+  return widgets.map(({ icon, isSelected }) => (
+    <IconWrapper key={icon} isSelected={isSelected}>
+      <div>
+        <FontIcon name={icon} />
+      </div>
+    </IconWrapper>
+  ));
+}

web/src/icons.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+import _ from "lodash";
 
 function getIconImage(src, { size = 16, style = {}, className, title }) {
   if (src.endsWith(".svg")) {
@@ -21,52 +22,92 @@ function getIconImage(src, { size = 16, style = {}, className, title }) {
   );
 }
 
-export const TableIcon = (props) => getIconImage("table2.svg", props);
-export const ViewIcon = (props) => getIconImage("view2.svg", props);
-export const DatabaseIcon = (props) => getIconImage("database.svg", props);
-export const ServerIcon = (props) => getIconImage("server.svg", props);
+export function getFontIcon(fontIconSpec, props = {}) {
+  let iconClass = fontIconSpec;
+  if (!iconClass) return null;
+  var parts = iconClass.split(" ");
+  var name = parts[0];
+  parts = parts.slice(1);
 
-export const MicrosoftIcon = (props) => getIconImage("microsoft.svg", props);
-export const MySqlIcon = (props) => getIconImage("mysql.svg", props);
-export const PostgreSqlIcon = (props) => getIconImage("postgresql.svg", props);
-export const SqliteIcon = (props) => getIconImage("sqlite.svg", props);
+  var className = props.className || "";
 
-export const ProcedureIcon = (props) => getIconImage("procedure2.svg", props);
-export const FunctionIcon = (props) => getIconImage("function.svg", props);
-export const TriggerIcon = (props) => getIconImage("trigger.svg", props);
+  // if (_.startsWith(name, 'bs-')) className += ` glyphicon glyphicon-${name.substr(3)}`;
+  if (_.startsWith(name, "fa-")) className += ` fas fa-${name.substr(3)}`;
 
-export const HomeIcon = (props) => getIconImage("home.svg", props);
-export const PrimaryKeyIcon = (props) => getIconImage("primarykey.svg", props);
-export const ForeignKeyIcon = (props) => getIconImage("foreignkey.svg", props);
-export const ComplexKeyIcon = (props) => getIconImage("complexkey.svg", props);
-export const VariableIcon = (props) => getIconImage("variable.svg", props);
-export const UniqueIcon = (props) => getIconImage("unique.svg", props);
-export const IndexIcon = (props) => getIconImage("index.svg", props);
+  if (_.includes(parts, "spin")) className += " fa-spin";
 
-export const StartIcon = (props) => getIconImage("start.svg", props);
-export const DownCircleIcon = (props) => getIconImage("down_circle.svg", props);
+  var style = props.style || {};
 
-export const ColumnIcon = (props) => getIconImage("column.svg", props);
+  var last = parts[parts.length - 1];
+  if (last && last != "spin") {
+    style["color"] = last;
+  }
 
-export const SqlIcon = (props) => getIconImage("sql.svg", props);
-export const ExcelIcon = (props) => getIconImage("excel.svg", props);
-export const DiagramIcon = (props) => getIconImage("diagram.svg", props);
-export const QueryDesignIcon = (props) => getIconImage("querydesign.svg", props);
-export const LocalDbIcon = (props) => getIconImage("localdb.svg", props);
-export const CsvIcon = (props) => getIconImage("csv.svg", props);
-export const ChangeSetIcon = (props) => getIconImage("changeset.svg", props);
-export const BinaryFileIcon = (props) => getIconImage("binaryfile.svg", props);
+  return <i className={className} style={style} title={props.title} />;
+}
 
-export const ReferenceIcon = (props) => getIconImage("reference.svg", props);
-export const LinkIcon = (props) => getIconImage("link.svg", props);
+export const TableIcon = props => getIconImage("table2.svg", props);
+export const ViewIcon = props => getIconImage("view2.svg", props);
+export const DatabaseIcon = props => getIconImage("database.svg", props);
+export const ServerIcon = props => getIconImage("server.svg", props);
 
-export const SequenceIcon = (props) => getIconImage("sequence.svg", props);
-export const CheckIcon = (props) => getIconImage("check.svg", props);
+export const MicrosoftIcon = props => getIconImage("microsoft.svg", props);
+export const MySqlIcon = props => getIconImage("mysql.svg", props);
+export const PostgreSqlIcon = props => getIconImage("postgresql.svg", props);
+export const SqliteIcon = props => getIconImage("sqlite.svg", props);
 
-export const LinkedServerIcon = (props) => getIconImage("linkedserver.svg", props);
+export const ProcedureIcon = props => getIconImage("procedure2.svg", props);
+export const FunctionIcon = props => getIconImage("function.svg", props);
+export const TriggerIcon = props => getIconImage("trigger.svg", props);
 
-export const EmptyIcon = (props) =>
+export const HomeIcon = props => getIconImage("home.svg", props);
+export const PrimaryKeyIcon = props => getIconImage("primarykey.svg", props);
+export const ForeignKeyIcon = props => getIconImage("foreignkey.svg", props);
+export const ComplexKeyIcon = props => getIconImage("complexkey.svg", props);
+export const VariableIcon = props => getIconImage("variable.svg", props);
+export const UniqueIcon = props => getIconImage("unique.svg", props);
+export const IndexIcon = props => getIconImage("index.svg", props);
+
+export const StartIcon = props => getIconImage("start.svg", props);
+export const DownCircleIcon = props => getIconImage("down_circle.svg", props);
+
+export const ColumnIcon = props => getIconImage("column.svg", props);
+
+export const SqlIcon = props => getIconImage("sql.svg", props);
+export const ExcelIcon = props => getIconImage("excel.svg", props);
+export const DiagramIcon = props => getIconImage("diagram.svg", props);
+export const QueryDesignIcon = props => getIconImage("querydesign.svg", props);
+export const LocalDbIcon = props => getIconImage("localdb.svg", props);
+export const CsvIcon = props => getIconImage("csv.svg", props);
+export const ChangeSetIcon = props => getIconImage("changeset.svg", props);
+export const BinaryFileIcon = props => getIconImage("binaryfile.svg", props);
+
+export const ReferenceIcon = props => getIconImage("reference.svg", props);
+export const LinkIcon = props => getIconImage("link.svg", props);
+
+export const SequenceIcon = props => getIconImage("sequence.svg", props);
+export const CheckIcon = props => getIconImage("check.svg", props);
+
+export const LinkedServerIcon = props =>
+  getIconImage("linkedserver.svg", props);
+
+export const EmptyIcon = props =>
   getIconImage(
     "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
     props
   );
+
+export const TimesRedIcon = props => getFontIcon("fa-times red", props);
+export const TimesGreenCircleIcon = props =>
+  getFontIcon("fa-times-circle green", props);
+export const GrayFilterIcon = props =>
+  getFontIcon("fa-filter lightgray", props);
+export const ExclamationTriangleIcon = props =>
+  getFontIcon("fa-exclamation-triangle", props);
+export const HourGlassIcon = props => getFontIcon("fa-hourglass", props);
+export const InfoBlueCircleIcon = props =>
+  getFontIcon("fa-info-circle blue", props);
+
+export const SpinnerIcon = props => getFontIcon("fa-spinner spin", props);
+
+export const FontIcon = ({ name }) => <i className={`fas ${name}`}></i>;

web/src/index.js

@@ -1,10 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import "@fortawesome/fontawesome-free/css/all.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

web/src/theme.js

@@ -1,7 +1,11 @@
 export default {
   widgetMenu: {
-    iconSize: 80,
-    background: "#222"
+    iconSize: 60,
+    background: "#222",
+    iconFontSize: "23pt",
+    iconFontColor: "#eee",
+    backgroundHover: "#555",
+    backgroundSelected: "#4CAF50",
   },
   leftPanel: {
     width: 300,
@@ -9,8 +13,8 @@ export default {
   },
   tabsPanel: {
     height: 30,
-    background:'#ddd',
-    hoverFont: '#338'
+    background: "#ddd",
+    hoverFont: "#338"
   },
   statusBar: {
     height: 20,