From c457bc04bce187a7eab00b633850603e654479df Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Fri, 27 Sep 2024 03:34:09 +0000
Subject: [PATCH] feat: stylize channel page

---
 src/pages/Fiber/Channel/index.module.scss | 14 ++++-
 src/pages/Fiber/Channel/index.tsx         | 76 ++++++++++++-----------
 2 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/pages/Fiber/Channel/index.module.scss b/src/pages/Fiber/Channel/index.module.scss
index e84dcc914..9d063904b 100644
--- a/src/pages/Fiber/Channel/index.module.scss
+++ b/src/pages/Fiber/Channel/index.module.scss
@@ -49,6 +49,10 @@
     }
   }
 
+  .overview {
+    @extend %base-card;
+  }
+
   .id {
     overflow: hidden;
 
@@ -60,8 +64,9 @@
   }
 
   .transactions {
-    margin-top: 16px;
-    border-top: 1px solid #ccc;
+    @extend %base-card;
+
+    margin-top: 8px;
     padding-top: 16px;
 
     h3 {
@@ -71,12 +76,15 @@
   }
 
   .peers {
+    margin-top: 8px;
     display: flex;
     flex-wrap: wrap;
 
     .local,
     .remote {
-      flex: 1 0 50%;
+      @extend %base-card;
+
+      flex: 1 0 40%;
       border: 1px solid #ccc;
       padding: 32px;
 
diff --git a/src/pages/Fiber/Channel/index.tsx b/src/pages/Fiber/Channel/index.tsx
index 71139de5f..d5787feda 100644
--- a/src/pages/Fiber/Channel/index.tsx
+++ b/src/pages/Fiber/Channel/index.tsx
@@ -54,48 +54,50 @@ const Channel = () => {
     <Content>
       <div className={styles.container} onClick={handleCopy}>
         <div>
-          <dl>
-            <dt>{t('fiber.channel.channel_id')}</dt>
-            <dd className={styles.id}>
-              <span>{channel.channelId}</span>
-              <button type="button" data-copy-text={channel.channelId}>
-                <CopyIcon />
-              </button>
-            </dd>
-          </dl>
-          <dl>
-            <dt>{t('fiber.channel.state')}</dt>
-            <dd>{channel.stateName}</dd>
-          </dl>
+          <div className={styles.overview}>
+            <dl>
+              <dt>{t('fiber.channel.channel_id')}</dt>
+              <dd className={styles.id}>
+                <span>{channel.channelId}</span>
+                <button type="button" data-copy-text={channel.channelId}>
+                  <CopyIcon />
+                </button>
+              </dd>
+            </dl>
+            <dl>
+              <dt>{t('fiber.channel.state')}</dt>
+              <dd>{channel.stateName}</dd>
+            </dl>
 
-          <dl>
-            <dt>{t('fiber.channel.balance')}</dt>
-            <dd>{`${localeNumberString(
-              shannonToCkb(totalBalance.toFormat({ groupSeparator: '' })),
-            )} CKB(Total) | ${localeNumberString(
-              shannonToCkb(totalTLCBalance.toFormat({ groupSeparator: '' })),
-            )} CKB(TLC)`}</dd>
-          </dl>
-          <dl>
-            <dt>{t('fiber.channel.open_time')}</dt>
-            <dd>
-              <time dateTime={channel.createdAt}>{dayjs(channel.createdAt).format(TIME_TEMPLATE)}</time>
-            </dd>
-          </dl>
-          <dl>
-            <dt>{t('fiber.channel.update_time')}</dt>
-            <dd>
-              <time dateTime={channel.updatedAt}>{dayjs(channel.updatedAt).format(TIME_TEMPLATE)}</time>
-            </dd>
-          </dl>
-          {channel.shutdownAt ? (
             <dl>
-              <dt>{t('fiber.channel.shutdown_time')}</dt>
+              <dt>{t('fiber.channel.balance')}</dt>
+              <dd>{`${localeNumberString(
+                shannonToCkb(totalBalance.toFormat({ groupSeparator: '' })),
+              )} CKB(Total) | ${localeNumberString(
+                shannonToCkb(totalTLCBalance.toFormat({ groupSeparator: '' })),
+              )} CKB(TLC)`}</dd>
+            </dl>
+            <dl>
+              <dt>{t('fiber.channel.open_time')}</dt>
+              <dd>
+                <time dateTime={channel.createdAt}>{dayjs(channel.createdAt).format(TIME_TEMPLATE)}</time>
+              </dd>
+            </dl>
+            <dl>
+              <dt>{t('fiber.channel.update_time')}</dt>
               <dd>
-                <time dateTime={channel.shutdownAt}>{dayjs(channel.shutdownAt).format(TIME_TEMPLATE)}</time>
+                <time dateTime={channel.updatedAt}>{dayjs(channel.updatedAt).format(TIME_TEMPLATE)}</time>
               </dd>
             </dl>
-          ) : null}
+            {channel.shutdownAt ? (
+              <dl>
+                <dt>{t('fiber.channel.shutdown_time')}</dt>
+                <dd>
+                  <time dateTime={channel.shutdownAt}>{dayjs(channel.shutdownAt).format(TIME_TEMPLATE)}</time>
+                </dd>
+              </dl>
+            ) : null}
+          </div>
           <div className={styles.peers}>
             <div className={styles.local}>
               <dl>