update icon styling

content/modals/US/long_term_debit-flip.json

@@ -37,9 +37,9 @@
                 "Get money back in your PayPal balance and keep any rewards from your original purchase."
             ],
             "instructionsIcons": {
-                "monogram-logo-icon": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20.636 8.76937C20.1326 8.12244 19.4843 7.60285 18.7432 7.2525C18.6796 5.90459 18.0994 4.63293 17.1231 3.70144C16.1467 2.76996 14.8492 2.25019 13.4998 2.25H7.87477C7.54028 2.25005 7.2154 2.3619 6.95177 2.56778C6.68814 2.77365 6.50089 3.06174 6.41977 3.38625L3.04477 16.8862C2.9895 17.1074 2.98535 17.3382 3.03263 17.5612C3.07991 17.7841 3.17738 17.9934 3.31764 18.173C3.4579 18.3527 3.63726 18.498 3.84209 18.598C4.04692 18.698 4.27185 18.75 4.49977 18.75H7.0779L6.79665 19.8862C6.74141 20.1072 6.73723 20.3379 6.7844 20.5607C6.83158 20.7835 6.92889 20.9927 7.06894 21.1723C7.20899 21.3519 7.3881 21.4973 7.5927 21.5974C7.7973 21.6975 8.022 21.7497 8.24977 21.75H11.2029C11.5371 21.7495 11.8615 21.6375 12.1248 21.4316C12.388 21.2258 12.575 20.9379 12.656 20.6138L13.4998 17.25H16.4998C17.4834 17.25 18.4472 16.9736 19.2814 16.4524C20.1155 15.9313 20.7865 15.1863 21.2179 14.3023C21.6492 13.4183 21.8235 12.4309 21.721 11.4527C21.6184 10.4745 21.2432 9.54469 20.6379 8.76937H20.636ZM4.49977 17.25L7.87477 3.75H13.4998C14.3724 3.74975 15.2177 4.05381 15.8902 4.60979C16.5627 5.16577 17.0203 5.93887 17.1841 6.79594C16.9572 6.76598 16.7286 6.75064 16.4998 6.75H11.2498C10.9151 6.74984 10.59 6.8616 10.3262 7.06749C10.0624 7.27338 9.87499 7.56159 9.79384 7.88625L7.45477 17.25H4.49977ZM17.156 8.30813C17.1485 8.34188 17.142 8.37562 17.1335 8.40937C16.9318 9.2205 16.4644 9.94081 15.8059 10.4556C15.1474 10.9704 14.3356 11.25 13.4998 11.25H10.4998L11.2498 8.25H16.4998C16.7198 8.25012 16.9394 8.26957 17.156 8.30813ZM20.1335 12.9094C19.9318 13.7205 19.4644 14.4408 18.8059 14.9556C18.1474 15.4704 17.3356 15.75 16.4998 15.75H13.4998C13.1653 15.7501 12.8404 15.8619 12.5768 16.0678C12.3131 16.2737 12.1259 16.5617 12.0448 16.8862L11.201 20.25H8.24977L10.1248 12.75H13.4998C14.653 12.7503 15.7741 12.3703 16.6894 11.6687C17.6046 10.9672 18.2629 9.98336 18.5623 8.86969C18.9009 9.09406 19.201 9.37171 19.451 9.69187C19.8038 10.14 20.049 10.6631 20.1676 11.221C20.2863 11.7788 20.2753 12.3565 20.1354 12.9094H20.1335Z\" fill=\"#003087\"/></svg>",
-                "pay-later-icon": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.75 2.27963C12.5013 2.26021 12.2512 2.25027 12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96452 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46927 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7497 11.7453 21.7395 11.4917 21.7196 11.2396H20.2143C20.2147 11.243 20.215 11.2465 20.2153 11.25H17.9513C17.7829 9.92936 17.1808 8.70201 16.2394 7.76062C15.298 6.81923 14.0706 6.2171 12.75 6.04875L12.75 2.27963ZM16.5 12C16.5 14.4853 14.4853 16.5 12 16.5C9.51472 16.5 7.5 14.4853 7.5 12C7.5 9.51472 9.51472 7.5 12 7.5C14.4853 7.5 16.5 9.51472 16.5 12ZM11.25 6.04875V3.78469C9.3301 3.96244 7.53283 4.80606 6.16945 6.16944C4.80606 7.53282 3.96244 9.3301 3.78469 11.25H6.04875C6.2171 9.92936 6.81923 8.70201 7.76062 7.76062C8.70201 6.81923 9.92936 6.2171 11.25 6.04875ZM6.04875 12.75H3.78469C3.96244 14.6699 4.80606 16.4672 6.16945 17.8306C7.53283 19.1939 9.3301 20.0376 11.25 20.2153V17.9513C9.92936 17.7829 8.70201 17.1808 7.76062 16.2394C6.81923 15.298 6.2171 14.0706 6.04875 12.75ZM12.75 17.9513V20.2153C14.6699 20.0376 16.4672 19.1939 17.8306 17.8306C19.1939 16.4672 20.0376 14.6699 20.2153 12.75H17.9513C17.7829 14.0706 17.1808 15.298 16.2394 16.2394C15.298 17.1808 14.0706 17.7829 12.75 17.9513Z\" fill=\"#003087\"/></svg>",
-                "refund-icon": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.30668 5.03682C8.34442 5.12787 8.39974 5.21058 8.46948 5.28024C8.53913 5.34997 8.62185 5.40529 8.7129 5.44303C8.80394 5.48078 8.90154 5.5002 9.0001 5.5002C9.09866 5.5002 9.19626 5.48078 9.28731 5.44303C9.37835 5.40529 9.46107 5.34997 9.53073 5.28024L11.2501 3.55993V7.24162C11.25 7.24575 11.25 7.24988 11.25 7.25403C11.25 7.66615 11.5841 8.00024 11.9962 8.00024H16.0721C16.4843 8.00024 16.8184 7.66615 16.8184 7.25403C16.8184 6.8419 16.4843 6.50781 16.0721 6.50781H12.7501V3.55993L14.4695 5.28024C14.5392 5.34992 14.6219 5.4052 14.7129 5.44291C14.804 5.48062 14.9016 5.50003 15.0001 5.50003C15.0986 5.50003 15.1962 5.48062 15.2873 5.44291C15.3783 5.4052 15.461 5.34992 15.5307 5.28024C15.6004 5.21056 15.6557 5.12783 15.6934 5.03679C15.7311 4.94574 15.7505 4.84816 15.7505 4.74961C15.7505 4.65107 15.7311 4.55349 15.6934 4.46244C15.6557 4.3714 15.6004 4.28867 15.5307 4.21899L12.5307 1.21899C12.4611 1.14926 12.3784 1.09394 12.2873 1.05619C12.1963 1.01845 12.0987 0.999023 12.0001 0.999023C11.9015 0.999023 11.8039 1.01845 11.7129 1.05619C11.6218 1.09394 11.5391 1.14926 11.4695 1.21899L8.46948 4.21899C8.39974 4.28864 8.34442 4.37136 8.30668 4.46241C8.26894 4.55346 8.24951 4.65105 8.24951 4.74961C8.24951 4.84818 8.26894 4.94577 8.30668 5.03682Z\" fill=\"#003087\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.91661 12.9401C10.5333 12.528 11.2583 12.3081 12 12.3081C12.9946 12.3081 13.9484 12.7032 14.6517 13.4065C15.3549 14.1097 15.75 15.0635 15.75 16.0581C15.75 16.7998 15.5301 17.5248 15.118 18.1415C14.706 18.7582 14.1203 19.2388 13.4351 19.5227C12.7498 19.8065 11.9958 19.8807 11.2684 19.736C10.541 19.5914 9.8728 19.2342 9.34835 18.7098C8.8239 18.1853 8.46675 17.5171 8.32205 16.7897C8.17736 16.0623 8.25162 15.3083 8.53545 14.623C8.81928 13.9378 9.29993 13.3521 9.91661 12.9401ZM10.75 17.9289C11.12 18.1761 11.555 18.3081 12 18.3081C12.5967 18.3081 13.169 18.0711 13.591 17.6491C14.0129 17.2271 14.25 16.6548 14.25 16.0581C14.25 15.6131 14.118 15.1781 13.8708 14.8081C13.6236 14.4381 13.2722 14.1497 12.861 13.9794C12.4499 13.8091 11.9975 13.7645 11.561 13.8513C11.1246 13.9382 10.7237 14.1524 10.409 14.4671C10.0943 14.7818 9.88005 15.1827 9.79323 15.6192C9.70642 16.0556 9.75097 16.508 9.92127 16.9191C10.0916 17.3303 10.38 17.6817 10.75 17.9289Z\" fill=\"#003087\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.5 9.30811H1.5C1.30109 9.30811 1.11032 9.38712 0.96967 9.52778C0.829018 9.66843 0.75 9.85919 0.75 10.0581V22.0581C0.75 22.257 0.829018 22.4478 0.96967 22.5884C1.11032 22.7291 1.30109 22.8081 1.5 22.8081H22.5C22.6989 22.8081 22.8897 22.7291 23.0303 22.5884C23.171 22.4478 23.25 22.257 23.25 22.0581V10.0581C23.25 9.85919 23.171 9.66843 23.0303 9.52778C22.8897 9.38712 22.6989 9.30811 22.5 9.30811ZM18.1547 21.3081H5.84531C5.5935 20.4565 5.13263 19.6814 4.50467 19.0534C3.87671 18.4255 3.10162 17.9646 2.25 17.7128V14.4034C3.10162 14.1516 3.87671 13.6907 4.50467 13.0628C5.13263 12.4348 5.5935 11.6597 5.84531 10.8081H18.1547C18.4065 11.6597 18.8674 12.4348 19.4953 13.0628C20.1233 13.6907 20.8984 14.1516 21.75 14.4034V17.7128C20.8984 17.9646 20.1233 18.4255 19.4953 19.0534C18.8674 19.6814 18.4065 20.4565 18.1547 21.3081ZM21.75 12.8115C20.8504 12.4247 20.1334 11.7077 19.7466 10.8081H21.75V12.8115ZM4.25344 10.8081C3.86662 11.7077 3.14959 12.4247 2.25 12.8115V10.8081H4.25344ZM2.25 19.3047C3.14959 19.6915 3.86662 20.4085 4.25344 21.3081H2.25V19.3047ZM19.7466 21.3081C20.1334 20.4085 20.8504 19.6915 21.75 19.3047V21.3081H19.7466Z\" fill=\"#003087\"/></svg>"
+                "monogram-logo-icon": "<svg role=\"img\" aria-label=\"PayPal Monogram Logo\" width=\"24\" height=\"24\" viewBox=\"0 0 19 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <title>PayPal Monogram Logo</title> <path d=\"M17.636 6.76937C17.1326 6.12244 16.4843 5.60285 15.7432 5.2525C15.6796 3.90459 15.0994 2.63293 14.1231 1.70144C13.1467 0.769959 11.8492 0.250186 10.4998 0.25H4.87477C4.54028 0.250051 4.2154 0.361903 3.95177 0.567779C3.68814 0.773655 3.50089 1.06174 3.41977 1.38625L0.044773 14.8862C-0.0104995 15.1074 -0.0146531 15.3382 0.0326276 15.5612C0.0799083 15.7841 0.17738 15.9934 0.317639 16.173C0.457898 16.3527 0.637256 16.498 0.84209 16.598C1.04692 16.698 1.27185 16.75 1.49977 16.75H4.0779L3.79665 17.8862C3.74141 18.1072 3.73723 18.3379 3.7844 18.5607C3.83158 18.7835 3.92889 18.9927 4.06894 19.1723C4.20899 19.3519 4.3881 19.4973 4.5927 19.5974C4.7973 19.6975 5.022 19.7497 5.24977 19.75H8.2029C8.53707 19.7495 8.86152 19.6375 9.12476 19.4316C9.38801 19.2258 9.57499 18.9379 9.65602 18.6138L10.4998 15.25H13.4998C14.4834 15.25 15.4472 14.9736 16.2814 14.4524C17.1155 13.9313 17.7865 13.1863 18.2179 12.3023C18.6492 11.4183 18.8235 10.4309 18.721 9.45269C18.6184 8.47445 18.2432 7.54469 17.6379 6.76937H17.636ZM1.49977 15.25L4.87477 1.75H10.4998C11.3724 1.74975 12.2177 2.05381 12.8902 2.60979C13.5627 3.16577 14.0203 3.93887 14.1841 4.79594C13.9572 4.76598 13.7286 4.75064 13.4998 4.75H8.24977C7.91512 4.74984 7.59002 4.8616 7.3262 5.06749C7.06238 5.27338 6.87499 5.56159 6.79384 5.88625L4.45477 15.25H1.49977ZM14.156 6.30813C14.1485 6.34188 14.142 6.37562 14.1335 6.40937C13.9318 7.2205 13.4644 7.94081 12.8059 8.45559C12.1474 8.97037 11.3356 9.25002 10.4998 9.25H7.49977L8.24977 6.25H13.4998C13.7198 6.25012 13.9394 6.26957 14.156 6.30813ZM17.1335 10.9094C16.9318 11.7205 16.4644 12.4408 15.8059 12.9556C15.1474 13.4704 14.3356 13.75 13.4998 13.75H10.4998C10.1653 13.7501 9.8404 13.8619 9.57677 14.0678C9.31314 14.2737 9.12589 14.5617 9.04477 14.8862L8.20102 18.25H5.24977L7.12477 10.75H10.4998C11.653 10.7503 12.7741 10.3703 13.6894 9.66874C14.6046 8.9672 15.2629 7.98336 15.5623 6.86969C15.9009 7.09406 16.201 7.37171 16.451 7.69187C16.8038 8.13999 17.049 8.66314 17.1676 9.22098C17.2863 9.77882 17.2753 10.3565 17.1354 10.9094H17.1335Z\" fill=\"#003087\"/></svg>",
+                "pay-later-icon": "<svg role=\"img\" aria-label=\"Pay Later Icon\" width=\"24\" height=\"24\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <title>Pay Later Icon</title> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.75 0.27963C10.5013 0.260211 10.2512 0.250265 10 0.25C8.07164 0.25 6.18657 0.821828 4.58319 1.89317C2.97982 2.96452 1.73013 4.48726 0.992179 6.26884C0.254225 8.05042 0.061142 10.0108 0.437348 11.9021C0.813554 13.7934 1.74215 15.5307 3.10571 16.8943C4.46927 18.2579 6.20656 19.1865 8.09787 19.5627C9.98919 19.9389 11.9496 19.7458 13.7312 19.0078C15.5127 18.2699 17.0355 17.0202 18.1068 15.4168C19.1782 13.8134 19.75 11.9284 19.75 10C19.7497 9.74531 19.7395 9.49166 19.7196 9.23957H18.2143C18.2147 9.24304 18.215 9.24652 18.2153 9.25H15.9513C15.7829 7.92936 15.1808 6.70201 14.2394 5.76062C13.298 4.81923 12.0706 4.2171 10.75 4.04875L10.75 0.27963ZM14.5 10C14.5 12.4853 12.4853 14.5 10 14.5C7.51472 14.5 5.5 12.4853 5.5 10C5.5 7.51472 7.51472 5.5 10 5.5C12.4853 5.5 14.5 7.51472 14.5 10ZM9.25 4.04875V1.78469C7.3301 1.96244 5.53283 2.80606 4.16945 4.16944C2.80606 5.53282 1.96244 7.3301 1.78469 9.25H4.04875C4.2171 7.92936 4.81923 6.70201 5.76062 5.76062C6.70201 4.81923 7.92936 4.2171 9.25 4.04875ZM4.04875 10.75H1.78469C1.96244 12.6699 2.80606 14.4672 4.16945 15.8306C5.53283 17.1939 7.3301 18.0376 9.25 18.2153V15.9513C7.92936 15.7829 6.70201 15.1808 5.76062 14.2394C4.81923 13.298 4.2171 12.0706 4.04875 10.75ZM10.75 15.9513V18.2153C12.6699 18.0376 14.4672 17.1939 15.8306 15.8306C17.1939 14.4672 18.0376 12.6699 18.2153 10.75H15.9513C15.7829 12.0706 15.1808 13.298 14.2394 14.2394C13.298 15.1808 12.0706 15.7829 10.75 15.9513Z\" fill=\"#003087\"/></svg>",
+                "refund-icon": "<svg role=\"img\" aria-label=\"Refund Icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <title>Refund Icon</title>  <path d=\"M8.30668 4.03682C8.34442 4.12787 8.39974 4.21058 8.46948 4.28024C8.53913 4.34997 8.62185 4.40529 8.7129 4.44303C8.80394 4.48078 8.90154 4.5002 9.0001 4.5002C9.09866 4.5002 9.19626 4.48078 9.28731 4.44303C9.37835 4.40529 9.46107 4.34997 9.53073 4.28024L11.2501 2.55993V6.24162C11.25 6.24575 11.25 6.24988 11.25 6.25403C11.25 6.66615 11.5841 7.00024 11.9962 7.00024H16.0721C16.4843 7.00024 16.8184 6.66615 16.8184 6.25403C16.8184 5.8419 16.4843 5.50781 16.0721 5.50781H12.7501V2.55993L14.4695 4.28024C14.5392 4.34992 14.6219 4.4052 14.7129 4.44291C14.804 4.48062 14.9016 4.50003 15.0001 4.50003C15.0986 4.50003 15.1962 4.48062 15.2873 4.44291C15.3783 4.4052 15.461 4.34992 15.5307 4.28024C15.6004 4.21056 15.6557 4.12783 15.6934 4.03679C15.7311 3.94574 15.7505 3.84816 15.7505 3.74961C15.7505 3.65107 15.7311 3.55349 15.6934 3.46244C15.6557 3.3714 15.6004 3.28867 15.5307 3.21899L12.5307 0.218988C12.4611 0.149256 12.3784 0.0939368 12.2873 0.0561936C12.1963 0.0184504 12.0987 -0.000976562 12.0001 -0.000976562C11.9015 -0.000976562 11.8039 0.0184504 11.7129 0.0561936C11.6218 0.0939368 11.5391 0.149256 11.4695 0.218988L8.46948 3.21899C8.39974 3.28864 8.34442 3.37136 8.30668 3.46241C8.26894 3.55346 8.24951 3.65105 8.24951 3.74961C8.24951 3.84818 8.26894 3.94577 8.30668 4.03682Z\" fill=\"#003087\"/> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.91661 11.9401C10.5333 11.528 11.2583 11.3081 12 11.3081C12.9946 11.3081 13.9484 11.7032 14.6517 12.4065C15.3549 13.1097 15.75 14.0635 15.75 15.0581C15.75 15.7998 15.5301 16.5248 15.118 17.1415C14.706 17.7582 14.1203 18.2388 13.4351 18.5227C12.7498 18.8065 11.9958 18.8807 11.2684 18.736C10.541 18.5914 9.8728 18.2342 9.34835 17.7098C8.8239 17.1853 8.46675 16.5171 8.32205 15.7897C8.17736 15.0623 8.25162 14.3083 8.53545 13.623C8.81928 12.9378 9.29993 12.3521 9.91661 11.9401ZM10.75 16.9289C11.12 17.1761 11.555 17.3081 12 17.3081C12.5967 17.3081 13.169 17.0711 13.591 16.6491C14.0129 16.2271 14.25 15.6548 14.25 15.0581C14.25 14.6131 14.118 14.1781 13.8708 13.8081C13.6236 13.4381 13.2722 13.1497 12.861 12.9794C12.4499 12.8091 11.9975 12.7645 11.561 12.8513C11.1246 12.9382 10.7237 13.1524 10.409 13.4671C10.0943 13.7818 9.88005 14.1827 9.79323 14.6192C9.70642 15.0556 9.75097 15.508 9.92127 15.9191C10.0916 16.3303 10.38 16.6817 10.75 16.9289Z\" fill=\"#003087\"/> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.5 8.30811H1.5C1.30109 8.30811 1.11032 8.38712 0.96967 8.52778C0.829018 8.66843 0.75 8.85919 0.75 9.05811V21.0581C0.75 21.257 0.829018 21.4478 0.96967 21.5884C1.11032 21.7291 1.30109 21.8081 1.5 21.8081H22.5C22.6989 21.8081 22.8897 21.7291 23.0303 21.5884C23.171 21.4478 23.25 21.257 23.25 21.0581V9.05811C23.25 8.85919 23.171 8.66843 23.0303 8.52778C22.8897 8.38712 22.6989 8.30811 22.5 8.30811ZM18.1547 20.3081H5.84531C5.5935 19.4565 5.13263 18.6814 4.50467 18.0534C3.87671 17.4255 3.10162 16.9646 2.25 16.7128V13.4034C3.10162 13.1516 3.87671 12.6907 4.50467 12.0628C5.13263 11.4348 5.5935 10.6597 5.84531 9.80811H18.1547C18.4065 10.6597 18.8674 11.4348 19.4953 12.0628C20.1233 12.6907 20.8984 13.1516 21.75 13.4034V16.7128C20.8984 16.9646 20.1233 17.4255 19.4953 18.0534C18.8674 18.6814 18.4065 19.4565 18.1547 20.3081ZM21.75 11.8115C20.8504 11.4247 20.1334 10.7077 19.7466 9.80811H21.75V11.8115ZM4.25344 9.80811C3.86662 10.7077 3.14959 11.4247 2.25 11.8115V9.80811H4.25344ZM2.25 18.3047C3.14959 18.6915 3.86662 19.4085 4.25344 20.3081H2.25V18.3047ZM19.7466 20.3081C20.1334 19.4085 20.8504 18.6915 21.75 18.3047V20.3081H19.7466Z\" fill=\"#003087\"/></svg>"
             }
         },
         "disclosure": [

src/components/modal/v2/parts/Instructions.jsx

@@ -23,8 +23,11 @@ const Instructions = ({
     };
     const renderIcons = icons => {
         return (
-            <div className="instructions__bullet">
-                <span dangerouslySetInnerHTML={{ __html: icons }} />
+            <div className="instructions__icon">
+                <span
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML={{ __html: icons }}
+                />
             </div>
         );
     };

src/components/modal/v2/styles/components/_instructions.scss

@@ -142,6 +142,11 @@
         }
     }
 
+    .instructions__icon {
+        margin-right: 0.7rem;
+        margin-top: 5px;
+    }
+
     @include lander {
         @include tablet {
             margin: 0px;