Skip to content

Commit 31f3b0e

Browse files
alexandratranalexandratran
authored
Update cards and icons (#2803)
* Update cards and icons * cursor fix
1 parent 19400aa commit 31f3b0e

6 files changed

Lines changed: 32 additions & 28 deletions

File tree

‎src/components/Card.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
.inner {
4040
display: flex;
4141
flex-direction: column;
42-
justify-content: space-between;
42+
justify-content: flex-start;
4343
padding: 2.4rem;
4444
gap: 0.5rem;
4545
min-height: 20rem;

‎src/components/Card.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ import SvgShield from '@site/static/img/icons/shield.svg'
1111
import SvgStar from '@site/static/img/icons/star.svg'
1212
import SvgUser from '@site/static/img/icons/user.svg'
1313
import SvgWallet from '@site/static/img/icons/wallet.svg'
14+
import SvgCommunity from '@site/static/img/icons/community.svg'
15+
import SvgMultichain from '@site/static/img/icons/multichain.svg'
1416
import Shape from '@site/static/img/shapes/intro-cards/shape.svg'
1517

1618
import styles from './Card.module.scss'
1719

1820
/** Optional lead icon for product cards (defaults to star). */
19-
export type CardLeadIcon = 'wallet' | 'user' | 'shield' | 'globe' | 'controls' | 'star'
21+
export type CardLeadIcon = 'wallet' | 'user' | 'shield' | 'globe' | 'controls' | 'community' | 'multichain' |'star'
2022

2123
const LEAD_ICON_COMPONENTS: Record<
2224
CardLeadIcon,
@@ -27,6 +29,8 @@ const LEAD_ICON_COMPONENTS: Record<
2729
shield: SvgShield,
2830
globe: SvgGlobe,
2931
controls: SvgControls,
32+
community: SvgCommunity,
33+
multichain: SvgMultichain,
3034
star: SvgStar,
3135
}
3236

‎src/components/NavDropdown/Products.html‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -302,12 +302,8 @@ <h2>Unreal SDK</h2>
302302
<li>
303303
<a href="/smart-accounts-kit/">
304304
<span>
305-
<svg
306-
class="svg-inline--fa fa-screwdriver-wrench fa-w-16 text-text-alternative group-hover:text-text-default"
307-
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 512 512" role="img">
308-
<path fill="currentColor"
309-
d="M64.7 34.6L160 107.9l0 52.1-52.1 0L34.6 64.7 64.7 34.6zM192 169.3c0-.4 0-.9 0-1.3l0-64c0-7.5-3.5-14.5-9.4-19L78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l64 0c.4 0 .9 0 1.3 0L271.2 293.9c-19.5 30-16.2 70.5 10.1 96.8l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-26.3-26.3-66.8-29.7-96.8-10.1L192 169.3zM304 304c17.7-17.7 46.3-17.7 64 0L480 416l-64 64L304 368c-17.7-17.7-17.7-46.3 0-64zM104 424a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zM23.2 376.8C8.3 391.7 0 411.8 0 432.8C0 476.5 35.5 512 79.2 512c21 0 41.1-8.3 56-23.2L238.5 385.5c-5.7-11.2-9.3-23.1-10.9-35.3L112.1 465.7c-8.7 8.7-20.6 13.6-32.9 13.6c-25.7 0-46.6-20.8-46.6-46.6c0-12.3 4.9-24.2 13.6-32.9L189.1 257l-23.1-23.1L23.2 376.8zM479.4 160c0 44.8-23.1 84.1-58 106.8l23.5 23.5c40.7-29 67.2-76.6 67.2-130.3c0-24.8-5.7-48.3-15.7-69.3c-4.4-9.2-16.5-10.5-23.7-3.3l-67.9 67.9c-3 3-7.1 4.7-11.3 4.7L368 160c-8.8 0-16-7.2-16-16l0-25.4c0-4.2 1.7-8.3 4.7-11.3l67.9-67.9c7.2-7.2 5.9-19.3-3.3-23.7C400.3 5.7 376.8 0 352 0C296.1 0 246.9 28.6 218.3 72.1l26 20C266.8 56.3 306.7 32.6 352 32.6c10.3 0 20.2 1.2 29.7 3.5L333.6 84.2c-9.1 9.1-14.2 21.5-14.2 34.4l0 25.4c0 26.9 21.8 48.6 48.6 48.6l25.4 0c12.9 0 25.3-5.1 34.4-14.2l48.1-48.1c2.3 9.5 3.5 19.5 3.5 29.7z">
310-
</path>
305+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 11" aria-hidden="true">
306+
<path fill="currentColor" d="M2.64139 2.45014c.576 0 1.04294-.46694 1.04294-1.04294 0-.576002-.46694-1.042942-1.04294-1.042942S1.59845.831198 1.59845 1.4072c0 .576.46694 1.04294 1.04294 1.04294ZM0 4.95605c0-1.10457.895431-2 2-2h.83389c-.10749.26686-.16666.55836-.16666.86369 0 .77846.3846 1.46708.97415 1.88623H0v-.74992Zm6.31867.74992H10v-.74992c0-1.10456-.89542-2-1.99998-2h-.87387c.10749.26686.16666.55836.16666.86369 0 .77846-.3846 1.46708-.97414 1.88623ZM8.40155 1.4072c0 .576-.46694 1.04294-1.04294 1.04294S6.31567 1.9832 6.31567 1.4072c0-.576002.46694-1.042942 1.04294-1.042942S8.40155.831198 8.40155 1.4072ZM6.52497 3.81931c0 .85322-.69168 1.54489-1.5449 1.54489s-1.54489-.69167-1.54489-1.54489c0-.85322.69167-1.5449 1.54489-1.5449.85322 0 1.5449.69168 1.5449 1.5449ZM1.01703 9.23828c0-1.65685 1.34314-3 3-3h1.92614c1.65686 0 3 1.34315 3 3v1.12592H1.01703V9.23828Z"/>
311307
</svg>
312308
</span>
313309
<div>
@@ -323,11 +319,9 @@ <h2>Smart Accounts Kit</h2>
323319
<li>
324320
<a href="/services">
325321
<span>
326-
<svg class="svg-inline--fa fa-iconInfuraNode fa-w-19 text-text-alternative group-hover:text-text-default"
327-
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 16 14" role="img">
328-
<path fill="currentColor"
329-
d="M0.46624 0.213623V2.27922L5.40032 1.77074H7.22144V5.1141L4.15488 6.05202L0 7.05394L0.61696 9.07346L4.5984 7.54322L7.22144 6.74162V12.2296H5.40032L0.46624 11.7208V13.7864H15.5338V11.7208L10.5997 12.2296H8.77856V6.74162L11.3885 7.53906L15.3834 9.07346L16 7.05394L11.8563 6.0549L8.77856 5.1141V1.77074H10.5997L15.5338 2.27922V0.213623H0.46624Z">
330-
</path>
322+
<svg class="icon-thin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10" aria-hidden="true">
323+
<path fill="currentColor" fill-rule="evenodd" d="M5 1.2C2.90132 1.2 1.2 2.90132 1.2 5S2.90132 8.8 5 8.8 8.8 7.09868 8.8 5 7.09868 1.2 5 1.2ZM0 5c0-2.76142 2.23858-5 5-5s5 2.23858 5 5-2.23858 5-5 5-5-2.23858-5-5Z" clip-rule="evenodd"/>
324+
<path fill="currentColor" fill-rule="evenodd" d="M5 .0418721 7.6 3.27887V4.456H9v1.2H7.6v.95232L5 9.98312l-2.6-3.3748V5.656H1v-1.2h1.4V3.27887L5 .0418721ZM3.6 5.656v.54368L5 8.01688l1.4-1.8172V5.656H3.6Zm2.8-1.2H3.6v-.75487l1.4-1.743 1.4 1.743V4.456Z" clip-rule="evenodd"/>
331325
</svg>
332326
</span>
333327
<div>
@@ -339,18 +333,8 @@ <h2>Services</h2>
339333
<li>
340334
<a href="/snaps">
341335
<span>
342-
<svg width="800px" height="800px" viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg"
343-
xmlns:xlink="http://www.w3.org/1999/xlink">
344-
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
345-
<g id="Dribbble-Light-Preview" transform="translate(-379.000000, -280.000000)" fill="currentColor">
346-
<g id="icons" transform="translate(56.000000, 160.000000)">
347-
<path
348-
d="M341.9,137.261 C341.9,137.811 341.49785,138 340.92035,138 L331.47035,138 C330.89285,138 330.35,137.811 330.35,137.261 L330.35,135 L337.24535,135 C338.11475,135 338.75,134.589 338.75,133.761 L338.75,127 L340.92035,127 C341.49995,127 341.9,127.709 341.9,128.261 L341.9,137.261 Z M326.22035,133 C325.64285,133 325.1,132.811 325.1,132.261 L325.1,123.261 C325.1,122.709 325.6397,122 326.22035,122 L335.67035,122 C336.24995,122 336.65,122.709 336.65,123.261 L336.65,132.261 C336.65,132.811 336.24785,133 335.67035,133 L326.22035,133 Z M342.49535,125 L338.75,125 L338.75,121.761 C338.75,120.933 338.11475,120 337.24535,120 L324.64535,120 C323.7791,120 323,120.936 323,121.761 L323,133.761 C323,134.586 323.7791,135 324.64535,135 L328.25,135 L328.25,138.761 C328.25,139.586 329.0291,140 329.89535,140 L342.49535,140 C343.36475,140 344,139.589 344,138.761 L344,126.761 C344,125.933 343.36475,125 342.49535,125 L342.49535,125 Z"
349-
id="new_tab-[#1502]">
350-
</path>
351-
</g>
352-
</g>
353-
</g>
336+
<svg class="icon-thin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 11" aria-hidden="true">
337+
<path fill="currentColor" fill-rule="evenodd" d="M7.25.5v3.08984h1.5v-.84179H10v-1.5H8.75V.5h-1.5ZM5.60938 2.74805H0v-1.5h5.60938v1.5ZM4.20004 4.74829H10v1.5H4.20004v-1.5ZM0 6.25171h1.29688v.90503h1.5V3.81201h-1.5v.9397H0v1.5Zm3.04688 2.21704H0v1.5h3.04688v-1.5Zm3.90624 0H10v1.5H6.95312v-1.5Zm-1.26562-.625V10.5h-1.5V7.84375h1.5Z" clip-rule="evenodd"/>
354338
</svg>
355339
</span>
356340
<div>

‎src/pages/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default function Home(): JSX.Element {
5252
cards={[
5353
{
5454
title: 'Connect to MetaMask',
55-
leadIcon: 'wallet',
55+
leadIcon: 'multichain',
5656
description: (
5757
<>
5858
Connect your dapp to the <strong>MetaMask browser extension and mobile app</strong>.
@@ -65,7 +65,7 @@ export default function Home(): JSX.Element {
6565
},
6666
{
6767
title: 'Create embedded wallets',
68-
leadIcon: 'user',
68+
leadIcon: 'wallet',
6969
description: (
7070
<>
7171
Onboard users to your dapp via <strong>social logins</strong>,
@@ -78,7 +78,7 @@ export default function Home(): JSX.Element {
7878
},
7979
{
8080
title: 'Create smart accounts',
81-
leadIcon: 'shield',
81+
leadIcon: 'community',
8282
description: (
8383
<>
8484
Create and interact with <strong>MetaMask Smart Accounts</strong>, unlocking new{' '}

‎src/scss/custom.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1182,6 +1182,11 @@ html {
11821182
transform: translateX(-50%);
11831183
}
11841184

1185+
.sdk-selection-menu a span svg.icon-thin {
1186+
width: 22px;
1187+
height: 22px;
1188+
}
1189+
11851190
@media screen and (max-width: 996px) {
11861191
.sdk-selection-menu {
11871192
flex-direction: column;

‎static/img/icons/multichain.svg‎

Lines changed: 11 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)