From c6ac44ba14d5e4fccde05e2b1fb6de9b1893d30e Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 28 Dec 2015 16:24:14 +0900
Subject: [PATCH] enhance style of topbar

---
 browser/main/HomePage/ArticleTopBar.js        | 10 +++---
 .../components/ArticleTopBar.styl             | 32 ++++++++-----------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js
index cbca3079..d4a9b2c2 100644
--- a/browser/main/HomePage/ArticleTopBar.js
+++ b/browser/main/HomePage/ArticleTopBar.js
@@ -173,7 +173,7 @@ export default class ArticleTopBar extends React.Component {
             />
             {
               this.props.status.search != null && this.props.status.search.length > 0
-                ? <button onClick={e => this.handleSearchClearButton(e)} className='searchClearBtn'><i className='fa fa-times'/></button>
+                ? <button onClick={e => this.handleSearchClearButton(e)} className='ArticleTopBar-left-search-clear-button'><i className='fa fa-times'/></button>
                 : null
             }
             <div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
@@ -200,17 +200,17 @@ export default class ArticleTopBar extends React.Component {
         <div className='ArticleTopBar-right'>
           <button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
           </button>
-          <a ref='links' className='linksBtn' href>
+          <a ref='links' className='ArticleTopBar-right-links-button' href>
             <img src='../resources/app.png' width='44' height='44'/>
           </a>
           {
             this.state.isLinksDropdownOpen
               ? (
-                <div className='links-dropdown'>
-                  <ExternalLink className='links-item' href='https://b00st.io'>
+                <div className='ArticleTopBar-right-links-button-dropdown'>
+                  <ExternalLink className='ArticleTopBar-right-links-button-dropdown-item' href='https://b00st.io'>
                     <i className='fa fa-fw fa-home'/>Boost official page
                   </ExternalLink>
-                  <ExternalLink className='links-item' href='https://github.com/BoostIO/boost-app-discussions/issues'>
+                  <ExternalLink className='ArticleTopBar-right-links-button-dropdown-item' href='https://github.com/BoostIO/boost-app-discussions/issues'>
                     <i className='fa fa-fw fa-bullhorn'/> Discuss
                   </ExternalLink>
                 </div>
diff --git a/browser/styles/main/HomeContainer/components/ArticleTopBar.styl b/browser/styles/main/HomeContainer/components/ArticleTopBar.styl
index 42d46c00..13e5f138 100644
--- a/browser/styles/main/HomeContainer/components/ArticleTopBar.styl
+++ b/browser/styles/main/HomeContainer/components/ArticleTopBar.styl
@@ -95,7 +95,7 @@ infoBtnActiveBgColor = #3A3A3A
         line-height 33px
         z-index 1
         pointer-events none
-      .searchClearBtn
+      .ArticleTopBar-left-search-clear-button
         position absolute
         top 6px
         right 10px
@@ -112,20 +112,9 @@ infoBtnActiveBgColor = #3A3A3A
         &:hover
           color white
           background-color topBarBtnBgColor
-    &>.refreshBtn
-      float left
-      width 33px
-      height 33px
-      margin-top 13.5px
-      margin-left 15px
-      border none
-      color refreshBtColor
-      background transparent
-      font-size 18px
-      line-height 18px
-      transition 0.1s
-      &:hover
-        color refreshBtnActiveColor
+        &:active
+          color white
+          background-color darken(topBarBtnBgColor, 35%)
     .ArticleTopBar-left-unsaved
       line-height 33px
       float left
@@ -138,8 +127,15 @@ infoBtnActiveBgColor = #3A3A3A
         border none
         outline none
         color inactiveTextColor
+        width 33px
+        height 33px
+        border-radius 16.5px
+        transition 0.1s
         &:hover
           color inherit
+        &:active
+          color inherit
+          background-color lighten(topBarBtnBgColor, 15%)
         &.ArticleTopBar-left-unsaved-save-button
           position relative
           .ArticleTopBar-left-unsaved-save-button-count
@@ -189,7 +185,7 @@ infoBtnActiveBgColor = #3A3A3A
         .tooltip
           opacity 1
 
-    &>.linksBtn
+    &>.ArticleTopBar-right-links-button
       display block
       position absolute
       top 8px
@@ -199,14 +195,14 @@ infoBtnActiveBgColor = #3A3A3A
         opacity 1
         .tooltip
           opacity 1
-    &>.links-dropdown
+    &>.ArticleTopBar-right-links-button-dropdown
       position fixed
       z-index 50
       right 10px
       top 40px
       background-color transparentify(invBackgroundColor, 80%)
       padding 5px 0
-      .links-item
+      .ArticleTopBar-right-links-button-dropdown-item
         padding 0 10px
         height 33px
         width 100%