vault touchup

src/components/CopyButton.vue

@@ -3,7 +3,9 @@
     <template v-slot:activator="{ props }">
       <v-btn v-bind="props" v-if="permitted" rounded variant="text" size="small" density="compact" @click="copy()"
              :class="error?'error':copied?'success':''"
-             :icon="error?'mdi-close-box-outline':copied?'mdi-check-circle-outline':'mdi-content-copy'"/>
+             :icon="error?'mdi-close-box-outline':copied?'mdi-check-circle-outline':'mdi-content-copy'"
+             :text="showText?text:''"
+      />
     </template>
     <span>Copied!</span>
   </v-tooltip>
@@ -12,7 +14,7 @@
 <script setup lang="ts">
 import {ref} from "vue";
 
-const props = defineProps(['text'])
+const props = defineProps({text:String, showText:{default:false}})
 const permitted = ref(true)
 const copied = ref(false)
 const error = ref(false)

src/components/Vault.vue

@@ -2,7 +2,7 @@
   <needs-provider>
   <!-- todo we can use something like this for ethereum where the vault creation is too expensive to subsidize
     <PhoneCard v-if="s.vault===null || s.vault.length === 0">
-      <v-card-title><v-icon color="warning" icon="mdi-alert"/>&nbsp;Setup&nbsp;Vault</v-card-title>
+      <v-card-title><v-icon color="warning" icon="mdi-safe-square-outline"/>&nbsp;Setup&nbsp;Vault</v-card-title>
       <v-card-subtitle>Create Your Own Personal Dexorder Vault</v-card-subtitle>
       <v-card-text>
         Dexorder never has access to your tokens. Instead, you create a personal
@@ -24,13 +24,13 @@
     </PhoneCard>
   -->
     <v-card v-if="s.vaults.length<num">
-      <v-card-title>No Vault Yet</v-card-title>
+      <v-card-title><v-icon icon="mdi-safe-square-outline" size="small" color="red"/> No Vault Yet</v-card-title>
       <v-card-text v-if="num!==0"><!--todo-->Multiple vaults are not yet supported</v-card-text>
       <v-card-text v-if="num===0">Create an order first, then your vault account will appear here to accept a deposit of trading funds.</v-card-text>
     </v-card>
     <v-card v-if="s.vaults.length>num">
-      <v-card-title>Vault {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
-      <v-card-subtitle v-if="exists">{{addr}} <copy-button :text="addr"/></v-card-subtitle>
+      <v-card-title><v-icon icon="mdi-safe-square-outline" size="small"/> My Vault {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
+      <v-card-subtitle v-if="exists" class="overflow-x-hidden"><copy-button :text="addr"/>{{addr}}</v-card-subtitle>
       <v-card-text v-if="empty">
         <p>There are no funds currently in your vault.</p>
         <p>Send tokens to the address above to fund your vault.</p>

src/components/Withdraw.vue

@@ -53,6 +53,7 @@ function withdraw() {
     const vault = contractOrNull(vaultAddr, vaultAbi, signer)
     return await vault['withdraw(address,uint256)'](props.token.address, amount)
   })
+  floatAmount.value = 0
   emit('update:modelValue', false)
 }
 

src/layouts/default/AppBar.vue

@@ -8,7 +8,7 @@
       <v-chip text="ALPHA" size="x-small" color="red" class="mx-1"/>
     </v-app-bar-title>
 
-    <v-btn icon="mdi-safe-square" text="Vault" @click="$router.push('/vault')"></v-btn>
+    <v-btn icon="mdi-safe-square-outline" text="Vault" @click="$router.push('/vault')"></v-btn>
     <v-btn icon="mdi-swap-horizontal-circle-outline" text="Orders" @click="$router.push('/orders')"></v-btn>
 
   </v-app-bar>

src/styles/settings.scss

@@ -11,6 +11,6 @@
   //$variable: false,
   $body-font-family: v.$body-font-family,
   $heading-font-family: v.$heading-font-family,
-  $card-title-font-size: 24px,
+  //$card-title-font-size: 24px,
   $app-bar-title-font-size: 32px,
 );