feat: Asset picker design changes

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

src/components/AssetBadge.tsx

@@ -48,7 +48,8 @@ function AssetBadge(props: Props) {
     >
       <TokenIcon
         icon={token?.icon}
-        style={{ width: '36px', height: '36px', padding: '2px' }}
+        style={{ width: '36px', height: '36px' }}
+        containerStyle={{ width: '38px', height: '38px' }}
       />
     </Badge>
   );

src/components/Header.tsx

@@ -7,7 +7,7 @@ type Props = {
   text: string;
   align?: Alignment;
   size?: number;
-  testId?: string;
+  weight?: number;
 };
 
 function Header(props: Props) {
@@ -19,18 +19,15 @@ function Header(props: Props) {
       width: '100%',
       textAlign: props.align || 'center',
       fontFamily: theme.typography.fontFamily,
+      fontWeight: props.weight || 400,
       [theme.breakpoints.down('sm')]: {
         fontSize: '24px',
       },
     }),
-    [theme, props.align, props.size],
+    [theme, props.align, props.size, props.weight],
   );
 
-  return (
-    <Box sx={titleStyle} data-testid={props.testId}>
-      {props.text}
-    </Box>
-  );
+  return <Box sx={titleStyle}>{props.text}</Box>;
 }
 
 export default Header;

src/components/PageHeader.tsx

@@ -76,7 +76,7 @@ function PageHeader({
           {back && (
             <DownIcon sx={styles.arrowBack} fontSize="large" onClick={goBack} />
           )}
-          <Header text={title} align={align} testId={testId} />
+          <Header text={title} align={align} />
         </Box>
       </Box>
       {description && <Box sx={styles.description}>{description}</Box>}

src/icons/ArrowLeft.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createSvgIcon } from '@mui/material';
+
+const ArrowLeftIcon = createSvgIcon(
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.99992 12.6668L3.33325 8.00016M3.33325 8.00016L7.99992 3.3335M3.33325 8.00016H12.6666"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>,
+  'ArrowRight',
+);
+
+export default ArrowLeftIcon;

src/icons/Bridge.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createSvgIcon } from '@mui/material';
+
+const BridgeIcon = createSvgIcon(
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8M10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8M10 8H14M6 8H2"
+      stroke="currentColor"
+      strokeWidth="1.33"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>,
+  'Alert',
+);
+
+export default BridgeIcon;

src/icons/TokenIcons.tsx

@@ -108,6 +108,7 @@ function isBuiltinTokenIcon(icon?: TokenIcon | string): icon is TokenIcon {
 type Props = {
   icon?: TokenIcon | string;
   style?: React.CSSProperties;
+  containerStyle?: React.CSSProperties;
 };
 
 function EmptyIcon(props: { style: React.CSSProperties }) {
@@ -129,15 +130,15 @@ function TokenIconComponent(props: Props) {
   const styles = useMemo(
     () => ({
       container: {
-        ...(props.style || { width: '36px', height: '36px' }),
+        ...(props.containerStyle || { width: '36px', height: '36px' }),
         ...CENTER,
       },
       iconImage: {
         ...(props.style || { width: '36px', height: '36px' }),
         borderRadius: '50px',
       },
     }),
-    [props.style], // Recompute styles only when style prop changes
+    [props.containerStyle, props.style], // Recompute styles only when style prop changes
   );
 
   if (isBuiltinTokenIcon(props.icon) && iconMap[props.icon]) {