style: Improve Bitcoin price chart time range buttons

- Add green/red arrow colors for price direction
- Round button corners and remove divider lines
- Center button text and adjust spacing
- Remove hover effect on selected button

Author: whosthatguy

src/components/relay-dashboard/totalEarning/TimeRangeSelector/TimeRangeSelector.tsx

@@ -12,7 +12,8 @@ interface TimeRangeSelectorProps {
 const Container = styled.div`
   display: flex;
   justify-content: center;
-  margin-top: 0.5rem;
+  margin-top: 0.05rem;
+  margin-bottom: 0;
 `;
 
 const StyledRadioGroup = styled(Radio.Group)`
@@ -22,11 +23,17 @@ const StyledRadioGroup = styled(Radio.Group)`
   .ant-radio-button-wrapper {
     background: rgba(0, 255, 255, 0.05);
     border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 6px;
     color: rgba(0, 255, 255, 0.8);
     font-size: 0.75rem;
     padding: 0.25rem 0.75rem;
+    min-width: 2rem;
     height: auto;
     line-height: 1.2;
+    text-align: center;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     transition: all 0.3s ease;
 
     &:hover {
@@ -44,10 +51,20 @@ const StyledRadioGroup = styled(Radio.Group)`
       &::before {
         background-color: rgba(0, 255, 255, 0.6);
       }
+
+      &:hover {
+        background: rgba(0, 255, 255, 0.15);
+        border-color: rgba(0, 255, 255, 0.6);
+        color: #00ffff;
+      }
     }
 
     &:not(:first-child)::before {
-      background-color: rgba(0, 255, 255, 0.2);
+      display: none;
+    }
+
+    &:nth-child(1) {
+      min-width: 1.5rem;
     }
   }
 

src/components/relay-dashboard/totalEarning/TotalEarning.tsx

@@ -62,10 +62,19 @@ export const TotalEarning: React.FC = () => {
               <S.Title level={3} className="liquid-glow-text">{t('nft.bitcoinPrice')}</S.Title>
             </BaseCol>
             <BaseCol>
-              <div className={`liquid-rate-indicator ${isIncreased ? 'success' : 'error'}`}>
-                {isIncreased ? <CaretUpOutlined /> : <CaretDownOutlined />}
-                <span>{rateDifference.toFixed(2)}</span>
-                <span className="percentage-symbol">%</span>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  fontWeight: 600,
+                  fontSize: '0.9rem',
+                }}
+              >
+                <span style={{ color: isIncreased ? '#34D399' : '#E94B2F' }}>
+                  {isIncreased ? <CaretUpOutlined /> : <CaretDownOutlined />}
+                </span>
+                <span>{rateDifference.toFixed(2)}%</span>
               </div>
             </BaseCol>
           </BaseRow>
@@ -78,16 +87,9 @@ export const TotalEarning: React.FC = () => {
         </BaseCol>
 
         <BaseCol span={24}>
-          <BaseRow wrap={false} justify="space-between" gutter={[20, 20]}>
-            <BaseCol flex={1}>
-              <div className="liquid-chart-container">
-                <TotalEarningChart xAxisData={days} earningData={totalEarningData} />
-              </div>
-            </BaseCol>
-          </BaseRow>
-        </BaseCol>
-
-        <BaseCol span={24}>
+          <div className="liquid-chart-container">
+            <TotalEarningChart xAxisData={days} earningData={totalEarningData} />
+          </div>
           <TimeRangeSelector value={timeRange} onChange={setTimeRange} />
         </BaseCol>
       </BaseRow>