Auto-scale MiniAccounts in the collapsed, ungrouped dashboard view

packages/nylas-dashboard/public/css/app.css

@@ -207,16 +207,14 @@ pre {
 .mini-account::after {
   display: inline-block;
   position: relative;
-  height: 10px;
-  width: 10px;
+  height: 100%;
+  width: 100%;
   background-color: #666666;
   content: "";
   z-index: -1;
 }
 
 .mini-account {
-  height: 10px;
-  width: 10px;
   background-color: rgb(0, 255, 157);
   display: inline-block;
 }

packages/nylas-dashboard/public/js/app.jsx

@@ -208,7 +208,7 @@ class Root extends React.Component {
 
   onGroupChange() {
     this.setState({
-      groupByProcess: document.getElementById('group-by-proccess').checked,
+      groupByProcess: document.getElementById('group-by-process').checked,
     });
   }
 
@@ -232,7 +232,7 @@ class Root extends React.Component {
         <div>
           <input
             type="checkbox"
-            id="group-by-proccess"
+            id="group-by-process"
             onChange={() => this.onGroupChange()}
           />
           Group Accounts By Process
@@ -249,7 +249,7 @@ class Root extends React.Component {
           for (const accountId of this.state.processLoads[processName]) {
             const account = accountsById[accountId][0];
             accounts.push((
-              <MiniAccount key={accountId} account={account} />
+              <MiniAccount key={accountId} account={account} sideDimension="10" />
             ))
           }
           processes.push((
@@ -267,6 +267,9 @@ class Root extends React.Component {
           </div>
         )
       } else {
+        const area = window.innerWidth * window.innerHeight * 0.75;
+        const singleAcctArea = area / Object.keys(this.state.accounts).length;
+        const acctSideDimension = Math.sqrt(singleAcctArea);
         content = (
           <div>
             {groupByProcess}
@@ -276,6 +279,7 @@ class Root extends React.Component {
                   <MiniAccount
                     key={id}
                     account={this.state.accounts[id]}
+                    sideDimension={acctSideDimension}
                   />
                 )
               }

packages/nylas-dashboard/public/js/mini-account.jsx

@@ -16,13 +16,15 @@ class MiniAccount extends React.Component {
 
   render() {
     let errorClass;
-    let style;
+    let style = {
+      width: `${this.props.sideDimension}px`,
+      height: `${this.props.sideDimension}px`,
+    }
     if (this.props.account.sync_error) {
       errorClass = 'errored';
-      style = {};
     } else {
       errorClass = '';
-      style = {backgroundColor: this.calculateColor()};
+      style.backgroundColor = this.calculateColor();
     }
 
     return (
@@ -36,6 +38,7 @@ class MiniAccount extends React.Component {
 
 MiniAccount.propTypes = {
   account: React.PropTypes.object,
+  sideDimension: React.PropTypes.number,
 };
 
 window.MiniAccount = MiniAccount;