Updating hardware wallet logos (#14163)

app/images/ledger-logo.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 197.4 48.6" xmlns="http://www.w3.org/2000/svg">
-    <g fill="#1d2028">
-        <path d="M34.1 0H15.5v25.1h25.1V6.5c0-3.6-2.9-6.5-6.5-6.5zM9.7 0H6.5C2.9 0 0 2.9 0 6.5v3.2h9.7zM0 15.5h9.7v9.7H0zM31 40.6h3.2c3.6 0 6.5-2.9 6.5-6.5V31H31zM15.5 31h9.7v9.7h-9.7zM0 31v3.2c0 3.6 2.9 6.5 6.5 6.5h3.2V31zM65.4 2.6h-3.8v35.5h20.1v-3.4H65.4zM93.9 12c-7.4 0-12.6 5.5-12.6 13.4v.9c.1 3.4 1.6 6.6 4.1 9 2.4 2.2 5.5 3.5 8.8 3.5h.5c3.5 0 6.8-1.3 9.4-3.5l.1-.1-1.7-2.8-.2.1c-2.1 1.9-4.7 3-7.5 3-4.6 0-9.3-3-9.6-9.7h19.2v-.2s.1-1.2.1-1.8c0-7.2-4.2-11.8-10.6-11.8zm-8.6 10.6c.8-4.5 4.1-7.4 8.4-7.4 3.2 0 6.7 1.9 7 7.4zM126.5 15v1.3c-1.6-2.7-4.6-4.4-7.7-4.4h-.3c-6.8 0-11.5 5.4-11.5 13.3 0 8 4.5 13.4 11.2 13.4 5.3 0 7.7-3.2 8.5-4.6v3.9h3.6V2.6h-3.7V15zm-7.8 20.3c-4.7 0-7.8-4-7.8-10 0-5.8 3.3-9.9 7.9-9.9 3.9 0 7.8 3.1 7.8 9.9 0 7.4-4.1 10-7.9 10zM152.2 15.5v.2c-.7-1.2-2.9-3.8-8.2-3.8-6.7 0-11.1 5.1-11.1 12.9s4.6 13.1 11.4 13.1c3.7 0 6.2-1.3 7.9-4v3.5c0 4.9-3.1 7.7-8.6 7.7-2.3 0-4.7-.6-6.8-1.7l-.2-.1-1.4 3.1.2.1c2.6 1.3 5.5 2 8.3 2 5.9 0 12.2-3 12.2-11.3V12.6h-3.7zm-7.4 19.1c-4.9 0-8.1-3.8-8.1-9.7 0-6 2.8-9.4 7.6-9.4 5.3 0 7.8 3.1 7.8 9.4.1 6.2-2.5 9.7-7.3 9.7zM171 12c-7.4 0-12.5 5.5-12.5 13.3v.9c.1 3.4 1.6 6.6 4.1 9 2.4 2.2 5.5 3.5 8.8 3.5h.5c3.5 0 6.8-1.3 9.4-3.5l.1-.1-1.8-2.8-.2.1c-2.1 1.9-4.7 3-7.5 3-4.6 0-9.3-3-9.6-9.7h19.3v-.2s.1-1.2.1-1.8c0-7.1-4.2-11.7-10.7-11.7zm-8.5 10.6c.8-4.5 4.1-7.4 8.4-7.4 3.2 0 6.7 1.9 7 7.4zM197.3 12.5c-.5-.1-.9-.1-1.4-.2-3.5 0-6.4 2.2-7.9 5.9V12.5h-3.7l.1 25.3v.2h3.8V27.3c0-1.6.2-3.3.7-4.8 1.2-3.9 3.9-6.4 7.1-6.4.4 0 .8 0 1.2.1h.2v-3.7z"/>
-    </g>
-</svg>

app/images/trezor-logo.svg

@@ -1,3 +0,0 @@
-<svg height="722.3" width="2567.5" xmlns="http://www.w3.org/2000/svg">
-    <path d="M249 0C149.9 0 69.7 80.2 69.7 179.3v67.2C34.9 252.8 0 261.2 0 272.1v350.7s0 9.7 10.9 14.3c39.5 16 194.9 71 230.6 83.6 4.6 1.7 5.9 1.7 7.1 1.7 1.7 0 2.5 0 7.1-1.7 35.7-12.6 191.5-67.6 231-83.6 10.1-4.2 10.5-13.9 10.5-13.9V272.1c0-10.9-34.4-19.7-69.3-25.6v-67.2C428.4 80.2 347.7 0 249 0zm0 85.7c58.4 0 93.7 35.3 93.7 93.7v58.4c-65.5-4.6-121.4-4.6-187.3 0v-58.4c0-58.5 35.3-93.7 93.6-93.7zm-.4 238.1c81.5 0 149.9 6.3 149.9 17.6v218.8c0 3.4-.4 3.8-3.4 5-2.9 1.3-139 50.4-139 50.4s-5.5 1.7-7.1 1.7c-1.7 0-7.1-2.1-7.1-2.1s-136.1-49.1-139-50.4-3.4-1.7-3.4-5V341c-.8-11.3 67.6-17.2 149.1-17.2zM728.466 563.183V323.577h-87.547v-85.922h272.962v85.922h-86.686v239.606zM1135.042 563.183l-44.92-102.36h-35.745v102.36h-98.73V237.655h173.756c76.269 0 117.175 50.56 117.175 111.536 0 56.198-32.495 85.922-58.587 98.729l58.97 115.168h-111.919zm11.66-213.992c0-17.681-15.674-25.327-32.113-25.327h-60.212v51.419h60.212c16.439-.382 32.113-8.028 32.113-26.092zM1298.38 563.183V237.655h246.87v85.922h-148.524v32.113h144.892v85.922h-144.892v35.745h148.524v85.826zM1596.574 563.566V485.29l124.056-161.33h-124.056v-85.923h254.038v77.512l-124.439 162.19h128.07v85.922zM1878.329 400.993c0-99.972 77.511-168.595 178.247-168.595 100.354 0 178.248 68.241 178.248 168.595 0 99.971-77.512 168.212-178.248 168.212s-178.247-68.24-178.247-168.212zm256.14 0c0-45.398-30.87-81.526-78.275-81.526s-78.276 36.128-78.276 81.526 30.87 81.525 78.276 81.525c47.787 0 78.276-36.127 78.276-81.525zM2455.506 563.566l-44.92-102.361h-35.745v102.36h-98.73V238.038h173.756c76.27 0 117.175 50.56 117.175 111.536 0 56.198-32.495 85.922-58.587 98.73l58.97 115.167h-111.919zm12.043-214.375c0-17.681-15.675-25.327-32.114-25.327h-60.212v51.419h60.212c16.535-.382 32.114-8.028 32.114-26.092z"/>
-</svg>

ui/components/ui/logo/__snapshots__/logo-moonpay.test.js.snap

@@ -3,7 +3,9 @@
 exports[`LogoMoonPay renders the LogoMoonPay component 1`] = `
 <div>
   <svg
+    fill="var(--color-text-default)"
     viewBox="0 0 1920 350"
+    width="100%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path

ui/components/ui/logo/logo-deposit-eth.js

@@ -5,12 +5,14 @@ const LogoDepositEth = ({
   width = '100%',
   color = 'var(--color-text-default)',
   className,
+  ariaLabel,
 }) => {
   return (
     <svg
       width={width}
       fill={color}
       className={className}
+      aria-label={ariaLabel}
       viewBox="0 0 80 78"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -43,6 +45,10 @@ LogoDepositEth.propTypes = {
    * Additional className to add to the root svg
    */
   className: PropTypes.string,
+  /**
+   * Aria label to add to the logo component
+   */
+  ariaLabel: PropTypes.string,
 };
 
 export default LogoDepositEth;

ui/components/ui/logo/logo-lattice.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LogoLattice = ({
+  width = '100%',
+  color = 'var(--color-text-default)',
+  className,
+  ariaLabel,
+}) => {
+  return (
+    <svg
+      width={width}
+      fill={color}
+      className={className}
+      aria-label={ariaLabel}
+      viewBox="0 0 2546 491"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2460 15V30H2488H2516V140V250H2531H2546V125V0H2503H2460V15ZM1861 116.038C1796.99 123.881 1741.39 163.865 1712.97 222.5C1680.8 288.855 1690.83 365.835 1739.17 423.5C1778.97 470.987 1839.99 496.383 1898.79 489.935C1937.49 485.692 1976.26 467.949 2005.03 441.315L2010.98 435.803L1997.36 421.444L1983.74 407.085L1974.62 415.109C1953.06 434.078 1931.7 444.965 1904.88 450.669C1893.48 453.093 1867.95 453.103 1855.82 450.689C1837.26 446.995 1819.5 439.522 1802.54 428.264C1790.63 420.354 1773.3 403.429 1764.69 391.295C1752.74 374.459 1743.39 352.909 1738.81 331.648C1735.63 316.902 1735.66 289.005 1738.87 274C1751.85 213.28 1797.55 166.907 1855.82 155.311C1867.95 152.897 1893.48 152.907 1904.88 155.331C1931.7 161.035 1953.06 171.922 1974.62 190.891L1983.74 198.915L1997.38 184.534L2011.02 170.153L2003.26 163.053C1977.39 139.393 1945.42 123.844 1909.5 117.465C1898.75 115.555 1871.49 114.753 1861 116.038ZM0 303V485H120H240V465.5V446H140.5H41V283.5V121H20.5H0V303ZM407.496 297.75C364.676 394.963 328.599 476.871 327.325 479.769L325.009 485.038L347.632 484.769L370.256 484.5L386.106 448.5C394.823 428.7 403.087 410.135 404.469 407.245L406.983 401.99L508.152 402.245L609.321 402.5L627.41 443.719L645.5 484.938L668.135 484.969L690.769 485L655.85 405.75C636.645 362.163 600.584 280.269 575.716 223.763L530.5 121.027L507.925 121.013L485.35 121L407.496 297.75ZM749 140.5V160H810H871V322.5V485H891.5H912V322.5V160H973H1034V140.5V121H891.5H749V140.5ZM1133 140.5V160H1194H1255V322.5V485H1275.5H1296V322.5V160H1357H1418V140.5V121H1275.5H1133V140.5ZM1534 303V485H1554.5H1575V303V121H1554.5H1534V303ZM2120 303V485H2250.5H2381V465.5V446H2271.5H2162V382.5V319H2260.5H2359V299.5V280H2260.5H2162V220V160H2271.5H2381V140.5V121H2250.5H2120V303ZM550.073 267.125C572.858 318.894 591.65 361.644 591.833 362.125C592.022 362.621 555.677 363 507.976 363C428.21 363 423.821 362.908 424.447 361.25C426.983 354.537 507.62 173.036 508.073 173.02C508.388 173.009 527.288 215.356 550.073 267.125Z"
+      />
+    </svg>
+  );
+};
+
+LogoLattice.propTypes = {
+  /**
+   * The width of the logo. Defaults to 100%
+   */
+  width: PropTypes.string,
+  /**
+   * The color of the logo defaults to var(--color-text-default)
+   */
+  color: PropTypes.string,
+  /**
+   * Additional className to add to the root svg
+   */
+  className: PropTypes.string,
+  /**
+   * Aria label to add to the logo component
+   */
+  ariaLabel: PropTypes.string,
+};
+
+export default LogoLattice;

ui/components/ui/logo/logo-ledger.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LogoLedger = ({
+  width = '100%',
+  color = 'var(--color-text-default)',
+  className,
+  ariaLabel,
+}) => {
+  return (
+    <svg
+      width={width}
+      fill={color}
+      className={className}
+      aria-label={ariaLabel}
+      viewBox="0 0 198 49"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M34.1 0H15.5V25.1H40.6V6.5C40.6 2.9 37.7 0 34.1 0ZM9.7 0H6.5C2.9 0 0 2.9 0 6.5V9.7H9.7V0ZM0 15.5H9.7V25.2H0V15.5ZM31 40.6H34.2C37.8 40.6 40.7 37.7 40.7 34.1V31H31V40.6ZM15.5 31H25.2V40.7H15.5V31ZM0 31V34.2C0 37.8 2.9 40.7 6.5 40.7H9.7V31H0ZM65.4 2.6H61.6V38.1H81.7V34.7H65.4V2.6ZM93.9 12C86.5 12 81.3 17.5 81.3 25.4V26.3C81.4 29.7 82.9 32.9 85.4 35.3C87.8 37.5 90.9 38.8 94.2 38.8H94.7C98.2 38.8 101.5 37.5 104.1 35.3L104.2 35.2L102.5 32.4L102.3 32.5C100.2 34.4 97.6 35.5 94.8 35.5C90.2 35.5 85.5 32.5 85.2 25.8H104.4V25.6C104.4 25.6 104.5 24.4 104.5 23.8C104.5 16.6 100.3 12 93.9 12ZM85.3 22.6C86.1 18.1 89.4 15.2 93.7 15.2C96.9 15.2 100.4 17.1 100.7 22.6H85.3ZM126.5 15V16.3C124.9 13.6 121.9 11.9 118.8 11.9H118.5C111.7 11.9 107 17.3 107 25.2C107 33.2 111.5 38.6 118.2 38.6C123.5 38.6 125.9 35.4 126.7 34V37.9H130.3V2.6H126.6V15H126.5ZM118.7 35.3C114 35.3 110.9 31.3 110.9 25.3C110.9 19.5 114.2 15.4 118.8 15.4C122.7 15.4 126.6 18.5 126.6 25.3C126.6 32.7 122.5 35.3 118.7 35.3ZM152.2 15.5V15.7C151.5 14.5 149.3 11.9 144 11.9C137.3 11.9 132.9 17 132.9 24.8C132.9 32.6 137.5 37.9 144.3 37.9C148 37.9 150.5 36.6 152.2 33.9V37.4C152.2 42.3 149.1 45.1 143.6 45.1C141.3 45.1 138.9 44.5 136.8 43.4L136.6 43.3L135.2 46.4L135.4 46.5C138 47.8 140.9 48.5 143.7 48.5C149.6 48.5 155.9 45.5 155.9 37.2V12.6H152.2V15.5ZM144.8 34.6C139.9 34.6 136.7 30.8 136.7 24.9C136.7 18.9 139.5 15.5 144.3 15.5C149.6 15.5 152.1 18.6 152.1 24.9C152.2 31.1 149.6 34.6 144.8 34.6ZM171 12C163.6 12 158.5 17.5 158.5 25.3V26.2C158.6 29.6 160.1 32.8 162.6 35.2C165 37.4 168.1 38.7 171.4 38.7H171.9C175.4 38.7 178.7 37.4 181.3 35.2L181.4 35.1L179.6 32.3L179.4 32.4C177.3 34.3 174.7 35.4 171.9 35.4C167.3 35.4 162.6 32.4 162.3 25.7H181.6V25.5C181.6 25.5 181.7 24.3 181.7 23.7C181.7 16.6 177.5 12 171 12V12ZM162.5 22.6C163.3 18.1 166.6 15.2 170.9 15.2C174.1 15.2 177.6 17.1 177.9 22.6H162.5ZM197.3 12.5C196.8 12.4 196.4 12.4 195.9 12.3C192.4 12.3 189.5 14.5 188 18.2V12.5H184.3L184.4 37.8V38H188.2V27.3C188.2 25.7 188.4 24 188.9 22.5C190.1 18.6 192.8 16.1 196 16.1C196.4 16.1 196.8 16.1 197.2 16.2H197.4V12.5H197.3Z" />
+    </svg>
+  );
+};
+
+LogoLedger.propTypes = {
+  /**
+   * The width of the logo. Defaults to 100%
+   */
+  width: PropTypes.string,
+  /**
+   * The color of the logo defaults to var(--color-text-default)
+   */
+  color: PropTypes.string,
+  /**
+   * Additional className to add to the root svg
+   */
+  className: PropTypes.string,
+  /**
+   * Aria label to add to the logo component
+   */
+  ariaLabel: PropTypes.string,
+};
+
+export default LogoLedger;

ui/components/ui/logo/logo-moonpay.js

@@ -4,14 +4,17 @@ import PropTypes from 'prop-types';
 const COLOR_MOONPAY_CIRCLES = '#7D00FF';
 
 const LogoMoonPay = ({
-  className,
+  width = '100%',
-  size,
   color = 'var(--color-text-default)',
+  className,
+  ariaLabel,
 }) => {
   return (
     <svg
-      size={size}
+      width={width}
+      fill={color}
       className={className}
+      aria-label={ariaLabel}
       viewBox="0 0 1920 350"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -29,17 +32,21 @@ const LogoMoonPay = ({
 
 LogoMoonPay.propTypes = {
   /**
-   * Additional className to add to the root svg
+   * The width of the logo. Defaults to 100%
    */
-  className: PropTypes.string.isRequired,
+  width: PropTypes.string,
   /**
-   * The color of the text of the logo accepts any valid css value
+   * The color of the logo defaults to var(--color-text-default)
    */
   color: PropTypes.string,
   /**
-   * The width of the logo accepts any valid css value
+   * Additional className to add to the root svg
+   */
+  className: PropTypes.string,
+  /**
+   * Aria label to add to the logo component
    */
-  size: PropTypes.string,
+  ariaLabel: PropTypes.string,
 };
 
 export default LogoMoonPay;

ui/components/ui/logo/logo-transak.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const LogoTransak = ({ width = '100%', className }) => {
+const LogoTransak = ({ width = '100%', className, ariaLabel }) => {
   return (
     <svg
       width={width}
       viewBox="0 0 1813 480"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
+      aria-label={ariaLabel}
     >
       <path
         d="M431.4 479.4H40.3C18.3 479.4 0.5 461.6 0.5 439.6V40.5C0.5 18.5 18.3 0.699997 40.3 0.699997H431.5C453.5 0.699997 471.3 18.5 471.3 40.5V439.6C471.3 461.5 453.5 479.4 431.4 479.4Z"
@@ -97,6 +98,10 @@ LogoTransak.propTypes = {
    * Additional className to add to the root svg
    */
   className: PropTypes.string,
+  /**
+   * Aria label to add to the logo component
+   */
+  ariaLabel: PropTypes.string,
 };
 
 export default LogoTransak;

ui/components/ui/logo/logo-trezor.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LogoTrezor = ({
+  width = '100%',
+  color = 'var(--color-text-default)',
+  className,
+  ariaLabel,
+}) => {
+  return (
+    <svg
+      width={width}
+      fill={color}
+      className={className}
+      aria-label={ariaLabel}
+      viewBox="0 0 2568 723"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M249 0C149.9 0 69.7 80.2 69.7 179.3V246.5C34.9 252.8 0 261.2 0 272.1V622.8C0 622.8 0 632.5 10.9 637.1C50.4 653.1 205.8 708.1 241.5 720.7C246.1 722.4 247.4 722.4 248.6 722.4C250.3 722.4 251.1 722.4 255.7 720.7C291.4 708.1 447.2 653.1 486.7 637.1C496.8 632.9 497.2 623.2 497.2 623.2V272.1C497.2 261.2 462.8 252.4 427.9 246.5V179.3C428.4 80.2 347.7 0 249 0ZM249 85.7C307.4 85.7 342.7 121 342.7 179.4V237.8C277.2 233.2 221.3 233.2 155.4 237.8V179.4C155.4 120.9 190.7 85.7 249 85.7V85.7ZM248.6 323.8C330.1 323.8 398.5 330.1 398.5 341.4V560.2C398.5 563.6 398.1 564 395.1 565.2C392.2 566.5 256.1 615.6 256.1 615.6C256.1 615.6 250.6 617.3 249 617.3C247.3 617.3 241.9 615.2 241.9 615.2C241.9 615.2 105.8 566.1 102.9 564.8C100 563.5 99.5 563.1 99.5 559.8V341C98.7 329.7 167.1 323.8 248.6 323.8V323.8ZM728.466 563.183V323.577H640.919V237.655H913.881V323.577H827.195V563.183H728.466ZM1135.04 563.183L1090.12 460.823H1054.38V563.183H955.647V237.655H1129.4C1205.67 237.655 1246.58 288.215 1246.58 349.191C1246.58 405.389 1214.08 435.113 1187.99 447.92L1246.96 563.088H1135.04V563.183ZM1146.7 349.191C1146.7 331.51 1131.03 323.864 1114.59 323.864H1054.38V375.283H1114.59C1131.03 374.901 1146.7 367.255 1146.7 349.191ZM1298.38 563.183V237.655H1545.25V323.577H1396.73V355.69H1541.62V441.612H1396.73V477.357H1545.25V563.183H1298.38ZM1596.57 563.566V485.29L1720.63 323.96H1596.57V238.037H1850.61V315.549L1726.17 477.739H1854.24V563.661L1596.57 563.566ZM1878.33 400.993C1878.33 301.021 1955.84 232.398 2056.58 232.398C2156.93 232.398 2234.82 300.639 2234.82 400.993C2234.82 500.964 2157.31 569.205 2056.58 569.205C1955.84 569.205 1878.33 500.965 1878.33 400.993V400.993ZM2134.47 400.993C2134.47 355.595 2103.6 319.467 2056.19 319.467C2008.79 319.467 1977.92 355.595 1977.92 400.993C1977.92 446.391 2008.79 482.518 2056.19 482.518C2103.98 482.518 2134.47 446.391 2134.47 400.993H2134.47ZM2455.51 563.566L2410.59 461.205H2374.84V563.565H2276.11V238.038H2449.87C2526.14 238.038 2567.04 288.598 2567.04 349.574C2567.04 405.772 2534.55 435.496 2508.46 448.304L2567.43 563.471H2455.51V563.566ZM2467.55 349.191C2467.55 331.51 2451.87 323.864 2435.44 323.864H2375.22V375.283H2435.44C2451.97 374.901 2467.55 367.255 2467.55 349.191Z" />
+    </svg>
+  );
+};
+
+LogoTrezor.propTypes = {
+  /**
+   * The width of the logo. Defaults to 100%
+   */
+  width: PropTypes.string,
+  /**
+   * The color of the logo defaults to var(--color-text-default)
+   */
+  color: PropTypes.string,
+  /**
+   * Additional className to add to the root svg
+   */
+  className: PropTypes.string,
+  /**
+   * Aria label to add to the logo component
+   */
+  ariaLabel: PropTypes.string,
+};
+
+export default LogoTrezor;

ui/components/ui/logo/logo-wyre.js

@@ -5,12 +5,14 @@ const LogoWyre = ({
   width = '100%',
   color = 'var(--color-text-default)',
   className,
+  ariaLabel,
 }) => {
   return (
     <svg
       width={width}
       fill={color}
       className={className}
+      aria-label={ariaLabel}
       viewBox="0 0 72 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -38,6 +40,10 @@ LogoWyre.propTypes = {
    * Additional className to add to the root svg
    */
   className: PropTypes.string,
+  /**
+   * Aria label to add to the logo component
+   */
+  ariaLabel: PropTypes.string,
 };
 
 export default LogoWyre;

ui/components/ui/logo/logo.stories.js

@@ -5,11 +5,16 @@ import { COLORS } from '../../../helpers/constants/design-system';
 
 import Card from '../card';
 import Box from '../box';
+import Typography from '../typography';
 
 import LogoMoonPay from './logo-moonpay';
 import LogoWyre from './logo-wyre';
 import LogoTransak from './logo-transak';
 import LogoDepositEth from './logo-deposit-eth';
+import LogoLeger from './logo-ledger';
+import LogoQRBased from './logo-qr-based';
+import LogoTrezor from './logo-trezor';
+import LogoLattice from './logo-lattice';
 
 import README from './README.mdx';
 
@@ -31,6 +36,9 @@ export default {
     className: {
       control: 'text',
     },
+    ariaLabel: {
+      control: 'text',
+    },
   },
 };
 
@@ -43,7 +51,7 @@ const LogoItem = ({ Component }) => {
       backgroundColor={COLORS.BACKGROUND_DEFAULT}
     >
       <Box marginBottom={2}>{Component}</Box>
-      <code>{`${Component.type.__docgenInfo.displayName}`}</code>
+      <Typography>{`${Component.type.__docgenInfo.displayName}`}</Typography>
     </Card>
   );
 };
@@ -64,6 +72,10 @@ export const DefaultStory = (args) => (
     <LogoItem Component={<LogoTransak {...args} />} />
     <LogoItem Component={<LogoDepositEth {...args} />} />
     <LogoItem Component={<LogoMoonPay {...args} />} />
+    <LogoItem Component={<LogoLeger {...args} />} />
+    <LogoItem Component={<LogoQRBased {...args} />} />
+    <LogoItem Component={<LogoTrezor {...args} />} />
+    <LogoItem Component={<LogoLattice {...args} />} />
   </div>
 );
 

ui/pages/create-account/connect-hardware/index.scss

@@ -42,8 +42,8 @@
   }
 
   &__btn {
-    background: #fbfbfb;
+    background: var(--color-background-alternative);
-    border: 1px solid #e5e5e5;
+    border: 1px solid var(--color-border-muted);
     height: 100px;
     width: 150px;
     flex: 1;

ui/pages/create-account/connect-hardware/select-hardware.js

@@ -2,6 +2,11 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Button from '../../../components/ui/button';
+import LogoLedger from '../../../components/ui/logo/logo-ledger';
+import LogoQRBased from '../../../components/ui/logo/logo-qr-based';
+import LogoTrezor from '../../../components/ui/logo/logo-trezor';
+import LogoLattice from '../../../components/ui/logo/logo-lattice';
+
 import {
   DEVICE_NAMES,
   LEDGER_TRANSPORT_TYPES,
@@ -37,11 +42,7 @@ export default class SelectHardware extends Component {
         })}
         onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.TREZOR })}
       >
-        <img
+        <LogoTrezor className="hw-connect__btn__img" ariaLabel="Trezor" />
-          className="hw-connect__btn__img"
-          src="images/trezor-logo.svg"
-          alt="Trezor"
-        />
       </button>
     );
   }
@@ -54,11 +55,7 @@ export default class SelectHardware extends Component {
         })}
         onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.LATTICE })}
       >
-        <img
+        <LogoLattice className="hw-connect__btn__img" ariaLabel="Lattice" />
-          className="hw-connect__btn__img"
-          src="images/lattice-logo.png"
-          alt=""
-        />
       </button>
     );
   }
@@ -71,11 +68,7 @@ export default class SelectHardware extends Component {
         })}
         onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.LEDGER })}
       >
-        <img
+        <LogoLedger className="hw-connect__btn__img" ariaLabel="Ledger" />
-          className="hw-connect__btn__img"
-          src="images/ledger-logo.svg"
-          alt="Ledger"
-        />
       </button>
     );
   }
@@ -88,11 +81,7 @@ export default class SelectHardware extends Component {
         })}
         onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.QR })}
       >
-        <img
+        <LogoQRBased className="hw-connect__btn__img" ariaLabel="QRCode" />
-          className="hw-connect__btn__img"
-          src="images/qrcode-wallet-logo.svg"
-          alt="QRCode"
-        />
       </button>
     );
   }