feat: updated design

src/App.vue

@@ -50,14 +50,41 @@ html {
   font-family: 'IBM Plex Sans', sans-serif !important;
 }
 
-.app {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+#app {
+  font-family: 'IBM Plex Sans', sans-serif !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
 }
 
+a {
+  color: black;
+  transition: opacity .15s ease-in-out;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+a:hover {
+  opacity: 0.8;
+}
+
 .fullwidth {
   width: 100%;
 }
+
+.el-tabs__item:hover,
+.el-tabs__item.is-active {
+  color: #e43e33;
+}
+.el-tabs__active-bar {
+  background-color: #e43e33;
+}
+.el-button--danger {
+  background-color: #e43e33;
+  border-color: #e43e33;
+}
+.el-tabs__item {
+  padding: 13px 20px;
+  height: 66px;
+}
 </style>

src/components/Dashboard.vue

@@ -1,27 +1,29 @@
 <template>
   <el-container>
-    <div @mouseenter.passive="isCollapsed = false" @mouseleave.passive="isCollapsed = true">
-      <el-menu
+    <el-aside width="270px" id="side-menu">
+      <div class="title-info">
+        <div>
+          <p class="title">IROHA WALLET</p>
+        </div>
+      </div>
+      <div class="menu-list">
+        <el-menu
           :router="true"
-          :class="isCollapsed ? 'el-side-menu el-menu--collapse' : 'el-side-menu'"
           :default-active="currentActiveMenu"
-      >
-        <h1 class="logo">IW</h1>
-        <el-menu-item index="/dashboard/summary-page">
-          <fa-icon icon="tachometer-alt" class="menu-icon" />
-          <span slot="title">Dashboard</span>
-        </el-menu-item>
-        <el-menu-item index="/dashboard/wallets-page">
-          <fa-icon icon="wallet" class="menu-icon" />
-          <span slot="title">Wallets</span>
-        </el-menu-item>
-        <el-menu-item index="/logout" @click="onLogout">
-          <fa-icon icon="sign-out-alt" class="menu-icon" />
-          <span slot="title">Logout</span>
-        </el-menu-item>
-      </el-menu>
-    </div>
-    <el-main class="main" style="width: 100%; height: 100vh; padding: 0 0 0 62px;">
+        >
+          <el-menu-item index="/dashboard/summary-page">
+            <span slot="title">Dashboard</span>
+          </el-menu-item>
+          <el-menu-item index="/dashboard/wallets-page">
+            <span slot="title">Wallets</span>
+          </el-menu-item>
+          <el-menu-item index="/logout" @click="onLogout">
+            <span slot="title">Logout</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+    </el-aside>
+    <el-main id="main">
       <router-view />
     </el-main>
   </el-container>
@@ -65,4 +67,66 @@ export default {
 </script>
 
 <style scoped>
+#side-menu {
+  min-height: 100vh;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: fixed;
+  border-right: 1px solid #eaeaea
+}
+
+#main {
+  padding: 0;
+  margin-left: 270px;
+}
+
+.title-info {
+  display: flex;
+  justify-content: center;
+  font-weight: 600;
+  padding: 1rem 0;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.menu-list {
+  flex: 1;
+}
+
+.menu-list >>> .el-menu {
+  border-right: 0px
+}
+
+.menu-list >>> .el-menu-item.is-active{
+  background: #e43e33;
+  color: rgb(255, 255, 255, 1);
+  font-weight: 500;
+}
+
+.menu-item {
+  color: #00111f;
+  display: block;
+  padding: 1rem .5rem 1rem 1.5rem;
+}
+
+.menu-item_text svg {
+  margin-right: 0.5rem;
+  width: 1rem;
+}
+.router-link-active > .menu-item_text {
+  color: rgb(255, 255, 255, 1)
+}
+
+.menu-item.router-link-active {
+  background: #e43e33;
+  color: white;
+  font-weight: 500;
+  pointer-events: none;
+}
+
+a.menu-item:hover span {
+  opacity: 1;
+  color: #000000;
+}
 </style>

src/components/Login.vue

@@ -1,4 +1,5 @@
 <template>
+<div class="wrapper">
   <div class="login-form-container">
     <div class="logo">
       <img id="logo" src="~@/assets/logo.svg" alt="Iroha">
@@ -55,6 +56,7 @@
       </el-form-item>
     </el-form>
   </div>
+</div>
 </template>
 
 <script>
@@ -134,17 +136,24 @@ export default {
 </script>
 
 <style scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+}
 .login-form-container {
-  margin-top: -7rem;
+  margin: auto;
 }
 .logo {
   display: flex;
   justify-content: center;
 }
 .logo img {
   width: 5rem;
+  height: 5rem;
 }
 .login-form {
   width: 25rem;
+  justify-content: center;
 }
 </style>

src/components/SummaryPage.vue

@@ -1,29 +1,25 @@
 <template>
   <div class="summary-page">
-    <el-row class="summary-page__row" type="flex" :gutter="15">
-      <el-col :span="12">
-        <el-card class="user-card">
-          <div class="user-card__account-id">{{ accountId }}</div>
-
-          <div v-for="(value, key) in accountInfo" :key="key">
-            {{ key }}: {{ value }}
-          </div>
-        </el-card>
+    <el-row class="summary-page__row" type="flex">
+      <el-col :span="10">
+        <div v-if="accountId" class="user-card__account-id"><b>Account:</b> {{ accountId }}</div>
+        <div v-else class="user-card__account-id"><b>Please auth!</b></div>
+        <div v-for="(value, key) in accountInfo" :key="key">
+          <b>{{ key }}:</b> {{ value }}
+        </div>
       </el-col>
 
-      <el-col :span="12">
-        <el-card class="wallet-card" v-loading="!isReady">
-          <div v-for="wallet in wallets" :key="wallet.name">
-            {{ wallet.name }} {{ wallet.amount }}
-          </div>
-
-          <div v-if="wallets.length === 0">No assets</div>
-        </el-card>
+      <el-col :span="10">
+        <div v-for="wallet in wallets" :key="wallet.name">
+          <b>{{ wallet.name }}</b> {{ wallet.amount }}
+        </div>
+        <div v-if="wallets.length === 0"><b>No assets</b></div>
       </el-col>
     </el-row>
 
     <el-row class="summary-page__row">
-      <el-card>
+      <el-card class="transactions-history">
+        <b>Transactions history</b>
         <transactions currency :transactions="transactions" :loading="!isReady" />
       </el-card>
     </el-row>
@@ -73,4 +69,7 @@ export default {
 </script>
 
 <style scoped>
+.summary-page__row {
+  padding: 2rem;
+}
 </style>

src/components/Transactions.vue

@@ -9,6 +9,7 @@
       <el-table-column prop="to" label="to" />
       <el-table-column prop="amount" label="amount" />
       <el-table-column v-if="currency" prop="currency" label="currency" />
+      <el-table-column prop="message" label="message" />
       <el-table-column prop="date" label="date">
         <template slot-scope="scope">
           <span>{{ scope.row.date | formatDate }}</span>

src/components/TransferForm.vue

@@ -1,34 +1,61 @@
 <template>
+<div class="wrapper">
   <el-form
     class="transfer-form"
     ref="form"
     :model="form"
     :rules="rules"
     label-width="6rem"
+    label-position="top"
   >
-    <el-form-item label="TO:" prop="to">
+    <el-form-item label="To:" prop="to">
       <el-input name="to" v-model="form.to" :disabled="loading" />
     </el-form-item>
 
-    <el-form-item label="AMOUNT:" prop="amount">
+    <el-form-item label="Amount:" prop="amount">
       <el-input name="amount" v-model="form.amount" :disabled="loading" />
     </el-form-item>
 
-    <el-form-item label="MESSAGE:" prop="message">
+    <el-form-item label="Message:" prop="message">
       <el-input name="message" v-model="form.message" type="textarea" :disabled="loading" />
     </el-form-item>
 
+      <el-form-item label="Private key:" prop="privateKey">
+        <el-row type="flex" justify="space-between">
+          <el-col :span="20">
+            <el-input
+              name="privateKey"
+              v-model="form.privateKey"
+              :disabled="isLoading"
+            />
+          </el-col>
+          <el-upload
+            class="auth-form_upload"
+            action=""
+            :auto-upload="false"
+            :show-file-list="false"
+            :on-change="onFileChosen"
+            :disabled="isLoading"
+          >
+            <el-button>
+              <fa-icon icon="upload" />
+            </el-button>
+          </el-upload>
+        </el-row>
+      </el-form-item>
+
     <el-form-item class="send-button-container">
       <el-button
-        class="send-button"
-        type="primary"
+        class="send-button fullwidth"
+        type="danger"
         @click="onSubmit"
         :loading="loading"
       >
         SEND
       </el-button>
     </el-form-item>
   </el-form>
+</div>
 </template>
 
 <script>
@@ -67,6 +94,10 @@ export default {
         amount: [
           { required: true, message: 'Please input "AMOUNT"', trigger: 'change' },
           { pattern: amountRegexp, message: amountMessage, trigger: 'change' }
+        ],
+        privateKey: [
+          { required: true, message: 'Please input "PRIVATE KEY"', trigger: 'change' },
+          { pattern: /^[A-Fa-f0-9]{64}$/, message: '"PRIVATE KEY" should match [A-Fa-f0-9]{64}', trigger: 'change' }
         ]
       }
     }
@@ -91,10 +122,26 @@ export default {
 
     clearValidationMessage () {
       this.$refs['form'].clearValidate()
+    },
+
+    onFileChosen (file, fileList) {
+      const reader = new FileReader()
+
+      reader.onload = (ev) => {
+        this.form.privateKey = (ev.target.result || '').trim()
+      }
+      reader.readAsText(file.raw)
     }
   }
 }
 </script>
 
 <style scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+}
+.transfer-form {
+  width: 25rem;
+}
 </style>

src/components/Wallet.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="wallet">
-    {{ wallet.name }} {{ wallet.amount }}
-
     <el-tabs class="wallet__tabs" v-model="activeTabName">
       <el-tab-pane label="HISTORY" name="history">
         <transactions :transactions="transactions" :loading="!isReady" />
@@ -87,6 +85,7 @@ export default {
     onSubmit () {
       this.isSending = true
       this.$store.dispatch('transferAsset', {
+        privateKeys: [this.form.privateKey],
         assetId: this.wallet.name,
         to: this.form.to,
         amount: this.form.amount,
@@ -98,6 +97,8 @@ export default {
             type: 'success'
           })
           this.activeTabName = 'history'
+          this.fetchTransactionsByWalletId(this.wallet.id)
+          this.fetchWalletByWalletId(this.wallet.id)
         })
         .catch(err => {
           console.error(err)