style: update ui pages widget & state sync

This commit is contained in:
trungbach 2024-07-08 17:42:03 +07:00
parent b2dd46447d
commit d8a3527204
No known key found for this signature in database
GPG Key ID: EA919AC6179CED17
3 changed files with 40 additions and 20 deletions

View File

@ -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">

View File

@ -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">

View File

@ -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>