feat(header): Changed header styles

src/js/components/molecules/Header/Header.scss

@@ -3,15 +3,17 @@
 .Header {
     color: white;
     font-weight: 100;
-    font-size: 18px;
+    font-size: 16px;
     width: 100%;
     height: $header-height-mobile;
-    // text-shadow: 0px 0px 15px black;
-    background: linear-gradient(to bottom, rgba(24, 25, 25, 0.96) 0%, rgba(129, 238, 142, 0) 100%) 0px 0px repeat scroll rgba(0, 0, 0, 0);
+
+    background: rgba(50, 50, 50, 0.8);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid #3C3C3C;
+
     position: fixed;
     top: 0;
     z-index: 3;
-    // box-shadow: lightgrey 0px 0px 1px 0px;
 
     // border-bottom: 2px solid rgba(86, 86, 86, 0.63);
 

src/js/components/molecules/Header/Header.tsx

@@ -29,7 +29,7 @@ interface Props {
 
 function Header() {
     return (
-        <React.Fragment>
+        <>
             <div className={styles.Header}>
                 <div className={styles['Header-Item']}>
                     <div className={styles['Header-Controls']}>
@@ -45,7 +45,7 @@ function Header() {
                 </div>
             </div>
             <SideNavigation />
-        </React.Fragment>
+        </>
     );
 }
 

src/js/components/molecules/Profile/Profile.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 // @ts-ignore
-import { white } from 'material-ui/styles/colors';
-// @ts-ignore
 import NavigationMenuIcon from 'material-ui/svg-icons/navigation/menu';
 // @ts-ignore
 import ArrowLeftIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-left';
@@ -15,6 +13,8 @@ import { UserInfo } from '../../../store/UserInfoStore';
 import { OpenProcess } from '../../../store/AppProcessesStore';
 const styles = require('./Profile.scss');
 
+const black = '#ffffff';
+
 interface Props {
     user: UserInfo;
     navigation: any;
@@ -37,11 +37,11 @@ function Profile(props: Props) {
         <div className={styles.profile}>
             <div className={styles.mobileProfile}>
                 {/* <MultiTaskButton className={styles.mobileCloseButton} /> */}
-                { !isAppOpen && <NavigationMenuIcon className={styles.hamburgerIcon} color={white} onClick={handleProfileClick} /> }
+                { !isAppOpen && <NavigationMenuIcon className={styles.hamburgerIcon} color={black} onClick={handleProfileClick} /> }
                 {/* { isAppOpen && <CloseAppButton className={styles.mobileCloseButton} /> } */}
             </div>
             <div className={styles.desktopProfile}>
-                <ArrowLeftIcon onClick={handleProfileClick} className={arrowLeftStyles} color={white} />
+                <ArrowLeftIcon onClick={handleProfileClick} className={arrowLeftStyles} color={black} />
                 <span className={styles.name} onClick={handleProfileClick}>{props.user.info.fullName}</span>
                 {/* <MultiTaskButton /> */}
                 {/* <CloseAppButton /> */}

src/js/services/TerminalService.ts

@@ -1,13 +1,13 @@
 // @ts-ignore
-import { fetchCommandFromWAPM } from "@wasmer/wasm-terminal/lib/unoptimized/wasm-terminal.esm";
+import { fetchCommandFromWAPM } from '@wasmer/wasm-terminal/lib/unoptimized/wasm-terminal.esm';
 // @ts-ignore
-import { lowerI64Imports } from "@wasmer/wasm-transformer/lib/unoptimized/wasm-transformer.esm";
-import { getApplicationFromWapp } from "./WappService";
-import { FileSystem } from "@playos/kernel";
-import store from "../store";
-import InstanceBag from "../InstanceBag";
-import Kernel from "@playos/kernel";
-import { openApp } from "../store/AppProcessesStore";
+import { lowerI64Imports } from '@wasmer/wasm-transformer/lib/unoptimized/wasm-transformer.esm';
+import Kernel, { FileSystem } from '@playos/kernel';
+import { getApplicationFromWapp } from './WappService';
+import store from '../store';
+import InstanceBag from '../InstanceBag';
+
+import { openApp } from '../store/AppProcessesStore';
 
 export default class TerminalService {
     fs: FileSystem;
@@ -19,7 +19,7 @@ export default class TerminalService {
         this.currentPath = currentPath;
     }
 
-    async handleCommand(commandName: string, args: string[], envEntriest: any) {
+    async handleCommand(commandName: string, args: string[], env: any) {
         if (commandName.endsWith('.wasm')) {
             return this.fs.readFile(commandName);
         }
@@ -47,12 +47,19 @@ export default class TerminalService {
         const wasmBinary = await fetchCommandFromWAPM(commandName, [], [['PATH', '/']]);
         const preparedBin = await kernel.vm.prepareBin(wasmBinary);
 
-        return preparedBin;
-        // args.unshift(commandName);
-        // const vmOutput = await kernel.spawnProcess(preparedBin, args, {
-        //     env: envEntriest,
-        // });
+        // env['$PWD'] = '/';
+
+        console.log('[] envEntriest -> ', env);
+
+        // return preparedBin;
+        args.unshift(commandName);
+        const vmOutput = await kernel.spawnProcess(preparedBin, args, {
+            env: {
+                '$PWD': '/',
+                'PWD': '/',
+            },
+        });
 
-        // return () => vmOutput;
+        return () => vmOutput;
     }
 }

src/js/services/bootSystem.ts

@@ -19,6 +19,11 @@ export default async function bootSystem(keys: PrivateKey) {
 
     await kernel.boot();
 
+    if (!(await kernel.fs.exists('/etc/environment'))) {
+        // We need to create some defaults
+        await kernel.fs.writeFile('/etc/environment', '$PATH=/usr/sbin:/usr/bin:/sbin:/bin');
+    }
+
     if (sessionStorage.getItem('username')) {
         await kernel.registry.set('username', sessionStorage.getItem('username'), false);
         sessionStorage.removeItem('username');

src/scss/_variables.scss

@@ -1,4 +1,4 @@
-$header-height: 48px;
+$header-height: 38px;
 $header-height-mobile: 40px;
 $app-section-width: 900px;
 $dashboard-tab-size: 48px;