From 4596179a96fe1f382f8fb2e0a1d9da6cce023418 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Fri, 9 Feb 2024 15:04:22 +0100
Subject: [PATCH] fix: Separate logo from text and add a title

---
 public/images/common/mercuryo_logo.svg        |  4 +-
 public/images/common/moonpay_logo.svg         |  4 +-
 public/images/common/ramp_logo.svg            | 10 +-
 .../common/BuyCryptoButton/index.tsx          | 99 ++++++++++---------
 .../common/BuyCryptoButton/styles.module.css  |  5 +-
 5 files changed, 59 insertions(+), 63 deletions(-)

diff --git a/public/images/common/mercuryo_logo.svg b/public/images/common/mercuryo_logo.svg
index 9e84e741df..ebea5e79ec 100644
--- a/public/images/common/mercuryo_logo.svg
+++ b/public/images/common/mercuryo_logo.svg
@@ -1,3 +1 @@
-<svg viewBox="0 0 120 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="130px" height="24px">
-    <path d="M113.66.001c-3.979 0-6.344 2.828-6.344 6.262 0 3.433 2.365 6.262 6.344 6.262 3.98 0 6.34-2.81 6.34-6.262C120 2.81 117.636 0 113.66 0zm0 11.03c-2.848 0-4.627-2.06-4.627-4.768 0-2.708 1.779-4.768 4.627-4.768s4.624 2.083 4.624 4.768c0 2.684-1.779 4.767-4.624 4.767zM57.424 1.495c2.22 0 3.797 1.537 3.898 3.133h1.658C62.878 2.303 60.858 0 57.506 0c-4.061 0-6.363 2.848-6.363 6.281 0 3.375 2.18 6.243 6.464 6.243 2.564 0 4.444-1.174 5.373-2.325l-1.092-.981a6.07 6.07 0 01-4.28 1.818c-3.212 0-4.73-2.103-4.73-4.748 0-2.828 1.76-4.787 4.546-4.787M75.863.406v5.069c0 3.616-2.161 5.559-4.578 5.559-1.998 0-3.09-1.436-3.09-3.84V.407h-3.923V1.82h2.262v5.778c0 2.867 1.635 4.928 4.624 4.928 2.325 0 3.898-1.194 4.686-2.891v2.485h1.658V.406h-1.639zM105.242.406l-4.251 10.039L96.649.406h-3.24V1.82h2.06l4.623 10.725c-.687 1.678-1.795 2.708-3.188 2.708a2.849 2.849 0 01-1.374-.285v1.514a4.44 4.44 0 001.616.265c1.998 0 3.371-1.174 4.319-3.355L107.024.406h-1.782zM85.283 2.525V.407h-4.97v1.412h3.312v8.888h-3.313v1.412h9.01v-1.412h-4.04V5.213c.328-1.92 2.018-3.695 4.101-3.695a5.176 5.176 0 012.158.383V.407A3.78 3.78 0 0089.746 0a5.232 5.232 0 00-4.463 2.524zM43.71 2.525V.406h-4.974V1.82h3.313v8.888h-3.313v1.412h9.009v-1.412H43.71V5.213c.304-1.92 2.02-3.695 4.12-3.695a5.157 5.157 0 012.142.383V.406a3.885 3.885 0 00-1.818-.405 5.278 5.278 0 00-4.444 2.524zM21.045 10.707V4.77c0-2.685-1.717-4.768-4.3-4.768-2.583 0-3.819 1.635-4.404 2.943A4.21 4.21 0 008.263.001C5.974.001 4.768 1.336 4.12 2.55V.407H0V1.82h2.466v10.3H4.12V5.233C4.284 3.88 5.428 1.52 7.96 1.52c1.838 0 2.982 1.03 2.982 3.734v6.867h1.655V5.17c.222-1.308 1.308-3.652 3.819-3.652 1.857 0 2.97 1.03 2.97 3.734v6.867h3.534v-1.413h-1.874zM36.774 6.263C36.774 2.81 34.51 0 30.614 0c-3.898 0-6.243 2.848-6.243 6.281 0 3.516 2.263 6.243 6.465 6.243 2.616 0 4.483-1.272 5.232-2.263l-1.09-.981c-1.01 1.092-2.403 1.74-4.25 1.74-2.616 0-4.385-1.74-4.578-4.222H36.75a5.19 5.19 0 00.023-.536zm-10.604-.87c.326-2.289 2.04-3.898 4.443-3.898a4.293 4.293 0 014.428 3.898H26.17z" fill="currentColor" />
-</svg>
\ No newline at end of file
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" fill="none"><path d="M563.1 265.2c-43.5 0-85.2-17.3-116-48.1-30.8-30.8-48.1-72.5-48.1-116h-28.5c0 23.3-5 46-14.4 66.9-20.8-23.9-43.1-44-65.8-59C246 79.7 205 73.1 175 90.4c-16 9.3-27.7 24.7-34.6 45.1-21.4 1.4-39.2 8.7-52.2 21.7-24.5 24.5-28.7 65.8-11.9 116.2 16.2 48.6 50.3 100.7 96 146.4s97.7 79.8 146.4 96c17.9 6.4 36.8 9.8 55.8 10.2 25.4 0 45.7-7.4 60.3-22l.9-.9-.2-.2c19.5-20.6 28.7-54.1 26.1-97-1.3-21.1-5.3-43.5-11.9-66.5 30.5-29.1 71-45.5 113.3-45.6v-28.6zM182.1 103c25-14.4 60.6-8 100.1 18.1 23.1 15.3 45.8 36.1 66.8 61.1-7 12.3-15.6 23.7-25.7 34-38.5-33-79.8-57.7-119-70.7-15.7-5.4-32-8.7-48.6-9.8 5.8-14.9 14.7-26 26.4-32.7zm.5 306.5c-44.1-44.1-77-94.1-92.6-140.7-15-44.9-12-80.9 8.4-101.3 9.5-9.5 22.4-15.2 38-17.1-3.2 16.2-4.2 32.7-3 49.1 3.1 51.2 22.6 110.3 54.9 166.3 31 53.7 70.3 98.5 111.2 127-39.4-17.7-80.2-46.6-116.9-83.3zm230.3 92.9c-25 14.4-60.6 8-100.1-18.1-40.9-27.1-80.8-71.8-112-125.8-31.2-54.1-50-110.9-53-159.9-1.3-16.4-.1-32.9 3.5-49 16.5.7 32.8 3.8 48.4 9.3 37.1 12.3 76.3 35.7 112.9 66.9-29.6 25.2-67.2 39.3-106.4 39.3v28.6c43.5.1 85.2 17.4 116 48.2 30.8 30.8 48.1 72.5 48.2 116H399c.1-39 14-76.6 39.1-106.1 4.9 19 8 37.4 9 54.9 3.1 47.3-9.2 81.3-34.2 95.7z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/public/images/common/moonpay_logo.svg b/public/images/common/moonpay_logo.svg
index 36fb5426d6..882e8185a9 100644
--- a/public/images/common/moonpay_logo.svg
+++ b/public/images/common/moonpay_logo.svg
@@ -1,3 +1 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="100.27 100.27 2016.73 367.54" width="100" height="24">
-    <path d="M1980.84 402.236L1905.21 228.514H1955.85L2007.5 353.104L2067.2 228.514H2117L1999.28 467.801H1948.64L1980.84 402.236ZM1796.69 366.268C1801.16 365.25 1805.47 363.643 1809.51 361.488C1813.42 359.407 1817.06 356.844 1820.33 353.859C1823.6 350.866 1826.42 347.422 1828.71 343.63C1831.12 339.647 1832.98 335.361 1834.25 330.886C1835.62 326.003 1836.3 320.951 1836.26 315.878C1836.31 310.75 1835.63 305.641 1834.25 300.703C1832.98 296.228 1831.12 291.942 1828.71 287.959C1826.41 284.152 1823.59 280.681 1820.33 277.646C1817.1 274.635 1813.46 272.094 1809.51 270.1C1805.44 268.05 1801.13 266.502 1796.69 265.489C1792.01 264.417 1787.23 263.883 1782.43 263.896C1777.66 263.88 1772.91 264.414 1768.26 265.489C1763.87 266.502 1759.62 268.051 1755.6 270.1C1751.68 272.121 1748.04 274.659 1744.79 277.646C1741.49 280.664 1738.64 284.137 1736.32 287.959C1733.92 291.933 1732.09 296.223 1730.87 300.703C1729.54 305.651 1728.9 310.756 1728.94 315.878C1728.9 320.945 1729.55 325.994 1730.87 330.886C1732.09 335.366 1733.92 339.655 1736.32 343.63C1738.62 347.437 1741.48 350.883 1744.79 353.859C1748.08 356.82 1751.71 359.381 1755.6 361.488C1759.59 363.642 1763.85 365.249 1768.26 366.268C1772.91 367.345 1777.66 367.879 1782.43 367.861C1787.23 367.876 1792.01 367.341 1796.69 366.268ZM1745.63 405.171C1737.86 403.195 1730.39 400.207 1723.41 396.283C1709.8 388.633 1698.58 377.376 1690.96 363.753C1687.04 356.709 1684.05 349.184 1682.07 341.367C1677.94 324.57 1677.94 307.02 1682.07 290.223C1684.04 282.43 1687.03 274.931 1690.96 267.921C1698.61 254.346 1709.83 243.124 1723.41 235.474C1730.39 231.551 1737.86 228.563 1745.63 226.586C1753.93 224.481 1762.46 223.438 1771.03 223.484C1775.65 223.474 1780.27 223.754 1784.86 224.323C1789.09 224.845 1793.26 225.686 1797.36 226.838C1801.15 227.915 1804.88 229.231 1808.51 230.778C1811.91 232.224 1815.19 233.934 1818.32 235.893C1821.26 237.737 1824.01 239.871 1826.53 242.265C1828.89 244.502 1831.08 246.912 1833.07 249.475V228.514H1881.2V403.242H1833.07V382.282C1830 386.142 1826.48 389.631 1822.59 392.678C1818.3 396.051 1813.59 398.868 1808.59 401.062C1803.03 403.505 1797.21 405.306 1791.24 406.428C1784.57 407.689 1777.81 408.307 1771.03 408.273C1762.46 408.319 1753.93 407.276 1745.63 405.171ZM1570.91 272.783C1577.8 272.91 1584.68 272.12 1591.37 270.436C1596.58 269.119 1601.44 266.688 1605.62 263.309C1609.39 260.162 1612.28 256.088 1614.01 251.487C1615.88 246.274 1616.79 240.762 1616.69 235.222C1616.8 229.709 1615.89 224.223 1614.01 219.04C1612.28 214.489 1609.39 210.47 1605.62 207.386C1601.42 204.057 1596.56 201.657 1591.37 200.343C1584.68 198.661 1577.8 197.871 1570.91 197.996H1523.62V272.783L1570.91 272.783ZM1473.82 156.745H1575.61C1591.59 156.745 1605.45 158.701 1617.19 162.614C1628.93 166.527 1638.6 171.949 1646.2 178.88C1653.76 185.752 1659.59 194.312 1663.22 203.865C1667.03 213.935 1668.93 224.624 1668.84 235.389C1668.96 246.13 1667.05 256.796 1663.22 266.83C1659.53 276.303 1653.71 284.797 1646.2 291.648C1638.6 298.636 1628.93 304.086 1617.19 307.997C1605.45 311.913 1591.59 313.869 1575.61 313.866H1523.62V403.242H1473.82V156.745ZM1259.97 228.514H1307.76V249.475C1310.7 245.407 1314.2 241.767 1318.15 238.659C1322.33 235.381 1326.89 232.622 1331.73 230.443C1337.07 228.056 1342.67 226.311 1348.42 225.245C1354.8 224.044 1361.29 223.454 1367.79 223.484C1377.9 223.339 1387.96 225.044 1397.47 228.514C1405.93 231.634 1413.61 236.587 1419.94 243.019C1426.3 249.685 1431.11 257.672 1434.02 266.411C1437.39 276.46 1439.03 287.005 1438.89 297.601V403.242H1391.1V310.009C1391.21 303.194 1390.25 296.403 1388.24 289.887C1386.59 284.508 1383.82 279.537 1380.11 275.299C1376.55 271.361 1372.09 268.341 1367.12 266.495C1361.47 264.454 1355.51 263.46 1349.51 263.561C1343.48 263.465 1337.49 264.459 1331.82 266.495C1326.81 268.325 1322.32 271.347 1318.74 275.299C1315.04 279.537 1312.26 284.508 1310.61 289.887C1308.6 296.403 1307.64 303.194 1307.76 310.009V403.242H1259.97V228.514ZM1142.36 365.765C1146.93 364.662 1151.34 363.03 1155.53 360.901C1159.51 358.867 1163.15 356.237 1166.34 353.104C1169.5 350.012 1172.24 346.516 1174.48 342.708C1176.76 338.785 1178.46 334.547 1179.51 330.131C1180.65 325.353 1181.21 320.455 1181.18 315.543C1181.21 310.658 1180.65 305.787 1179.51 301.038C1177.39 292.284 1172.83 284.315 1166.34 278.065C1163.11 274.959 1159.47 272.307 1155.53 270.184C1151.38 267.958 1146.95 266.294 1142.36 265.237C1137.39 264.094 1132.29 263.532 1127.19 263.56C1122.14 263.537 1117.1 264.1 1112.18 265.237C1107.62 266.284 1103.22 267.949 1099.1 270.184C1095.19 272.322 1091.58 274.973 1088.37 278.065C1085.21 281.11 1082.52 284.615 1080.4 288.461C1078.24 292.413 1076.55 296.606 1075.37 300.954C1074.11 305.712 1073.49 310.619 1073.53 315.543C1073.5 320.466 1074.12 325.371 1075.37 330.132C1076.52 334.517 1078.21 338.741 1080.4 342.708C1082.55 346.537 1085.23 350.038 1088.37 353.104C1091.54 356.224 1095.16 358.852 1099.1 360.902C1103.25 363.04 1107.64 364.672 1112.18 365.765C1117.09 366.958 1122.13 367.549 1127.19 367.526C1132.3 367.556 1137.4 366.964 1142.36 365.765ZM1099.02 405.087C1090.39 403.08 1082.04 400.069 1074.12 396.115C1066.67 392.401 1059.75 387.691 1053.57 382.114C1047.58 376.695 1042.39 370.457 1038.15 363.585C1033.85 356.589 1030.54 349.026 1028.34 341.115C1023.75 324.375 1023.75 306.711 1028.34 289.971C1030.53 282.083 1033.84 274.546 1038.15 267.585C1042.42 260.735 1047.61 254.501 1053.57 249.056C1059.74 243.435 1066.65 238.695 1074.12 234.971C1082.04 231.019 1090.39 228.008 1099.02 226C1117.67 221.751 1137.04 221.751 1155.69 226C1164.27 227.99 1172.57 231.002 1180.43 234.971C1187.86 238.75 1194.77 243.485 1200.97 249.056C1207.02 254.481 1212.3 260.716 1216.65 267.585C1221.01 274.532 1224.34 282.072 1226.54 289.971C1231.13 306.711 1231.13 324.375 1226.54 341.115C1224.33 349.038 1221 356.604 1216.65 363.585C1212.33 370.476 1207.05 376.715 1200.97 382.114C1194.75 387.64 1187.85 392.346 1180.43 396.115C1172.6 400.077 1164.32 403.089 1155.78 405.087C1137.1 409.335 1117.7 409.335 1099.02 405.087ZM912.532 365.765C917.094 364.662 921.512 363.03 925.695 360.901C929.676 358.867 933.323 356.237 936.511 353.104C939.668 350.012 942.403 346.516 944.644 342.708C946.93 338.786 948.625 334.548 949.674 330.131C950.815 325.353 951.378 320.455 951.351 315.543C951.381 310.658 950.818 305.787 949.674 301.038C947.56 292.284 942.994 284.315 936.511 278.065C933.28 274.959 929.642 272.307 925.695 270.184C921.547 267.958 917.12 266.294 912.532 265.237C907.555 264.094 902.463 263.532 897.357 263.56C892.306 263.538 887.27 264.1 882.349 265.237C877.785 266.284 873.384 267.949 869.269 270.184C865.358 272.323 861.749 274.973 858.537 278.065C855.375 281.11 852.689 284.615 850.572 288.461C848.411 292.414 846.723 296.607 845.542 300.954C844.275 305.712 843.655 310.619 843.697 315.543C843.669 320.465 844.289 325.37 845.542 330.131C846.691 334.516 848.381 338.74 850.572 342.708C852.716 346.537 855.398 350.038 858.537 353.104C861.707 356.223 865.324 358.851 869.269 360.901C873.419 363.039 877.81 364.672 882.349 365.765C887.262 366.958 892.301 367.549 897.357 367.525C902.468 367.555 907.564 366.964 912.532 365.765ZM869.185 405.087C860.563 403.08 852.205 400.07 844.284 396.116C836.834 392.402 829.924 387.691 823.743 382.115C817.754 376.695 812.56 370.457 808.316 363.586C804.014 356.59 800.712 349.027 798.506 341.116C793.923 324.376 793.923 306.712 798.506 289.972C800.703 282.084 804.005 274.547 808.316 267.586C812.591 260.736 817.781 254.502 823.743 249.057C829.907 243.436 836.82 238.696 844.284 234.972C852.206 231.02 860.563 228.009 869.185 226C887.839 221.752 907.209 221.752 925.863 226C934.437 227.991 942.741 231.002 950.597 234.972C958.029 238.75 964.935 243.486 971.138 249.057C977.193 254.482 982.469 260.717 986.817 267.586C991.176 274.532 994.509 282.072 996.71 289.972C1001.29 306.712 1001.29 324.376 996.71 341.116C994.499 349.039 991.168 356.605 986.817 363.586C982.5 370.477 977.22 376.717 971.138 382.115C964.918 387.642 958.015 392.348 950.597 396.116C942.767 400.078 934.492 403.089 925.947 405.087C907.265 409.335 887.868 409.335 869.185 405.087ZM491.992 156.745H542.298L628.32 288.21L714.678 156.745H764.984V403.242H715.181V234.216L643.747 343.211H613.229L541.795 234.216V403.242H491.992V156.745Z" fill="currentColor"></path><path d="M377.135 200.877C387.085 200.877 396.811 197.927 405.083 192.399C413.356 186.871 419.804 179.015 423.611 169.823C427.419 160.63 428.415 150.516 426.474 140.757C424.533 130.999 419.742 122.035 412.706 115C405.671 107.965 396.708 103.174 386.949 101.232C377.191 99.2914 367.076 100.288 357.884 104.095C348.692 107.903 340.835 114.35 335.308 122.623C329.78 130.896 326.829 140.622 326.829 150.571C326.829 157.178 328.13 163.72 330.658 169.823C333.186 175.927 336.891 181.472 341.563 186.144C346.234 190.815 351.78 194.521 357.883 197.049C363.987 199.577 370.529 200.877 377.135 200.877ZM222.886 427.44C198.634 427.441 174.926 420.249 154.762 406.775C134.597 393.302 118.88 374.151 109.6 351.745C100.319 329.339 97.8905 304.684 102.622 280.899C107.353 257.113 119.032 235.264 136.18 218.115C153.329 200.966 175.178 189.288 198.964 184.557C222.75 179.825 247.405 182.254 269.81 191.535C292.216 200.816 311.367 216.532 324.84 236.697C338.314 256.862 345.505 280.569 345.505 304.821C345.506 320.924 342.334 336.869 336.172 351.746C330.01 366.623 320.978 380.141 309.592 391.527C298.205 402.914 284.688 411.946 269.811 418.108C254.934 424.27 238.988 427.441 222.886 427.44Z" fill="#7715F5" />
-</svg>
\ No newline at end of file
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.498 7.22c-.008.004-.06.016-.125.027-.569.099-.97.31-1.417.75a2.649 2.649 0 00-.716 1.455c-.026.23-.023.674.011.852.016.072.03.148.034.17a.37.37 0 00.027.076c.015.02.053.129.09.239.088.269.383.704.641.943a2.74 2.74 0 001.41.686c.295.045.893.015.995-.05a.838.838 0 01.137-.034c.166-.03.58-.238.81-.412.197-.148.497-.432.497-.474a.29.29 0 01.072-.098c.17-.19.39-.709.454-1.084.034-.208.03-.826-.011-.966-.012-.041-.034-.136-.053-.208-.08-.315-.33-.758-.606-1.065-.303-.34-.894-.67-1.387-.772-.246-.05-.826-.076-.863-.034zM15.812 9.759c-.003.003-.212.015-.462.03a9.59 9.59 0 00-.55.038 4.463 4.463 0 01-.245.038 9.768 9.768 0 00-2.254.61c-.591.238-1.56.765-1.894 1.03l-.322.242a9.862 9.862 0 00-2.428 2.709c-.205.348-.621 1.159-.621 1.208 0 .015-.023.08-.053.144-.061.14-.216.557-.228.614a.244.244 0 01-.03.075.904.904 0 00-.05.17 1.003 1.003 0 01-.048.171.273.273 0 00-.03.114c-.005.041-.054.261-.103.492-.16.686-.193 1.046-.193 2.008 0 .773.041 1.223.17 1.894.091.458.288 1.155.349 1.227.026.03.038.06.03.068-.03.034.22.64.477 1.148a9.168 9.168 0 001.792 2.462c.428.428.652.625.962.852.087.061.163.122.174.133.027.038.576.402.735.492l.27.152c.196.11.526.28.552.284.012 0 .095.038.19.083.572.277 1.708.625 2.325.709.084.011.194.03.247.041.485.099 2.159.103 2.67.004.042-.007.17-.026.284-.041.114-.016.235-.035.265-.042l.322-.076c.614-.14.951-.246 1.591-.511.065-.027.122-.05.133-.053.08-.023.614-.296.909-.466a9.675 9.675 0 002.886-2.527c.216-.276.523-.735.523-.776 0-.02.015-.038.034-.046.072-.026.678-1.254.818-1.659a.614.614 0 01.03-.076c.05-.136.217-.67.228-.738a.269.269 0 01.034-.114c.034-.057.182-.81.243-1.223.034-.25.064-.86.064-1.277 0-1.159-.19-2.19-.621-3.39-.118-.315-.618-1.364-.675-1.402a.248.248 0 01-.053-.087c-.022-.06-.413-.663-.507-.784-.447-.564-.621-.765-.977-1.117a10.402 10.402 0 00-.584-.55 5.453 5.453 0 01-.284-.238.532.532 0 00-.144-.102c-.011 0-.05-.023-.08-.053-.06-.065-.72-.497-.973-.64-.284-.163-1.106-.557-1.159-.557a.711.711 0 01-.14-.053 7.82 7.82 0 00-.67-.235l-.341-.091a8.266 8.266 0 00-.36-.091c-.811-.152-.841-.155-1.364-.193-.3-.027-.849-.046-.864-.034z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/public/images/common/ramp_logo.svg b/public/images/common/ramp_logo.svg
index 95e0aff35a..63d9d73893 100644
--- a/public/images/common/ramp_logo.svg
+++ b/public/images/common/ramp_logo.svg
@@ -1,9 +1 @@
-<svg id="Logo" xmlns="http://www.w3.org/2000/svg" width="90" height="24" viewBox="0 0 209.711 48.865">
-  <path d="M37.839,28.755l-9.252,9.286a2.022,2.022,0,0,0,0,2.851l7.07,7.08a3.134,3.134,0,0,0,4.38,0l21.67-21.388a3.037,3.037,0,0,0,0-4.323L40.039.892a3.134,3.134,0,0,0-4.38,0l-7.07,7.08a2.022,2.022,0,0,0,0,2.851l9.252,9.286A6.073,6.073,0,0,1,37.839,28.755Z" transform="translate(14.757 0)" fill="#0a6e5c"/>
-  <path d="M24.773,28.755l9.252,9.286a2.022,2.022,0,0,1,0,2.851l-7.07,7.08a3.134,3.134,0,0,1-4.38,0L.9,26.584a3.037,3.037,0,0,1,0-4.323L22.574.892a3.134,3.134,0,0,1,4.38,0l7.07,7.08a2.022,2.022,0,0,1,0,2.851L24.773,20.11A6.073,6.073,0,0,0,24.773,28.755Z" transform="translate(0 0)" fill="#21bf73"/>
-  <path d="M18.065,21.983a2.5,2.5,0,0,1,0-3.534l9.718-9.718a2.5,2.5,0,0,1,3.534,0l9.718,9.718a2.5,2.5,0,0,1,0,3.534L31.316,31.7a2.5,2.5,0,0,1-3.534,0Z" transform="translate(9.135 4.216)" fill="#21bf73"/>
-  <path d="M86.486,35.93H79.581l-3.808-9.963a2.879,2.879,0,0,0-1.423-1.639,5.211,5.211,0,0,0-2.344-.463H67.779V35.93H61.333V6H74.6q5.189,0,7.868,2.27a8.067,8.067,0,0,1,2.678,6.516,8.367,8.367,0,0,1-1.59,5.129,8.459,8.459,0,0,1-4.478,3.069,5.206,5.206,0,0,1,3.809,3.657ZM73.638,18.863a7.163,7.163,0,0,0,4.1-.925,3.479,3.479,0,0,0,1.3-2.985,3.364,3.364,0,0,0-1.3-2.943,6.917,6.917,0,0,0-4.1-.967H67.695v7.819Z" transform="translate(32.324 3.162)" fill="currentColor"/>
-  <path d="M102.085,11.832V33.145H95.849V29.992a6.69,6.69,0,0,1-2.72,2.564,8.408,8.408,0,0,1-3.976.925,8.989,8.989,0,0,1-4.9-1.345A9.253,9.253,0,0,1,80.95,28.31a13.626,13.626,0,0,1-1.172-5.8,13.912,13.912,0,0,1,1.172-5.843A9.339,9.339,0,0,1,84.3,12.715a8.524,8.524,0,0,1,4.855-1.429,8.112,8.112,0,0,1,3.976.967,6.979,6.979,0,0,1,2.72,2.606V11.832ZM90.995,28.647a4.308,4.308,0,0,0,3.6-1.6,7.353,7.353,0,0,0,1.256-4.624A7.353,7.353,0,0,0,94.594,17.8a4.263,4.263,0,0,0-3.6-1.639,4.335,4.335,0,0,0-3.641,1.681,7.473,7.473,0,0,0-1.3,4.666,7.276,7.276,0,0,0,1.256,4.582A4.528,4.528,0,0,0,90.995,28.647Z" transform="translate(42.045 5.948)" fill="currentColor"/>
-  <path d="M123.79,11.286a6.457,6.457,0,0,1,5.4,2.228q1.8,2.186,1.8,6.726V33.145h-6.319v-12.7a5.516,5.516,0,0,0-.712-3.195,2.667,2.667,0,0,0-2.344-1.009,3.546,3.546,0,0,0-2.972,1.345,6.033,6.033,0,0,0-1.046,3.783v11.77h-6.32v-12.7a5.382,5.382,0,0,0-.753-3.195,2.618,2.618,0,0,0-2.3-1.009,3.665,3.665,0,0,0-3.014,1.345,6.042,6.042,0,0,0-1.046,3.783v11.77H97.842V17.927a49.759,49.759,0,0,0-.335-6.1h5.942l.377,3.195a6.743,6.743,0,0,1,2.678-2.774,8.2,8.2,0,0,1,4.018-.967q4.73,0,6.278,3.951a7.662,7.662,0,0,1,2.888-2.859A8.031,8.031,0,0,1,123.79,11.286Z" transform="translate(51.389 5.948)" fill="currentColor"/>
-  <path d="M135.787,11.286a8.527,8.527,0,0,1,4.856,1.429,9.078,9.078,0,0,1,3.306,3.951,13.5,13.5,0,0,1,1.212,5.843,13.617,13.617,0,0,1-1.171,5.8,8.866,8.866,0,0,1-3.306,3.825,8.991,8.991,0,0,1-4.9,1.345,8.4,8.4,0,0,1-3.975-.925,6.408,6.408,0,0,1-2.678-2.564V42.917h-6.32V17.927a49.828,49.828,0,0,0-.334-6.1h5.943l.418,3.531a6.433,6.433,0,0,1,2.678-2.985A8.346,8.346,0,0,1,135.787,11.286Zm-1.8,17.361a4.357,4.357,0,0,0,3.6-1.555,7.277,7.277,0,0,0,1.255-4.582,7.467,7.467,0,0,0-1.3-4.666,4.176,4.176,0,0,0-3.556-1.681,4.382,4.382,0,0,0-3.642,1.639,7.354,7.354,0,0,0-1.255,4.624,7.354,7.354,0,0,0,1.255,4.624A4.43,4.43,0,0,0,133.988,28.647Z" transform="translate(64.549 5.948)" fill="currentColor"/>
-</svg>
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.332 19.09l-3.247 3.26a.71.71 0 000 1l2.482 2.484a1.1 1.1 0 001.537 0l7.604-7.505c.423-.418.423-1.1 0-1.517l-7.604-7.499a1.1 1.1 0 00-1.537 0l-2.481 2.485a.71.71 0 00-.001 1l3.247 3.259c.845.834.845 2.199 0 3.034z" fill="#0A6E5C"></path><path d="M13.568 19.09l3.247 3.26a.71.71 0 010 1l-2.482 2.484a1.1 1.1 0 01-1.537 0L5.192 18.33a1.066 1.066 0 010-1.517l7.604-7.499a1.1 1.1 0 011.537 0l2.481 2.485a.71.71 0 010 1l-3.246 3.259a2.131 2.131 0 000 3.034z" fill="#21BF73"></path><path d="M14.42 18.194a.877.877 0 010-1.24l3.41-3.41a.877.877 0 011.24 0l3.41 3.41a.877.877 0 010 1.24l-3.41 3.41a.877.877 0 01-1.24 0l-3.41-3.41z" fill="#21BF73"></path></svg>
\ No newline at end of file
diff --git a/src/components/common/BuyCryptoButton/index.tsx b/src/components/common/BuyCryptoButton/index.tsx
index dfd037e564..2f23384ea9 100644
--- a/src/components/common/BuyCryptoButton/index.tsx
+++ b/src/components/common/BuyCryptoButton/index.tsx
@@ -9,7 +9,7 @@ import { MERCURYO_URL, MOONPAY_URL, SafeAppsTag } from '@/config/constants'
 import { AppRoutes } from '@/config/routes'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import madProps from '@/utils/mad-props'
