From b79f1e2c5a3181be3f1c9eda3ce8954e60623949 Mon Sep 17 00:00:00 2001
From: 2712 <2712@trustless.computer>
Date: Wed, 11 Sep 2024 15:44:44 +0700
Subject: [PATCH] feat: update heartbeats

---
 src/modules/l2-rollup/index.tsx          |  4 ++--
 src/modules/l2-rollup/styles.module.scss | 27 ++++++++++--------------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx
index 6bf0efd19..7b0050718 100644
--- a/src/modules/l2-rollup/index.tsx
+++ b/src/modules/l2-rollup/index.tsx
@@ -1099,8 +1099,8 @@ const L2Rollup = () => {
               fontSize={['16px', '18px', ' 20px']}
               mt={isShowIntro ? '24px' : '0px'}
             >
-              <Tab>Real-time Data</Tab>
-              <Tab>Analytics</Tab>
+              <Tab borderLeftRadius={'4px'}>Real-time Data</Tab>
+              <Tab borderRightRadius={'4px'}>Analytics</Tab>
               <Flex position={'absolute'} right={0} top={'12px'}>
                 <Flex
                   alignSelf={'flex-end'}
diff --git a/src/modules/l2-rollup/styles.module.scss b/src/modules/l2-rollup/styles.module.scss
index e5e2a0e3f..35d92faa8 100644
--- a/src/modules/l2-rollup/styles.module.scss
+++ b/src/modules/l2-rollup/styles.module.scss
@@ -229,36 +229,31 @@ table {
     align-items: center;
     justify-content: center;
     align-self: center;
-    gap: 12px;
     margin-bottom: 12px;
-    border-bottom: 1px solid #efefef;
+    border-bottom: 1px solid transparent;
     width: fit-content;
 
     > button {
       background: none;
       border: none;
-      color: #fff;
-      opacity: 50%;
-      font-weight: 400;
+      color: gray;
+      font-weight: 500;
+      background: #f4f4f4;
+      font-size: 14px;
+      line-height: 20px;
+      padding-top: 8px;
+      padding-bottom: 8px;
 
       flex: unset;
       position: relative;
       text-align: center;
+      width: 160px;
 
       &[aria-selected='true'] {
         opacity: 1;
         font-weight: 600;
-        color: #fa4e0e !important;
-
-        &::after {
-          content: '';
-          display: block;
-          height: 2px;
-          width: 100%;
-          background-color: #fa4e0e !important;
-          position: absolute;
-          bottom: 0;
-        }
+        color: #fff !important;
+        background: linear-gradient(95.67deg, #ffc076 7.06%, #ff0000 92.21%);
       }
     }
   }