fix(ui): removed X logo from claim gems and possible linux click fix (#…

…1305)

This PR removes the "X" logo from the `Claim Gems` button in the login
modal. This is because we now support multi-auth logins.

I also added `preventDefault` and `stopPropagation` to see if it fixes
an issue where this button is not working on Linux. I don't have access
to a Linux machine to test, so this is a shot in the dark fix. This is
low risk though, since adding those event functions shouldn't effect
anything on the working platforms.

![CleanShot 2024-12-23 at 17 10
37](https://github.com/user-attachments/assets/7d6c80c7-e5dd-42af-b2ef-bc7f7b73d486)

src/containers/main/Airdrop/AirdropGiftTracker/components/ClaimModal/ClaimModal.tsx

@@ -13,15 +13,13 @@ import {
     Text,
     TextWrapper,
     Title,
-    XLogo,
 } from './styles';
 import gemImage from './images/gems.png';
 import gemLargeImage from './images/gem-large.png';
 import { useCallback, useState } from 'react';
 import { GIFT_GEMS, MAX_GEMS, useAirdropStore } from '@app/store/useAirdropStore';
 import { Trans, useTranslation } from 'react-i18next';
 import { GemImage } from '../Gems/styles';
-import XLogoIcon from './icons/XLogoIcon';
 import { useAppConfigStore } from '@app/store/useAppConfigStore';
 import GreenModal from '@app/components/GreenModal/GreenModal';
 
@@ -38,10 +36,15 @@ export default function ClaimModal({ onSubmit, onClose }: ClaimModalProps) {
 
     const [claimCode, setClaimCode] = useState('');
 
-    const handleSubmit = useCallback(async () => {
-        await setAllowTelemetry(true);
-        return onSubmit(claimCode);
-    }, [claimCode, onSubmit, setAllowTelemetry]);
+    const handleSubmit = useCallback(
+        async (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.preventDefault();
+            e.stopPropagation();
+            await setAllowTelemetry(true);
+            return onSubmit(claimCode);
+        },
+        [claimCode, onSubmit, setAllowTelemetry]
+    );
 
     return (
         <GreenModal onClose={onClose}>
@@ -78,12 +81,7 @@ export default function ClaimModal({ onSubmit, onClose }: ClaimModalProps) {
                     </InputGems>
                 </InputWrapper>
 
-                <ClaimButton onClick={handleSubmit}>
-                    {t('claimGems')}
-                    <XLogo>
-                        <XLogoIcon />
-                    </XLogo>
-                </ClaimButton>
+                <ClaimButton onClick={handleSubmit}>{t('claimGems')}</ClaimButton>
 
                 {!allowTelemetry && (
                     <FinePrint>

src/containers/main/Airdrop/AirdropGiftTracker/components/ClaimModal/styles.ts

@@ -248,25 +248,6 @@ export const InputGems = styled('div')`
     }
 `;
 
-export const XLogo = styled('div')`
-    width: 48px;
-    height: 48px;
-    border-radius: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background-color: ${({ theme }) => theme.palette.background.accent};
-    color: #000;
-
-    position: absolute;
-    top: 50%;
-    right: 16px;
-
-    transform: translateY(-50%);
-`;
-
 export const FinePrint = styled('div')`
     color: #000;
     text-align: center;