Jordan/1754 forms

.gitignore

@@ -19,4 +19,4 @@ server_dev.key
 server_dev.crt
 Cosmos_*
 app/networks/*
-app/package.json
+app/package.json

CHANGELOG.md

@@ -132,16 +132,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
@@ -153,6 +153,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
 - [\#1707](https://github.com/cosmos/voyager/issues/1707) Governance txs are now disabled if the user doesn't hold any min_deposit token @fedekunze
 - [\#1815](https://github.com/cosmos/voyager/pull/1815) Fixed getters for proposals denominator, reverted to 945803d586b83d65547cd16f4cd5994eac2957ea until interfaces are ready @sabau
 - Fixed build process @ƒaboweb

app/src/renderer/App.vue

@@ -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"
@@ -50,7 +48,6 @@ export default {
     ModalError,
     ModalHelp,
     ModalLcdApproval,
-    ModalReceive,
     TmNotifications,
     ModalNodeHalted,
     Onboarding,

app/src/renderer/components/common/ActionModal.vue

@@ -0,0 +1,154 @@
+<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>
+        <p
+          v-if="submissionError"
+          class="tm-form-msg sm tm-form-msg--error submission-error"
+        >
+          {{ submissionError }}
+        </p>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import ClickOutside from "vue-click-outside"
+
+export default {
+  name: `action-modal`,
+  directives: {
+    ClickOutside
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  data: () => ({
+    submissionError: null
+  }),
+  methods: {
+    close() {
+      this.$emit(`close-action-modal`)
+    },
+    async submit(submitFn, submissionErrorPrefix = `Submitting data failed`) {
+      try {
+        await submitFn()
+
+        this.close()
+      } catch ({ message }) {
+        this.submissionError = `${submissionErrorPrefix}: ${message}.`
+
+        setTimeout(() => {
+          this.submissionError = null
+        }, 5000)
+      }
+    }
+  }
+}
+</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 1rem;
+}
+
+.action-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 2rem 0 0;
+}
+
+.submission-error {
+  position: absolute;
+  right: 3rem;
+  bottom: 1rem;
+}
+
+/* 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>

app/src/renderer/components/common/AppHeader.vue

@@ -80,6 +80,7 @@ export default {
 <style>
 #app-header {
   z-index: var(--z-appHeader);
+  position: relative;
 }
 
 #app-header .container {

app/src/renderer/components/common/PageProfile.vue

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

app/src/renderer/components/common/ShortBech32.vue

@@ -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 {

app/src/renderer/components/common/TmBalance.vue

@@ -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>

app/src/renderer/components/common/TmConnectedNetwork.vue

@@ -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 {

app/src/renderer/components/common/TmField.vue

@@ -63,8 +63,6 @@
     :class="css"
     :placeholder="placeholder"
     :value="value"
-    :max="max"
-    :min="min"
     @change="onChange"
     @keyup="onKeyup"
     @keydown="onKeydown"
@@ -111,14 +109,6 @@ export default {
     keydown: {
       type: Function,
       default: null
-    },
-    max: {
-      type: [String, Number], // for convenience you can provide a string
-      default: null
-    },
-    min: {
-      type: [String, Number], // for convenience you can provide a string
-      default: null
     }
   },
   data: () => ({
@@ -134,10 +124,6 @@ export default {
       if (this.type === `select`) {
         value += ` tm-field-select`
       }
-      // not used and screws with css when used
-      // if (this.type === `toggle`) {
-      //   value += ` tm-field-toggle`
-      // }
       if (this.size) value += ` tm-field-size-${this.size}`
       if (this.theme) value += ` tm-field-theme-${this.theme}`
       return value
@@ -171,9 +157,11 @@ export default {
     },
     updateValue(value) {
       let formattedValue = value
-      if (this.type == `number`) {
-        formattedValue = this.forceMinMax(value)
+
+      if (this.type === `number`) {
+        formattedValue = Number(value)
       }
+
       // Emit the number value through the input event
       this.$emit(`input`, formattedValue)
     },
@@ -185,15 +173,6 @@ export default {
     },
     onKeydown(...args) {
       if (this.keydown) return this.keydown(...args)
-    },
-    forceMinMax(value) {
-      value = typeof value === `string` ? Number(value.trim()) : value
-      if (this.max && value > this.max) {
-        value = Number(this.max)
-      } else if (this.min && value && value < this.min) {
-        value = Number(this.min)
-      }
-      return value
     }
   }
 }