-import { useMemo, useState } from 'react'
+import { ReactNode, useMemo, useState } from 'react'
 import Track from '../Track'
 import { OVERVIEW_EVENTS } from '@/services/analytics'
 import RampLogo from '@/public/images/common/ramp_logo.svg'
@@ -38,6 +38,18 @@ const buttonStyles = {
   minHeight: '40px',
 }
 
+const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode }) => {
+  return (
+    <ButtonBase className={css.button}>
+      <Typography display="flex" alignItems="center" fontWeight="bold" fontSize="18px" gap={1}>
+        {children}
+        {name}
+      </Typography>
+      <ChevronRightRoundedIcon color="border" />
+    </ButtonBase>
+  )
+}
+
 const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePath: string }) => {
   const [open, setOpen] = useState<boolean>(false)
   const { safeAddress } = useSafeInfo()
@@ -57,54 +69,47 @@ const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePa
         </Button>
       </Track>
       <ModalDialog open={open} onClose={toggleDialog} dialogTitle="Buy crypto with fiat" hideChainIndicator>
-        <DialogContent>
-          <Box mt={3}>
-            {href && (
-              <Box position="relative">
-                <Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="Ramp">
-                  <Link href={href} passHref>
-                    <ButtonBase className={css.button}>
-                      <RampLogo />
-                      Ramp
-                      <ChevronRightRoundedIcon color="border" />
-                    </ButtonBase>
-                  </Link>
-                </Track>
-                <div className={css.badge}>Safe integrated app</div>
-              </Box>
-            )}
-
-            <Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="MoonPay">
-              <Link href={moonPayLink} passHref target="_blank">
-                <ButtonBase className={css.button}>
-                  <MoonPayLogo />
-                  MoonPay
-                  <ChevronRightRoundedIcon color="border" />
-                </ButtonBase>
-              </Link>
-            </Track>
-
-            <Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="Mercuryo">
-              <Link href={mercuryoLink} passHref target="_blank">
-                <ButtonBase className={css.button}>
-                  <MercuryoLogo />
-                  Mercuryo
-                  <ChevronRightRoundedIcon color="border" />
-                </ButtonBase>
-              </Link>
-            </Track>
-
-            <Divider sx={{ my: 4 }} />
-
-            <Typography mb={2}>
-              Make sure to use your correct account address when interacting with these apps:
-            </Typography>
-
-            <Box bgcolor="background.main" p={2} borderRadius="6px" alignSelf="flex-start">
-              <EthHashInfo address={safeAddress} shortAddress={false} showCopyButton hasExplorer avatarSize={24} />
+        <Box px={4} pb={5} pt={4}>
+          <Typography>Choose one of the available options</Typography>
+          {href && (
+            <Box position="relative">
+              <Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="Ramp">
+                <Link href={href} passHref>
+                  <BuyCryptoOption name="Ramp">
+                    <RampLogo />
+                  </BuyCryptoOption>
+                </Link>
+              </Track>
+              <div className={css.badge}>Safe integrated app</div>
             </Box>
+          )}
+
+          <Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="MoonPay">
+            <Link href={moonPayLink} passHref target="_blank">
+              <BuyCryptoOption name="MoonPay">
+                <MoonPayLogo />
+              </BuyCryptoOption>
+            </Link>
+          </Track>
+
+          <Track {...OVERVIEW_EVENTS.SELECT_ONRAMP_APP} label="Mercuryo">
+            <Link href={mercuryoLink} passHref target="_blank">
+              <BuyCryptoOption name="Mercuryo">
+                <MercuryoLogo />
+              </BuyCryptoOption>
+            </Link>
+          </Track>
+
+          <Divider sx={{ my: 4 }} />
+
+          <Typography mb={2}>
+            Make sure to use your correct account address when interacting with these apps:
+          </Typography>
+
+          <Box bgcolor="background.main" p={2} borderRadius="6px" alignSelf="flex-start">
+            <EthHashInfo address={safeAddress} shortAddress={false} showCopyButton hasExplorer avatarSize={24} />
           </Box>
-        </DialogContent>
+        </Box>
       </ModalDialog>
     </>
   )
diff --git a/src/components/common/BuyCryptoButton/styles.module.css b/src/components/common/BuyCryptoButton/styles.module.css
index 43e2033969..96bf5ca7dc 100644
--- a/src/components/common/BuyCryptoButton/styles.module.css
+++ b/src/components/common/BuyCryptoButton/styles.module.css
@@ -1,5 +1,4 @@
 .button {
-  text-indent: -9999px;
   justify-content: space-between;
   padding: var(--space-2);
   border-radius: 6px;
@@ -9,6 +8,10 @@
   color: var(--color-text-primary);
 }
 
+.button:hover {
+  border-color: var(--color-primary-main);
+}
+
 .badge {
   background-color: var(--color-secondary-light);
   color: var(--color-static-main);