new fonts & favicon

src/components/HelloWorld.vue

@@ -1,75 +0,0 @@
-<template>
-  <v-container class="fill-height">
-    <v-responsive class="align-center text-center fill-height">
-      <v-img height="300" src="@/assets/logo.svg" />
-
-      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-
-      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
-
-      <div class="py-14" />
-
-      <v-row class="d-flex align-center justify-center">
-        <v-col cols="auto">
-          <v-btn
-            href="https://vuetifyjs.com/components/all/"
-            min-width="164"
-            rel="noopener noreferrer"
-            target="_blank"
-            variant="text"
-          >
-            <v-icon
-              icon="mdi-view-dashboard"
-              size="large"
-              start
-            />
-
-            Components
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn
-            color="primary"
-            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
-            min-width="228"
-            rel="noopener noreferrer"
-            size="x-large"
-            target="_blank"
-            variant="flat"
-          >
-            <v-icon
-              icon="mdi-speedometer"
-              size="large"
-              start
-            />
-
-            Get Started
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn
-            href="https://community.vuetifyjs.com/"
-            min-width="164"
-            rel="noopener noreferrer"
-            target="_blank"
-            variant="text"
-          >
-            <v-icon
-              icon="mdi-account-group"
-              size="large"
-              start
-            />
-
-            Community
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-responsive>
-  </v-container>
-</template>
-
-<script setup>
-  //
-</script>

src/components/Vault.vue

@@ -1,16 +1,16 @@
 <template>
   <v-card v-if="s.vault===null">
     <v-card-title><v-icon color="warning" icon="mdi-alert"/>&nbsp;Setup&nbsp;Vault</v-card-title>
-    <v-card-subtitle>Create Your Own Personal DexOrder Vault</v-card-subtitle>
+    <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
-      vault which acts like your DexOrder account.
-      Create your own personal asset vault to get started with DexOrder. This vault
-      acts like your DexOrder account. For security, only <i>you</i> can deposit
+      Dexorder never has access to your tokens. Instead, you create a personal
+      vault which acts like your Dexorder account.
+      Create your own personal asset vault to get started with Dexorder. This vault
+      acts like your Dexorder account. For security, only <i>you</i> can deposit
       or withdraw tokens from your vault, and no token approvals are ever given to
-      DexOrder. Instead, DexOrder sends trade requests to your vault at the right
+      Dexorder. Instead, Dexorder sends trade requests to your vault at the right
       times, then your vault checks the validity of those trade requests before
-      trading directly from your vault to the dex liquidity pool. DexOrder never
+      trading directly from your vault to the dex liquidity pool. Dexorder never
       has any access to the funds in your vault.
     </v-card-text>
     <v-card-text>
@@ -24,6 +24,7 @@
 
 <script setup>
 import {useStore} from "@/store/store.js";
+import wallet from "@/blockchain/wallet.js";
 
 const s = useStore()
 

src/layouts/default/AppBar.vue

@@ -1,12 +1,23 @@
 <template>
   <v-app-bar flat>
     <v-app-bar-title class="sc">
-      <v-icon icon="mdi-chart-line" />
-      DexOrder
-      <v-chip text="alpha test" size="small" color="red"/>
+      <v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/>
+      <span class="logo">dexorder</span>
+      <v-chip text="ALPHA" size="x-small" color="red" class="mx-1"/>
     </v-app-bar-title>
   </v-app-bar>
 </template>
 
 <script setup>
 </script>
+
+
+<style lang="scss">
+@use "src/styles/vars" as v;
+.arrow{
+  color: v.$green;
+}
+.logo {
+  font-weight: 500;
+}
+</style>

src/plugins/webfontloader.js

@@ -4,14 +4,16 @@
  * webfontloader documentation: https://github.com/typekit/webfontloader
  */
 
+// todo choose
+const displayFonts = ['Tektur', 'Turret Road', 'Chakra Petch', 'Orbitron', 'Quantico', 'Geo']
+const bodyFonts = ['Victor Mono', 'Nunito', 'Manrope', 'Sofia Sans']
+
 export async function loadFonts () {
   const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
 
   webFontLoader.load({
     google: {
-      // families: ['Roboto:100,300,400,500,700,900&display=swap'],
-      // families: ['Marcellus','Marcellus SC'],
-      families: ['Victor Mono', 'Tektur'],
+      families: Array.of(...displayFonts,...bodyFonts),
     },
   })
 }

src/styles/vars.scss

@@ -31,8 +31,16 @@ $all-colors: (
         red: $red,
 );
 
-$body-font-family: 'Victor Mono', monospace, sans-serif;
-$heading-font-family: 'Tektur', sans-serif;
+//$body-font-family: 'Victor Mono', monospace, sans-serif;
+$body-font-family: 'Manrope', monospace, sans-serif;
+//$body-font-family: 'Nunito', monospace, sans-serif;
+//$body-font-family: 'Sofia Sans', monospace, sans-serif;
+//$body-font-family: 'Quantico', sans-serif;
+//$body-font-family: 'Chakra Petch', sans-serif;
+//$heading-font-family: 'Tektur', sans-serif;
+$heading-font-family: 'Orbitron', sans-serif;
+//$heading-font-family: 'Quantico', sans-serif;
+//$heading-font-family: 'Chakra Petch', sans-serif;
 
 $sm-breakpoint: 600px;
 $card-maxw: 30rem;