used mdi icons instead of font awesome

packages/api/.env

@@ -15,7 +15,7 @@ PORT_postgres=5433
 ENGINE_postgres=postgres
 
 TOOLBAR=home
-ICON_home=fas fa-home
+ICON_home=mdi mdi-home
 TITLE_home=Home
 PAGE_home=home.html
 STARTUP_PAGES=home

packages/web/package.json

@@ -21,6 +21,7 @@
     "react-ace": "^8.0.0",
     "react-dom": "^16.12.0",
     "react-dropzone": "^11.2.3",
+    "react-helmet": "^6.1.0",
     "react-json-view": "^1.19.1",
     "react-modal": "^3.11.1",
     "react-scripts": "3.3.0",

packages/web/src/App.js

@@ -14,6 +14,7 @@ import { SocketProvider } from './utility/SocketProvider';
 import ConnectionsPinger from './utility/ConnectionsPinger';
 import { ModalLayerProvider } from './modals/showModal';
 import UploadsProvider from './utility/UploadsProvider';
+import ThemeHelmet from './themes/ThemeHelmet';
 
 function App() {
   return (
@@ -28,6 +29,7 @@ function App() {
                     <ModalLayerProvider>
                       <CurrentArchiveProvider>
                         <UploadsProvider>
+                          <ThemeHelmet />
                           <Screen />
                         </UploadsProvider>
                       </CurrentArchiveProvider>

packages/web/src/DragAndDropFileTarget.js

@@ -41,7 +41,7 @@ export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
       <TargetStyled>
         <InfoBox>
           <IconWrapper>
-            <i className="fas fa-cloud-upload-alt" />
+            <span className="mdi mdi-cloud-upload" />
           </IconWrapper>
           <TitleWrapper>Drop the files to upload to DbGate</TitleWrapper>
           <InfoWrapper>Supported file types: csv, MS Excel, json-lines</InfoWrapper>

packages/web/src/TabsPanel.js

@@ -78,7 +78,7 @@ const FileNameWrapper = styled.span`
   margin-left: 5px;
 `;
 
-const CloseButton = styled.i`
+const CloseButton = styled.span`
   margin-left: 5px;
   color: gray;
   &:hover {
@@ -117,9 +117,9 @@ function getTabDbKey(tab) {
 }
 
 function getDbIcon(key) {
-  if (key.startsWith('database://')) return 'fas fa-database';
+  if (key.startsWith('database://')) return 'mdi mdi-database';
-  if (key.startsWith('archive://')) return 'fas fa-archive';
+  if (key.startsWith('archive://')) return 'mdi mdi-archive';
-  return 'fas fa-file';
+  return 'mdi mdi-file';
 }
 
 export default function TabsPanel() {
@@ -253,7 +253,7 @@ export default function TabsPanel() {
             selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
             onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
           >
-            <i className={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
+            <span className={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
           </DbNameWrapper>
           <DbGroupHandler>
             {_.sortBy(tabsByDb[dbKey], 'title').map((tab) => (
@@ -265,10 +265,10 @@ export default function TabsPanel() {
                 onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
                 onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
               >
-                {tab.busy ? <i className="fas fa-spinner fa-spin"></i> : getIconImage(tab.icon)}
+                {tab.busy ? <i className="mdi mdi-loading mdi-spin"></i> : getIconImage(tab.icon)}
                 <FileNameWrapper>{tab.title}</FileNameWrapper>
                 <CloseButton
-                  className="fas fa-times tabCloseButton"
+                  className="mdi mdi-close tabCloseButton"
                   onClick={(e) => {
                     e.preventDefault();
                     closeTab(tab.tabid);

packages/web/src/appobj/AppObjects.js

@@ -68,11 +68,11 @@ export function AppObjectCore({
       {...other}
     >
       {prefix}
-      <IconWrap>{isBusy ? <i className="fas fa-spinner fa-spin"></i> : <Icon />}</IconWrap>
+      <IconWrap>{isBusy ? <span className="mdi mdi-loading mdi-spin"></span> : <Icon />}</IconWrap>
       {title}
       {statusIcon && (
         <StatusIconWrap>
-          <FontIcon icon={statusIcon} title={statusTitle} />
+          <span className={statusIcon} title={statusTitle} />
         </StatusIconWrap>
       )}
     </Component>

packages/web/src/appobj/MacroAppObject.js

@@ -4,7 +4,6 @@ import { MacroIcon, StartIcon } from '../icons';
 
 const macroAppObject = () => ({ name, type, title, group }, { setOpenedTabs }) => {
   const key = name;
-  // const Icon = (props) => <i className="fas fa-archive" />;
   const Icon = MacroIcon;
   const matcher = (filter) => filterName(filter, name, title);
   const groupTitle = group;

packages/web/src/appobj/archiveFileAppObject.js

@@ -60,7 +60,6 @@ function Menu({ data, setOpenedTabs }) {
 
 const archiveFileAppObject = () => ({ fileName, folderName }, { setOpenedTabs }) => {
   const key = fileName;
-  // const Icon = (props) => <i className="fas fa-archive" />;
   const Icon = ArchiveTableIcon;
   const onClick = () => {
     openArchive(setOpenedTabs, fileName, folderName);

packages/web/src/appobj/archiveFolderAppObject.js

@@ -19,7 +19,6 @@ function Menu({ data, setOpenedTabs }) {
 
 const archiveFolderAppObject = () => ({ name }, { setOpenedTabs, currentArchive }) => {
   const key = name;
-  // const Icon = (props) => <i className="fas fa-archive" />;
   const Icon = LocalDbIcon;
   const isBold = name == currentArchive;
   const matcher = (filter) => filterName(filter, name);

packages/web/src/appobj/connectionAppObject.js

@@ -77,10 +77,10 @@ const connectionAppObject = (flags) => (
   let statusIcon = null;
   let statusTitle = null;
   if (openedConnections.includes(_id)) {
-    if (!status) statusIcon = 'fas fa-spinner fa-spin';
+    if (!status) statusIcon = 'mdi mdi-loading mdi-spin';
-    else if (status.name == 'pending') statusIcon = 'fas fa-spinner fa-spin';
+    else if (status.name == 'pending') statusIcon = 'mdi mdi-loading mdi-spin';
-    else if (status.name == 'ok') statusIcon = 'fas fa-check-circle green';
+    else if (status.name == 'ok') statusIcon = 'mdi mdi-check-circle color-green';
-    else statusIcon = 'fas fa-times-circle red';
+    else statusIcon = 'mdi mdi-close-circle color-red';
     if (status && status.name == 'error') {
       statusTitle = status.message;
     }

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -87,12 +87,12 @@ export default function ColumnHeaderControl({
         <ColumnLabel {...column} />
         {order == 'ASC' && (
           <IconWrapper>
-            <FontIcon icon="fas fa-sort-alpha-down green" />
+            <span className="mdi mdi-sort-alphabetical-ascending color-green" />
           </IconWrapper>
         )}
         {order == 'DESC' && (
           <IconWrapper>
-            <FontIcon icon="fas fa-sort-alpha-down-alt green" />
+            <span className="mdi mdi-sort-alphabetical-descending color-green" />
           </IconWrapper>
         )}
       </LabelDiv>

packages/web/src/datagrid/DataFilterControl.js

@@ -291,7 +291,7 @@ export default function DataFilterControl({
         autocomplete="off"
       />
       <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-        <i className="fas fa-filter" />
+        <span className="mdi mdi-filter" />
       </InlineButton>
     </FilterDiv>
   );

packages/web/src/datagrid/DataGridCore.js

@@ -971,7 +971,7 @@ export default function DataGridCore(props) {
               >
                 {filterCount > 0 && (
                   <InlineButton onClick={handleClearFilters} square>
-                    <i className="fas fa-times" />
+                    <span className="mdi mdi-filter-off" />
                   </InlineButton>
                 )}
               </TableHeaderCell>

packages/web/src/freetable/FreeTableColumnEditor.js

@@ -27,8 +27,10 @@ const Name = styled.div`
 const Buttons = styled.div`
   white-space: nowrap;
 `;
-const Icon = styled(FontIcon)`
+const Icon = styled.span`
   // margin-left: 5px;
+  position: relative; 
+  top: 5px;
   &:hover {
     background-color: gray;
   }
@@ -103,10 +105,10 @@ function ColumnManagerRow({ column, onEdit, onRemove, onUp, onDown }) {
     <Row onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
       <Name>{column.columnName}</Name>
       <Buttons>
-        <Icon icon="fas fa-edit" onClick={onEdit} />
+        <Icon className="mdi mdi-pencil" onClick={onEdit} />
-        <Icon icon="fas fa-trash" onClick={onRemove} />
+        <Icon className="mdi mdi-delete" onClick={onRemove} />
-        <Icon icon="fas fa-arrow-up" onClick={onUp} />
+        <Icon className="mdi mdi-arrow-up" onClick={onUp} />
-        <Icon icon="fas fa-arrow-down" onClick={onDown} />
+        <Icon className="mdi mdi-arrow-down" onClick={onDown} />
       </Buttons>
     </Row>
   );

packages/web/src/impexp/ImportExportConfigurator.js

@@ -294,7 +294,7 @@ function SourceName({ name }) {
     <SourceNameWrapper>
       <div>{name}</div>
       <TrashWrapper onClick={handleDelete}>
-        <i className="fas fa-trash" />
+        <span className="mdi mdi-delete" />
       </TrashWrapper>
     </SourceNameWrapper>
   );
@@ -352,7 +352,7 @@ export default function ImportExportConfigurator({ uploadedFile = undefined }) {
           engine={sourceEngine}
         />
         <ArrowWrapper>
-          <i className="fas fa-arrow-right" />
+          <span className="mdi mdi-arrow-right" />
         </ArrowWrapper>
         <SourceTargetConfig
           direction="target"

packages/web/src/modals/ErrorMessageModal.js

@@ -25,7 +25,7 @@ export default function ErrorMessageModal({ modalState, title = 'Error', message
       <ModalContent>
         <Wrapper>
           <IconWrapper>
-            <FontIcon icon="fas fa-times-circle red" />
+            <span className="mdi mdi-close-circle color-red" />
           </IconWrapper>
           {message}
         </Wrapper>

packages/web/src/modals/ModalHeader.js

@@ -23,7 +23,7 @@ export default function ModalHeader({ children, modalState }) {
     <Wrapper>
       <div>{children}</div>
       <CloseWrapper onClick={modalState.close}>
-        <i className="fas fa-times" />
+        <span className="mdi mdi-close" />
       </CloseWrapper>
     </Wrapper>
   );

packages/web/src/themes/ThemeHelmet.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+export default function ThemeHelmet() {
+  return (
+    <Helmet>
+      <style>{`
+        .color-red { color: red; }
+        .color-green { color: green; }
+        .color-on-statusbar-green { color: lime; }
+        .color-blue { color: blue; }
+        `}</style>
+    </Helmet>
+  );
+}

packages/web/src/widgets/DatabaseWidget.js

@@ -126,7 +126,7 @@ function SqlObjectListWrapper() {
   const db = useCurrentDatabase();
 
   if (!db) {
-    return <ErrorInfo message="Database not selected" icon="fas fa-exclamation-circle blue" />;
+    return <ErrorInfo message="Database not selected" icon="mdi mdi-alert-circle color-blue" />;
   }
   const { name, connection } = db;
 

packages/web/src/widgets/DropDownButton.js

@@ -12,7 +12,7 @@ export default function DropDownButton({ children }) {
 
   return (
     <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-      <i className="fas fa-chevron-down" />
+      <span className="mdi mdi-chevron-down" />
     </InlineButton>
   );
 }

packages/web/src/widgets/ErrorInfo.js

@@ -19,11 +19,11 @@ const ContainerSmall = styled.div`
   margin-right: 10px;
 `;
 
-export default function ErrorInfo({ message, icon = 'fas fa-times-circle red', isSmall = false }) {
+export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-red', isSmall = false }) {
   if (isSmall) {
     return (
       <ContainerSmall>
-        <FontIcon icon={icon} />
+        <span className={icon} />
         {message}
       </ContainerSmall>
     );
@@ -31,7 +31,7 @@ export default function ErrorInfo({ message, icon = 'fas fa-times-circle red', i
   return (
     <Container>
       <Icon>
-        <FontIcon icon={icon} />
+        <span className={icon} />
       </Icon>
       {message}
     </Container>

packages/web/src/widgets/LoadingInfo.js

@@ -33,7 +33,7 @@ export default function LoadingInfo({ message, wrapper = false }) {
   const core = (
     <Container>
       <Spinner>
-        <i className="fas fa-spinner fa-spin" />
+        <span className="mdi mdi-loading mdi-spin" />
       </Spinner>
       {message}
     </Container>

packages/web/src/widgets/StatusBar.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { getEngineIcon } from '../icons';
 import { useCurrentDatabase } from '../utility/globalState';
 import { useDatabaseStatus } from '../utility/metadataLoaders';
-import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -22,23 +20,22 @@ export default function StatusBar() {
   const { name, connection } = useCurrentDatabase() || {};
   const status = useDatabaseStatus(connection ? { conid: connection._id, database: name } : {});
   const { displayName, server, user, engine } = connection || {};
-  const EngineIcon = getEngineIcon(engine);
   return (
     <Container>
       {name && (
         <Item>
-          <i className="fas fa-database" /> {name}
+          <i className="mdi mdi-database" /> {name}
         </Item>
       )}
       {(displayName || server) && (
         <Item>
-          <EngineIcon size={12} /> {displayName || server}
+          <span className='mdi mdi-server'/> {displayName || server}
         </Item>
       )}
 
       {user && (
         <Item>
-          <i className="fas fa-user" /> {user}
+          <span className="mdi mdi-account" /> {user}
         </Item>
       )}
 
@@ -46,17 +43,17 @@ export default function StatusBar() {
         <Item>
           {status.name == 'pending' && (
             <>
-              <FontIcon icon="fas fa-spinner fa-spin" /> Loading
+              <span className="mdi mdi-loading mdi-spin" /> Loading
             </>
           )}
           {status.name == 'ok' && (
             <>
-              <FontIcon icon="fas fa-check-circle lime" /> Connected
+              <span className="mdi mdi-check-circle color-on-statusbar-green" /> Connected
             </>
           )}
           {status.name == 'error' && (
             <>
-              <FontIcon icon="fas fa-times-circle red" /> Error
+              <span className="mdi mdi-close-circle color-red" /> Error
             </>
           )}
         </Item>
@@ -64,7 +61,7 @@ export default function StatusBar() {
       {!connection && (
         <Item>
           <>
-            <FontIcon icon="fas fa-plug gray" /> Not connected
+            <span className="mdi mdi-lan-disconnect" /> Not connected
           </>
         </Item>
       )}

packages/web/src/widgets/WidgetIconPanel.js

@@ -21,7 +21,7 @@ const IconWrapper = styled.div`
 export default function WidgetIconPanel() {
   const widgets = [
     {
-      icon: 'fa-database',
+      icon: 'mdi mdi-database',
       name: 'database',
       title: 'Database connections',
     },
@@ -30,12 +30,12 @@ export default function WidgetIconPanel() {
     //   name: 'table',
     // },
     {
-      icon: 'fa-file-alt',
+      icon: 'mdi mdi-file',
       name: 'file',
       title: 'Closed tabs & Saved SQL files',
     },
     {
-      icon: 'fa-archive',
+      icon: 'mdi mdi-archive',
       name: 'archive',
       title: 'Archive (saved tabular data)',
     },
@@ -62,7 +62,7 @@ export default function WidgetIconPanel() {
           onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
           title={title}
         >
-          <i className={`fas ${icon}`} />
+          <span className={icon} />
         </IconWrapper>
       ))}
     </>

yarn.lock

@@ -10096,6 +10096,21 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-input-autosize@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
@@ -10212,6 +10227,11 @@ react-select@^3.1.0:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 react-textarea-autosize@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz#df91387f8a8f22020b77e3833c09829d706a09a5"