[ENG-3937] Replace the old STX logo leftovers on the web-extension (#143

)

* [ENG-3937] Replace the old STX logo leftovers on the web-extension

* Update the styled components names

src/app/screens/home/index.tsx

@@ -1,8 +1,8 @@
 import dashboardIcon from '@assets/img/dashboard-icon.svg';
-import SIP10Icon from '@assets/img/dashboard/SIP10.svg';
 import BitcoinToken from '@assets/img/dashboard/bitcoin_token.svg';
 import ListDashes from '@assets/img/dashboard/list_dashes.svg';
 import ordinalsIcon from '@assets/img/dashboard/ordinalBRC20.svg';
+import stacksIcon from '@assets/img/dashboard/stx_icon.svg';
 import ArrowSwap from '@assets/img/icons/ArrowSwap.svg';
 import AccountHeaderComponent from '@components/accountHeader';
 import BottomModal from '@components/bottomModal';
@@ -114,11 +114,6 @@ const Icon = styled.img({
   height: 24,
 });
 
-const MergedIcon = styled.img({
-  width: 40,
-  height: 24,
-});
-
 const MergedOrdinalsIcon = styled.img({
   width: 64,
   height: 24,
@@ -171,6 +166,34 @@ const ModalButtonContainer = styled.div((props) => ({
   },
 }));
 
+const StacksIcon = styled.img({
+  width: 24,
+  height: 24,
+  position: 'absolute',
+  zIndex: 2,
+  left: 0,
+  top: 0,
+});
+
+const MergedIcon = styled.div((props) => ({
+  position: 'relative',
+  marginBottom: props.theme.spacing(12),
+}));
+
+const IconBackground = styled.div((props) => ({
+  width: 24,
+  height: 24,
+  position: 'absolute',
+  zIndex: 1,
+  left: 20,
+  top: 0,
+  backgroundColor: props.theme.colors.white_900,
+  borderRadius: 30,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 function Home() {
   const { t } = useTranslation('translation', {
     keyPrefix: 'DASHBOARD_SCREEN',
@@ -405,7 +428,12 @@ function Home() {
           showVerifyButton={choseToVerifyAddresses}
           currency="STX"
         >
-          <MergedIcon src={SIP10Icon} />
+          <MergedIcon>
+            <StacksIcon src={stacksIcon} />
+            <IconBackground>
+              <Plus weight="bold" size={12} />
+            </IconBackground>
+          </MergedIcon>
         </ReceiveCardComponent>
       )}
 

src/app/screens/receive/index.tsx

@@ -1,6 +1,6 @@
+import StxIcon from '@assets/img/dashboard/stx_icon.svg';
 import BtcIcon from '@assets/img/receive_btc_image.svg';
 import OrdinalIcon from '@assets/img/receive_ordinals_image.svg';
-import StxIcon from '@assets/img/receive_stx_image.svg';
 import ShowBtcReceiveAlert from '@components/showBtcReceiveAlert';
 import ShowOrdinalReceiveAlert from '@components/showOrdinalReceiveAlert';
 import BottomTabBar from '@components/tabBar';
@@ -81,7 +81,7 @@ const QRCodeContainer = styled.div<{ marginBottom: number }>((props) => ({
 
 const AddressText = styled.h1((props) => ({
   ...props.theme.typography.body_m,
-  textAlign: 'center',
+  textAlign: 'left',
   color: props.theme.colors.white_200,
   wordBreak: 'break-all',
 }));
@@ -126,7 +126,7 @@ function Receive() {
       title: t('STX_ADDRESS'),
       desc: t('STX_RECEIVE_MESSAGE'),
       icon: StxIcon,
-      gradient: '#7B61FF',
+      gradient: '#FC6432',
     },
     ORD: {
       address: ordinalsAddress,

src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx

@@ -1,4 +1,4 @@
-import TokenTicker from '@assets/img/stacking/token_ticker.svg';
+import TokenTicker from '@assets/img/dashboard/stx_icon.svg';
 import useStackingData from '@hooks/queries/useStackingData';
 import { StackingState } from '@secretkeylabs/xverse-core';
 import { XVERSE_WEB_POOL_URL } from '@utils/constants';
@@ -66,6 +66,11 @@ const StatusText = styled.h1((props) => ({
   color: props.theme.colors.white_0,
 }));
 
+const Icon = styled.img({
+  width: 36,
+  height: 36,
+});
+
 function StackingStatusTile() {
   const { t } = useTranslation('translation', { keyPrefix: 'STACKING_SCREEN' });
   const { stackingData } = useStackingData();
@@ -88,7 +93,7 @@ function StackingStatusTile() {
   return (
     <Container onClick={handleOnClick}>
       <TextContainer>
-        <img src={TokenTicker} alt="Ticker" />
+        <Icon src={TokenTicker} alt="Ticker" />
         <ColumnContainer>
           <BoldText>{t('STACK_STX')}</BoldText>
           <SubText>{t('EARN_BTC')}</SubText>