ongoing UI work; fixes; TV callback loop problems again/still

src/components/chart/ChartOrder.vue

@@ -1,34 +1,39 @@
 <template>
-  <v-sheet dense class="d-flex align-content-stretch" style="overflow-y: hidden">
-    <div :style="lightColorStyle" style="width:0.5em">&nbsp;</div>
+  <row-bar :color="color">
+    <color-band :color="color"/>
     <div :style="faintColorStyle" style="width: 100%" class="justify-start align-content-start">
-      <v-text-field type="number" v-model="os.amount" min="0" step="1" variant="outlined" density="compact" hide-details
+      <v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="os.amount" variant="outlined" density="compact" hide-details
+                    min="0" :step="os.amount?Math.floor(os.amount/1000):1"
                     style="max-width:24em; display: inline-grid"
-                    class="pb-2"
-                    :color="color"
+                    class="py-2" :color="color"
+                    :label="os.amountIsTokenA ? 'Amount':('Value in '+os.quote.s)"
       >
         <template v-slot:prepend>
-          <v-btn :text="(os.buy ? 'Buy ' : 'Sell ') + os.base.s" variant="text" :color="color" @click="os.buy=!os.buy"/>
+          <v-btn :text="(os.buy ? 'Buy ' : 'Sell ') + os.base.s" variant="tonal" :color="color" @click="os.buy=!os.buy"/>
         </template>
-        <template v-slot:append>
+        <template v-slot:append-inner>
           <v-btn :text="os.amountToken.s+(os.amountIsTokenA?'':' worth')" :color="color" variant="text" @click="os.amountIsTokenA=!os.amountIsTokenA"/>
         </template>
       </v-text-field>
       <template v-for="b in builders(order)">
-        <builder-factory :builder="b" :color="faintColor"/>
-        <div>
-          <span class="ma-3">Add condition:</span>
-          <!--    <v-btn variant="flat" prepend-icon="mdi-clock-outline" @click="build('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
-          -->
-        </div>
+        <builder-factory :order="order" :builder="b" :color="color"/>
       </template>
+      <div class="my-3">
+        <span :style="colorStyle" class="ma-3">Add condition:</span>
+        <!--    <v-btn variant="flat" prepend-icon="mdi-clock-outline" @click="build('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
+        -->
+      </div>
+      <div class="d-flex justify-start">
+        <v-btn variant="tonal" :color="color" class="ma-6">Place Order</v-btn>
+        <v-btn variant="text" class="ma-6">Cancel</v-btn>
+      </div>
     </div>
-  </v-sheet>
+  </row-bar>
 </template>
 
 <script setup>
@@ -37,7 +42,10 @@ import BuilderFactory from "@/components/chart/BuilderFactory.vue";
 import {newBuilder, useChartOrderStore} from "@/orderbuild.js";
 import {useOrderStore} from "@/store/store.js";
 import {computed} from "vue";
-import Color from "color";
+import {lightenColor, lightenColor2} from "@/misc.js";
+import {useTheme} from "vuetify";
+import RowBar from "@/components/chart/RowBar.vue";
+import ColorBand from "@/components/chart/ColorBand.vue";
 
 const props = defineProps(['order'])
 const co = useChartOrderStore()
@@ -49,14 +57,15 @@ function build(order, component, options={}) {
 
 function builders(order) {
   let result = order.builders
-  console.log('builders', result)
   return result.length > 0 ? result : [newBuilder('MarketBuilder')]
 }
 
-const color = computed(()=>os.buy?'green':'red')
-const lightColor = computed(() => new Color(color.value).hsl().lightness(85).string())
-const faintColor = computed(() => new Color(color.value).hsl().lightness(97).string())
-const colorStyle = computed(() => { return {'background-color': color.value} })
+const theme = useTheme().current
+const color = computed(()=>os.buy?theme.value.colors.success:theme.value.colors.error)
+const lightColor = computed(() => lightenColor(color.value))
+const faintColor = computed(() => lightenColor2(color.value))
+const colorStyle = computed(() => { return {'color': color.value} })
+const bgColorStyle = computed(() => { return {'background-color': color.value} })
 const lightColorStyle = computed(() => { return {'background-color': lightColor.value} })
 const faintColorStyle = computed(() => { return {'background-color': faintColor.value} })
 
@@ -74,4 +83,4 @@ const maxAmount = computed(()=>{
 
 <style scoped lang="scss">
 
-</style>
+</style>