fix: styling

Signed-off-by: Tim Schmidt <[email protected]>
hashgraph · Mar 12, 2024 · de233c2 · de233c2
1 parent 739c01c
commit de233c2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue
@@ -21,8 +21,8 @@
 <!--Documentation for vue-datepicker: https://vue3datepicker.com-->
 
 <template>
-  <div class="is-flex is-align-items-center" style="margin-right: 8px">
-    <Datepicker v-model="date" @closed="handleClosed" @cleared="handleCleared"/>
+  <div class="is-flex is-align-items-center">
+    <Datepicker v-model="date" placeholder="SELECT A DATE" :is-24="false" time-picker-inline dark @closed="handleClosed" @cleared="handleCleared"/>
   </div>
 </template>
 
@@ -50,7 +50,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const date = ref()
+    const date = ref(new Date())
     const handleClosed = () => {
       if (props.controller) {
         const controller = props.controller
@@ -86,4 +86,18 @@ export default defineComponent({
 <!--                                                       STYLE                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<style/>
+<style>
+.dp__theme_dark {
+  --dp-background-color: var(--h-theme-box-background-color);
+  --dp-primary-color: #575757;
+  --dp-border-color: white;
+  --dp-border-color-hover: white;
+  --dp-icon-color: white;
+}
+:root {
+  --dp-font-family: "Styrene A Web", sans-serif;
+  --dp-border-radius: 0;
+  --dp-font-size: 11px;
+  --dp-input-padding: 3.5px 30px 3.5px 12px
+}
+</style>
diff --git a/src/pages/AccountDetails.vue b/src/pages/AccountDetails.vue
@@ -224,7 +224,7 @@
             <o-field style="margin-bottom: 0">
               <o-select v-model="timeSelection" class="ml-2 h-is-text-size-1">
                 <option value="LATEST" @click="onLatest">LATEST</option>
-                <option value="JUMP">JUMP TO DATE</option>
+                <option value="JUMP" @click="onJump">JUMP TO DATE</option>
               </o-select>
             </o-field>
             <TransactionFilterSelect :controller="transactionTableController"/>
@@ -372,10 +372,15 @@ export default defineComponent({
     const isTouchDevice = inject('isTouchDevice', false)
 
     const timeSelection = ref("LATEST")
+
     function onLatest() {
       transactionTableController.startAutoRefresh()
     }
 
+    function onJump() {
+      transactionTableController.stopAutoRefresh()
+    }
+
     //
     // account
     //
@@ -497,7 +502,8 @@ export default defineComponent({
       handleTabUpdate,
       filterVerified,
       timeSelection,
-      onLatest
+      onLatest,
+      onJump
     }
   }
 });