Change the info at infoModal

browser/main/SideNav/StorageItem.styl

@@ -10,26 +10,27 @@
   transition 0.15s
   &:hover
     color $ui-text-color
-    background-color $ui-button--hover-backgroundColor
+    background-color alpha($ui-button--hover-backgroundColor, 20%)
   &:active
+    .header-info
     .header-toggleButton
     .header-addFolderButton
       color $ui-text-color
-      &:active
-        color $ui-text-color
+      background-color $ui-button--hover-backgroundColor
 
 .header--active
   @extend .header
   .header-info
     color $ui-text-color
-    background-color $ui-button--active-backgroundColor
+    background-color $ui-button--hover-backgroundColor
   .header-toggleButton
   .header-addFolderButton
     color $ui-text-color
     &:active
-    &:hover
-    &:hover:active
-      color $ui-text-color
+      .header-toggleButton
+      .header-addFolderButton
+        &:active
+          color $ui-text-color
 
 .header-toggleButton
   position absolute
@@ -40,10 +41,6 @@
   border none
   color $ui-inactive-text-color
   background-color transparent
-  &:hover
-    color $ui-text-color
-  &:active
-    color $ui-text-color
 
 .header-info
   display block
@@ -59,9 +56,12 @@
   text-align left
   background-color transparent
   color $ui-inactive-text-color
+  &:hover
+    background-color alpha($ui-button--hover-backgroundColor, 20%)
   &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+    .header-toggleButton
+    .header-addFolderButton
+      color $ui-text-color
 
 .header-info-path
   font-size 10px
@@ -76,10 +76,6 @@
   border none
   color $ui-inactive-text-color
   background-color transparent
-  &:hover
-    color $ui-text-color
-  &:active
-    color $ui-active-color
 
 .root--folded
   @extend .root
@@ -114,20 +110,19 @@ body[data-theme="dark"]
     color $ui-dark-text-color
     background-color alpha($ui-dark-button--active-backgroundColor, 20%)
   &:active
+    .header-info
     .header-toggleButton
     .header-addFolderButton
-      &:active
-        color $ui-dark-text-color
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
 
 .header-info
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-dark-text-color
     &:active
       .header-toggleButton
       .header-addFolderButton
-        &:active
-          color $ui-dark-text-color
+        color $ui-dark-text-color
 
 .header--active
   @extend .header

browser/main/modals/PreferencesModal/InfoTab.js

@@ -30,7 +30,7 @@ class InfoTab extends React.Component {
             <div styleName='icon-right'>
               <div styleName='appId'>Boostnote {appVersion}</div>
               <div styleName='description'>
-                A simple markdown/snippet note app for developer.
+                An open source note-taking app made for programmers just like you.
               </div>
             </div>
           </div>
@@ -39,17 +39,17 @@ class InfoTab extends React.Component {
             <a href='http://maisin.co/'
               onClick={(e) => this.handleLinkClick(e)}
             >MAISIN&CO.</a></div>
-          <div styleName='copyright'>Copyright 2017 MAISIN&CO. All rights reserved.</div>
+          <div styleName='copyright'>© 2017 MAISIN&CO.</div>
         </div>
         <ul styleName='list'>
           <li>
             The codes of this app is published under GPLv3 license.
           </li>
           <li>
-            Any kinds of feedback, creating a new issue or a pull request, would be welcomed.
+            Let us hear your feedback🙌
           </li>
           <li>
-            Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
+            GitHub Issue : <a href='https://github.com/BoostIO/Boostnote/issues'
               onClick={(e) => this.handleLinkClick(e)}
             >https://github.com/BoostIO/Boostnote/issues</a>
           </li>

browser/main/modals/PreferencesModal/index.js

@@ -118,7 +118,7 @@ class Preferences extends React.Component {
           <p>Your menu for Boostnote</p>
         </div>
         <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
-          <div styleName='top-bar-close-mark'>X</div>
+          <div styleName='top-bar-close-mark'>×</div>
           <div styleName='top-bar-close-text'>esc</div>
         </button>
         <div styleName='nav'>