modify: markup style for info tab on config modal

browser/main/modals/PreferencesModal/InfoTab.js

@@ -22,12 +22,19 @@ class InfoTab extends React.Component {
   render () {
     return (
       <div styleName='root'>
+        <div styleName='header'>Info</div>
+
         <div styleName='top'>
-          <img styleName='icon' src='../resources/app.png' width='150' height='150'/>
+          <div styleName='icon-space'>
-          <div styleName='appId'>Boostnote {appVersion}</div>
+            <img styleName='icon' src='../resources/app.png' width='92' height='92'/>
-          <div styleName='description'>
+            <div styleName='icon-right'>
-            A simple markdown/snippet note app for developer.
+              <div styleName='appId'>Boostnote {appVersion}</div>
+              <div styleName='description'>
+                A simple markdown/snippet note app for developer.
+              </div>
+            </div>
           </div>
+          <div styleName='clear'></div>
           <div styleName='madeBy'>Made by&nbsp;
             <a href='http://maisin.co/'
               onClick={(e) => this.handleLinkClick(e)}

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -1,3 +1,5 @@
+@import('./Tab')
+
 .root
   padding 15px
   white-space pre
@@ -5,27 +7,39 @@
   color $ui-text-color
   width 100%
 
+.clear
+  clear both
+
 .top
-  text-align center
+  text-align left
-  margin-bottom 25px
+  margin-bottom 20px
+
+.icon-space
+  margin 20px 0
+  height 100px
+
+.icon
+  display inline-block
+  vertical-align middle
+
+.icon-right
+  display inline-block
+  vertical-align middle
+  margin-left 20px
 
 .appId
   font-size 24px
+  margin-bottom 13px
 
 .description
-  overflow hidden
-  white-space normal
-  line-height 1.5
-  margin 5px auto 10px
   font-size 14px
-  text-align center
 
 .madeBy
-  font-size 12px
+  font-size 14px
   $ui-inactive-text-color
 
 .copyright
-  font-size 12px
+  font-size 14px
   $ui-inactive-text-color
 
 .list