From d8a35272044ea1eabe6a2f035d84cb8f9448a027 Mon Sep 17 00:00:00 2001
From: trungbach <trunga2k29@gmail.com>
Date: Mon, 8 Jul 2024 17:42:03 +0700
Subject: [PATCH] style: update ui pages widget & state sync

---
 src/components/CardParameter.vue        |  2 +-
 src/modules/[chain]/statesync/index.vue | 28 +++++++++++++++--------
 src/modules/[chain]/widget/index.vue    | 30 ++++++++++++++++---------
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index 9ecd86c6..a2f88c62 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -54,7 +54,7 @@ function calculateValue(value: any) {
 </script>
 <template>
   <div
-    class="bg-base-100 px-6 py-6 rounded-[16px] mt-5"
+    class="bg-base-100 px-6 py-6 rounded-2xl mt-5"
     v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
   >
     <div class="text-base font-semibold mb-3 text-white">
diff --git a/src/modules/[chain]/statesync/index.vue b/src/modules/[chain]/statesync/index.vue
index 00a4614f..6e7b1982 100644
--- a/src/modules/[chain]/statesync/index.vue
+++ b/src/modules/[chain]/statesync/index.vue
@@ -41,9 +41,13 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title truncate mb-2">{{ $t('statesync.title') }}</h2>
-      <div class="text-sm">
+    <div
+      class="p-6 rounded-2xl mb-4 shadow border border-[#242627] dark:bg-[#141416]"
+    >
+      <h2 class="card-title truncate mb-2 text-white">
+        {{ $t('statesync.title') }}
+      </h2>
+      <div class="text-sm text-[#B4B7BB] w-8/12">
         {{ $t('statesync.description') }}
         <a
           class="text-primary lowercase"
@@ -54,11 +58,13 @@ onMounted(() => {
       </div>
     </div>
 
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title truncate mb-2">
+    <div
+      class="p-6 rounded-2xl mb-4 shadow border border-[#242627] dark:bg-[#141416]"
+    >
+      <h2 class="card-title truncate mb-2 text-white">
         {{ $t('statesync.title_2') }}
       </h2>
-      <div class="text-sm">
+      <div class="text-sm text-[#B4B7BB]">
         1. {{ $t('statesync.text_1') }} ({{ appName }}
         {{ $t('statesync.version') }}:
         {{ nodeInfo?.applicationVersion?.version || '' }})
@@ -113,9 +119,13 @@ onMounted(() => {
       </div>
     </div>
 
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-      <h2 class="card-title truncate mb-2">{{ $t('statesync.title_3') }}</h2>
-      <div class="text-sm">
+    <div
+      class="p-6 rounded-2xl mb-4 shadow border border-[#242627] dark:bg-[#141416]"
+    >
+      <h2 class="card-title truncate mb-2 text-white">
+        {{ $t('statesync.title_3') }}
+      </h2>
+      <div class="text-sm text-[#B4B7BB]">
         {{ $t('statesync.text_title_3') }}
         <br /><br />
         <div class="mockup-code bg-base-200 my-2">
diff --git a/src/modules/[chain]/widget/index.vue b/src/modules/[chain]/widget/index.vue
index c392cb28..f3b8b47c 100644
--- a/src/modules/[chain]/widget/index.vue
+++ b/src/modules/[chain]/widget/index.vue
@@ -18,8 +18,10 @@ const hdPath = computed(() => {
 </script>
 <template>
   <div>
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-      <h2 class="card-title">{{ $t('widget.title') }}</h2>
+    <div
+      class="p-6 rounded-2xl mb-4 shadow border border-[#242627] dark:bg-[#141416]"
+    >
+      <h2 class="card-title text-white">{{ $t('widget.title') }}</h2>
       <div class="my-4 grid grid-flow-col auto-cols-max overflow-auto">
         <div class="form-control">
           <div class="input-group">
@@ -38,18 +40,24 @@ const hdPath = computed(() => {
           </div>
         </div>
       </div>
-      <span class="text-base">{{ $t('widget.text_1') }}</span>
-      <div class="mockup-code bg-base-200 my-2">
+      <span class="text-base text-white font-semibold">{{
+        $t('widget.text_1')
+      }}</span>
+      <div class="mockup-code bg-[#1A1E25] my-2">
         <pre
           data-prefix="1"
         ><code class="text-gray-800 dark:invert">&lt;script type="module" src="https://unpkg.com/@oraichain/oraiscan-widget@latest/dist/ping-widget.js"&gt;</code></pre>
       </div>
     </div>
-    <div class="bg-base-100 my-5 px-4 pt-3 pb-4 rounded shadow">
-      <h2 class="card-title">{{ $t('module.widget') }}</h2>
+    <div
+      class="p-6 rounded-2xl mb-4 shadow border border-[#242627] dark:bg-[#141416]"
+    >
+      <h2 class="card-title text-white">{{ $t('module.widget') }}</h2>
       <div class="mt-4">
-        <span class="text-base"> 1. {{ $t('widget.text_2') }}</span>
-        <div class="mockup-code bg-base-200 my-2">
+        <span class="text-base text-white font-semibold">
+          1. {{ $t('widget.text_2') }}</span
+        >
+        <div class="mockup-code bg-[#1A1E25] my-4">
           <pre
             data-prefix=">"
           ><code class="text-green-400">&lt;!-- This widget is optional. --&gt; </code></pre>
@@ -58,8 +66,10 @@ const hdPath = computed(() => {
           ><code  class="text-gray-800 dark:invert">&lt;ping-connect-wallet chain-id="{{ chainId }}" hd-path="{{ hdPath }}"/&gt;</code></pre>
         </div>
 
-        <span class="text-base"> 2. {{ $t('widget.text_3') }}</span>
-        <div class="mockup-code bg-base-200 my-2">
+        <span class="text-base text-white font-semibold">
+          2. {{ $t('widget.text_3') }}</span
+        >
+        <div class="mockup-code bg-[#1A1E25] my-2">
           <pre
             data-prefix=">"
           ><code class=" text-gray-800 dark:invert">&lt;ping-token-convert chain-name="{{ chainName }}" endpoint="{{endpoint}}" hd-path="{{hdPath}}"/&gt;</code></pre>