refactor(site): update fox logos

packages/site/public/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="MetaMask XRP Ledger" />
+    <meta name="description" content="XRP Ledger Wallet" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

packages/site/src/common/config/config.base.json

@@ -46,7 +46,7 @@
     "xrpAmount": "110"
   },
   "retry": {
-    "times": 3,
+    "times": 5,
     "delay": 750
   }
 }

packages/site/src/ui/assets/images/index.ts

@@ -12,5 +12,6 @@ export { default as received } from './received.png';
 export { default as sent } from './sent.png';
 export { default as token_default_logo } from './token-default-logo.png';
 export { default as xrp_loader } from './xrp_loader.gif';
-export { default as xrpl_snap_fox_logo } from './xrpl-snap-fox-logo.png';
+export { default as xrpl_snap_logo_light } from './xrpl-snap-logo-light.png';
+export { default as xrpl_snap_logo } from './xrpl-snap-logo.png';
 export { default as xrpl } from './xrpl.png';

packages/site/src/ui/common/components/display/QrCode/QrCode.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@peersyst/react-components';
-import { xrpl_snap_fox_logo } from 'ui/assets/images';
+import { xrpl_snap_logo } from 'ui/assets/images';
 
 import { QrCodeRoot } from './QrCode.styles';
 import type { QrCodeProps } from './QrCode.types';
