used mdi icons instead of font awesome

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>
       ))}
     </>