style and some fixes

src/index.scss

@@ -113,3 +113,22 @@ $fa-font-path: "./";
     }
   }
 }
+
+// TAB STYLE ===================================================================
+
+.react-tabs [role=tablist] {
+  font-size: 1.2em;
+}
+.react-tabs [role=tab] {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+// .react-tabs [role=tab][aria-selected=true] {
+// }
+//
+// .react-tabs [role=tab][aria-disabled=true] {
+// }
+//
+// .react-tabs [role=tab]:focus:after {
+// }

src/node_modules/utils/index.js

@@ -161,7 +161,7 @@ assign(propTypes, PropTypes)
 
 // -------------------------------------------------------------------
 
-export const formatSize = (bytes) => humanFormat(bytes, { scale: 'binary' })
+export const formatSize = (bytes) => humanFormat(bytes, { scale: 'binary', unit: 'B' })
 
 export const parseSize = (size) => {
   let bytes = humanFormat.parse.raw(size, { scale: 'binary' })

src/xo-app/index.js

@@ -42,7 +42,7 @@ class XoApp extends Component {
       status
     } = this.props
 
-    return <div>
+    return <div className='container-fluid'>
       <h1>Xen Orchestra</h1>
 
       <p>

src/xo-app/vm/index.js

@@ -2,7 +2,7 @@ import _ from 'messages'
 import React, { Component } from 'react'
 import xo from 'xo'
 import { Row, Col } from 'grid'
-import { connectStore, osFamily } from 'utils'
+import { connectStore, osFamily, formatSize } from 'utils'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import VmActionBar from './action-bar'
 
@@ -64,7 +64,7 @@ export default class extends Component {
             </Col>
             <Col size={3}>
               { /* TODO: compute nicely RAM units */ }
-              <h2>{vm.memory.size / 1073741824}GB <i className='xo-icon-memory fa-lg'></i></h2>
+              <h2>{formatSize(vm.memory.size)} <i className='xo-icon-memory fa-lg'></i></h2>
             </Col>
             <Col size={3}>
               { /* TODO: compute total disk usage */ }