Small desktop

src/config.js

@@ -73,9 +73,9 @@ export default {
       resizable: false,
       fullscreen: false,
       skipTaskbar: true,
-      width: 600,
-      height: 400,
-      backgroundColor: (settingsStore.get('lightTheme') ? '#FFFFFF' : '#000000'),
+      width: 325,
+      height: 450,
+      backgroundColor: '#000000',
       webPreferences: {
         nodeIntegration: true,
         webSecurity: false

src/panes/Files.js

@@ -132,6 +132,11 @@ class Files extends Component {
     return connectDropTarget(
       <div>
         <Pane className='files'>
+          <div>
+            <IconButton active={this.state.sticky} onClick={this.toggleStickWindow} icon='eye' />
+            <IconButton onClick={this.selectFileDialog} icon='plus' />
+            <IconButton onClick={this.selectDirectoryDialog} icon='folder' />
+          </div>
           <Header title={this.makeBreadcrumbs()} loading={this.props.adding} />
 
           <div className='main'>
@@ -141,15 +146,6 @@ class Files extends Component {
           <div className='dropper' style={dropper}>
             Drop to upload to IPFS
           </div>
-
-          <Footer>
-            <IconButton active={this.state.sticky} onClick={this.toggleStickWindow} icon='eye' />
-
-            <div className='right'>
-              <IconButton onClick={this.selectFileDialog} icon='plus' />
-              <IconButton onClick={this.selectDirectoryDialog} icon='folder' />
-            </div>
-          </Footer>
         </Pane>
       </div>
     )

src/panes/Info.js

@@ -11,18 +11,10 @@ function copy (text) {
   return () => { clipboard.writeText(text) }
 }
 
-function openNodeSettings () {
-  ipcRenderer.send('open-node-settings')
-}
-
 function openWebUI () {
   ipcRenderer.send('open-webui')
 }
 
-function stopDaemon () {
-  ipcRenderer.send('stop-daemon')
-}
-
 export default function Info (props) {
   return (
     <Pane className='info'>
@@ -68,26 +60,12 @@ export default function Info (props) {
           info={props.node.publicKey}
           onClick={copy(props.node.publicKey)} />
 
-        <InfoBlock
-          title='Node Settings'
-          info='Click to edit'
-          key='node-settings'
-          button={false}
-          onClick={openNodeSettings} />
-
         <InfoBlock
           title='Open WebUI'
           info='Click to open'
           key='open-webui'
           button={false}
           onClick={openWebUI} />
-
-        <InfoBlock
-          title='Stop Daemon'
-          info='Click to stop'
-          key='stop-daemon'
-          button={false}
-          onClick={stopDaemon} />
       </div>
     </Pane>
   )

src/panes/Settings.js

@@ -18,6 +18,14 @@ function quit () {
   ipcRenderer.send('quit-application')
 }
 
+function openNodeSettings () {
+  ipcRenderer.send('open-node-settings')
+}
+
+function stopDaemon () {
+  ipcRenderer.send('stop-daemon')
+}
+
 const options = [
   {
     title: 'Launch on startup',
@@ -50,10 +58,6 @@ const options = [
         Restarting your node is required.
       </span>
     )
-  },
-  {
-    title: 'Light theme',
-    setting: 'lightTheme'
   }
 ]
 
@@ -83,6 +87,20 @@ export default function Settings (props) {
           button={false}
           onClick={quit}
           info='Click to quit the application.' />
+
+        <InfoBlock
+          title='Node Settings'
+          info='Click to edit'
+          key='node-settings'
+          button={false}
+          onClick={openNodeSettings} />
+
+        <InfoBlock
+          title='Stop Daemon'
+          info='Click to stop'
+          key='stop-daemon'
+          button={false}
+          onClick={stopDaemon} />
       </div>
     </Pane>
   )

src/screens/menubar.js

@@ -8,11 +8,11 @@ import PaneContainer from '../components/PaneContainer'
 import MenuOption from '../components/MenuOption'
 import Menu from '../components/Menu'
 
-import Peers from '../panes/Peers'
+/* import Peers from '../panes/Peers'
+import Pinned from '../panes/Pinned' */
 import Loader from '../panes/Loader'
 import Start from '../panes/Start'
 import Files from '../panes/Files'
-import Pinned from '../panes/Pinned'
 import Info from '../panes/Info'
 import Settings from '../panes/Settings'
 
@@ -25,15 +25,15 @@ const RUNNING = 'running'
 const panes = [
   {
     id: 'info',
-    title: 'Info',
+    title: 'Home',
     icon: 'ipfs'
   },
   {
     id: 'files',
     title: 'Files',
     icon: 'files'
   },
-  {
+  /* {
     id: 'pinned',
     title: 'Pin',
     icon: 'pin'
@@ -42,7 +42,7 @@ const panes = [
     id: 'peers',
     title: 'Peers',
     icon: 'pulse'
-  },
+  }, */
   {
     id: 'settings',
     title: 'Settings',
@@ -171,26 +171,26 @@ class Menubar extends Component {
           root={this.state.files.root} />
       case 'settings':
         return <Settings settings={this.state.settings} />
-      case 'peers':
+      /* case 'peers':
         var location = 'Unknown'
         if (this.state.stats.node) {
           location = this.state.stats.node.location
         }
 
-        return <Peers peers={this.state.stats.peers} location={location} />
+        return <Peers peers={this.state.stats.peers} location={location} /> */
       case 'info':
         return (
           <Info
             node={this.state.stats.id}
             bw={this.state.stats.bw}
             repo={this.state.stats.repo} />
         )
-      case 'pinned':
+      /* case 'pinned':
         return (
           <Pinned
             files={this.state.pinned}
             pinning={this.state.pinning} />
-        )
+        ) */
       default:
         return (
           <Pane className='left-pane'>
@@ -222,13 +222,8 @@ class Menubar extends Component {
   }
 
   render () {
-    let className = ''
-    if (this.state.settings.lightTheme) {
-      className = 'light'
-    }
-
     return (
-      <PaneContainer className={className}>
+      <PaneContainer>
         {this._getMenu()}
         {this._getRouteScreen()}
       </PaneContainer>

src/styles/app.less

@@ -27,9 +27,6 @@
 @import './screens/welcome.less';
 
 #menubar .pane {
-  width: calc(~"100vw - 4em");
-
-  .footer {
-    width: calc(~"100vw - 4.5em");
-  }
+  width: 100%;
+  height: calc(~"100vh - 4em");
 }

src/styles/common.less

@@ -17,11 +17,6 @@
   border-radius: 0.5em;
 }
 
-.light ::-webkit-scrollbar-thumb:window-inactive,
-.light ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.3);
-}
-
 .directory-input {
   cursor: pointer;
 
@@ -82,7 +77,3 @@
   width: 250px;
   text-align: center;
 }
-
-.light .notice {
-  color: #212121
-}

src/styles/components/Block.less

@@ -84,22 +84,6 @@
   padding-left: 1em;
 }
 
-.light .block>div {
-  border-color: rgba(0,0,0,0.1);
-}
-
-.light .block:hover {
-  background: #fbfbfb;
-}
-
-.light .block .info {
-  color: rgba(0,0,0,0.5);
-}
-
-.light .block .button-overlay {
-  background: linear-gradient(to left,#fbfbfb 0%,#fbfbfb 50%,transparent 100%);
-}
-
 .block input[type="text"] {
   border: 0;
   outline: 0;

src/styles/components/Button.less

@@ -10,7 +10,3 @@
 .input.button span {
   font-size: 14px;
 }
-
-.light .input.button:hover {
-  background: rgba(0,0,0,0.3);
-}

src/styles/components/CheckboxBlock.less

@@ -36,7 +36,3 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-
-.light .block.checkbox .checkbox {
-  background: #eee;
-}

src/styles/components/FileBlock.less

@@ -23,7 +23,3 @@
   margin-right: 0.35em;
   color: rgba(255, 255, 255, 0.5)
 }
-
-.light .block.file .icon {
-  color: rgba(0, 0, 0, 0.5)
-}

src/styles/components/Footer.less

@@ -4,7 +4,7 @@
   display: flex;
   background: linear-gradient(to top, #000000 0%, #000000 45%, transparent 100%);
   position: fixed;
-  bottom: 0;
+  bottom: 4em;
   right: 0.5em;
   padding-top: 3em;
   box-sizing: border-box;
@@ -24,7 +24,3 @@
   font-size: 14px;
   margin-top: -0.5em;
 }
-
-.light .footer {
-  background: linear-gradient(to top, #fff 0%, #fff 45%, transparent 100%);
-}

src/styles/components/Header.less

@@ -30,7 +30,3 @@
   background-color: #FFEB3B;
   animation: loading 2s linear infinite;
 }
-
-.light .header .title {
-  color: rgba(0, 0, 0, 0.5);
-}

src/styles/components/IconButton.less

@@ -14,12 +14,3 @@
 .button-icon:hover {
   opacity: 0.7 !important
 }
-
-.light .button-icon {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.light .button-icon.active,
-.light .button-icon:hover {
-  color: rgba(0, 0, 0, 0.8);
-}

src/styles/components/Input.less

@@ -18,7 +18,3 @@
   padding: 0.5em 1em;
   color: inherit;
 }
-
-.light .input {
-  background: rgba(0, 0, 0, 0.2);
-}

src/styles/components/Key.less

@@ -4,7 +4,3 @@
   border-radius: 0.2em;
   padding: 0 0.2em;
 }
-
-.light .key {
-  background: #eee;
-}

src/styles/components/Menu.less

@@ -1,10 +1,6 @@
 .menu {
   display: flex;
   background: #292929;
-  flex-direction: column;
-  height: 100%;
-}
-
-.light .menu {
-  background: #eee;
+  width: 100%;
+  height: 4em;
 }