hueso/P2Pix-Front-End
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #22 from liftlearning/responsividade

Browse Source 
Responsividade
This commit is contained in:
Ronyell Henrique authored and GitHub committed 2023-02-06 19:49:46 -03:00
2 parents d665376eb4 7e88c459bb
commit ce417075d3
17 files changed
+456 -163
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+1
View File
@@ -16,6 +16,7 @@
"dependencies": {
"@headlessui/vue": "^1.7.3",
"@heroicons/vue": "^2.0.12",
"@vueuse/core": "^9.12.0",
"alchemy-sdk": "^2.3.0",
"axios": "^1.2.1",
"crc": "^3.8.0",
src/assets/bg.svg
+19 -19
View File
@@ -1,34 +1,34 @@
<svg width="1440" height="1024" viewBox="0 0 1440 1024" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#clip0_847_732)">
<rect width="1440" height="1024" fill="#111827"/>
<rect width="1440" height="1024" fill="url(#pattern0)" style="mix-blend-mode:overlay"/>
<g opacity="0.95" filter="url(#filter0_f_847_732)">
<path d="M1367.83 552.44C1379.11 529.54 1262.11 485.261 1202.2 465.985C1146.53 442.342 1021.37 394.67 966.096 393.127C897.008 391.198 842.513 402.615 726.299 403.143C610.086 403.671 535.439 425.792 299.367 461.43C63.2953 497.068 190.378 484.263 64.1408 579.89C-62.0961 675.517 39.591 662.202 84.1295 746.443C128.668 830.684 150.957 767.426 226.733 787.188C302.508 806.95 239.996 767.481 354.257 773.476C375.949 774.614 401.683 767.919 401.683 767.919C401.683 767.919 512.832 794.344 405.989 835.062C299.146 875.779 466.967 891.673 436.369 956.064C405.771 1020.46 392.204 1020.91 592.857 1079.86C793.511 1138.81 751.424 1048.76 856.456 992.952C961.488 937.144 866.361 996.221 960.994 956.602C1055.63 916.984 982.798 819.165 1090.19 853.356C1197.58 887.548 1156.14 867.074 1287.63 853.099C1419.12 839.124 1326.26 817.718 1346.46 769.516C1366.66 721.313 1316.51 698.62 1330.49 636.497C1344.47 574.374 1353.72 581.064 1367.83 552.44Z" fill="#059669"/>
<path d="M1235.57 657.249C1203.31 684.536 1121.94 723.971 1022.6 742.63L1006.49 756.787C941.094 753.271 795.807 746.487 737.846 747.473L643.49 749.078C609.792 749.651 554.189 750.597 217.256 600.01C153.678 546.586 175.842 566.777 109.411 475.865C42.9808 384.952 95.3741 418.513 100.844 316.093C106.315 213.674 124.624 240.615 193.565 158.199C262.507 75.7822 224.41 120.137 345.399 80.5427C466.387 40.9481 455.336 55.0195 605.944 48.8584C756.551 42.6973 745.859 63.4473 841.608 72.1027C937.357 80.7582 909.264 91.52 988.522 107.141C1067.78 122.761 1073.39 132.95 1153.36 161.928C1233.33 190.905 1210.61 191.806 1314.34 254.831C1418.06 317.856 1317.62 315.966 1376.5 376.154C1435.38 436.343 1380.13 443.967 1383.8 512.294C1387.46 580.62 1353.31 557.034 1331.83 581.052C1310.35 605.071 1267.84 629.962 1235.57 657.249Z" fill="#60A5FA"/>
<g clip-path="url(#clip0_1132_993)">
<rect width="1440" height="1024" transform="translate(1440 1024) rotate(-180)" fill="#111827"/>
<rect width="1440" height="1024" transform="translate(1440 1024) rotate(-180)" fill="url(#pattern0)" style="mix-blend-mode:overlay"/>
<g filter="url(#filter0_f_1132_993)">
<path d="M307.643 94.7579C329.492 66.5305 387.169 22.4938 460.177 -4.02292L471.036 -18.6088C520.484 -21.4663 630.246 -28.7619 673.711 -35.0845L744.468 -45.3771C769.739 -49.053 811.435 -55.1183 1077.82 52.5736C1130.28 96.0044 1111.85 79.416 1169.75 157.221C1227.64 235.027 1185.33 208.907 1190.2 304.059C1195.08 399.21 1178.96 376.025 1134.39 458.619C1089.82 541.213 1114.55 496.669 1027.12 544.553C939.685 592.437 946.753 578.402 834.129 598.157C721.504 617.912 727.718 597.739 655.013 598.681C582.309 599.623 602.473 587.055 541.549 580.021C480.625 572.987 475.518 564.095 412.884 544.785C350.249 525.475 367.241 522.522 283.773 473.967C200.305 425.413 275.945 417.782 226.421 367.662C176.897 317.542 217.738 305.339 208.989 242.543C200.24 179.748 227.97 198.355 242.002 174.155C256.033 149.955 285.793 122.985 307.643 94.7579Z" fill="#1E40AF"/>
<path d="M190.775 -149.087C224.734 -176.041 310.525 -217.148 415.431 -240.372L432.378 -254.317C501.523 -255.158 655.129 -257.965 716.389 -262.462L816.114 -269.782C851.731 -272.396 910.498 -276.709 1267.45 -159.904C1334.94 -114.994 1311.4 -132.083 1382.11 -53.0689C1452.82 25.945 1397.26 -1.49452 1392.03 92.5013C1386.8 186.497 1367.3 162.996 1294.87 242.638C1222.44 322.279 1262.47 279.356 1134.8 323.067C1007.13 366.778 1018.73 353.225 859.573 368.2C700.413 383.175 711.604 363.537 610.35 361.561C509.096 359.584 538.732 348.001 454.872 338.632C371.012 329.264 365.032 320.295 280.342 298.756C195.653 277.218 219.663 274.986 109.687 223.786C-0.289434 172.586 105.892 168.085 43.3311 116.698C-19.2301 65.3112 39.1224 54.9128 34.8817 -7.34067C30.6411 -69.5942 66.8656 -50.1436 89.4399 -73.4395C112.014 -96.7354 156.817 -122.133 190.775 -149.087Z" fill="#1E3A8A"/>
</g>
<g style="mix-blend-mode:color-burn" opacity="0.4" filter="url(#filter1_f_847_732)">
<path d="M238.125 432.859C214.047 414.357 179.782 368.564 164.502 313.519L152 304.269C156.167 268.498 164.502 189 164.502 157.176L164.502 105.37C164.502 86.8673 164.502 56.3386 305.266 -124.058C354.348 -157.362 335.826 -145.798 418.71 -179.565C501.594 -213.331 470.571 -185.578 562.715 -179.565C654.86 -173.552 630.319 -164.3 703.479 -124.058C776.639 -83.8157 737.281 -106.018 771.083 -38.4853C804.885 29.0479 792.383 22.5721 795.624 105.37C798.865 188.167 780.344 181.691 771.083 233.96C761.822 286.229 752.561 270.502 737.281 313.519C722.001 356.537 712.74 359.313 685.421 402.33C658.101 445.348 657.638 432.859 599.296 487.903C540.953 542.947 544.194 487.903 489.092 518.432C433.991 548.96 427.971 518.432 366.387 518.432C304.803 518.432 326.566 500.392 305.266 487.903C283.966 475.414 262.203 451.361 238.125 432.859Z" fill="#93C5FD"/>
<path d="M1004.22 1306.57C985.424 1317.37 932.391 1231.4 908.224 1187.07C880.724 1146.4 823.724 1054.47 815.724 1012.07C805.724 959.071 809.224 916.071 795.724 826.571C782.224 737.071 792.724 677.571 795.724 492.571C798.724 307.571 802.724 406.571 871.724 300.571C940.724 194.571 941.224 274.071 1020.72 300.571C1100.22 327.071 1047.22 350.071 1073.72 406.571C1100.22 463.071 908.224 519.071 941.224 598.071C974.224 677.071 958.224 648.071 1123.22 677.571C1146.22 614.571 1126.72 648.071 1149.72 562.071C1172.72 476.071 1163.22 522.071 1216.22 492.571C1269.22 463.071 1292.22 499.071 1368.22 648.071C1444.22 797.071 1328.72 704.071 1292.22 790.071C1255.72 876.071 1259.22 849.571 1235.72 926.071C1212.22 1002.57 1192.72 985.571 1235.72 1065.07C1278.72 1144.57 1255.72 1114.57 1259.22 1217.07C1262.72 1319.57 1232.72 1250.07 1192.72 1270.07C1152.72 1290.07 1126.72 1253.57 1073.72 1270.07C1020.72 1286.57 1027.72 1293.07 1004.22 1306.57Z" fill="#34D399"/>
<path d="M130.673 446.681C131.953 420.203 280.592 417.975 354.751 420.17L384.725 418.9C441.682 408.812 565.682 392.815 606.026 409.521C656.455 430.405 649.707 424.685 714.747 471.474C779.786 518.262 790.53 464.759 873.456 461.245L1081.27 452.438C1183.68 448.098 1187.87 464.435 1281.36 556.559C1374.84 648.684 1204.6 622.869 1088.7 627.78C972.804 632.692 1055.73 629.178 971.776 679.277C887.822 729.377 909.531 698.43 708.635 716.953C507.739 735.475 514.965 681.621 444.278 655.09C373.592 628.559 413.183 629.884 363.579 628.483C313.975 627.082 266.84 613.065 176.649 586.86C86.4589 560.656 129.073 479.779 130.673 446.681Z" fill="#FB923C"/>
<g style="mix-blend-mode:color-burn" opacity="0.35" filter="url(#filter1_f_1132_993)">
<path d="M1352.54 698.139C1376.99 716.641 1411.79 762.434 1427.3 817.479L1440 826.73C1435.77 862.5 1427.3 941.998 1427.3 973.822L1427.3 1025.63C1427.3 1044.13 1427.3 1074.66 1284.36 1255.06C1234.51 1288.36 1253.32 1276.8 1169.15 1310.56C1084.98 1344.33 1116.49 1316.58 1022.91 1310.56C929.338 1304.55 954.26 1295.3 879.964 1255.06C805.669 1214.81 845.638 1237.02 811.312 1169.48C776.986 1101.95 789.682 1108.43 786.39 1025.63C783.099 942.831 801.907 949.307 811.312 897.038C820.716 844.769 830.121 860.496 845.638 817.478C861.156 774.461 870.56 771.685 898.303 728.668C926.046 685.65 926.517 698.139 985.765 643.095C1045.01 588.051 1041.72 643.095 1097.68 612.566C1153.63 582.038 1159.75 612.566 1222.29 612.566C1284.83 612.566 1262.73 630.606 1284.36 643.095C1305.99 655.584 1328.09 679.637 1352.54 698.139Z" fill="#93C5FD"/>
<path d="M91.3221 452.392C85.8729 433.093 176.339 405.29 222.253 393.802C265.608 378.49 362.419 348.502 402.819 351.042C453.32 354.217 491.594 367.188 576.086 375.581C660.578 383.974 712.224 406.986 879.692 451.998C1047.16 497.01 956.24 477.94 1036.56 563.955C1116.88 649.97 1079.12 612.744 1036.56 677.843C994.002 742.941 1005.47 746.666 981.601 746.666C961.798 746.666 900.661 761.818 879.692 764.843C858.723 767.867 902.898 784.219 870.91 796.843C824.704 808.719 833.843 797.843 810.486 807.343C799.682 811.737 767.491 774.203 781.992 828.393C796.493 882.583 758.426 894.935 605.326 928.873C452.227 962.811 563.6 880.704 493.906 828.356C424.213 776.008 447.488 785.204 383.41 746.666C319.331 708.128 339.315 694.563 257.058 714.864C174.802 735.165 207.416 721.441 113.43 701.123C19.4446 680.804 89.5904 669.852 80.7041 629.472C71.8177 589.091 111.037 574.169 108.353 522.953C105.668 471.737 98.1335 476.516 91.3221 452.392Z" fill="#34D399"/>
<path d="M111.594 387.022C113.259 360.564 264.221 360.352 339.494 363.553L369.947 362.69C427.921 353.376 554.055 339.062 594.79 356.315C645.71 377.881 638.936 372.07 704.334 419.736C769.731 467.403 781.379 414.05 865.631 411.662L1076.77 405.675C1180.82 402.725 1184.85 419.117 1278.51 512.502C1372.17 605.886 1199.65 577.764 1081.9 581.102C964.15 584.441 1048.4 582.052 962.463 631.008C876.524 679.964 898.995 649.315 694.745 665.11C490.496 680.905 498.576 627.154 427.165 599.666C355.753 572.179 395.937 574.041 345.588 571.967C295.238 569.893 247.569 555.238 156.348 527.812C65.1282 500.386 109.514 420.095 111.594 387.022Z" fill="#FB923C"/>
</g>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="0.355556" height="0.5">
<use xlink:href="#image0_847_732" transform="scale(0.000347222 0.000488281)"/>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="0.177778" height="0.25">
<use xlink:href="#image0_1132_993" transform="scale(0.000173611 0.000244141)"/>
</pattern>
<filter id="filter0_f_847_732" x="-286.884" y="-242.267" width="1980.68" height="1631.39" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_f_1132_993" x="-275.792" y="-560.664" width="1983.5" height="1457.53" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_847_732"/>
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_1132_993"/>
</filter>
<filter id="filter1_f_847_732" x="-170.772" y="-486" width="1854.36" height="2083.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter1_f_1132_993" x="-226.161" y="58.2275" width="1956.16" height="1558.77" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_847_732"/>
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_1132_993"/>
</filter>
<clipPath id="clip0_847_732">
<rect width="1440" height="1024" fill="white"/>
<clipPath id="clip0_1132_993">
<rect width="1440" height="1024" fill="white" transform="translate(1440 1024) rotate(-180)"/>
</clipPath>
<image id="image0_847_732" width="1024" height="1024" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAAAAAXNSR0IArs4c6QAAIABJREFUeF7s3WW8Nd2yHfQ5cHfXECB4cHe9uAd3d4IEDQRIcHcJ7hLcnQAJ7u7u7s7Ib1f3/5zZnf2859wP957zYb5f1rufvfZa3TVr1qweY1RV2v6j6/rvL7lff5/79Te7X3/Z+/VfuV9/jI/XJP/Ax2vb3+T+9//rfv0r7t//ePfvf6/75z/j/vkPvd/3292vf+r9+z/r/v0fd//7P3K//jz36199v/7a9+uvcb/+W/frz3G//t/36w+4X3/R+/P/gvvzf8L73//A+/U3vV+/x/2+3D/PS9t/7P75R7tff/z79U+6X//V++/+2fv9P//987/w+pyf5f73f/d+n+v9++/3/dv36y90v+8nuN/3S9z//nPdr+wx97XW+svu13/5fv0T7tf/4361fvP7JL/A/bl/6f3zb3P//GffP//u98/zPUlm3dv+WPfnWYe/+/7557xff+z71Xp8z/vnf32/r7XW/3D//APv1z/mfv2l7tdf6379l+7v/4nv7/8j7n//7e/Xv/J+/fXu1//2fv98Ttsf5XVdP9X98+9wv/7g+5V9/4377/+5++9/vvv3f+79+pffr9/3fv1d7tff8X79H++//93uv/d+/jT7K8k/dL9/XtqO36y1fvr79S+6X//P+/Vvvv/OOrieH3L/nv3///vnv/N+/QXv11/xfv1B9+v/dr/+0/er9fpP7p9/q/v1x71f/6P7dfxxrfVz368/zv36G9yvP/V9nRM/2vr7P/3+vXWf9Uwy69DW9f1M9/t+/fvV/vf57PH73r8f/11rzT5LMtfd9s9/3e/3u3/mL7/C/f6JM21nnyQZ/23769w//633z/zRfv1V7s/7/V+vf9X9s3j3q91/b91/2/tnce+3uL9nrqftxKe11p93v/6U9+9nn7X9ne5/t26/+ste4ydrrT/g/jtxbv6x7R9///7fv1/tO/uK//yG9+//3vtVPPuN75993h99//w/36+9X/+++/v/xc/en2Tif9vvc//+H75f+f+cK2stcfA/eH3OX3j//Dfdr/Nzkp/m/lx+xz72CT/8p+6/sw//hvvn/+X+HOv2s93/Puu51vpT7lf78Xu/rkscH/uvtf7E+3X8NcnE37a/9/2z65m3tf0Z7/eL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 truncated
<image id="image0_1132_993" width="1024" height="1024" xlink:href="data:image/png;base64,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 truncated
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

src/assets/logo2.svg
+5
View File
@@ -0,0 +1,5 @@
<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.32352 0C3.37332 0 4.26027 0.697928 4.54816 1.65467C5.65322 1.73319 6.71174 2.21301 7.494 3.00109L11.7165 7.22065C11.731 7.23519 11.7485 7.24973 11.763 7.26718L16.3926 11.8939C16.9567 12.4609 17.7361 12.7837 18.5329 12.7837C18.5358 12.7837 18.5387 12.7837 18.5416 12.7837H18.7975C19.1465 11.9433 19.9753 11.353 20.9437 11.353C22.2261 11.353 23.2672 12.394 23.2672 13.6765C23.2672 14.9589 22.2261 16 20.9437 16C19.9084 16 19.036 15.3253 18.7336 14.3889H18.5445C18.5416 14.3889 18.5358 14.3889 18.5329 14.3889C17.3144 14.3889 16.1221 13.8946 15.2643 13.0309L11.0244 8.79099C11.0069 8.77644 10.9866 8.7619 10.9691 8.74446L6.35405 4.12941C5.84806 3.6205 5.16467 3.30934 4.44929 3.25118C4.0916 4.07125 3.27445 4.64413 2.32061 4.64413C1.04108 4.64413 0 3.60596 0 2.32352C0 1.04108 1.04108 0 2.32352 0Z" fill="#F9FAFB"/>
<path d="M2.32352 11.3531C3.29189 11.3531 4.11778 11.9434 4.46965 12.7838H4.72555C4.72846 12.7838 4.73137 12.7838 4.73428 12.7838C5.53399 12.7838 6.31334 12.461 6.87459 11.894L9.63722 9.13135L10.7684 10.2626L8.00291 13.0281C7.14213 13.8918 5.95274 14.3862 4.73428 14.3862C4.73137 14.3862 4.72555 14.3862 4.72265 14.3862H4.53362C4.2341 15.3196 3.35878 15.9972 2.32352 15.9972C1.04108 15.9972 0 14.9561 0 13.6737C0 12.3913 1.04108 11.3531 2.32352 11.3531Z" fill="#F9FAFB"/>
<path d="M20.9405 4.64413C19.9722 4.64413 19.1463 4.0538 18.7944 3.21338H18.5385C18.5356 3.21338 18.5327 3.21338 18.5298 3.21338C17.7301 3.21338 16.9507 3.53617 16.3895 4.10324L13.6268 6.86587L12.4956 5.73464L15.2611 2.9691C16.1219 2.10542 17.3113 1.61105 18.5298 1.61105C18.5327 1.61105 18.5385 1.61105 18.5414 1.61105H18.7304C19.0329 0.674664 19.9082 0 20.9405 0C22.223 0 23.2641 1.04108 23.2641 2.32352C23.2641 3.60596 22.223 4.64413 20.9405 4.64413Z" fill="#F9FAFB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/assets/main.css
+2 -1
View File
@@ -4,8 +4,9 @@
@tailwind utilities;
#app {
width: 100%;
margin: 0 auto;
padding: 2rem 4rem;
padding: 2rem;
height: fit-content;
min-height: 100vh;
background-image: url( './bg.svg' );
src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+32 -7
View File
@@ -16,7 +16,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[50rem]"
<span class="text font-extrabold sm:text-5xl text-xl max-w-[50rem]"
>Os tokens já foram transferidos <br />
para a sua carteira!
</span>
@@ -30,8 +30,9 @@ const emit = defineEmits(["makeAnotherTransaction"]);
<p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
</div>
<div class="my-5">
<p>
<b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
<p class="text-sm">
<b>Não encontrou os tokens? </b><br />Clique no botão abaixo para
<br />
cadastrar o BRZ em sua carteira.
</p>
</div>
@@ -48,18 +49,24 @@ const emit = defineEmits(["makeAnotherTransaction"]);
Fazer nova transação
</button>
</div>
<div class="text-container mt-16">
<div class="text-container mt-16 lg-view">
<span class="text font-extrabold text-3xl max-w-[50rem]"
>Histórico de compras
>Gerenciar transações
</span>
</div>
<div class="w-full max-w-4xl">
<div class="w-full max-w-4xl lg-view">
<ListingComponent
:walletTransactions="lastWalletReleaseTransactions"
:isManageMode="false"
>
</ListingComponent>
</div>
<RouterLink
to="/transaction_history"
class="mt-8 text-white text-2xl font-bold"
>
Gerenciar Transações
</RouterLink>
</div>
</template>
@@ -77,7 +84,7 @@ p {
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container-row {
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
@@ -99,4 +106,22 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>
src/components/CustomModal.vue
+66
View File
@@ -0,0 +1,66 @@
<script setup lang="ts">
</script>
<template>
<div class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none">
<div class="modal px-5 text-center">
<p class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify">
<strong>ATENÇÃO!</strong>
A transação só será processada após inserir o código de autenticação.
Caso contrário não conseguiremos comprovar o seu depósito e não será
possível transferir os tokens para sua carteira.
</p>
<button
@click="$emit('close-modal')"
class="border-2 border-solid border-amber-400 mt-2"
>
Entendi
</button>
</div>
</div>
</template>
<style scoped>
.modal-overlay {
display: flex !important;
}
.modal {
background-color: white;
height: 250px;
width: 300px;
margin-top: 50%;
border-radius: 10px;
}
.close {
cursor: pointer;
}
.close-img {
width: 25px;
}
.check {
width: 150px;
}
h6 {
font-weight: 500;
font-size: 28px;
margin: 20px 0;
}
p {
font-size: 16px;
}
button {
width: 100px;
height: 40px;
color: black;
font-size: 14px;
border-radius: 10px;
}
</style>
src/components/ListingComponent/ListingComponent.vue
+56 -59
View File
@@ -74,76 +74,73 @@ watch(props, async (): Promise<void> => {
//emits
const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
// initial itemsToShow value
// initial itemsToShow valueb
showInitialItems();
</script>
<template>
<div class="blur-container">
<div
class="grid grid-cols-4 grid-flow-row w-full px-6"
v-if="itemsToShow.length != 0"
>
<span class="text-xs text-gray-50 font-medium justify-self-center"
>Valor</span
>
<span class="text-xs text-gray-50 font-medium justify-self-center"
>Data</span
>
<span class="text-xs text-gray-50 font-medium justify-self-center">{{
props.isManageMode ? "Cancelar oferta" : "Tipo de transação"
}}</span>
<span class="text-xs text-gray-50 font-medium justify-self-center">{{
props.isManageMode ? "Retirar tokens" : "Checar transação"
}}</span>
</div>
<div
class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
class="w-full bg-white p-6 rounded-lg"
v-for="(item, index) in itemsToShow"
:key="item.blockNumber"
>
<span class="last-release-info">
{{
isValidDeposit(item)
? item.remaining
: getAmountFormatted(item.args?.amount)
}}
BRZ
</span>
<span class="last-release-info transaction-date"> 20 out 2022 </span>
<span class="last-release-info" v-if="!props.isManageMode">
{{ getEventName((item as Event).event) }}
</span>
<div
v-if="!props.isManageMode"
class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="openEtherscanUrl((item as Event)?.transactionHash)"
>
<span class="last-release-info">Etherscan</span>
<img alt="Redirect image" src="@/assets/redirect.svg" />
<div class="flex justify-between items-center">
<div>
<p class="text-sm leading-5 font-medium text-gray-600">
{{ getEventName((item as Event).event) }}
</p>
<p class="text-xl leading-7 font-semibold text-gray-900">
{{
isValidDeposit(item)
? item.remaining
: getAmountFormatted(item.args?.amount)
}}
BRZ
</p>
<p class="text-xs leading-4 font-medium text-gray-600">20/08/2022</p>
</div>
<div>
<div class="bg-emerald-300 rounded-lg text-center mb-2">
Finalizado
</div>
<div
v-if="!props.isManageMode"
class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="openEtherscanUrl((item as Event)?.transactionHash)"
>
<span class="last-release-info">Etherscan</span>
<img alt="Redirect image" src="@/assets/redirect.svg" />
</div>
</div>
</div>
<div class="pt-5" v-if="props.isManageMode">
<!-- <div class="py-2">
<p class="text-sm leading-5 font-medium">Valor do saque</p>
<p class="text-2xl leading-8 font-medium">0</p>
</div> -->
<div
v-if="props.isManageMode"
class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="emit('cancelDeposit', (item as ValidDeposit).depositID, index)"
>
<span class="last-release-info">Cancelar</span>
<img alt="Cancel image" src="@/assets/cancel.svg" />
</div>
<hr class="pb-3" />
<div class="flex justify-between items-center">
<div
class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="
emit('cancelDeposit', (item as ValidDeposit).depositID, index)
"
>
<span class="last-release-info">Cancelar</span>
</div>
<div
v-if="props.isManageMode"
class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="
emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
"
>
<span class="last-release-info">Retirar</span>
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
<div
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
@click="
emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
"
>
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
<span class="last-release-info">Sacar</span>
</div>
</div>
</div>
</div>
<div
@@ -186,7 +183,7 @@ p {
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container-row {
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
src/components/LoadingComponent.vue
+11 -9
View File
@@ -9,16 +9,18 @@ const props = defineProps({
<template>
<div class="page">
<div class="text-container">
<span class="text font-bold text-3xl max-w-[29rem]">{{
props.title ? props.title : "Confirme em sua carteira"
}}</span>
<span
class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] max-w-[20rem]"
>
{{ props.title ? props.title : "Confirme em sua carteira" }}
</span>
</div>
<div class="blur-container w-[26rem]">
<div class="blur-container sm:w-[26rem] w-[20rem]">
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
>
<div
class="flex flex-col text-center justify-center w-full items-center p-2 px-3 rounded-3xl min-w-fit gap-1"
class="flex flex-col text-center justify-center w-full items-center p-2 px-3 rounded-3xl lg:min-w-fit gap-1"
>
<img
alt="Polygon image"
@@ -26,7 +28,7 @@ const props = defineProps({
width="96"
height="48"
/>
<span class="text-black font-medium text-sm px-12 mt-4">
<span class="text-black font-medium text-sm lg:px-12 px-4 mt-4">
{{ $props.message }}
</span>
</div>
@@ -55,11 +57,11 @@ const props = defineProps({
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
@apply flex flex-col justify-center items-center sm:px-8 px-6 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
}
input[type="number"] {
src/components/QrCodeComponent.vue
+34 -8
View File
@@ -3,6 +3,7 @@ import { pix } from "../utils/QrCodePix";
import { ref } from "vue";
import { debounce } from "@/utils/debounce";
import CustomButton from "./CustomButton/CustomButton.vue";
import CustomModal from "./CustomModal.vue";
import api from "../services/index";
// props and store references
@@ -15,6 +16,7 @@ const qrCode = ref<string>("");
const qrCodePayload = ref<string>("");
const isPixValid = ref<boolean>(false);
const isCodeInputEmpty = ref<boolean>(true);
const showModal = ref<boolean>(true);
const e2eId = ref<string>("");
// Emits
@@ -71,17 +73,19 @@ const validatePix = async (): Promise<void> => {
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-2xl max-w-[30rem]">
<span
class="text font-extrabold lg:text-2xl text-xl sm:max-w-[30rem] max-w-[24rem]"
>
Utilize o QR Code ou copie o código para realizar o Pix
</span>
<span class="text font-medium text-md max-w-[28rem]">
<span class="text font-medium lg:text-md text-sm max-w-[28rem]">
Após realizar o Pix no banco de sua preferência, insira o código de
autenticação para enviar a transação para a rede.
</span>
</div>
<div class="blur-container max-w-[28rem] text-black">
<div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black">
<div
class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg break-normal"
class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
>
<img alt="Qr code image" :src="qrCode" class="w-48 h-48" />
<span class="text-center font-bold">Código pix</span>
@@ -95,9 +99,9 @@ const validatePix = async (): Promise<void> => {
src="@/assets/copyPix.svg"
width="16"
height="16"
class="pt-2 mb-5 cursor-pointer"
class="pt-2 lg:mb-5 cursor-pointer"
/>
<span class="text-xs text-start">
<span class="text-xs text-start lg-view">
<strong>ATENÇÃO!</strong> A transação só será processada após inserir
o código de autenticação. Caso contrário não conseguiremos comprovar o
seu depósito e não será possível transferir os tokens para sua
@@ -111,7 +115,7 @@ const validatePix = async (): Promise<void> => {
type="text"
placeholder="Digite o código do comprovante PIX"
@input="debounce(handleInputEvent, 500)($event)"
class="text-md w-full box-border p-2 h-6 mb-2 outline-none"
class="sm:text-md text-sm w-full box-border p-2 sm:h-6 h-2 mb-2 outline-none"
/>
<div class="custom-divide" v-if="!isCodeInputEmpty"></div>
<div
@@ -150,6 +154,10 @@ const validatePix = async (): Promise<void> => {
@button-clicked="emit('pixValidated', e2eId)"
/>
</div>
<CustomModal
v-if="showModal"
@close-modal="showModal = false"
/>
</div>
</template>
@@ -195,7 +203,7 @@ h2 {
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container {
@@ -210,4 +218,22 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>
src/components/SearchComponent.vue
+17 -10
View File
@@ -114,22 +114,25 @@ watch(networkName, (): void => {
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[29rem]"
>Adquira cripto com apenas um Pix</span
<span
class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
>
<span class="text font-medium text-base max-w-[28rem]"
Adquira cripto com apenas um Pix</span
>
<span class="text font-medium sm:text-base text-sm max-w-[28rem]"
>Digite um valor, confira a oferta, conecte sua carteira e receba os
tokens após realizar o Pix</span
>
</div>
<div class="blur-container">
<div class="backdrop-blur -z-10 w-full h-full"></div>
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
>
<div class="flex justify-between w-full items-center">
<div class="flex justify-between sm:w-full items-center">
<input
type="number"
class="border-none outline-none text-lg text-gray-900 w-fit"
class="border-none outline-none text-lg text-gray-900 w-3/4"
v-bind:class="{
'font-semibold': tokenValue != undefined,
'text-xl': tokenValue != undefined,
@@ -141,8 +144,12 @@ watch(networkName, (): void => {
<div
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
>
<img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
<span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
<img
alt="Token image"
class="sm:w-fit w-4"
src="@/assets/brz.svg"
/>
<span class="text-gray-900 sm:text-lg text-md w-fit" id="brz">BRZ</span>
</div>
</div>
@@ -215,11 +222,11 @@ watch(networkName, (): void => {
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10;
}
input[type="number"] {
src/components/SellerSteps/SellerSearchComponent.vue
+1 -1
View File
@@ -122,7 +122,7 @@ const handleInputEvent = (event: any): void => {
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container {
src/components/SellerSteps/SendNetwork.vue
+5 -8
View File
@@ -14,10 +14,10 @@ const props = defineProps({
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[50rem]"
<span class="text font-extrabold sm:text-5xl text-xl sm:max-w-[50rem] max-w-[20rem]"
>Envie sua oferta para a rede
</span>
<span class="text text-xl font-medium text-base max-w-[30rem]"
<span class="text text-xl font-normal sm:text-base text-xs sm:max-w-[30rem] max-w-[22rem]"
>Após a confirmação sua oferta estará disponível para outros usuários.
Caso deseje retirar a oferta, será necessário aguardar 24h para receber
os tokens de volta.</span
@@ -63,18 +63,15 @@ p {
}
.text-container {
@apply flex flex-col items-center justify-center gap-4;
@apply flex flex-col items-center justify-center sm:gap-4 gap-2;
}
.text {
@apply text-gray-800 text-center;
}
.blur-container-row {
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 sm:w-1/3;
}
.last-deposit-info {
src/components/SellerSteps/WantSellComponent.vue
+23 -12
View File
@@ -45,25 +45,26 @@ const handleButtonClick = async (
</script>
<template>
<div class="page">
<div class="page w-full">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[29rem]"
<span class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
>Venda cripto e receba em Pix</span
>
<span class="text font-medium text-base max-w-[28rem]"
<span class="text font-medium sm:text-base text-xs sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide"
>Digite sua oferta, informe a chave Pix, selecione a rede, aprove o
envio da transação e confirme sua oferta.</span
>
</div>
<div class="blur-container">
<div class="backdrop-blur -z-10 w-full h-full"></div>
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
>
<div class="flex justify-between w-full items-center">
<div class="flex justify-between items-center">
<input
type="number"
v-model="offer"
class="border-none outline-none text-lg text-gray-900 w-fit"
class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
v-bind:class="{
'font-semibold': offer != undefined,
'text-xl': offer != undefined,
@@ -75,8 +76,14 @@ const handleButtonClick = async (
<div
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
>
<img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
<span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
<img
alt="Token image"
class="sm:w-fit w-4"
src="@/assets/brz.svg"
/>
<span class="text-gray-900 w-fit" id="brz">
BRZ
</span>
</div>
</div>
@@ -92,13 +99,13 @@ const handleButtonClick = async (
</div>
</div>
<div
class="flex flex-col w-full bg-white px-10 py-8 rounded-lg border-y-10"
class="flex flex-col w-full bg-white sm:px-10 px-6 py-8 rounded-lg border-y-10"
>
<div class="flex justify-between w-full items-center">
<input
type="text"
v-model="pixKey"
class="border-none outline-none text-lg text-gray-900 w-fit"
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
placeholder="Digite a chave Pix"
/>
</div>
@@ -131,11 +138,11 @@ const handleButtonClick = async (
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 w-auto;
}
input[type="number"] {
@@ -146,4 +153,8 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input {
@apply sm:text-lg text-sm;
}
</style>
src/components/TopBar/TopBar.vue
+176 -18
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useEtherStore } from "@/store/ether";
import { ref } from "vue";
import { ref, onBeforeUnmount, onMounted } from "vue";
import { onClickOutside } from "@vueuse/core";
import { NetworkEnum } from "@/model/NetworkEnum";
import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
import ethereumImage from "@/assets/ethereum.svg";
@@ -17,6 +18,8 @@ const menuHoverToggle = ref<boolean>(false);
const currencyMenuOpenToggle = ref<boolean>(false);
const currencyMenuHoverToggle = ref<boolean>(false);
const walletAddressRef = ref<any>(null);
const currencyRef = ref<any>(null);
//Methods
const connectMetaMask = async (): Promise<void> => {
@@ -58,28 +61,63 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
return validImages[networkName];
};
onClickOutside(walletAddressRef, () => {
menuHoverToggle.value = false;
menuOpenToggle.value = false;
});
onClickOutside(currencyRef, () => {
currencyMenuOpenToggle.value = false;
currencyMenuHoverToggle.value = false;
});
</script>
<template>
<header>
<header class="z-20">
<RouterLink :to="'/'" class="default-button">
<img
alt="P2Pix logo"
class="logo"
class="logo lg-view"
src="@/assets/logo.svg"
width="75"
height="75"
/>
<img
alt="P2Pix logo"
class="logo sm-view w-10/12"
src="@/assets/logo2.svg"
width="40"
height="40"
/>
</RouterLink>
<div class="flex gap-4 items-center">
<RouterLink :to="'/faq'" class="default-button"> FAQ </RouterLink>
<RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
<div class="flex sm:gap-4 gap-2 items-center">
<RouterLink :to="'/faq'" class="default-button lg-view"> FAQ </RouterLink>
<RouterLink
:to="'/faq'"
v-if="!walletAddress"
class="default-button sm-view"
>
FAQ
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
class="default-button sm:whitespace-normal whitespace-nowrap lg-view"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
v-if="!walletAddress"
class="default-button sm:whitespace-normal whitespace-nowrap sm-view"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
<div class="flex flex-col" v-if="walletAddress">
<div
class="group top-bar-info cursor-pointer hover:bg-white"
ref="currencyRef"
class="group top-bar-info cursor-pointer hover:bg-white h-10"
@click="
[
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
@@ -101,7 +139,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
:src="getNetworkImage(etherStore.networkName)"
/>
<span
class="default-text group-hover:text-gray-900"
class="default-text group-hover:text-gray-900 lg-view"
:style="{
color: currencyMenuOpenToggle
? '#000000'
@@ -131,7 +169,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
</div>
<div
v-show="currencyMenuOpenToggle"
class="mt-10 pl-3 absolute w-full text-gray-900"
class="mt-10 pl-3 absolute w-full text-gray-900 lg-view"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10">
@@ -176,15 +214,24 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
<button
type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button"
class="border-amber-500 border-2 rounded default-button lg-view"
@click="connectMetaMask()"
>
Conectar carteira
</button>
<button
type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button sm-view"
@click="connectMetaMask()"
>
Conectar
</button>
<div v-if="walletAddress" class="account-info">
<div class="flex flex-col">
<div
class="top-bar-info cursor-pointer"
ref="walletAddressRef"
class="top-bar-info cursor-pointer h-10"
@click="
[
(menuOpenToggle = !menuOpenToggle),
@@ -203,7 +250,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
>
<img alt="Account image" src="@/assets/account.svg" />
<span
class="default-text text-sm"
class="default-text"
:style="{
color: menuOpenToggle
? '#000000'
@@ -215,7 +262,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
{{ formatWalletAddress() }}
</span>
<img
class="text-gray-900"
class="text-gray-900 lg-view"
v-if="!menuHoverToggle && !menuOpenToggle"
alt="Chevron Down"
src="@/assets/chevronDown.svg"
@@ -233,7 +280,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
</div>
<div
v-show="menuOpenToggle"
class="mt-10 absolute w-full text-gray-900"
class="mt-10 absolute w-full text-gray-900 lg-view"
>
<div class="pl-4 mt-2">
<div class="bg-white rounded-md z-10">
@@ -264,6 +311,93 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
</div>
</div>
</div>
<div
v-show="menuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 sm-view"
>
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
<div class="menu-button" @click="closeMenu()">
<RouterLink
:to="sellerView ? '/' : '/seller'"
class="redirect_button mt-2"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button" @click="closeMenu()">
<RouterLink to="/transaction_history" class="redirect_button">
Histórico de transações
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button" @click="closeMenu()">
<RouterLink to="/manage_bids" class="redirect_button">
Gerenciar Ofertas
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button" @click="disconnectUser">
<RouterLink to="/" class="redirect_button">
Desconectar
</RouterLink>
</div>
<div class="w-full flex justify-center pb-20">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
<div
v-show="currencyMenuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 sm-view"
>
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
<div
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
@click="networkChange(NetworkEnum.ethereum)"
>
<img
alt="Ethereum image"
width="20"
height="20"
src="@/assets/ethereum.svg"
/>
<span class="text-gray-900 py-4 text-end font-bold text-sm">
Ethereum
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
@click="networkChange(NetworkEnum.polygon)"
>
<img
alt="Polygon image"
width="20"
height="20"
src="@/assets/polygon.svg"
/>
<span class="text-gray-900 py-4 text-end font-bold text-sm">
Polygon
</span>
</div>
<div class="w-full flex justify-center pb-12">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
</header>
</template>
@@ -273,7 +407,7 @@ header {
}
.default-button {
@apply px-4 py-2 rounded text-gray-50 font-semibold text-base hover:bg-transparent;
@apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
}
.account-info {
@@ -285,18 +419,42 @@ header {
}
.top-bar-info {
@apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded;
@apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center;
}
.redirect_button {
@apply py-4 text-gray-900 font-semibold text-xs w-full;
@apply py-5 text-gray-900 sm:font-semibold font-bold sm:text-xs text-sm w-full;
}
.menu-button {
@apply flex text-center justify-center hover:bg-gray-200;
@apply flex sm:text-center sm:justify-center hover:bg-gray-200 ml-8 sm:ml-0;
}
a:hover {
@apply bg-gray-200 rounded;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
.mobile-menu {
margin-top: 1400px;
bottom: 0px;
height: auto;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>
src/model/ValidDeposit.ts
+1
View File
@@ -7,4 +7,5 @@ export type ValidDeposit = {
seller: string;
pixKey: string;
pixTarget?: string;
open?: boolean;
};
src/views/FaqView.vue
+6 -10
View File
@@ -96,7 +96,7 @@ const openItem = (index: number) => {
<div class="flex justify-between w-10/12 mt-20">
<div>
<h1 class="text-3xl text-gray-800 font-bold">Sumário</h1>
<h1 class="text-3xl text-white font-bold">Sumário</h1>
<h3
:class="index == selectedSection ? 'selected-sumario' : 'sumario'"
v-for="(f, index) in faq"
@@ -125,10 +125,10 @@ const openItem = (index: number) => {
class="mr-3"
v-if="item.isOpen"
/>
<h4>{{ item.title }}</h4>
<h4 class="text-white">{{ item.title }}</h4>
</div>
<div
style="padding-top: 24px"
style="padding-top: 24px; color: white"
v-if="item.isOpen"
v-html="item.content"
></div>
@@ -159,12 +159,8 @@ const openItem = (index: number) => {
margin: 24px 0;
}
p,
h2,
h3,
h4 {
@apply text-gray-800 text-xl;
color: #1f2937;
h3 {
@apply text-white;
}
h2,
@@ -177,7 +173,7 @@ h4 {
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container-row {
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
src/views/TransactionHistoryView.vue
+1 -1
View File
@@ -58,6 +58,6 @@ watch(networkName, async () => {
}
.header {
@apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
@apply text-3xl text-white leading-9 font-bold justify-center flex;
}
</style>