@@ -23,7 +23,7 @@ const QrCode = ({
       removeQrCodeBehindLogo
       fgColor={disabled ? palette.disabled : undefined}
       logoWidth={logoWidth}
-      logoImage={showLogo ? xrpl_snap_fox_logo : undefined}
+      logoImage={showLogo ? xrpl_snap_logo : undefined}
       logoPadding={logoPadding}
       logoPaddingStyle={logoPaddingStyle}
       quietZone={quietZone}

packages/site/src/ui/common/components/display/SnapLogo/SnapLogo.tsx

@@ -11,100 +11,43 @@ export type SnapLogoProps = {
 function SnapLogo({ className, ...rest }: SnapLogoProps) {
   return (
     <svg
-      width="61"
-      height="64"
-      viewBox="0 0 61 64"
+      width="60"
+      height="60"
+      viewBox="0 0 60 60"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={clsx('SnapLogo', className)}
       {...rest}
     >
+      <rect width="60" height="60" rx="30" fill="black" />
       <path
-        d="M57.255 1L34.0254 18.186L38.3211 8.04651L57.255 1Z"
-        fill="#8432D5"
-        stroke="#8432D5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M3.62836 1L26.6712 18.3488L22.5856 8.04651L3.62836 1ZM48.8968 40.8372L42.7101 50.2791L55.9474 53.907L59.7529 41.0465L48.8968 40.8372ZM1.177 41.0465L4.9591 53.907L18.1965 50.2791L12.0097 40.8372L1.177 41.0465Z"
-        fill="#8432D5"
-        stroke="#8432D5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M17.4495 24.8837L13.7607 30.4418L26.9047 31.0232L26.4378 16.9534L17.4495 24.8837ZM43.4339 24.8837L34.3288 16.7906L34.0253 31.0232L47.146 30.4418L43.4339 24.8837ZM18.1965 50.279L26.0876 46.4418L19.2705 41.1395L18.1965 50.279ZM34.7958 46.4418L42.7102 50.279L41.6129 41.1395L34.7958 46.4418Z"
-        fill="#8432D5"
-        stroke="#8432D5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M42.7102 50.279L34.7958 46.4418L35.4261 51.5813L35.3561 53.7441L42.7102 50.279ZM18.1965 50.279L25.5506 53.7441L25.5039 51.5813L26.0876 46.4418L18.1965 50.279Z"
-        fill="#D7C1B3"
-        stroke="#D7C1B3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M18.1965 50.279L19.3172 40.8371L12.0098 41.0464L18.1965 50.279ZM41.5895 40.8371L42.7102 50.279L48.8969 41.0464L41.5895 40.8371ZM47.146 30.4418L34.0253 31.0232L35.2393 37.7441L38.0001 36.8836L41.8463 35.8139L47.146 30.4418ZM19.0837 35.8139L23.0001 36.8836L25.6674 37.7441L26.9047 31.0232L13.7607 30.4418L19.0837 35.8139Z"
-        fill="#5E1BA1"
-        stroke="#5E1BA1"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M25.6672 37.7441L19.0835 35.8139L23.7294 33.6976L25.6672 37.7441ZM35.2158 37.7441L37.1535 33.6976L41.8228 35.8139L35.2158 37.7441Z"
-        fill="#61D605"
-        stroke="#232325"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M13.7607 30.4418L19.2705 41.1394L19.0837 35.8139L13.7607 30.4418ZM41.8463 35.8139L41.6129 41.1394L47.146 30.4418L41.8463 35.8139ZM26.9047 31.0232L25.6674 37.7441L27.2082 45.6743L27.5584 35.2325L26.9047 31.0232ZM34.0253 31.0232L33.395 35.2092L33.6751 45.6743L35.2393 37.7441L34.0253 31.0232Z"
-        fill="#8E45D6"
-        stroke="#8E45D6"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M35.2394 37.7441L33.6752 45.6743L34.7958 46.4417L41.6129 41.1394L41.8464 35.8138L35.2394 37.7441ZM19.0837 35.8138L19.2705 41.1394L26.0876 46.4417L27.2083 45.6743L25.6674 37.7441L19.0837 35.8138Z"
-        fill="#AC5CFB"
-        stroke="#AC5CFB"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M35.3561 53.7442L35.4261 51.5814L34.8424 51.0698H26.0409L25.5039 51.5814L25.5506 53.7442L18.1965 50.2791L20.7646 52.3721L25.9709 55.9767H34.9125L40.1421 52.3721L42.7102 50.2791L35.3561 53.7442Z"
-        fill="#C0AD9E"
-        stroke="#C0AD9E"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14 30.4052C14 29.8933 14 29.3814 14 28.8695C15.384 28.638 16.2142 27.8454 16.4906 26.4917C16.4937 24.9547 16.5273 23.419 16.5912 21.8847C16.9227 20.2042 17.887 19.0236 19.4843 18.3428C20.2642 18.058 21.0692 17.9506 21.8994 18.0208C21.8994 18.5327 21.8994 19.0446 21.8994 19.5565C20.3845 19.4147 19.2357 19.9761 18.4528 21.2407C18.2641 21.6165 18.1467 22.0128 18.1006 22.4296C18.0839 23.8332 18.0671 25.2368 18.0503 26.6403C17.855 27.8927 17.2428 28.8917 16.2138 29.6373C17.2428 30.383 17.855 31.3819 18.0503 32.6343C18.0671 34.236 18.0839 35.8378 18.1006 37.4395C18.3392 38.9789 19.2197 39.9614 20.7421 40.387C20.9911 40.439 21.2427 40.4637 21.4969 40.4613C21.4969 40.9731 21.4969 41.4851 21.4969 41.9969C19.6698 41.9681 18.2526 41.192 17.2453 39.6687C16.8396 39.0152 16.6048 38.3051 16.5409 37.5386C16.5487 35.9341 16.5068 34.3407 16.4151 32.7582C16.4531 32.5664 16.4279 32.3765 16.3396 32.1885C15.9059 31.1956 15.126 30.6012 14 30.4052Z"
+        fill="white"
       />
       <path
-        d="M34.7957 46.4418L33.6751 45.6743H27.2082L26.0876 46.4418L25.5039 51.5813L26.0409 51.0697H34.8424L35.4261 51.5813L34.7957 46.4418Z"
-        fill="#161616"
-        stroke="#161616"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M46 28.8695C46 29.3814 46 29.8933 46 30.4052C44.639 30.6306 43.8088 31.4067 43.5094 32.7334C43.5063 34.4519 43.4727 36.1692 43.4088 37.8853C42.9013 40.2182 41.4674 41.5805 39.1069 41.9722C38.8895 41.9969 38.6715 42.0051 38.4528 41.9969C38.4528 41.4851 38.4528 40.9731 38.4528 40.4613C40.005 40.4105 41.0868 39.6839 41.6981 38.2816C41.797 37.9913 41.864 37.6941 41.8994 37.3899C41.9014 35.6875 41.935 33.9867 42 32.2876C42.2506 31.1738 42.846 30.2904 43.7862 29.6373C42.7463 28.9199 42.1341 27.9375 41.9497 26.6899C41.9329 25.2698 41.9161 23.8497 41.8994 22.4296C41.6719 20.8675 40.7578 19.918 39.1572 19.5812C38.8094 19.541 38.4655 19.5493 38.1258 19.606C38.1006 19.0779 38.0922 18.5495 38.1006 18.0208C40.3591 17.8813 42.0111 18.7895 43.0566 20.7454C43.2249 21.1271 43.3424 21.5234 43.4088 21.9343C43.4727 23.4686 43.5063 25.0042 43.5094 26.5412C43.8088 27.868 44.639 28.6441 46 28.8695Z"
+        fill="white"
       />
       <path
-        d="M58.2354 19.3023L60.2198 9.81395L57.2549 1L34.7957 17.6047L43.4338 24.8837L55.644 28.4419L58.3521 25.3023L57.1848 24.4651L59.0525 22.7674L57.6051 21.6512L59.4728 20.2326L58.2354 19.3023ZM0.686768 9.81395L2.6712 19.3023L1.4105 20.2326L3.27821 21.6512L1.85408 22.7674L3.72179 24.4651L2.55447 25.3023L5.2393 28.4419L17.4494 24.8837L26.0875 17.6047L3.6284 1L0.686768 9.81395Z"
-        fill="#500F90"
-        stroke="#500F90"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.1384 29.1667C27.67 28.9292 27.234 28.6402 26.8302 28.2998C25.3179 26.8603 23.7916 25.4402 22.2516 24.0396C23.023 24.0066 23.7946 24.0066 24.566 24.0396C25.8055 25.1443 27.0298 26.2671 28.239 27.4081C29.0503 27.9875 29.9392 28.1361 30.9057 27.854C31.1545 27.7645 31.3893 27.6489 31.6101 27.5072C32.8847 26.3514 34.1593 25.1955 35.434 24.0396C36.206 23.9983 36.9775 24.0066 37.7484 24.0644C36.4405 25.2531 35.1491 26.4585 33.8742 27.6806C33.4267 28.0966 32.9571 28.4846 32.4654 28.8447C31.0576 29.6107 29.6152 29.718 28.1384 29.1667Z"
+        fill="white"
       />
       <path
-        d="M55.6439 28.4419L43.4338 24.8837L47.1459 30.4419L41.6128 41.1395L48.8968 41.0465H59.7529L55.6439 28.4419ZM17.4494 24.8837L5.23926 28.4419L1.177 41.0465H12.0097L19.2704 41.1395L13.7607 30.4419L17.4494 24.8837ZM35.0253 31.0233L37.7957 17.6046L38.3443 8.04651H22.5856L23.0875 17.6046L25.9046 31.0233L27.1848 35.2558L27.2081 45.6744H33.6751L33.7217 35.2558L35.0253 31.0233Z"
-        fill="#AC5CFB"
-        stroke="#AC5CFB"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.1363 29.1667C28.1055 29.1972 28.1055 29.1972 28.1363 29.1667V29.1667Z"
+        fill="white"
       />
       <path
-        d="M34.7427 19.8837H36.4782L32.8661 16.2877C31.5583 14.9854 29.4402 14.9854 28.1324 16.2877L24.5218 19.8837H26.2573L29.0009 17.1516C29.8156 16.3364 31.1481 16.3264 31.9758 17.1287C31.9831 17.1358 31.9918 17.1444 31.9991 17.1516L34.7427 19.8837ZM26.2355 9.88367H24.5L28.1339 13.5026C29.4417 14.8049 31.5598 14.8049 32.8676 13.5026L36.5 9.88367H34.7645L31.9991 12.6372C31.1844 13.4524 29.8519 13.4625 29.0242 12.6602C29.0169 12.653 29.0082 12.6444 29.0009 12.6372L26.2355 9.88367Z"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M29.5472 30.4547C30.7106 30.3818 31.7672 30.6708 32.717 31.3216C34.4261 32.8556 36.1199 34.4078 37.7987 35.9781C37.0105 36.0112 36.2222 36.0112 35.434 35.9781C34.2097 34.8388 32.9853 33.6994 31.761 32.56C30.6214 31.8268 29.4893 31.802 28.3648 32.4857C27.0821 33.6331 25.8158 34.7972 24.566 35.9781C23.7778 36.0112 22.9895 36.0112 22.2013 35.9781C23.8113 34.492 25.4214 33.0059 27.0314 31.5198C27.7723 30.9319 28.6109 30.5769 29.5472 30.4547Z"
         fill="white"
       />
     </svg>

packages/site/src/ui/common/containers/MainHeader/MainHeader.tsx

@@ -25,10 +25,29 @@ const HeaderLogo = styled(SnapLogo)(
     position: absolute;
     left: 1.5rem;
     transform: translateY(0.65rem);
-    transition: transform 0.25s;
     z-index: 1;
+    animation: moveDown 0.3s ease-in-out forwards;
+
     &:hover {
-      transform: translateY(-0.5rem);
+      animation: moveUp 0.3s ease-in-out forwards;
+    }
+
+    @keyframes moveDown {
+      0% {
+        transform: translateY(-1rem);
+      }
+      100% {
+        transform: translateY(0.65rem);
+      }
+    }
+
+    @keyframes moveUp {
+      0% {
+        transform: translateY(0.65rem);
+      }
+      100% {
+        transform: translateY(-1rem);
+      }
     }
   `,
 );

packages/site/src/ui/common/pages/LoadingPage/LoadingPage.tsx

@@ -13,8 +13,8 @@ function LoadingPage({ className, ...rest }: LoadingPageProps) {
   const translate = useTranslate();
   return (
     <BasePage>
-      <Col flex={1} justifyContent="center" alignItems="center" className={clsx('LoadingPage', className)} {...rest}>
-        <SnapLogo width={200} height={200} />
+      <Col flex={1} gap={'1rem'} justifyContent="center" alignItems="center" className={clsx('LoadingPage', className)} {...rest}>
+        <SnapLogo width={120} height={120} />
         <Typography variant="h6" fontWeight={400}>
           {translate('loading')}
         </Typography>