luniehq · faboweb · Jan 23, 2019 · Dec 19, 2018 · Dec 19, 2018 · Dec 19, 2018
@@ -14,3 +14,4 @@ yarn-error.log
 testArtifacts/*
 app/networks/local-testnet/*
 .idea/*
+tasks/
@@ -124,16 +124,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1617](https://github.com/cosmos/voyager/pull/1617) Fixed send buttons not clickable @faboweb
 - [\#1303](https://github.com/cosmos/voyager/issues/1303) Fixed spamming of setSubscription @faboweb
 - [\#1603](https://github.com/cosmos/voyager/issues/1603) Fixed inactive sidebar links @jbibla
-- [\#1614](https://github.com/cosmos/voyager/issues/1614) Fixed an error that prevented a proposal to be updated optimisticaly after a successful deposit or vote @fedekunze
-- [\#1386](https://github.com/cosmos/voyager/issues/1386) Cleaned up onboarding @jbibla
+- [\#1614](https://github.com/cosmos/voyager/issues/1614) Fixed an error that prevented a proposal to be updated optimistically after a successful deposit or vote @fedekunze
+- [\#1386](https://github.com/cosmos/voyager/issues/1386) Cleaned up on-boarding @jbibla
 - [\#1640](https://github.com/cosmos/voyager/issues/1640) Hide the table proposals when there are no available ones @fedekunze
 - [\#1640](https://github.com/cosmos/voyager/issues/1640) Fixed an error that prevented the search bar to be displayed using `Ctrl+F` @fedekunze
 - Fixed testnet config build script @faboweb
 - [\#1677](https://github.com/cosmos/voyager/issues/1677) Fixed inconsistent status colors on proposals @faboweb
 - [\#1687](https://github.com/cosmos/voyager/issues/1687) Removing cached state if decrypting fails. @faboweb
 - [\#1662](https://github.com/cosmos/voyager/issues/1662) Fixed wrong node version in readme @faboweb
   [\#1642](https://github.com/cosmos/voyager/issues/1642) Refactor table styles and fixed bad aligned headers @faboweb
-- [\#1677](https://github.com/cosmos/voyager/issues/1677) Fixed inconstistent status colors on proposals @fedekunze
+- [\#1677](https://github.com/cosmos/voyager/issues/1677) Fixed inconsistent status colors on proposals @fedekunze
 - [\#1696](https://github.com/cosmos/voyager/issues/1696) Fixed broken css variables @jbibla
 - [\#1687](https://github.com/cosmos/voyager/issues/1687) Removing cached state if decrypting fails. @faboweb
 - [\#1662](https://github.com/cosmos/voyager/issues/1662) Fixed wrong node version in readme @faboweb
@@ -145,6 +145,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1749](https://github.com/cosmos/voyager/issues/1749) Fixed proposal tally update after voting @fedekunze
 - [\#1765](https://github.com/cosmos/voyager/pull/1765) Fixed proposal deposit update after submitting a deposit @fedekunze
 - [\#1791](https://github.com/cosmos/voyager/pull/1791) Fixed a problem with initializing the Voyager config dir @faboweb
+- [\#1754](https://github.com/cosmos/voyager/pull/1754) Fixed form UX, UI and other miscellaneous styling issues @jbibla
 
 ## [0.10.7] - 2018-10-10
 

@@ -6,7 +6,6 @@
     <template v-else>
       <app-header />
       <div id="app-content"><router-view /></div>
-      <modal-receive />
     </template>
     <tm-notifications :notifications="notifications" theme="cosmos" />
     <modal-error
@@ -26,7 +25,6 @@ import ModalError from "common/TmModalError"
 import ModalHelp from "common/TmModalHelp"
 import ModalLcdApproval from "common/TmModalLCDApproval"
 import ModalNodeHalted from "common/TmModalNodeHalted"
-import ModalReceive from "common/TmModalReceive"
 import Onboarding from "common/TmOnboarding"
 import Session from "common/TmSession"
 import store from "./vuex/store"
@@ -37,7 +35,6 @@ export default {
     ModalError,
     ModalHelp,
     ModalLcdApproval,
-    ModalReceive,
     TmNotifications,
     ModalNodeHalted,
     Onboarding,

@@ -0,0 +1,126 @@
+<template>
+  <transition name="slide-fade">
+    <div v-click-outside="close" class="action-modal">
+      <div class="action-modal-header">
+        <img
+          class="icon action-modal-atom"
+          src="~assets/images/cosmos-logo.png"
+        /><span class="action-modal-title">{{ title }}</span>
+        <div
+          id="closeBtn"
+          class="action-modal-icon action-modal-close"
+          @click="close"
+        >
+          <i class="material-icons">close</i>
+        </div>
+      </div>
+      <div class="action-modal-form"><slot></slot></div>
+      <div class="action-modal-footer">
+        <slot name="action-modal-footer"></slot>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import ClickOutside from "vue-click-outside"
+
+export default {
+  name: `action-modal`,
+  directives: {
+    ClickOutside
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    close() {
+      this.$emit(`close-action-modal`)
+    }
+  }
+}
+</script>
+
+<style>
+.action-modal {
+  background: var(--app-nav);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  right: 2rem;
+  padding: 3rem;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  max-width: 664px;
+  z-index: var(--z-modal);
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  box-shadow: 0 2px 8px rgba(200, 200, 200, 0.1);
+}
+
+.action-modal-header {
+  align-items: center;
+  display: flex;
+  padding-bottom: 2rem;
+}
+
+.action-modal-atom {
+  height: 3rem;
+  width: 3rem;
+}
+
+.action-modal-title {
+  flex: 1;
+  font-size: var(--h3);
+  font-weight: 500;
+  color: var(--bright);
+  padding-left: 1rem;
+}
+
+.action-modal-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-modal-icon i {
+  font-size: var(--lg);
+}
+
+.action-modal-icon.action-modal-close {
+  cursor: pointer;
+}
+
+.action-modal-icon.action-modal-close:hover i {
+  color: var(--link);
+}
+
+.action-modal-form .tm-form-group {
+  display: block;
+  padding: 0.5rem 0;
+}
+
+.action-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 2rem 0 0;
+}
+
+/* Enter and leave animations can use different */
+/* durations and timing functions.              */
+.slide-fade-enter-active {
+  transition: all 0.1s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active below version 2.1.8 */ {
+  transform: translateX(2rem);
+  opacity: 0;
+}
+</style>
@@ -80,6 +80,7 @@ export default {
 <style>
 #app-header {
   z-index: var(--z-appHeader);
+  position: relative;
 }
 
 #app-header .container {

@@ -27,7 +27,7 @@ export default {
   display: flex;
   margin-bottom: 1rem;
   padding: 2rem;
-  min-width: 63rem;
+  /* min-width: 63rem; */
 }
 
 .column {
@@ -149,7 +149,7 @@ export default {
   align-items: center;
   display: flex;
   flex-direction: column;
-  width: 7rem;
+  /* width: 7rem; */
-  /* width: 7rem; */
-  /* width: 7rem; */
 }
 
 .colored_dl:not(:last-child) {

@@ -57,14 +57,14 @@ export default {
 }
 
 .short-bech32 .address {
-  color: var(--dim);
+  color: var(--link);
   cursor: pointer;
   font-size: 14px;
   line-height: 14px;
 }
 
 .short-bech32 .address:hover {
-  color: var(--link);
+  color: var(--link-hover);
 }
 
 .short-bech32 .copied {

@@ -90,6 +90,7 @@ export default {
   color: var(--bright);
   font-size: var(--h1);
   font-weight: 500;
+  line-height: 40px;
 }
 .header-balance .top .icon-container {
   display: block;
@@ -123,12 +124,15 @@ export default {
 .tabs .tab {
   cursor: pointer;
   margin-right: 2rem;
+  font-weight: 500;
+  letter-spacing: -1px;
   font-size: 1rem;
 }
 .tabs .tab a {
   color: var(--dim);
   display: block;
   padding-bottom: 1rem;
+  padding-left: 0;
 }
 .tabs .tab a:hover {
   color: var(--link);
@@ -141,7 +145,7 @@ export default {
 }
 .tm-btn {
   position: absolute;
-  right: 0rem;
+  right: 1rem;
   bottom: 1rem;
 }
 </style>
@@ -81,6 +81,11 @@ export default {
   justify-content: space-between;
   margin: 0.5rem;
   padding: 0.5rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-width: 240px;
 }
 
 .tm-connected-network .chain-id {

@@ -107,9 +107,10 @@ export default {
 
 .tm-modal-title {
   flex: 1;
-  font-size: h3;
+  font-size: var(--h3);
   font-weight: 500;
   color: var(--bright);
+  padding-left: 1rem;
 }
 
 .tm-modal-main {

@@ -86,12 +86,13 @@ export default {
 
 <style>
 .tm-notification {
-  background: var(--app-fg);
+  background: var(--app-nav);
   font-size: 0.75rem;
   cursor: pointer;
   user-select: none;
   margin: 0.5rem 0.5rem 0;
   border-radius: 0.25rem;
+  border: 1px solid var(--bc-dim);
 }
 
 .tm-notification.tm-notification-warning header {
@@ -152,6 +153,7 @@ export default {
 
 .tm-notification:hover menu .close {
   display: block;
+  cursor: pointer;
 }
 
 @media screen and (min-width: 360px) {

@@ -190,6 +190,7 @@ export default {
   color: var(--dim);
   font-size: var(--sm);
   line-height: var(--xl);
+  display: inline;
 }
 
 .tm-session-footer > div {
@@ -234,10 +235,4 @@ export default {
     display: block !important;
   }
 }
-
-.tm-connected-network {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
 </style>
@@ -1,13 +1,14 @@
 <template>
-  <div class="tm-tool-bar">
+  <div class="tool-bar">
     <a
       v-tooltip.bottom="'Back'"
       :disabled="user.history.length === 0"
       class="back"
       @click="back"
       ><i class="material-icons">arrow_back</i></a
     >
-    <slot /><a v-tooltip.bottom="'Help'" class="help" @click="enableModalHelp"
+    <slot />
+    <a v-tooltip.bottom="'Help'" class="help" @click="enableModalHelp"
       ><i class="material-icons">help_outline</i></a
     >
     <router-link
@@ -24,7 +25,6 @@
 <script>
 import { mapGetters, mapMutations } from "vuex"
 export default {
-  // the name needs to be different from TmToolBar (tm-tool-bar) or else recursive rendering takes place
   name: `tool-bar`,
   computed: {
     ...mapGetters([`user`, `lastPage`])
@@ -49,20 +49,23 @@ export default {
 }
 </script>
 <style>
-.tm-page-header-text {
-  padding-right: 1rem;
+.tool-bar {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.tm-page-header-text i {
-  padding: 1rem;
+.tool-bar a {
+  padding-left: 0.5rem;
+  position: relative;
+  top: 1rem;
+  right: 1rem;
   color: var(--dim);
 }
 
-.tm-page-header-text i:hover {
+.tool-bar a:hover {
   cursor: pointer;
-}
-
-.tm-page-header-text i:hover {
   color: var(--bright);
 }
 </style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,3 +14,4 @@ yarn-error.log @@
     testArtifacts/*
     app/networks/local-testnet/*
     .idea/*
+    tasks/