jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix click hesitation icon

Browse source
This commit is contained in:
nick-delirium 2023-12-19 16:18:59 +01:00
parent c2b31cebe1
commit 47413fa9b2
2 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/ui/SVG.tsx
View file

@ -115,7 +115,7 @@ const SVG = (props: Props) => {
case 'chevron-up': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>;
case 'circle-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><circle cx="8" cy="8" r="8"/></svg>;
case 'circle': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/></svg>;
case 'click-hesitation': return <svg viewBox="0 0 33 34" fill="none" width={ `${ width }px` } height={ `${ height }px` } ><path fill="transparent" d="M1 1.5h32v32H1z"/><path fill="transparent" d="M.64 5.683h27.635v27.634H.64z"/><path d="M12.297 7.41a1.295 1.295 0 0 1 1.296 1.296V19.5a.863.863 0 1 0 1.727 0v-4.375l.148-.007c.548-.02 1.1-.014 1.41.047.231.046.507.166.773.314.133.073.26.254.26.543V19.5a.864.864 0 0 0 1.727 0v-2.703a8.64 8.64 0 0 1 .183-.017c.545-.042 1.008-.018 1.222.069.204.08.519.357.84.742.14.166.259.329.345.448v2.324a.863.863 0 1 0 1.727 0v-1.727h.591a1.727 1.727 0 0 1 1.718 1.9l-.468 4.69a4.318 4.318 0 0 1-.547 1.71l-2.41 4.218a.863.863 0 0 1-.749.436H11.063a.864.864 0 0 1-.719-.386L7.87 27.491a2.591 2.591 0 0 1-.42-1.15l-.595-5.363a.864.864 0 0 1 .689-.943l1.732-.345v1.537a.864.864 0 0 0 1.727 0V8.706a1.295 1.295 0 0 1 1.295-1.296Zm3.023 5.986v-4.69a3.022 3.022 0 1 0-6.045 0v9.222l-2.073.415a2.591 2.591 0 0 0-2.065 2.825l.596 5.365c.076.685.316 1.343.7 1.917l2.474 3.713a2.59 2.59 0 0 0 2.155 1.154H22.09a2.591 2.591 0 0 0 2.249-1.306l2.409-4.216a6.046 6.046 0 0 0 .767-2.399l.468-4.689a3.454 3.454 0 0 0-3.437-3.798h-1.003a8.85 8.85 0 0 0-.337-.428c-.33-.396-.881-.981-1.52-1.237-.629-.252-1.461-.228-2-.186l-.228.02a2.176 2.176 0 0 0-.967-1.108 4.55 4.55 0 0 0-1.275-.498c-.535-.107-1.276-.1-1.813-.08l-.083.004Z"/><path fill="transparent" d="M15 .683h14v14H15z"/><path d="m23.717 6.894-.003.004-.524.535c-.218.22-.432.458-.583.777-.103.22-.17.461-.202.743h-.31c.036-.462.24-.881.551-1.197l.721-.733c.297-.291.473-.694.473-1.132 0-.883-.721-1.604-1.604-1.604-.732 0-1.352.495-1.544 1.166h-.302a1.896 1.896 0 0 1 3.741.438c0 .393-.16.75-.414 1.003ZM22.236 1.37a6.273 6.273 0 0 0-6.271 6.271c0 3.462 2.81 6.27 6.27 6.27 3.462 0 6.271-2.808 6.271-6.27 0-3.462-2.809-6.27-6.27-6.27Zm-.146 9.917v-.292h.291v.292h-.291Z" stroke="#fff" strokeWidth=".875"/></svg>;
case 'click-hesitation': return <svg viewBox="0 0 33 34" width={ `${ width }px` } height={ `${ height }px` } ><path fill="transparent" d="M1 1.5h32v32H1z"/><path fill="transparent" d="M.64 5.683h27.635v27.634H.64z"/><path d="M12.297 7.41a1.295 1.295 0 0 1 1.296 1.296V19.5a.863.863 0 1 0 1.727 0v-4.375l.148-.007c.548-.02 1.1-.014 1.41.047.231.046.507.166.773.314.133.073.26.254.26.543V19.5a.864.864 0 0 0 1.727 0v-2.703a8.64 8.64 0 0 1 .183-.017c.545-.042 1.008-.018 1.222.069.204.08.519.357.84.742.14.166.259.329.345.448v2.324a.863.863 0 1 0 1.727 0v-1.727h.591a1.727 1.727 0 0 1 1.718 1.9l-.468 4.69a4.318 4.318 0 0 1-.547 1.71l-2.41 4.218a.863.863 0 0 1-.749.436H11.063a.864.864 0 0 1-.719-.386L7.87 27.491a2.591 2.591 0 0 1-.42-1.15l-.595-5.363a.864.864 0 0 1 .689-.943l1.732-.345v1.537a.864.864 0 0 0 1.727 0V8.706a1.295 1.295 0 0 1 1.295-1.296Zm3.023 5.986v-4.69a3.022 3.022 0 1 0-6.045 0v9.222l-2.073.415a2.591 2.591 0 0 0-2.065 2.825l.596 5.365c.076.685.316 1.343.7 1.917l2.474 3.713a2.59 2.59 0 0 0 2.155 1.154H22.09a2.591 2.591 0 0 0 2.249-1.306l2.409-4.216a6.046 6.046 0 0 0 .767-2.399l.468-4.689a3.454 3.454 0 0 0-3.437-3.798h-1.003a8.85 8.85 0 0 0-.337-.428c-.33-.396-.881-.981-1.52-1.237-.629-.252-1.461-.228-2-.186l-.228.02a2.176 2.176 0 0 0-.967-1.108 4.55 4.55 0 0 0-1.275-.498c-.535-.107-1.276-.1-1.813-.08l-.083.004Z" fillOpacity=".54"/><path fill="transparent" d="M15 .683h14v14H15z"/><path d="m23.717 6.894-.003.004-.524.535c-.218.22-.432.458-.583.777-.103.22-.17.461-.202.743h-.31c.036-.462.24-.881.551-1.197l.721-.733c.297-.291.473-.694.473-1.132 0-.883-.721-1.604-1.604-1.604-.732 0-1.352.495-1.544 1.166h-.302a1.896 1.896 0 0 1 3.741.438c0 .393-.16.75-.414 1.003ZM22.236 1.37a6.273 6.273 0 0 0-6.271 6.271c0 3.462 2.81 6.27 6.27 6.27 3.462 0 6.271-2.808 6.271-6.27 0-3.462-2.809-6.27-6.27-6.27Zm-.146 9.917v-.292h.291v.292h-.291Z" fillOpacity=".87" stroke="#fff" strokeWidth=".875"/></svg>;
case 'click-rage': return <svg viewBox="0 0 31 30" fill="none" width={ `${ width }px` } height={ `${ height }px` } ><path fill="transparent" d="M1.75 1h27.999v28h-28z"/><path d="M6.734 24.016a12.749 12.749 0 1 0 18.03-18.03 12.749 12.749 0 0 0-18.03 18.03Zm18.56.53a13.5 13.5 0 1 1-19.09-19.09 13.5 13.5 0 0 1 19.09 19.09Z" stroke="#000"/><path d="M9.246 22.757a.875.875 0 0 0 1.195-.32 6.123 6.123 0 0 1 5.306-3.062 6.123 6.123 0 0 1 5.306 3.062.875.875 0 0 0 1.516-.875 7.87 7.87 0 0 0-6.822-3.937 7.874 7.874 0 0 0-6.821 3.937.875.875 0 0 0 .32 1.195ZM21.48 8.092a.875.875 0 1 1 .784 1.565l-1.765.882c.308.472.498 1.12.498 1.836 0 1.449-.784 2.625-1.75 2.625s-1.75-1.176-1.75-2.625c0-.433.07-.84.193-1.2a.879.879 0 0 1 .29-1.333l3.5-1.75Zm-11.465 0a.875.875 0 0 0-.784 1.565l1.765.882a3.395 3.395 0 0 0-.498 1.836c0 1.449.784 2.625 1.75 2.625s1.75-1.176 1.75-2.625c0-.433-.07-.84-.193-1.2a.879.879 0 0 0-.29-1.333l-3.5-1.75Z" fill="#000"/></svg>;
case 'clipboard-check': return <svg fill="currentColor" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5z"/><path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5z"/><path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3Z"/></svg>;
case 'clipboard-list-check': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/></svg>;

2
frontend/app/svg/icons/click-hesitation.svg
View file

@ -1,4 +1,4 @@
<svg viewBox="0 0 33 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 33 34" xmlns="http://www.w3.org/2000/svg">
<g>
<rect width="32" height="32" fill="transparent" transform="translate(1 1.5)"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB