Merge pull request #426 from cosmos/peng/203-improve-buttons

Peng/203 improve buttons
luniehq · Feb 1, 2018 · dbe395a · dbe395a
2 parents 125a5b8 + 344c04d
commit dbe395a
Show file tree

Hide file tree

Showing 23 changed files with 99 additions and 77 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,3 +31,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Removed
 * Removed unused `sass-loader` node dependency. @nylira
+
+## [0.4.0] - 2018-02-01
+### Added
+* Added button styles for Success, Warning, and Danger states. @nylira
+* Added support for image icons. @faboweb 
+
+### Changed
+* Improved primary button style. @nylira
+* Fixed the cut-off text bug in buttons. @nylira
+* Improves the `hover-bg` app variable color. @nylira 
diff --git a/app/src/renderer/components/common/NiListItem.vue b/app/src/renderer/components/common/NiListItem.vue
@@ -34,7 +34,7 @@ transition(name="proposal")
   router-link.ni-li.ni-li-link(v-else-if="btn && to" :to="to"): .ni-li-container
     +ni-li-thumb
     +ni-li-dl
-    btn(:value="btn" icon="chevron_right" icon-pos="right").btn__primary
+    btn(:value="btn" icon="chevron_right" icon-pos="right" color="primary")
 
   // dt/dd text
   .ni-li(v-else-if='dt'): .ni-li-container
