chore: adjust some css

Magickbase · Oct 13, 2023 · 60ae620 · 60ae620
1 parent 89565ab
commit 60ae620
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 114 deletions.
diff --git a/src/pages/Halving/HalvingInfo.tsx b/src/pages/Halving/HalvingInfo.tsx
@@ -1,5 +1,6 @@
 import { Tooltip } from 'antd'
 import BigNumber from 'bignumber.js'
+import classnames from 'classnames'
 import dayjs from 'dayjs'
 import { ReactComponent as WarningCircle } from '../../assets/warning_circle.svg'
 import i18n from '../../utils/i18n'
@@ -44,14 +45,20 @@ export const HalvingInfo = () => {
           <div className={styles.epochInfoItem}>
             <div className={styles.epochInfoValue}>
               <Tooltip
+                placement="topRight"
                 color="#fff"
                 overlayInnerStyle={{ color: '#333333' }}
                 title={`UTC ${utcOffset > 0 ? `+ ${utcOffset}` : utcOffset}`}
               >
-                {dayjs(estimatedDate).format('YYYY.MM.DD hh:mm:ss')}
+                <div className={styles.flexItemsCenter}>
+                  {dayjs(estimatedDate).format('YYYY.MM.DD hh:mm:ss')}
+                  <WarningCircle style={{ marginLeft: 2 }} width={12} height={12} />
+                </div>
               </Tooltip>
             </div>
-            <div className={styles.textSecondary}>{i18n.t('halving.estimated_time')}</div>
+            <div className={classnames(styles.textSecondary, styles.fontSizeSm)}>
+              {i18n.t('halving.estimated_time')}
+            </div>
           </div>
         </div>
       </>
@@ -90,7 +97,7 @@ export const HalvingInfo = () => {
             overlayInnerStyle={{ color: '#333333' }}
             title={`UTC ${utcOffset > 0 ? `+ ${utcOffset}` : utcOffset}`}
           >
-            <WarningCircle style={{ marginLeft: '4px' }} width={16} height={16} />
+            <WarningCircle style={{ cursor: 'pointer', marginLeft: '4px' }} width={16} height={16} />
           </Tooltip>
         </strong>
         <div className={styles.textSecondary}>{i18n.t('halving.estimated_time')}</div>

diff --git a/src/pages/Halving/index.module.scss b/src/pages/Halving/index.module.scss
@@ -181,9 +181,13 @@
   color: white;
   background-color: rgb(5 22 6 / 100%);
   background-position: bottom;
-  background-size: 100% auto;
+  background-size: 200% auto;
   background-repeat: no-repeat;
 
+  @media (width >= 750px) {
+    background-size: 100% auto;
+  }
+
   .halvingBannerWrapper {
     display: flex;
     justify-content: center;
@@ -218,19 +222,28 @@
   text-align: center;
 }
 
+.halvingPanelWrapper {
+  background: linear-gradient(90deg, #00574380, #ffffff24, #00574380);
+  padding: 2px;
+  border-radius: 12px;
+
+  @media (width >= 750px) {
+    border-radius: 24px;
+  }
+}
+
 .halvingPanel {
-  background: rgb(21 19 23 / 100%);
+  background: #000f0b;
   background-size: cover;
-  border: 2px solid rgb(51 41 69 / 50%);
-  border-radius: 12px;
+  border-radius: 10px;
   overflow: hidden;
   padding: 24px 16px;
   gap: 24px;
   display: flex;
   flex-direction: column;
 
   .halvingSuccessText {
-    font-size: 24px;
+    font-size: 20px;
     font-weight: 500;
   }
 
@@ -252,7 +265,7 @@
   @media (width >= 750px) {
     padding: 32px 64px;
     gap: 32px;
-    border-radius: 24px;
+    border-radius: 22px;
 
     .halvingPanelTitle {
       font-weight: 700;
@@ -366,6 +379,15 @@
   }
 }
 
+.flexItemsCenter {
+  display: flex;
+  align-items: center;
+}
+
+.fontSizeSm {
+  font-size: 14px;
+}
+
 .textSecondary {
   color: rgb(240 240 240 / 50%);
 }
@@ -381,3 +403,65 @@
 .textCapitalize {
   text-transform: capitalize;
 }
+
+.halvingPopover {
+  border-radius: 4px;
+  width: 300px;
+
+  :global {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-popover-inner {
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-popover-inner-content {
+      padding: 0 16px;
+    }
+  }
+}
+
+.historyTable {
+  :global {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-table {
+      /* stylelint-disable-next-line selector-class-pattern */
+      .ant-table-thead {
+        tr > th {
+          background: transparent;
+          color: #666;
+          padding: 8px 20px;
+
+          &::before {
+            width: 0 !important;
+          }
+
+          &:first-child {
+            padding-left: 0;
+          }
+
+          &:last-child {
+            padding-right: 0;
+          }
+        }
+      }
+
+      /* stylelint-disable-next-line selector-class-pattern */
+      .ant-table-tbody {
+        tr > td {
+          padding: 8px 20px;
+          font-weight: 500;
+
+          &:first-child {
+            padding-left: 0;
+          }
+
+          &:last-child {
+            padding-right: 0;
+          }
+        }
+      }
+    }
+  }
+}