From 8d85c2e8b1561a4086a05c9a3ce67b0b15cd0c0e Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Wed, 24 Apr 2024 23:17:23 -0400
Subject: [PATCH] home page tweaks

---
 src/blockchain/route.js             |  2 +-
 src/components/Logo.vue             | 19 +++++++++++++++++++
 src/components/NeedsSigner.vue      | 13 ++++++++++---
 src/components/chart/ChartOrder.vue | 13 ++++++++-----
 src/components/chart/Toolbar.vue    |  4 ++++
 src/corp/Home.vue                   | 19 ++++++++++---------
 src/styles/style.scss               | 16 ++++++++++++++++
 7 files changed, 68 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Logo.vue

diff --git a/src/blockchain/route.js b/src/blockchain/route.js
index 0f1a36f..cd097b9 100644
--- a/src/blockchain/route.js
+++ b/src/blockchain/route.js
@@ -50,7 +50,7 @@ async function componentFindRoute() {
             os.routes = result
         }
     } catch (e) {
-        console.log('ignoring routes exception', e)
+        // console.log('ignoring routes exception', e)
     } finally {
         os.routesPending = false
     }
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
new file mode 100644
index 0000000..d6b6372
--- /dev/null
+++ b/src/components/Logo.vue
@@ -0,0 +1,19 @@
+<template>
+    <span class="d-inline-flex align-baseline">
+      <v-icon icon="mdi-arrow-up-bold" color="primary" class="arrow"/>
+      <span class="logo">dexorder</span>
+      <alpha v-if="alpha"/>
+    </span>
+</template>
+
+<script setup>
+
+import Alpha from "@/components/Alpha.vue";
+
+const props = defineProps({
+  alpha: {type: Boolean, default: true}
+})
+</script>
+
+<style scoped lang="scss">
+</style>
\ No newline at end of file
diff --git a/src/components/NeedsSigner.vue b/src/components/NeedsSigner.vue
index 6a1d6c2..df89c23 100644
--- a/src/components/NeedsSigner.vue
+++ b/src/components/NeedsSigner.vue
@@ -2,11 +2,15 @@
   <slot v-if="pluginOk && loggedIn" v-bind="$props"/>
   <v-card v-if="!loggedIn" rounded="0">
     <v-card-title>
-      <v-icon icon="mdi-hand-wave" color="grey"/>&nbsp;Welcome to Dexorder Alpha!
+<!--      <v-icon icon="mdi-hand-wave" color="grey"/>-->
+      Welcome to Dexorder Alpha!
     </v-card-title>
     <v-card-text>
       This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
     </v-card-text>
+    <v-card-text>
+      Play with the order builder by clicking on the <logo :alpha="false" class="logo-small"/> logo or on the <v-icon icon="mdi-chart-timeline-variant"/> button.
+    </v-card-text>
     <div v-if="!pluginOk">
       <v-card-text>
         A cryptocurrency wallet such as <a href="https://metamask.io/download/" target="MetaMask">MetaMask</a> is
@@ -18,8 +22,10 @@
       </v-card-actions>
     </div>
 
-    <btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
-         @click="connect" :disabled="disabled" text="Connect Wallet"/>
+    <v-card-actions>
+      <btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
+           @click="connect" :disabled="disabled" text="Connect Wallet"/>
+    </v-card-actions>
     <div v-if="needsNetwork">
       <v-card-text>
         <table id="manualsetup">
@@ -66,6 +72,7 @@ import {computed, ref} from "vue";
 import {addTestnet, connectWallet, switchChain, useWalletStore} from "@/blockchain/wallet.js";
 import Btn from "@/components/Btn.vue";
 import CopyButton from "@/components/CopyButton.vue";
+import Logo from "@/components/Logo.vue";
 
 const s = useStore()
 const ws = useWalletStore()
diff --git a/src/components/chart/ChartOrder.vue b/src/components/chart/ChartOrder.vue
index 01936bd..5ab7ea3 100644
--- a/src/components/chart/ChartOrder.vue
+++ b/src/components/chart/ChartOrder.vue
@@ -32,11 +32,14 @@
           <span :style="colorStyle" class="ma-3">Add condition:</span>
           <v-btn :color="color" variant="text" prepend-icon="mdi-clock-outline" @click="build(order,'DCABuilder')">DCA</v-btn>
           <v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
-      <!--    <v-btn variant="flat" prepend-icon="mdi-vector-line">Line</v-btn>-->
-          <!--
-          mdi-ray-start-end
-          mdi-vector-polyline
-          -->
+          <v-tooltip text="Coming Soon!" location="top">
+            <template v-slot:activator="{ props }">
+              <span v-bind="props">
+                <v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" disabled>Diagonal</v-btn>
+              </span>
+            </template>
+          </v-tooltip>
+          <!-- mdi-ray-start-end mdi-vector-polyline -->
         </div>
       </div>
     </div>
diff --git a/src/components/chart/Toolbar.vue b/src/components/chart/Toolbar.vue
index 840d4fb..d23486f 100644
--- a/src/components/chart/Toolbar.vue
+++ b/src/components/chart/Toolbar.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="d-flex mb-1 align-center w-100">
+    <logo class="d-flex align-end clickable logo-large" @click="$router.push('/order')"/>
+<!--
     <div class="d-flex align-end clickable" @click="$router.push('/order')">
       <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
       <span class="logo">dexorder</span>
       <alpha class="pr-6"/>
     </div>
+-->
 <!--
     <div class="d-flex align-center">
     </div>
@@ -29,6 +32,7 @@ import {useChartOrderStore} from "@/orderbuild.js";
 import {useTheme} from "vuetify";
 import ToolbarButton from "@/components/chart/ToolbarButton.vue";
 import Alpha from "@/components/Alpha.vue";
+import Logo from "@/components/Logo.vue";
 
 const props = defineProps(['title', 'icon'])
 
diff --git a/src/corp/Home.vue b/src/corp/Home.vue
index dae9b59..b691e43 100644
--- a/src/corp/Home.vue
+++ b/src/corp/Home.vue
@@ -7,28 +7,29 @@
     <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
 <!--    <social class="ml-12"/>-->
     <v-card-text>
-      Dexorder powers up your favorite DeFi exchanges with advanced order types!
+      Dexorder powers up your favorite DeFi exchange with advanced order types!
     </v-card-text>
     <v-card-text>
       <v-list>
-        <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
-        <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
-        <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
-        <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
-        <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
-        <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> One-Click Cancel All <alpha/></v-list-item>
-        <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
         <v-list-item>
           <v-img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Uniswap_Logo.svg" width="1.3em"
                  inline style="vertical-align: middle" class="mr-2"/>
           Supports Uniswap v3 <alpha/>
         </v-list-item>
+        <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
       </v-list>
     </v-card-text>
     <v-card-actions>
       <v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
       <v-btn prepend-icon="mdi-discord" variant="flat" text="Join Discord" @click="discord"/>
-      <v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow on Twitter" @click="twitter"/>
+      <v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow Twitter" @click="twitter"/>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/src/styles/style.scss b/src/styles/style.scss
index b87e785..cb74747 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -4,7 +4,23 @@
   .logo {
     font-family: v.$heading-font-family;
     font-weight: 500;
+    .arrow {
+
+    }
+  }
+
+  .logo-large {
     font-size: 24px;
+    .arrow {
+      font-size: 30px;
+    }
+  }
+
+  .logo-small {
+    font-size: 0.8em;
+    .arrow {
+      font-size: 1.2em;
+    }
   }
 
   .title {