replacing fa-plug with fusionDB logo

Author: marmoure

fusion-studio-extension/src/browser/commands.ts

@@ -19,7 +19,7 @@ export const actConnect: FSAction = {
   menu: MENU,
   menuLabel: 'New Server...',
   keys: 'ctrlcmd+shift+n',
-  icon: 'fa fa-plug',
+  icon: 'fa fusion-menu-icon',
   execute: (core, prepare) => () => prepare && prepare().then(() => core.newConnection()),
 };
 export const actDisconnect: FSAction = {

fusion-studio-extension/src/browser/style/fusion.svg

@@ -35,7 +35,7 @@ export class FSWelcomeContribution extends AbstractViewContribution<FSWelcomeWid
     menus.registerMenuAction(CommonMenus.HELP, {
       commandId: 'FusionEval:welcome',
       label: 'Fusion Studio',
-      icon: 'fa fa-plug',
+      icon: 'fa fusion-menu-icon',
       order: '0',
     });
   }

fusion-studio-extension/src/browser/welcome-contribution.ts

@@ -6,11 +6,19 @@
     text-align: center;
     margin: 4px 0 8px;
     color: #fff;
+
+    
     i {
-      line-height: 1.28571429em;
-      border: 4px solid;
-      border-radius: 100%;
+      // remove the circle
+      // line-height: 1.28571429em;
+      // border: 4px solid;
+      // border-radius: 100%;
       overflow: hidden;
+
+      // for the fusion-logo
+      height: 3rem;
+      width: 8rem;
+      background-position: bottom;
     }
   }
   .description {

fusion-studio-extension/src/browser/widget/_home.scss

@@ -6,6 +6,9 @@
   flex: 1;
   margin-bottom: 4px;
   height: 23px;
+  >.title {
+    display: flex;
+  }
   > span:first-child {
     flex: 1;
     i {

fusion-studio-extension/src/browser/widget/_toolbar.scss

@@ -9,4 +9,66 @@
       text-decoration: underline;
     }
   }
-}
+}
+
+// fusion-logo style
+.fusion {
+  &-header {
+    align-items: center;
+    display: flex;
+  }
+  &-logo {
+    // i feel bad for this monstrosity but without it, it doesnt work 
+    background-repeat: no-repeat !important; //
+    background-size: contain !important; // theia has forced my hand
+    margin-right: 8px;
+    display: inline-block;
+    width: 4rem;
+    padding-top: 3rem;
+    background: url(fusion.svg);
+  }
+
+  &-menu-icon{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      content: "";
+      background: url(fusion.svg);      
+      width: 100%;
+      background-position-x: center;
+      height: 0.7rem;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+
+  &-tabBar-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      content: "";
+      background: url(fusion.svg);
+      width: 2rem;
+      height: 1.95rem;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+
+  &-toolbar-icon {
+    background: url(fusion.svg);
+    padding-top: 5%;
+    width: 10%;
+    background-position-x: right;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  
+}
+

fusion-studio-extension/src/browser/widget/_welcome.scss

@@ -10,7 +10,7 @@ export class FSHome extends React.Component<FSHomeProps, any> {
     return (
       <div id="fusion-home" className='theia-navigator-container'>
         <div className="title">
-          <p><i className="fa fa-plug fa-fw fa-5x" /></p>
+          <i className="fusion-logo" />
           <p>Fusion Studio</p>
         </div>
         <div className="description">

fusion-studio-extension/src/browser/widget/home.tsx

@@ -24,7 +24,7 @@ export class FSViewWidget extends TreeWidget {
     this.id = 'fusion-view';
     this.title.label = 'Servers';
     this.title.caption = 'Servers';
-    this.title.iconClass = 'fa fa-plug';
+    this.title.iconClass = 'fa fusion-tabBar-icon';
     this.title.closable = true;
     this.addClass('fusion-view');
   }

fusion-studio-extension/src/browser/widget/main.tsx

@@ -30,7 +30,7 @@ export class FSToolbar extends React.Component<FSToolbarProps, any> {
   public render() {
     return (
       <div id='fusion-toolbar'>
-        <span className="title"><i className="fa fa-plug fa-fw"></i>Servers</span>
+        <span className="title"><i className="fa fusion-toolbar-icon"></i>Servers</span>
         {this.button('fusion-toolbar-button-add', { ...actConnect, icon: 'fa fa-plus'})}
         {/* {this.button('fusion-toolbar-button-delete', 'Remove connection', 'minus', this.deleteConnection, 'red')} */}
       </div>

fusion-studio-extension/src/browser/widget/toolbar.tsx

@@ -33,7 +33,7 @@ export class FSWelcomeWidget extends ReactWidget {
 
   protected render(): React.ReactNode {
     return <React.Fragment>
-      <h1><i className="fa fa-plug fa-fw" /> Fusion Studio</h1>
+      <h1 className="fusion-header"> <i className="fusion-logo"></i> Fusion Studio</h1>
       <p>Welcome to Fusion Studio, an IDE and Management Tool for FusionDB Server.</p>
       <br/>
       <ul>
@@ -43,7 +43,7 @@ export class FSWelcomeWidget extends ReactWidget {
       <span className="checkbox" onClick={e => this.store(!this.checked)}>
         <span className={'checkbox-box' + (this.checked ? ' checked' : '')}>
           <span></span>
-        </span>
+        </span>ls
         <span className="checkbox-label">Show at startup</span>
       </span>
     </React.Fragment>