@@ -91,7 +91,7 @@ export default {
 
   &.ni-li-link
     &:hover
-      background: app-bg-hover
+      background hover-bg
 
       .ni-li-label
         cursor pointer

diff --git a/app/src/renderer/components/staking/LiDelegate.vue b/app/src/renderer/components/staking/LiDelegate.vue
@@ -83,7 +83,7 @@ export default {
   &:nth-of-type(2n-1)
     background app-fg
   &.li-delegate-active
-    background alpha(hover, 17.5%)
+    background hover-bg
     .li-delegate__value i
       color link
 

diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
@@ -109,8 +109,8 @@ page.page-bond(title="Bond Atoms")
         v-if='!$v.fields.bondConfirm.required')
 
     div(slot='footer')
-      btn#btn-reset(type="button" @click.native="resetFields" value="Reset")
-      btn#btn-bond.btn__primary(value="Submit")
+      btn#btn-reset(type="button" @click.native="resetFields" value="Reset" color="danger")
+      btn#btn-bond(value="Submit" color="primary")
 </template>
 
 <script>

diff --git a/app/src/renderer/components/staking/PageDelegates.vue b/app/src/renderer/components/staking/PageDelegates.vue
@@ -20,10 +20,10 @@ page#page-delegates(title='Delegates')
   .fixed-button-bar
     template(v-if="userCanDelegate")
       .label #[strong {{ shoppingCart.length }}] delegates selected
-      btn.btn__primary(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next")
+      btn(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next" color="primary")
     template(v-else)
       .label You do not have any ATOMs to delegate.
-      btn.btn__primary(disabled icon="chevron_right" icon-pos="right" value="Next")
+      btn(disabled icon="chevron_right" icon-pos="right" value="Next" color="primary")
 </template>
 
 <script>

diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
@@ -42,8 +42,8 @@ page(title='Send')
 
     div(slot='footer')
       div
-      btn.btn__primary(v-if='sending' value='Sending...' disabled)
-      btn.btn__primary(v-else @click='onSubmit' value="Send Tokens")
+      btn(v-if='sending' value='Sending...' disabled color="primary")
+      btn(v-else @click='onSubmit' value="Send Tokens" color="primary")
 </template>
 
 <script>

diff --git a/app/src/renderer/styles/app.styl b/app/src/renderer/styles/app.styl
@@ -22,15 +22,6 @@ a
 .desktop-only
   display none
 
-.btn__primary
-  .ni-btn-container
-    background alpha(link, 50%)
-    border-color alpha(dim, 50%)
-    &:hover
-      border-color dim
-    .ni-btn-value
-      color bright
-
 #app
   df()
   color txt

diff --git a/app/src/renderer/styles/variables.styl b/app/src/renderer/styles/variables.styl
@@ -16,7 +16,6 @@ app-fg = hsl(app-hue, 33%, 16%)
 
 app-bg = hsl(app-hue, 36%, 13%)
 app-bg-alpha = alpha(app-bg, 95%)
-app-bg-hover = hsl(app-hue, 33%, 20%)
 
 // text
 bright = #fff
@@ -28,9 +27,9 @@ bc = hsl(app-hue, 22%, 23%)
 bc-dim = app-fg
 
 // anchor
-link = hsl(app-hue, 88%, 70%)
-hover = hsl(app-hue, 88%, 60%)
-hover-bg = hsl(app-hue, 30%, 19%)
+link = hsl(app-hue, 88%, 67%)
+hover = hsl(app-hue, 88%, 73%)
+hover-bg = hsl(app-hue, 43%, 10%)
 
 // input
 input-bg = transparent

diff --git a/package.json b/package.json
@@ -94,7 +94,7 @@
     "xmlhttprequest": "^1.8.0"
   },
   "dependencies": {
-    "@nylira/vue-button": "^4.1.5",
+    "@nylira/vue-button": "^4.3.2",
     "@nylira/vue-field": "^1.1.17",
     "@nylira/vue-form-msg": "^1.0.3",
     "@nylira/vue-input": "^3.2.0",

diff --git a/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
@@ -42,7 +42,9 @@ exports[`NiSessionAccountDelete has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">exit_to_app</i><span class=\\"ni-btn-value\\">Sign Out and Remove Account</span></span></button>
+         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">exit_to_app</i>
+         <!---->
+         <span class=\\"ni-btn__value\\">Sign Out and Remove Account</span></span></button>
       </div>
 </main>
       <!---->

diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
@@ -291,7 +291,9 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
+         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
+         <!---->
+         <span class=\\"ni-btn__value\\">Next</span></span></button>
       </div>
 </main>
       <!---->

diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap
@@ -78,7 +78,9 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
+         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
+         <!---->
+         <span class=\\"ni-btn__value\\">Next</span></span></button>
       </div>
 </main>
       <!---->

diff --git a/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiBtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button>"`;
+exports[`NiBtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">content_copy</i><!----><span class=\\"ni-btn__value\\">Copy</span></span></button>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
@@ -14,16 +14,17 @@ exports[`NiLiCopy has the expected html structure 1`] = `
       class="ni-btn btn-copy"
     >
       <span
-        class="ni-btn-container"
+        class="ni-btn__container"
       >
         <i
           aria-hidden="true"
-          class="ni-btn-icon material-icons"
+          class="ni-btn__icon material-icons"
         >
           content_copy
         </i>
+        <!---->
         <span
-          class="ni-btn-value"
+          class="ni-btn__value"
         >
           Copy
         </span>

diff --git a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
@@ -28,15 +28,16 @@ exports[`NiModalSearch has the expected html structure 1`] = `
             class="ni-btn"
           >
             <span
-              class="ni-btn-container"
+              class="ni-btn__container"
             >
               <i
                 aria-hidden="true"
-                class="ni-btn-icon material-icons"
+                class="ni-btn__icon material-icons"
               >
                 close
               </i>
               <!---->
+              <!---->
             </span>
           </button>
         </div>

diff --git a/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
@@ -48,7 +48,9 @@ exports[`NiSessionImport has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
+         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
+         <!---->
+         <span class=\\"ni-btn__value\\">Next</span></span></button>
       </div>
 </main>
       <!---->

diff --git a/test/unit/specs/components/common/__snapshots__/ToggleBtn.spec.js.snap b/test/unit/specs/components/common/__snapshots__/ToggleBtn.spec.js.snap
@@ -8,11 +8,12 @@ exports[`TogggleBtn has the expected html structure 1`] = `
     class="ni-btn"
   >
     <span
-      class="ni-btn-container"
+      class="ni-btn__container"
     >
+      <!---->
       <!---->
       <span
-        class="ni-btn-value"
+        class="ni-btn__value"
       >
         HALLO
       </span>

diff --git a/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
@@ -415,26 +415,28 @@ exports[`PageBond has the expected html structure 1`] = `
                     type="button"
                   >
                     <span
-                      class="ni-btn-container"
+                      class="ni-btn__container ni-btn--danger"
                     >
+                      <!---->
                       <!---->
                       <span
-                        class="ni-btn-value"
+                        class="ni-btn__value"
                       >
                         Reset
                       </span>
                     </span>
                   </button>
                   <button
-                    class="ni-btn btn__primary"
+                    class="ni-btn"
                     id="btn-bond"
                   >
                     <span
-                      class="ni-btn-container"
+                      class="ni-btn__container ni-btn--primary"
                     >
+                      <!---->
                       <!---->
                       <span
-                        class="ni-btn-value"
+                        class="ni-btn__value"
                       >
                         Submit
                       </span>

diff --git a/test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap
@@ -113,7 +113,7 @@ exports[`PageDelegates has the expected html structure 1`] = `
       <div class=\\"label\\">
          <strong>0</strong> delegates selected
       </div>
-   <a href=\\"#/staking/bond\\" class=\\"ni-btn btn__primary\\" disabled=\\"disabled\\"><span class=\\"ni-btn-container ni-btn-icon-right\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">chevron_right</i><span class=\\"ni-btn-value\\">Next</span></span></a>
+   <a href=\\"#/staking/bond\\" class=\\"ni-btn\\" disabled=\\"disabled\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i><span class=\\"ni-btn__value\\">Next</span></span></a>
 </div>
 </main>
 </div>"
@@ -233,15 +233,16 @@ exports[`PageDelegates should filter the delegates 1`] = `
                 class="ni-btn"
               >
                 <span
-                  class="ni-btn-container"
+                  class="ni-btn__container"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn-icon material-icons"
+                    class="ni-btn__icon material-icons"
                   >
                     close
                   </i>
                   <!---->
+                  <!---->
                 </span>
               </button>
             </div>
@@ -373,21 +374,21 @@ exports[`PageDelegates should filter the delegates 1`] = `
          delegates selected
       </div>
       <a
-        class="ni-btn btn__primary"
+        class="ni-btn"
         disabled="disabled"
         href="#/staking/bond"
       >
         <span
-          class="ni-btn-container ni-btn-icon-right"
+          class="ni-btn__container ni-btn__icon-right ni-btn--primary"
         >
           <i
             aria-hidden="true"
-            class="ni-btn-icon material-icons"
+            class="ni-btn__icon material-icons"
           >
             chevron_right
           </i>
           <span
-            class="ni-btn-value"
+            class="ni-btn__value"
           >
             Next
           </span>