Merge pull request #1346 from chainapsis/Thunnini/KEPLR-865

earn intro 페이지에서 토큰 아이콘이 세로 중앙 정렬이 되게 수정
chainapsis · Feb 28, 2025 · c22b186 · c22b186
2 parents a4a65be + c5572b2
commit c22b186
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/apps/extension/src/languages/en.json b/apps/extension/src/languages/en.json
@@ -631,7 +631,7 @@
   "page.token-detail.manage-earn-button": "Manage Earn",
 
   "page.earn.title": "Earn",
-  "page.earn.intro.title": "Earn real-time rewards\nwith <token></token>",
+  "page.earn.intro.title": "Earn real-time rewards{br}with <image></image> USDC",
   "page.earn.intro.paragraph": "Put your stable asset to work and earn {apy} APY—effortless and simple.",
   "page.earn.intro.benefits.no-lockup": "No Lock-Ups",
   "page.earn.intro.benefits.daily-accrued": "Real-time Accrued Rewards",

diff --git a/apps/extension/src/pages/earn/intro/index.tsx b/apps/extension/src/pages/earn/intro/index.tsx
@@ -72,20 +72,36 @@ export const EarnIntroPage: FunctionComponent = observer(() => {
             {intl.formatMessage(
               { id: "page.earn.intro.title" },
               {
-                token: () => (
-                  <Box style={{ display: "inline-block" }}>
-                    <XAxis alignY="center">
+                br: <br />,
+                image: () => (
+                  // text를 감싸는 div의 height에 영향을 미치지 않으면서 이미지를 중앙에 그리기 위해서 이렇게 처리함...
+                  <div
+                    style={{
+                      display: "inline-block",
+                      verticalAlign: "middle",
+                      height: "0px",
+                      width: "1.5rem",
+                    }}
+                  >
+                    <Box
+                      width="1.5rem"
+                      height="0px"
+                      alignX="center"
+                      alignY="center"
+                    >
                       <Image
                         src={currency.coinImageUrl}
-                        width="24px"
-                        height="24px"
-                        style={{ borderRadius: "50%" }}
+                        style={{
+                          width: "1.5rem",
+                          height: "1.5rem",
+                          borderRadius: "50%",
+                          // font 자체가 완벽하게 세로 중앙에 존재하는게 아니기 때문에 수동으로 bottom margin을 조절함...
+                          marginBottom: "4px",
+                        }}
                         alt={currency.coinDenom}
                       />
-                      <Gutter size="0.25rem" />
-                      {currency.coinDenom}
-                    </XAxis>
-                  </Box>
+                    </Box>
+                  </div>
                 ),
               }
             )}