From ec32cd31053314170d7cfc732d5f103bd55a4c30 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Thu, 11 May 2023 01:02:43 +0800
Subject: [PATCH] feat: statesync page ui refactor

---
 src/modules/[chain]/statesync/index.vue | 37 ++++++++++++++-----------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/modules/[chain]/statesync/index.vue b/src/modules/[chain]/statesync/index.vue
index 296be8bf..41241b0f 100644
--- a/src/modules/[chain]/statesync/index.vue
+++ b/src/modules/[chain]/statesync/index.vue
@@ -38,9 +38,11 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <VCard>
-      <VCardTitle>What's State Sync?</VCardTitle>
-      <VCardText>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+      <h2 class="card-title truncate mb-2">
+        What's State Sync?
+      </h2>
+      <div class="text-sm">
         The Tendermint Core 0.34 release includes support for state sync, which
         allows a new node to join a network by fetching a snapshot of the
         application state at a recent height instead of fetching and replaying
@@ -52,36 +54,39 @@ onMounted(() => {
           >here</a
         >
         for more infomation.
-      </VCardText>
-    </VCard>
+      </div>
+    </div>
 
-    <VCard class="my-5">
-      <VCardTitle>Starting New Node From State Sync</VCardTitle>
-      <VCardItem>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+      <h2 class="card-title truncate mb-2">Starting New Node From State Sync</h2>
+      <div class="text-sm">
         1. Install Binary ({{ appName }} Version:
         {{ nodeInfo.application_version?.version || '' }})
         <br />
         We need to install the binary first and make sure that the version is
         the one currently in use on mainnet.
-        <br />
+        <br /> <br />
         2. Enable State Sync<br />
         We can configure Tendermint to use state sync in
         $DAEMON_HOME/config/config.toml.
+        <br /><br />
         <VTextarea auto-grow :model-value="state"></VTextarea>
+        <br />
         3. Start the daemon: <code>{{ appName }} start</code>
         <br />
         If you are resetting node, run
         <code>{{ appName }} unsafe-reset-all</code> or
         <code>{{ appName }} tendermint unsafe-reset-all --home ~/.HOME</code>
         before you start the daemon.
-      </VCardItem>
-    </VCard>
+      </div>
+    </div>
 
-    <VCard>
-      <VCardTitle>Enable Snapshot For State Sync</VCardTitle>
-      <VCardItem>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+      <h2 class="card-title truncate mb-2">Enable Snapshot For State Sync</h2>
+      <div class="text-sm">
         To make state sync works, we can enable snapshot in
         $DAEMON_HOME/config/app.toml
+        <br/><br/>
         <VTextarea
           auto-grow
           model-value="[state-sync]
@@ -93,8 +98,8 @@ snapshot-interval = 1000
 snapshot-keep-recent = 2"
         >
         </VTextarea>
-      </VCardItem>
-    </VCard>
+      </div>
+    </div>
   </div>
 </template>