style: Add an icon to the Faucet button (#476)

onbloc · Apr 9, 2024 · 8662a92 · 8662a92
1 parent 45e217f
commit 8662a92
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/packages/adena-extension/src/components/atoms/icon/icon-assets/icon-thunder.tsx b/packages/adena-extension/src/components/atoms/icon/icon-assets/icon-thunder.tsx
@@ -0,0 +1,14 @@
+import React, { ReactElement } from 'react';
+
+const IconThunder = (): ReactElement => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none'>
+      <path
+        d='M6.125 0.700045C6.125 0.395026 5.96629 0.125122 5.73267 0.0328489C5.49904 -0.0594241 5.2443 0.0471794 5.10296 0.29637L0.602957 8.22964C0.481773 8.44329 0.466388 8.72317 0.563066 8.95536C0.659744 9.18755 0.852361 9.33331 1.0625 9.33331H4.0625V13.3C4.0625 13.6075 4.22386 13.8791 4.46018 13.9692C4.6965 14.0594 4.95242 13.9469 5.09091 13.6922L9.40341 5.75889C9.52003 5.54436 9.53192 5.26723 9.43434 5.03847C9.33675 4.8097 9.14563 4.66668 8.9375 4.66668H6.125V0.700045Z'
+        fill='white'
+      />
+    </svg>
+  );
+};
+
+export default IconThunder;
diff --git a/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx b/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx
@@ -16,11 +16,12 @@ import { usePreventHistoryBack } from '@hooks/use-prevent-history-back';
 import useAppNavigate from '@hooks/use-app-navigate';
 import { useNetwork } from '@hooks/use-network';
 import MainNetworkLabel from '@components/pages/main/main-network-label/main-network-label';
-import { Button, Text } from '@components/atoms';
+import { Button, Row, Text } from '@components/atoms';
 import mixins from '@styles/mixins';
 import { useFaucet } from '@hooks/use-faucet';
 import { useToast } from '@hooks/use-toast';
 import LoadingButton from '@components/atoms/loading-button/loading-button';
+import IconThunder from '@components/atoms/icon/icon-assets/icon-thunder';
 
 const Wrapper = styled.main`
   padding-top: 37px;
@@ -57,6 +58,10 @@ const Wrapper = styled.main`
   }
 `;
 
+const StyledFaucetButtonContent = styled(Row)`
+  gap: 8px;
+`;
+
 export const WalletMain = (): JSX.Element => {
   usePreventHistoryBack();
   const { navigate } = useAppNavigate();
@@ -150,7 +155,10 @@ export const WalletMain = (): JSX.Element => {
             fullWidth
             onClick={onClickFaucetButton}
           >
-            <Text type={'body1Bold'}>Faucet</Text>
+            <StyledFaucetButtonContent>
+              <IconThunder />
+              <Text type={'body1Bold'}>Faucet</Text>
+            </StyledFaucetButtonContent>
           </LoadingButton>
         ) : (
           <Button hierarchy='dark' fullWidth onClick={onClickDepositButton}>