2FAS/2fas-browser-extension
1
0
Fork 0
mirror of https://github.com/twofas/2fas-browser-extension.git synced 2024-11-22 18:19:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

#1163 Social icons improvements

Browse Source
This commit is contained in:
Grzegorz Zając 2023-06-21 08:29:21 +02:00
parent 71e51df58b
commit 52f79d560c
2 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/optionsPage/optionsPage.html
View File

@ -90,23 +90,23 @@
<div class="twofas-options-page-menu-social">
<ul>
<li>
<a href='https://twitter.com/2FAS_com' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-twitter" width="800" height="800" viewBox="0 -4 48 48" xmlns="http://www.w3.org/2000/svg"><title>Twitter-color</title><desc>Created with Sketch.</desc><path d="M48 4.735c-1.764.803-3.663 1.346-5.655 1.589 2.034-1.248 3.595-3.227 4.33-5.585-1.905 1.156-4.009 1.996-6.257 2.447-1.792-1.962-4.353-3.187-7.187-3.187-5.435 0-9.844 4.521-9.844 10.098 0 .792.085 1.56.254 2.3-8.185-.422-15.439-4.438-20.299-10.554-.848 1.497-1.333 3.233-1.333 5.082 0 3.502 1.738 6.593 4.381 8.404-1.612-.049-3.133-.508-4.463-1.26v.124c0 4.894 3.395 8.977 7.903 9.901-.825.237-1.696.355-2.595.355-.634 0-1.254-.061-1.854-.179 1.254 4.01 4.888 6.931 9.199 7.009-3.37 2.71-7.618 4.325-12.23 4.325-.795 0-1.581-.046-2.35-.139 4.359 2.86 9.537 4.533 15.096 4.533 18.116 0 28.019-15.385 28.019-28.73 0-.439-.008-.878-.025-1.309 1.924-1.424 3.595-3.201 4.911-5.226" fill="#00AAEC"/></svg>
<a href='https://discord.gg/q4cP6qh2g5' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-discord" viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M216.856 16.597c-16.571-7.753-34.29-13.388-52.815-16.597-2.275 4.113-4.933 9.645-6.765 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.401-4.55-9.933-6.846-14.046-18.545 3.208-36.284 8.864-52.855 16.638-33.425 50.509-42.485 99.763-37.955 148.318 22.169 16.555 43.653 26.612 64.775 33.193 5.215-7.177 9.866-14.807 13.873-22.848-7.631-2.9-14.94-6.478-21.846-10.632 1.832-1.357 3.624-2.777 5.356-4.237 42.123 19.702 87.89 19.702 129.51 0 1.752 1.46 3.544 2.879 5.356 4.237-6.927 4.175-14.256 7.753-21.887 10.653 4.007 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.089-38.056-148.359zm-131.382 118.498c-12.645 0-23.015-11.805-23.015-26.18s10.148-26.2 23.015-26.2 23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.015-11.805-23.015-26.18s10.148-26.2 23.015-26.2c12.866 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z" /></svg>
</a>
</li>
<li>
<a href='https://www.youtube.com/@2fas' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-youtube" width="800" height="800" viewBox="0 -38 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M250.346 28.075c-2.988-11.043-11.614-19.669-22.657-22.657-19.866-5.418-99.821-5.418-99.821-5.418s-79.955.164-99.821 5.582c-11.043 2.988-19.669 11.614-22.657 22.657-6.009 35.299-8.34 89.084.164 122.97 2.988 11.043 11.614 19.669 22.657 22.657 19.866 5.418 99.821 5.418 99.821 5.418s79.955 0 99.821-5.418c11.043-2.988 19.669-11.614 22.657-22.657 6.337-35.348 8.291-89.1-.164-123.135z" fill="#f00"/><path fill="#fff" d="M102.421 128.06l66.329-38.418-66.329-38.418z"/></svg>
<svg class="social-youtube" viewBox="0 -38 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M250.346 28.075c-2.988-11.043-11.614-19.669-22.657-22.657-19.866-5.418-99.821-5.418-99.821-5.418s-79.955.164-99.821 5.582c-11.043 2.988-19.669 11.614-22.657 22.657-6.009 35.299-8.34 89.084.164 122.97 2.988 11.043 11.614 19.669 22.657 22.657 19.866 5.418 99.821 5.418 99.821 5.418s79.955 0 99.821-5.418c11.043-2.988 19.669-11.614 22.657-22.657 6.337-35.348 8.291-89.1-.164-123.135z" fill="#f00"/><path fill="#fff" d="M102.421 128.06l66.329-38.418-66.329-38.418z"/></svg>
</a>
</li>
<li>
<a href='https://discord.gg/q4cP6qh2g5' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-discord" width="800" height="800" viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M216.856 16.597c-16.571-7.753-34.29-13.388-52.815-16.597-2.275 4.113-4.933 9.645-6.765 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.401-4.55-9.933-6.846-14.046-18.545 3.208-36.284 8.864-52.855 16.638-33.425 50.509-42.485 99.763-37.955 148.318 22.169 16.555 43.653 26.612 64.775 33.193 5.215-7.177 9.866-14.807 13.873-22.848-7.631-2.9-14.94-6.478-21.846-10.632 1.832-1.357 3.624-2.777 5.356-4.237 42.123 19.702 87.89 19.702 129.51 0 1.752 1.46 3.544 2.879 5.356 4.237-6.927 4.175-14.256 7.753-21.887 10.653 4.007 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.089-38.056-148.359zm-131.382 118.498c-12.645 0-23.015-11.805-23.015-26.18s10.148-26.2 23.015-26.2 23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.015-11.805-23.015-26.18s10.148-26.2 23.015-26.2c12.866 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z" fill="#5865F2"/></svg>
<a href='https://twitter.com/2FAS_com' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-twitter" viewBox="0 -4 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M48 4.735c-1.764.803-3.663 1.346-5.655 1.589 2.034-1.248 3.595-3.227 4.33-5.585-1.905 1.156-4.009 1.996-6.257 2.447-1.792-1.962-4.353-3.187-7.187-3.187-5.435 0-9.844 4.521-9.844 10.098 0 .792.085 1.56.254 2.3-8.185-.422-15.439-4.438-20.299-10.554-.848 1.497-1.333 3.233-1.333 5.082 0 3.502 1.738 6.593 4.381 8.404-1.612-.049-3.133-.508-4.463-1.26v.124c0 4.894 3.395 8.977 7.903 9.901-.825.237-1.696.355-2.595.355-.634 0-1.254-.061-1.854-.179 1.254 4.01 4.888 6.931 9.199 7.009-3.37 2.71-7.618 4.325-12.23 4.325-.795 0-1.581-.046-2.35-.139 4.359 2.86 9.537 4.533 15.096 4.533 18.116 0 28.019-15.385 28.019-28.73 0-.439-.008-.878-.025-1.309 1.924-1.424 3.595-3.201 4.911-5.226" /></svg>
</a>
</li>
<li>
<a href='https://github.com/twofas' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-github" width="66" height="64" viewBox="0 0 66 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.81 0C14.681 0 0 14.682 0 32.81c0 14.518 9.392 26.78 22.433 31.127 1.64.287 2.256-.697 2.256-1.558 0-.78-.04-3.363-.04-6.11-8.244 1.517-10.377-2.01-11.033-3.856-.37-.943-1.969-3.855-3.363-4.634-1.148-.616-2.789-2.133-.041-2.174 2.584-.04 4.43 2.379 5.044 3.363 2.953 4.962 7.67 3.568 9.556 2.707.287-2.133 1.148-3.568 2.092-4.389-7.3-.82-14.929-3.65-14.929-16.2 0-3.567 1.272-6.52 3.363-8.817-.328-.82-1.476-4.183.329-8.694 0 0 2.747-.861 9.022 3.363 2.625-.738 5.414-1.107 8.202-1.107 2.79 0 5.578.369 8.203 1.107 6.275-4.265 9.022-3.363 9.022-3.363 1.805 4.511.657 7.874.328 8.694 2.092 2.297 3.363 5.209 3.363 8.818 0 12.59-7.669 15.38-14.969 16.2 1.19 1.025 2.215 2.993 2.215 6.07 0 4.388-.041 7.915-.041 9.022 0 .861.615 1.886 2.255 1.558C56.227 59.59 65.62 47.287 65.62 32.81 65.619 14.682 50.937 0 32.809 0z" /></svg>
<svg class="social-github" viewBox="0 0 66 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.81 0C14.681 0 0 14.682 0 32.81c0 14.518 9.392 26.78 22.433 31.127 1.64.287 2.256-.697 2.256-1.558 0-.78-.04-3.363-.04-6.11-8.244 1.517-10.377-2.01-11.033-3.856-.37-.943-1.969-3.855-3.363-4.634-1.148-.616-2.789-2.133-.041-2.174 2.584-.04 4.43 2.379 5.044 3.363 2.953 4.962 7.67 3.568 9.556 2.707.287-2.133 1.148-3.568 2.092-4.389-7.3-.82-14.929-3.65-14.929-16.2 0-3.567 1.272-6.52 3.363-8.817-.328-.82-1.476-4.183.329-8.694 0 0 2.747-.861 9.022 3.363 2.625-.738 5.414-1.107 8.202-1.107 2.79 0 5.578.369 8.203 1.107 6.275-4.265 9.022-3.363 9.022-3.363 1.805 4.511.657 7.874.328 8.694 2.092 2.297 3.363 5.209 3.363 8.818 0 12.59-7.669 15.38-14.969 16.2 1.19 1.025 2.215 2.993 2.215 6.07 0 4.388-.041 7.915-.041 9.022 0 .861.615 1.886 2.255 1.558C56.227 59.59 65.62 47.287 65.62 32.81 65.619 14.682 50.937 0 32.809 0z" /></svg>
</a>
</li>
</ul>
@ -161,23 +161,23 @@
<div class="twofas-options-page-content-social">
<ul>
<li>
<a href='https://twitter.com/2FAS_com' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-twitter" width="800" height="800" viewBox="0 -4 48 48" xmlns="http://www.w3.org/2000/svg"><title>Twitter-color</title><desc>Created with Sketch.</desc><path d="M48 4.735c-1.764.803-3.663 1.346-5.655 1.589 2.034-1.248 3.595-3.227 4.33-5.585-1.905 1.156-4.009 1.996-6.257 2.447-1.792-1.962-4.353-3.187-7.187-3.187-5.435 0-9.844 4.521-9.844 10.098 0 .792.085 1.56.254 2.3-8.185-.422-15.439-4.438-20.299-10.554-.848 1.497-1.333 3.233-1.333 5.082 0 3.502 1.738 6.593 4.381 8.404-1.612-.049-3.133-.508-4.463-1.26v.124c0 4.894 3.395 8.977 7.903 9.901-.825.237-1.696.355-2.595.355-.634 0-1.254-.061-1.854-.179 1.254 4.01 4.888 6.931 9.199 7.009-3.37 2.71-7.618 4.325-12.23 4.325-.795 0-1.581-.046-2.35-.139 4.359 2.86 9.537 4.533 15.096 4.533 18.116 0 28.019-15.385 28.019-28.73 0-.439-.008-.878-.025-1.309 1.924-1.424 3.595-3.201 4.911-5.226" fill="#00AAEC"/></svg>
<a href='https://discord.gg/q4cP6qh2g5' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-discord" viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M216.856 16.597c-16.571-7.753-34.29-13.388-52.815-16.597-2.275 4.113-4.933 9.645-6.765 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.401-4.55-9.933-6.846-14.046-18.545 3.208-36.284 8.864-52.855 16.638-33.425 50.509-42.485 99.763-37.955 148.318 22.169 16.555 43.653 26.612 64.775 33.193 5.215-7.177 9.866-14.807 13.873-22.848-7.631-2.9-14.94-6.478-21.846-10.632 1.832-1.357 3.624-2.777 5.356-4.237 42.123 19.702 87.89 19.702 129.51 0 1.752 1.46 3.544 2.879 5.356 4.237-6.927 4.175-14.256 7.753-21.887 10.653 4.007 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.089-38.056-148.359zm-131.382 118.498c-12.645 0-23.015-11.805-23.015-26.18s10.148-26.2 23.015-26.2 23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.015-11.805-23.015-26.18s10.148-26.2 23.015-26.2c12.866 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z" /></svg>
</a>
</li>
<li>
<a href='https://www.youtube.com/@2fas' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-youtube" width="800" height="800" viewBox="0 -38 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M250.346 28.075c-2.988-11.043-11.614-19.669-22.657-22.657-19.866-5.418-99.821-5.418-99.821-5.418s-79.955.164-99.821 5.582c-11.043 2.988-19.669 11.614-22.657 22.657-6.009 35.299-8.34 89.084.164 122.97 2.988 11.043 11.614 19.669 22.657 22.657 19.866 5.418 99.821 5.418 99.821 5.418s79.955 0 99.821-5.418c11.043-2.988 19.669-11.614 22.657-22.657 6.337-35.348 8.291-89.1-.164-123.135z" fill="#f00"/><path fill="#fff" d="M102.421 128.06l66.329-38.418-66.329-38.418z"/></svg>
<svg class="social-youtube" viewBox="0 -38 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M250.346 28.075c-2.988-11.043-11.614-19.669-22.657-22.657-19.866-5.418-99.821-5.418-99.821-5.418s-79.955.164-99.821 5.582c-11.043 2.988-19.669 11.614-22.657 22.657-6.009 35.299-8.34 89.084.164 122.97 2.988 11.043 11.614 19.669 22.657 22.657 19.866 5.418 99.821 5.418 99.821 5.418s79.955 0 99.821-5.418c11.043-2.988 19.669-11.614 22.657-22.657 6.337-35.348 8.291-89.1-.164-123.135z" fill="#f00"/><path fill="#fff" d="M102.421 128.06l66.329-38.418-66.329-38.418z"/></svg>
</a>
</li>
<li>
<a href='https://discord.gg/q4cP6qh2g5' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-discord" width="800" height="800" viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M216.856 16.597c-16.571-7.753-34.29-13.388-52.815-16.597-2.275 4.113-4.933 9.645-6.765 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.401-4.55-9.933-6.846-14.046-18.545 3.208-36.284 8.864-52.855 16.638-33.425 50.509-42.485 99.763-37.955 148.318 22.169 16.555 43.653 26.612 64.775 33.193 5.215-7.177 9.866-14.807 13.873-22.848-7.631-2.9-14.94-6.478-21.846-10.632 1.832-1.357 3.624-2.777 5.356-4.237 42.123 19.702 87.89 19.702 129.51 0 1.752 1.46 3.544 2.879 5.356 4.237-6.927 4.175-14.256 7.753-21.887 10.653 4.007 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.089-38.056-148.359zm-131.382 118.498c-12.645 0-23.015-11.805-23.015-26.18s10.148-26.2 23.015-26.2 23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.015-11.805-23.015-26.18s10.148-26.2 23.015-26.2c12.866 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z" fill="#5865F2"/></svg>
<a href='https://twitter.com/2FAS_com' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-twitter" viewBox="0 -4 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M48 4.735c-1.764.803-3.663 1.346-5.655 1.589 2.034-1.248 3.595-3.227 4.33-5.585-1.905 1.156-4.009 1.996-6.257 2.447-1.792-1.962-4.353-3.187-7.187-3.187-5.435 0-9.844 4.521-9.844 10.098 0 .792.085 1.56.254 2.3-8.185-.422-15.439-4.438-20.299-10.554-.848 1.497-1.333 3.233-1.333 5.082 0 3.502 1.738 6.593 4.381 8.404-1.612-.049-3.133-.508-4.463-1.26v.124c0 4.894 3.395 8.977 7.903 9.901-.825.237-1.696.355-2.595.355-.634 0-1.254-.061-1.854-.179 1.254 4.01 4.888 6.931 9.199 7.009-3.37 2.71-7.618 4.325-12.23 4.325-.795 0-1.581-.046-2.35-.139 4.359 2.86 9.537 4.533 15.096 4.533 18.116 0 28.019-15.385 28.019-28.73 0-.439-.008-.878-.025-1.309 1.924-1.424 3.595-3.201 4.911-5.226" /></svg>
</a>
</li>
<li>
<a href='https://github.com/twofas' target='_blank' rel='noopener noreferrer' class="twofas-new-tab-link">
<svg class="social-github" width="66" height="64" viewBox="0 0 66 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.81 0C14.681 0 0 14.682 0 32.81c0 14.518 9.392 26.78 22.433 31.127 1.64.287 2.256-.697 2.256-1.558 0-.78-.04-3.363-.04-6.11-8.244 1.517-10.377-2.01-11.033-3.856-.37-.943-1.969-3.855-3.363-4.634-1.148-.616-2.789-2.133-.041-2.174 2.584-.04 4.43 2.379 5.044 3.363 2.953 4.962 7.67 3.568 9.556 2.707.287-2.133 1.148-3.568 2.092-4.389-7.3-.82-14.929-3.65-14.929-16.2 0-3.567 1.272-6.52 3.363-8.817-.328-.82-1.476-4.183.329-8.694 0 0 2.747-.861 9.022 3.363 2.625-.738 5.414-1.107 8.202-1.107 2.79 0 5.578.369 8.203 1.107 6.275-4.265 9.022-3.363 9.022-3.363 1.805 4.511.657 7.874.328 8.694 2.092 2.297 3.363 5.209 3.363 8.818 0 12.59-7.669 15.38-14.969 16.2 1.19 1.025 2.215 2.993 2.215 6.07 0 4.388-.041 7.915-.041 9.022 0 .861.615 1.886 2.255 1.558C56.227 59.59 65.62 47.287 65.62 32.81 65.619 14.682 50.937 0 32.809 0z" /></svg>
<svg class="social-github" viewBox="0 0 66 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.81 0C14.681 0 0 14.682 0 32.81c0 14.518 9.392 26.78 22.433 31.127 1.64.287 2.256-.697 2.256-1.558 0-.78-.04-3.363-.04-6.11-8.244 1.517-10.377-2.01-11.033-3.856-.37-.943-1.969-3.855-3.363-4.634-1.148-.616-2.789-2.133-.041-2.174 2.584-.04 4.43 2.379 5.044 3.363 2.953 4.962 7.67 3.568 9.556 2.707.287-2.133 1.148-3.568 2.092-4.389-7.3-.82-14.929-3.65-14.929-16.2 0-3.567 1.272-6.52 3.363-8.817-.328-.82-1.476-4.183.329-8.694 0 0 2.747-.861 9.022 3.363 2.625-.738 5.414-1.107 8.202-1.107 2.79 0 5.578.369 8.203 1.107 6.275-4.265 9.022-3.363 9.022-3.363 1.805 4.511.657 7.874.328 8.694 2.092 2.297 3.363 5.209 3.363 8.818 0 12.59-7.669 15.38-14.969 16.2 1.19 1.025 2.215 2.993 2.215 6.07 0 4.388-.041 7.915-.041 9.022 0 .861.615 1.886 2.255 1.558C56.227 59.59 65.62 47.287 65.62 32.81 65.619 14.682 50.937 0 32.809 0z" /></svg>
</a>
</li>
</ul>

15
src/optionsPage/styles/_socialIcons.scss
View File

@ -26,18 +26,31 @@ svg {
width: 18px;
}
&.social-twitter {
fill: #1d9bf0;
@media (prefers-color-scheme: dark) {
fill: $color-2;
}
}
&.social-youtube {
height: 22px;
width: 22px;
}
&.social-discord {
fill: #5865f2;
height: 20px;
width: 20px;
@media (prefers-color-scheme: dark) {
fill: $color-2;
}
}
&.social-github {
fill: $color;
fill: #24292f;
@media (prefers-color-scheme: dark) {
fill: $color-2;