mirror of
https://github.com/checkly/headless-recorder.git
synced 2021-07-28 02:03:42 +03:00
feat: implement new design structure with tailwind and refresh icons
This commit is contained in:
Ignacio Anaya
16
package-lock.json
generated
16
package-lock.json
generated
@@ -3951,19 +3951,9 @@
|
||||
}
|
||||
},
|
||||
"@medv/finder": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@medv/finder/-/finder-1.1.2.tgz",
|
||||
"integrity": "sha512-lSwZQxhfc4SEsEPQCgZ6UEewgRkKQ/el23aKCoSa2psiJt2pPoJCR3shCXK6+aGcjxLAwzDpsMic/MV9Bumf1g==",
|
||||
"requires": {
|
||||
"cssesc": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cssesc": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
|
||||
"integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
|
||||
}
|
||||
}
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@medv/finder/-/finder-2.0.0.tgz",
|
||||
"integrity": "sha512-gV4jOsGpiWNDGd8Dw7tod1Fc9Gc7StaOT4oZ/6srHRWtsHU+HYWzmkYsa3Qy/z0e9tY1WpJ9wWdBFGskfbzoug=="
|
||||
},
|
||||
"@mrmlnc/readdir-enhanced": {
|
||||
"version": "2.2.1",
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.4 KiB |
BIN
public/images/logo-red.png
Normal file
BIN
public/images/logo-red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 317 B |
BIN
public/images/logo-red@2x.png
Normal file
BIN
public/images/logo-red@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 484 B |
BIN
public/images/logo-red@3x.png
Normal file
BIN
public/images/logo-red@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 B |
BIN
public/images/logo-yellow.png
Normal file
BIN
public/images/logo-yellow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 B |
BIN
public/images/logo-yellow@2x.png
Normal file
BIN
public/images/logo-yellow@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 522 B |
BIN
public/images/logo-yellow@3x.png
Normal file
BIN
public/images/logo-yellow@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
BIN
public/images/logo.png
Normal file
BIN
public/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 345 B |
BIN
public/images/logo@2x.png
Normal file
BIN
public/images/logo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 533 B |
BIN
public/images/logo@3x.png
Normal file
BIN
public/images/logo@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 720 B |
3
src/assets/icons/device-camera-video.svg
Normal file
3
src/assets/icons/device-camera-video.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3.75C16 3.4798 15.8547 3.23048 15.6195 3.09735C15.3844 2.96422 15.0958 2.96786 14.8641 3.10688L11 5.42536V4.75C11 3.7835 10.2165 3 9.25 3H1.75C0.783502 3 0 3.7835 0 4.75V11.25C0 12.2165 0.783502 13 1.75 13H9.25C10.2165 13 11 12.2165 11 11.25V10.5746L14.8641 12.8931C15.0958 13.0321 15.3844 13.0358 15.6195 12.9026C15.8547 12.7695 16 12.5202 16 12.25V3.75ZM11 8.82536L14.5 10.9254V5.07464L11 7.17464V8.82536ZM9.5 6.75V4.75C9.5 4.61193 9.38807 4.5 9.25 4.5H1.75C1.61193 4.5 1.5 4.61193 1.5 4.75V11.25C1.5 11.3881 1.61193 11.5 1.75 11.5H9.25C9.38807 11.5 9.5 11.3881 9.5 11.25V9.25V6.75Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 757 B |
4
src/assets/icons/duplicate.svg
Normal file
4
src/assets/icons/duplicate.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.75C0 5.7835 0.783502 5 1.75 5H3.25C3.66421 5 4 5.33579 4 5.75C4 6.16421 3.66421 6.5 3.25 6.5H1.75C1.61193 6.5 1.5 6.61193 1.5 6.75V14.25C1.5 14.3881 1.61193 14.5 1.75 14.5H9.25C9.38807 14.5 9.5 14.3881 9.5 14.25V12.75C9.5 12.3358 9.83579 12 10.25 12C10.6642 12 11 12.3358 11 12.75V14.25C11 15.2165 10.2165 16 9.25 16H1.75C0.783502 16 0 15.2165 0 14.25V6.75Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.75C5 0.783502 5.7835 0 6.75 0H14.25C15.2165 0 16 0.783502 16 1.75V9.25C16 10.2165 15.2165 11 14.25 11H6.75C5.7835 11 5 10.2165 5 9.25V1.75ZM6.75 1.5C6.61193 1.5 6.5 1.61193 6.5 1.75V9.25C6.5 9.38807 6.61193 9.5 6.75 9.5H14.25C14.3881 9.5 14.5 9.38807 14.5 9.25V1.75C14.5 1.61193 14.3881 1.5 14.25 1.5H6.75Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 908 B |
3
src/assets/icons/gear.svg
Normal file
3
src/assets/icons/gear.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.4288 1.52471C7.61685 1.50836 7.80736 1.5 8 1.5C8.19264 1.5 8.38315 1.50836 8.5712 1.52471C8.60669 1.52779 8.67932 1.56149 8.70795 1.67093L8.99702 2.77622C9.14363 3.33676 9.54617 3.74277 9.99429 3.96473C10.1678 4.05067 10.3351 4.14753 10.4952 4.25443C10.9118 4.53261 11.4652 4.67836 12.0243 4.52497L13.1272 4.22235C13.2361 4.19246 13.3017 4.23831 13.3223 4.26758C13.5408 4.57848 13.7326 4.90924 13.8946 5.25654C13.9094 5.2884 13.9167 5.36792 13.8362 5.44746L13.0214 6.25258C12.6099 6.65921 12.4591 7.21008 12.4908 7.70918C12.4969 7.80524 12.5 7.9022 12.5 8C12.5 8.0978 12.4969 8.19476 12.4908 8.29082C12.4591 8.78992 12.6099 9.34079 13.0214 9.74742L13.8362 10.5525C13.9167 10.6321 13.9094 10.7116 13.8946 10.7435C13.7326 11.0908 13.5408 11.4215 13.3223 11.7324C13.3017 11.7617 13.2361 11.8075 13.1272 11.7777L12.0243 11.475C11.4652 11.3216 10.9118 11.4674 10.4952 11.7456C10.3351 11.8525 10.1678 11.9493 9.99429 12.0353C9.54617 12.2572 9.14363 12.6632 8.99702 13.2238L8.70795 14.3291C8.67932 14.4385 8.60669 14.4722 8.5712 14.4753C8.38315 14.4916 8.19264 14.5 8 14.5C7.80736 14.5 7.61685 14.4916 7.4288 14.4753C7.3933 14.4722 7.32067 14.4385 7.29205 14.3291L7.00296 13.2237C6.85636 12.6632 6.45383 12.2572 6.00572 12.0353C5.83221 11.9493 5.66496 11.8525 5.50487 11.7456C5.08825 11.4674 4.53481 11.3216 3.97577 11.475L2.87278 11.7777C2.76387 11.8075 2.69826 11.7617 2.67768 11.7324C2.45921 11.4215 2.26738 11.0908 2.10543 10.7435C2.09057 10.7116 2.08328 10.6321 2.16377 10.5525L2.97865 9.74736C3.39017 9.34074 3.541 8.78987 3.50924 8.29078C3.50314 8.19474 3.50003 8.09778 3.50003 8C3.50003 7.90222 3.50314 7.80526 3.50924 7.70922C3.541 7.21013 3.39017 6.65926 2.97865 6.25264L2.16377 5.44746C2.08328 5.36793 2.09057 5.28841 2.10543 5.25655C2.26738 4.90924 2.45921 4.57848 2.67769 4.26758C2.69826 4.23831 2.76387 4.19247 2.87278 4.22235L3.97577 4.52498C4.53481 4.67837 5.08825 4.53262 5.50487 4.25444C5.66496 4.14755 5.83221 4.05069 6.00572 3.96475C6.45382 3.74279 6.85636 3.33678 7.00296 2.77625L7.29205 1.67093C7.32067 1.56149 7.3933 1.52779 7.4288 1.52471ZM8 0C7.76394 0 7.53009 0.010245 7.29889 0.0303435C6.55611 0.0949143 6.00991 0.645042 5.84086 1.29138L5.55177 2.39671C5.53431 2.46349 5.47287 2.55476 5.33993 2.62061C5.10832 2.73533 4.88526 2.86452 4.67192 3.00697C4.54894 3.08908 4.43933 3.09674 4.37267 3.07845L3.26968 2.77581C2.62644 2.59932 1.87827 2.79629 1.45041 3.40515C1.18168 3.78757 0.945496 4.19473 0.745967 4.62262C0.430999 5.29808 0.634823 6.04545 1.10948 6.51446L1.92436 7.31963C1.9735 7.36819 2.02164 7.46677 2.01227 7.61399C2.00415 7.74171 2.00003 7.87043 2.00003 8C2.00003 8.12957 2.00415 8.25829 2.01227 8.38601C2.02164 8.53323 1.9735 8.63181 1.92436 8.68037L1.10948 9.48555C0.634822 9.95455 0.430999 10.7019 0.745967 11.3774C0.945495 11.8053 1.18168 12.2124 1.45041 12.5948C1.87827 13.2037 2.62644 13.4007 3.26968 13.2242L4.37267 12.9216C4.43933 12.9033 4.54895 12.9109 4.67192 12.993C4.88526 13.1355 5.10832 13.2647 5.33993 13.3794C5.47287 13.4452 5.53431 13.5365 5.55177 13.6033L5.84086 14.7086C6.00991 15.355 6.55611 15.9051 7.29889 15.9697C7.53009 15.9898 7.76394 16 8 16C8.23606 16 8.46991 15.9898 8.7011 15.9697C9.44388 15.9051 9.99009 15.355 10.1591 14.7086L10.4482 13.6033C10.4657 13.5365 10.5271 13.4453 10.6601 13.3794C10.8917 13.2647 11.1148 13.1355 11.3281 12.993C11.4511 12.9109 11.5607 12.9033 11.6274 12.9216L12.7303 13.2242C13.3736 13.4007 14.1217 13.2037 14.5496 12.5949C14.8183 12.2124 15.0545 11.8053 15.254 11.3774C15.569 10.7019 15.3652 9.95456 14.8905 9.48555L14.0757 8.68042C14.0265 8.63187 13.9784 8.53328 13.9878 8.38606C13.9959 8.25832 14 8.12959 14 8C14 7.87041 13.9959 7.74168 13.9878 7.61394C13.9784 7.46672 14.0265 7.36813 14.0757 7.31958L14.8905 6.51445C15.3652 6.04544 15.569 5.29807 15.254 4.62261C15.0545 4.19472 14.8183 3.78756 14.5496 3.40515C14.1217 2.79628 13.3736 2.59932 12.7303 2.77581L11.6274 3.07843C11.5607 3.09672 11.4511 3.08907 11.3281 3.00696C11.1148 2.8645 10.8917 2.7353 10.6601 2.62057C10.5271 2.55473 10.4657 2.46346 10.4482 2.39667L10.1591 1.29138C9.99009 0.64504 9.44388 0.0949126 8.7011 0.0303426C8.46991 0.0102447 8.23606 0 8 0ZM9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5C8.82843 6.5 9.5 7.17157 9.5 8ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z" fill="#8492A6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
10
src/assets/icons/history.svg
Normal file
10
src/assets/icons/history.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.64294 3.14291L0.426777 1.92675C0.269286 1.76926 0 1.8808 0 2.10353V5.74998C0 5.88805 0.111929 5.99998 0.25 5.99998H3.89645C4.11917 5.99998 4.23071 5.73069 4.07322 5.5732L2.715 4.21498C3.89508 2.57019 5.82314 1.5 8.00007 1.5C11.5899 1.5 14.5001 4.41015 14.5001 8C14.5001 11.5899 11.5899 14.5 8.00007 14.5C4.63773 14.5 1.87085 11.9464 1.53446 8.67332C1.49211 8.26128 1.12376 7.96158 0.711712 8.00393C0.299669 8.04628 -2.88747e-05 8.41463 0.0423185 8.82668C0.456521 12.8569 3.86076 16 8.00007 16C12.4183 16 16.0001 12.4183 16.0001 8C16.0001 3.58172 12.4183 0 8.00007 0C5.40771 0 3.10436 1.23301 1.64294 3.14291Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 906 B |
4
src/assets/icons/pause.svg
Normal file
4
src/assets/icons/pause.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.625 4.5C5.625 3.87868 6.12868 3.375 6.75 3.375H11.25C11.8713 3.375 12.375 3.87868 12.375 4.5V22.5C12.375 23.1213 11.8713 23.625 11.25 23.625H6.75C6.12868 23.625 5.625 23.1213 5.625 22.5V4.5ZM7.875 5.625V21.375H10.125V5.625H7.875Z" fill="#1F2D3D"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 4.5C14.625 3.87868 15.1287 3.375 15.75 3.375H20.25C20.8713 3.375 21.375 3.87868 21.375 4.5V22.5C21.375 23.1213 20.8713 23.625 20.25 23.625H15.75C15.1287 23.625 14.625 23.1213 14.625 22.5V4.5ZM16.875 5.625V21.375H19.125V5.625H16.875Z" fill="#1F2D3D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 711 B |
3
src/assets/icons/question.svg
Normal file
3
src/assets/icons/question.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM9 11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10C8.55229 10 9 10.4477 9 11ZM6.92082 6.08541C7.00133 5.92438 7.11032 5.78617 7.25977 5.68654C7.40453 5.59004 7.63124 5.5 8 5.5C8.27975 5.5 8.55291 5.58656 8.7375 5.725C8.90206 5.84842 9 6.01009 9 6.25C9 6.42662 8.95919 6.51381 8.92283 6.56835C8.87748 6.63639 8.79924 6.71162 8.64646 6.81349C8.57007 6.86441 8.48788 6.9139 8.38754 6.97411L8.38141 6.97779L8.38139 6.9778C8.28769 7.03402 8.17704 7.10041 8.06831 7.1729C7.84608 7.32107 7.58057 7.52712 7.37593 7.83412C7.14619 8.17878 7.23935 8.64442 7.58401 8.87417C7.92867 9.10391 8.39432 9.01075 8.62406 8.66609C8.66942 8.59803 8.74766 8.52279 8.90043 8.42093C8.97681 8.37001 9.059 8.32052 9.15933 8.26032L9.16554 8.25659L9.1656 8.25656C9.25926 8.20036 9.36986 8.134 9.47854 8.06154C9.70075 7.91339 9.96627 7.70737 10.1709 7.4004C10.3846 7.07994 10.5 6.69838 10.5 6.25C10.5 5.48991 10.1396 4.90158 9.6375 4.525C9.15542 4.16344 8.55358 4 8 4C7.36876 4 6.84547 4.15996 6.42772 4.43846C6.01467 4.71383 5.74866 5.07562 5.57918 5.41459C5.39393 5.78507 5.5441 6.23558 5.91459 6.42082C6.28507 6.60606 6.73558 6.45589 6.92082 6.08541Z" fill="#8492A6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
14
src/assets/icons/screen-dark.svg
Normal file
14
src/assets/icons/screen-dark.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.99997C0 1.94561 0.854729 1.09088 1.90909 1.09088H15.5454C16.5998 1.09088 17.4545 1.94561 17.4545 2.99997V14.4545C17.4545 15.5089 16.5998 16.3636 15.5454 16.3636H1.90909C0.854728 16.3636 0 15.5089 0 14.4545V2.99997ZM1.90909 2.72724C1.75847 2.72724 1.63636 2.84935 1.63636 2.99997V4.90906H3.81818V2.72724H1.90909ZM5.45454 2.72724V4.90906H7.63636V2.72724H5.45454ZM9.27272 2.72724V4.90906H15.8182V2.99997C15.8182 2.84935 15.6961 2.72724 15.5454 2.72724H9.27272ZM15.8182 6.54542H1.63636V14.4545C1.63636 14.6051 1.75847 14.7272 1.90909 14.7272H15.5454C15.6961 14.7272 15.8182 14.6051 15.8182 14.4545V6.54542Z" fill="#F9FAFC"/>
|
||||
</g>
|
||||
<rect x="5.81812" y="8" width="18.9091" height="14.5454" fill="#2E2E2E"/>
|
||||
<path d="M10.1822 12.3637L8.93143 12.9891C7.91508 13.4972 7.27307 14.536 7.27307 15.6724V21.0001C7.27307 22.6569 8.61622 24.0001 10.2731 24.0001H21.7276C23.3845 24.0001 24.7276 22.6569 24.7276 21.0001V15.6724C24.7276 14.536 24.0856 13.4972 23.0692 12.9891L21.8185 12.3637" stroke="#F9FAFC" stroke-width="2"/>
|
||||
<path d="M19.6369 13.091V12.4546C19.6369 10.7977 18.2937 9.45459 16.6369 9.45459H15.3641C13.7073 9.45459 12.3641 10.7977 12.3641 12.4546V13.091" stroke="#F9FAFC" stroke-width="2"/>
|
||||
<circle cx="16.0005" cy="18.1818" r="2.63636" stroke="#F9FAFC" stroke-width="2"/>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="17.4545" height="17.4545" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
7
src/assets/icons/screen-light.svg
Normal file
7
src/assets/icons/screen-light.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="36" height="34" viewBox="0 0 36 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.70327 23.5447L4.85243 20.7735C5.202 20.9185 5.5877 21 6 21H9V24H6C5.18645 24 4.41072 23.8381 3.70327 23.5447ZM15 24V21H18C18.4123 21 18.798 20.9185 19.1476 20.7735L20.2967 23.5447C19.5893 23.8381 18.8135 24 18 24H15ZM24 9H21V6C21 5.5877 20.9185 5.202 20.7735 4.85244L23.5447 3.70327C23.8381 4.41072 24 5.18645 24 6V9ZM9 0H6C5.18645 0 4.41072 0.161917 3.70327 0.455283L4.85244 3.22646C5.202 3.0815 5.5877 3 6 3H9V0ZM0 15H3V18C3 18.4123 3.0815 18.798 3.22646 19.1476L0.455283 20.2967C0.161917 19.5893 0 18.8135 0 18V15ZM0 9H3V6C3 5.5877 3.0815 5.202 3.22646 4.85243L0.455283 3.70327C0.161917 4.41072 0 5.18645 0 6V9ZM15 0V3H18C18.4123 3 18.798 3.0815 19.1476 3.22646L20.2967 0.455283C19.5893 0.161917 18.8135 0 18 0H15ZM24 15H21V18C21 18.4123 20.9185 18.798 20.7735 19.1476L23.5447 20.2967C23.8381 19.5893 24 18.8135 24 18V15Z" fill="#1F2D3D"/>
|
||||
<rect x="9" y="11" width="26" height="20" fill="#EFF2F7"/>
|
||||
<path d="M15 17L12.6584 18.1708C11.642 18.679 11 19.7178 11 20.8541V30C11 31.6569 12.3431 33 14 33H32C33.6569 33 35 31.6569 35 30V20.8541C35 19.7178 34.358 18.679 33.3416 18.1708L31 17" stroke="#1F2D3D" stroke-width="2"/>
|
||||
<path d="M28 18V16C28 14.3431 26.6569 13 25 13H21C19.3431 13 18 14.3431 18 16V18" stroke="#1F2D3D" stroke-width="2"/>
|
||||
<circle cx="23" cy="25" r="4" stroke="#1F2D3D" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
7
src/assets/icons/selection-dark.svg
Normal file
7
src/assets/icons/selection-dark.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.69329 17.1234L3.52904 15.108C3.78327 15.2135 4.06378 15.2727 4.36364 15.2727H6.54545V17.4545H4.36364C3.77196 17.4545 3.2078 17.3368 2.69329 17.1234ZM10.9091 17.4545V15.2727H13.0909C13.3908 15.2727 13.6713 15.2135 13.9255 15.108L14.7613 17.1234C14.2467 17.3368 13.6826 17.4545 13.0909 17.4545H10.9091ZM17.4545 6.54545H15.2727V4.36364C15.2727 4.06378 15.2135 3.78327 15.108 3.52904L17.1234 2.69329C17.3368 3.2078 17.4545 3.77196 17.4545 4.36364V6.54545ZM6.54545 0H4.36364C3.77196 0 3.2078 0.117758 2.69329 0.331115L3.52904 2.34652C3.78327 2.24109 4.06378 2.18182 4.36364 2.18182H6.54545V0ZM0 10.9091H2.18182V13.0909C2.18182 13.3908 2.24109 13.6713 2.34652 13.9255L0.331115 14.7613C0.117758 14.2467 0 13.6826 0 13.0909V10.9091ZM0 6.54545H2.18182V4.36364C2.18182 4.06378 2.24109 3.78327 2.34652 3.52904L0.331115 2.69329C0.117758 3.2078 0 3.77196 0 4.36364V6.54545ZM10.9091 0V2.18182H13.0909C13.3908 2.18182 13.6713 2.24109 13.9255 2.34652L14.7613 0.331115C14.2467 0.117758 13.6826 0 13.0909 0H10.9091ZM17.4545 10.9091H15.2727V13.0909C15.2727 13.3908 15.2135 13.6713 15.108 13.9255L17.1234 14.7613C17.3368 14.2467 17.4545 13.6826 17.4545 13.0909V10.9091Z" fill="#F9FAFC"/>
|
||||
<rect x="6.54541" y="8" width="18.9091" height="14.5455" fill="#2E2E2E"/>
|
||||
<path d="M10.9091 12.3637L9.65836 12.9891C8.64201 13.4973 8 14.536 8 15.6724V21.0001C8 22.6569 9.34315 24.0001 11 24.0001H22.4545C24.1114 24.0001 25.4545 22.6569 25.4545 21.0001V15.6724C25.4545 14.536 24.8125 13.4973 23.7962 12.9891L22.5455 12.3637" stroke="#F9FAFC" stroke-width="2"/>
|
||||
<path d="M20.3637 13.091V12.4546C20.3637 10.7977 19.0205 9.45459 17.3637 9.45459H16.0909C14.4341 9.45459 13.0909 10.7977 13.0909 12.4546V13.091" stroke="#F9FAFC" stroke-width="2"/>
|
||||
<circle cx="16.7273" cy="18.1818" r="2.63636" stroke="#F9FAFC" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
7
src/assets/icons/selection-light.svg
Normal file
7
src/assets/icons/selection-light.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.125C0 2.67525 1.17525 1.5 2.625 1.5H21.375C22.8247 1.5 24 2.67525 24 4.125V19.875C24 21.3247 22.8247 22.5 21.375 22.5H2.625C1.17525 22.5 0 21.3247 0 19.875V4.125ZM2.625 3.75C2.41789 3.75 2.25 3.91789 2.25 4.125V6.75H5.25V3.75H2.625ZM7.5 3.75V6.75H10.5V3.75H7.5ZM12.75 3.75V6.75H21.75V4.125C21.75 3.91789 21.5821 3.75 21.375 3.75H12.75ZM21.75 9H2.25V19.875C2.25 20.0821 2.41789 20.25 2.625 20.25H21.375C21.5821 20.25 21.75 20.0821 21.75 19.875V9Z" fill="#1F2D3D"/>
|
||||
<rect x="8" y="11" width="26" height="20" fill="#EFF2F7"/>
|
||||
<path d="M14 17L11.6584 18.1708C10.642 18.679 10 19.7178 10 20.8541V30C10 31.6569 11.3431 33 13 33H31C32.6569 33 34 31.6569 34 30V20.8541C34 19.7178 33.358 18.679 32.3416 18.1708L30 17" stroke="#1F2D3D" stroke-width="2"/>
|
||||
<path d="M27 18V16C27 14.3431 25.6569 13 24 13H20C18.3431 13 17 14.3431 17 16V18" stroke="#1F2D3D" stroke-width="2"/>
|
||||
<circle cx="22" cy="25" r="4" stroke="#1F2D3D" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
src/assets/icons/zap.svg
Normal file
3
src/assets/icons/zap.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.561 1.49999C10.5573 1.50013 10.5538 1.50154 10.551 1.50399L3.28601 8.57099C3.25033 8.60578 3.22585 8.65045 3.21574 8.69925C3.20562 8.74806 3.21032 8.79877 3.22924 8.84488C3.24816 8.89099 3.28043 8.9304 3.3219 8.95804C3.36338 8.98567 3.41217 9.00028 3.46201 8.99999H6.75001C6.87306 9.00001 6.99422 9.03031 7.10279 9.08822C7.21137 9.14612 7.30403 9.22985 7.3726 9.33202C7.44117 9.43419 7.48356 9.55166 7.49601 9.67408C7.50846 9.7965 7.49061 9.9201 7.44401 10.034L5.73101 14.222L12.713 7.42899C12.7486 7.39425 12.7731 7.34968 12.7832 7.30097C12.7934 7.25226 12.7888 7.20163 12.77 7.15556C12.7512 7.10949 12.7191 7.07008 12.6777 7.04236C12.6364 7.01465 12.5878 6.99989 12.538 6.99999H9.25001C9.12455 7 9.00109 6.96854 8.89093 6.90848C8.78077 6.84842 8.68745 6.76169 8.61949 6.65622C8.55153 6.55075 8.51112 6.42992 8.50195 6.30479C8.49278 6.17966 8.51515 6.05423 8.56701 5.93999L10.575 1.52199L10.578 1.51599C10.5774 1.5127 10.5761 1.50961 10.574 1.50699C10.5725 1.50458 10.5704 1.50254 10.568 1.50099L10.56 1.49999H10.561ZM9.50401 0.429989C9.75731 0.184104 10.0885 0.0343268 10.4404 0.00649188C10.7923 -0.0213431 11.1429 0.0745095 11.4317 0.277516C11.7205 0.480523 11.9294 0.777956 12.0224 1.11851C12.1154 1.45907 12.0866 1.82139 11.941 2.14299L10.415 5.49999H12.538C14.108 5.49999 14.884 7.40899 13.758 8.50399L6.41801 15.646C6.18481 15.8728 5.87235 15.9998 5.54701 16H5.24501C5.03994 16 4.83803 15.9495 4.65706 15.8531C4.4761 15.7566 4.32165 15.6171 4.20732 15.4468C4.093 15.2766 4.02232 15.0808 4.00152 14.8768C3.98071 14.6728 4.01041 14.4668 4.08801 14.277L5.63301 10.5H3.46201C1.89201 10.5 1.11601 8.59099 2.24201 7.49599L9.50301 0.428989L9.50401 0.429989Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -1,252 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="110px"
|
||||
height="110px" viewBox="0 0 110 110" style="enable-background:new 0 0 110 110;" xml:space="preserve">
|
||||
<g id="Artboard" style="display:none;">
|
||||
<rect x="-963" y="-178" style="display:inline;fill:#808080;" width="1376" height="359"/>
|
||||
</g>
|
||||
<g id="R-Multicolor" style="display:none;">
|
||||
<circle style="display:inline;fill:#32BEA6;" cx="55" cy="55" r="55"/>
|
||||
<g style="display:inline;">
|
||||
<path style="fill:#EDBC7C;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
<path style="fill:#F8E1C2;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.796,0,1.559,0.316,2.121,0.879
|
||||
L87,83H23z"/>
|
||||
<circle style="fill:#FACB1B;" cx="31" cy="31" r="8"/>
|
||||
<path style="fill:#107665;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.248-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
<path style="fill:#0D9681;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.248-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Multicolor">
|
||||
<g>
|
||||
<path style="fill:#EDBC7C;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
<path style="fill:#F8E1C2;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.796,0,1.559,0.316,2.121,0.879
|
||||
L87,83H23z"/>
|
||||
<circle style="fill:#FACB1B;" cx="31" cy="31" r="8"/>
|
||||
<path style="fill:#107665;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.248-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
<path style="fill:#0D9681;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.248-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Blue" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#53BAD4;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.795,0,1.559,0.316,2.122,0.879
|
||||
L87,83H23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="31" cy="31" r="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#0081A1;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="R-Blue" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<circle style="fill:#81D2EB;" cx="55" cy="55" r="55"/>
|
||||
</g>
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#53BAD4;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.795,0,1.559,0.316,2.122,0.879
|
||||
L87,83H23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="31" cy="31" r="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#0081A1;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Green" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#5DCFC3;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.795,0,1.559,0.316,2.122,0.879
|
||||
L87,83H23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="31" cy="31" r="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#009687;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="R-Green" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<circle style="fill:#87E0C8;" cx="55" cy="55" r="55"/>
|
||||
</g>
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#5DCFC3;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.795,0,1.559,0.316,2.122,0.879
|
||||
L87,83H23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="31" cy="31" r="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#009687;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Red" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#E8A099;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.795,0,1.559,0.316,2.122,0.879
|
||||
L87,83H23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="31" cy="31" r="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#C23023;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="R-Red" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<circle style="fill:#FABBAF;" cx="55" cy="55" r="55"/>
|
||||
</g>
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#E8A099;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.795,0,1.559,0.316,2.122,0.879
|
||||
L87,83H23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="31" cy="31" r="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#C23023;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Yellow" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#F5C43D;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.795,0,1.559,0.316,2.122,0.879
|
||||
L87,83H23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="31" cy="31" r="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E07000;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="R-Yellow" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<circle style="fill:#FFD75E;" cx="55" cy="55" r="55"/>
|
||||
</g>
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#F5C43D;" d="M83.879,79.879C83.316,79.316,82.553,79,81.757,79H28.243c-0.795,0-1.559,0.316-2.122,0.879L23,83
|
||||
v4h64v-4L83.879,79.879z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M23,83l3.121-3.121C26.684,79.316,27.447,79,28.243,79h53.515c0.795,0,1.559,0.316,2.122,0.879
|
||||
L87,83H23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFFFFF;" cx="31" cy="31" r="8"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E07000;" d="M76,35c-3.59,0-6,2.81-6,5.94v4.08c0,1.09-0.89,1.98-1.98,1.98h-0.04C66.89,47,66,46.11,66,45.02
|
||||
V31c0-4.42-3.58-8-8-8s-8,3.58-8,8v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h16V71c0-12.17,16-7.83,16-19.85V40.94
|
||||
C82,37.66,79.28,35,76,35z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M50,31v22.02c0,1.09-0.89,1.98-1.98,1.98h-0.04C46.89,55,46,54.11,46,53.02v-4.08
|
||||
c0-3.247-2.54-5.94-6-5.94c-3.427,0-6,2.658-6,5.94v10.21C34,71.17,50,66.83,50,79v4h8V23C53.58,23,50,26.58,50,31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 12 KiB |
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>_ionicons_svg_ios-help-circle</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="_ionicons_svg_ios-help-circle" fill="#8492A6" fill-rule="nonzero">
|
||||
<path d="M16,0 C7.16153846,0 0,7.16153846 0,16 C0,24.8384615 7.16153846,32 16,32 C24.8384615,32 32,24.8384615 32,16 C32,7.16153846 24.8384615,0 16,0 Z M15.6692308,23.3846154 C14.7615385,23.3846154 14.0230769,22.6923077 14.0230769,21.8 C14.0230769,20.9153846 14.7615385,20.2153846 15.6692308,20.2153846 C16.5846154,20.2153846 17.3230769,20.9076923 17.3230769,21.8 C17.3230769,22.6923077 16.5923077,23.3846154 15.6692308,23.3846154 Z M18.7615385,15.9307692 C17.4230769,16.7076923 16.9692308,17.2769231 16.9692308,18.2615385 L16.9692308,18.8692308 L14.3,18.8692308 L14.2769231,18.2076923 C14.1461538,16.6230769 14.7,15.6384615 16.0923077,14.8230769 C17.3923077,14.0461538 17.9384615,13.5538462 17.9384615,12.6 C17.9384615,11.6461538 17.0153846,10.9461538 15.8692308,10.9461538 C14.7076923,10.9461538 13.8692308,11.7 13.8076923,12.8384615 L11.0769231,12.8384615 C11.1307692,10.3615385 12.9615385,8.60769231 16.0538462,8.60769231 C18.9384615,8.60769231 20.9230769,10.2076923 20.9230769,12.5076923 C20.9230769,14.0384615 20.1846154,15.0923077 18.7615385,15.9307692 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>_ionicons_svg_ios-settings</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="_ionicons_svg_ios-settings" fill="#8492A6" fill-rule="nonzero">
|
||||
<path d="M29.3583333,16 C29.3583333,14.25 30.45,12.7583333 32,12.1583333 C31.5916667,10.45 30.9166667,8.85 30.025,7.4 C29.4916667,7.63333333 28.925,7.75833333 28.35,7.75833333 C27.3,7.75833333 26.25,7.35833333 25.4416667,6.55833333 C24.2,5.31666667 23.925,3.49166667 24.5916667,1.975 C23.15,1.08333333 21.5416667,0.408333333 19.8416667,1.18423789e-15 C19.25,1.54166667 17.75,2.64166667 16,2.64166667 C14.25,2.64166667 12.75,1.54166667 12.1583333,0 C10.45,0.408333333 8.85,1.08333333 7.4,1.975 C8.075,3.48333333 7.79166667,5.31666667 6.55,6.55833333 C5.75,7.35833333 4.69166667,7.75833333 3.64166667,7.75833333 C3.06666667,7.75833333 2.5,7.64166667 1.96666667,7.4 C1.08333333,8.85833333 0.408333333,10.4583333 0,12.1666667 C1.54166667,12.7583333 2.64166667,14.25 2.64166667,16.0083333 C2.64166667,17.7583333 1.55,19.25 0.00833333333,19.85 C0.416666667,21.5583333 1.09166667,23.1583333 1.98333333,24.6083333 C2.51666667,24.375 3.08333333,24.2583333 3.65,24.2583333 C4.7,24.2583333 5.75,24.6583333 6.55833333,25.4583333 C7.79166667,26.6916667 8.075,28.525 7.40833333,30.0333333 C8.85833333,30.925 10.4666667,31.6 12.1666667,32.0083333 C12.7583333,30.4666667 14.25,29.375 16,29.375 C17.75,29.375 19.2416667,30.4666667 19.8333333,32.0083333 C21.5416667,31.6 23.1416667,30.925 24.5916667,30.0333333 C23.925,28.525 24.2083333,26.7 25.4416667,25.4583333 C26.2416667,24.6583333 27.2916667,24.2583333 28.35,24.2583333 C28.9166667,24.2583333 29.4916667,24.375 30.0166667,24.6083333 C30.9083333,23.1583333 31.5833333,21.55 31.9916667,19.85 C30.4583333,19.25 29.3583333,17.7583333 29.3583333,16 Z M16.075,22.6583333 C12.3833333,22.6583333 9.40833333,19.6666667 9.40833333,15.9916667 C9.40833333,12.3166667 12.3833333,9.325 16.075,9.325 C19.7666667,9.325 22.7416667,12.3166667 22.7416667,15.9916667 C22.7416667,19.6666667 19.7666667,22.6583333 16.075,22.6583333 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.4 KiB |
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<div class="checkly-badge text-muted">
|
||||
powered by
|
||||
<a href="https://checklyhq.com" target="_blank">
|
||||
<img src="@/assets/images/text_racoon_logo.svg" alt="Checkly logo" />
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChecklyBadge',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.checkly-badge {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 8px;
|
||||
width: 80px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
26
src/components/Footer.vue
Normal file
26
src/components/Footer.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="flex justify-between items-center">
|
||||
<a href="https://checklyhq.com" target="_blank">
|
||||
<img
|
||||
src="@/assets/images/text_racoon_logo.svg"
|
||||
alt="Checkly logo"
|
||||
class="w-24"
|
||||
/>
|
||||
</a>
|
||||
<span>Version {{ version }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { version } from '../../package.json'
|
||||
export default {
|
||||
name: 'ChecklyBadge',
|
||||
|
||||
setup() {
|
||||
return {
|
||||
version: ref(version),
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
21
src/components/HomeTab.vue
Normal file
21
src/components/HomeTab.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-white flex flex-col justify-center items-center rounded-md h-100"
|
||||
>
|
||||
<h3 class="text-pink text-sm font-semibold mb-3">No recorded events yet</h3>
|
||||
<p class="text-gray text-xs mb-5 text-center w-44">
|
||||
Record browser events by clicking record button
|
||||
</p>
|
||||
<button
|
||||
@click="$emit('start')"
|
||||
class="font-semibold text-sm text-white bg-blue flex items-center rounded-sm p-2.5"
|
||||
>
|
||||
<img
|
||||
src="@/assets/icons/device-camera-video.svg"
|
||||
alt="video camera"
|
||||
class="mr-2"
|
||||
/>
|
||||
Record Events
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,46 +1,34 @@
|
||||
<template>
|
||||
<div class="tab recording-tab">
|
||||
<div class="content">
|
||||
<div class="empty" v-show="!isRecording">
|
||||
<img src="@/assets/images/Desert.svg" alt="desert" width="78px" />
|
||||
<h3>No recorded events yet</h3>
|
||||
<p class="text-muted">Click record to begin</p>
|
||||
<div class="nag-cta" v-show="!isRecording">
|
||||
<a href="https://checklyhq.com/headless-recorder" target="_blank"
|
||||
>Puppeteer Recorder is now <strong>Headless Recorder</strong> and
|
||||
supports Playwright →</a
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center bg-white rounded-md h-100 overflow-auto break-all whitespace-pre-wrap"
|
||||
:class="{ 'justify-center': !liveEvents.length }"
|
||||
>
|
||||
<p class="text-sm text-gray animate-pulse" v-show="!liveEvents.length">
|
||||
Waiting for events...
|
||||
</p>
|
||||
<ul class="flex flex-col items-start p-2 w-full">
|
||||
<li
|
||||
v-for="(event, index) in liveEvents"
|
||||
:key="index"
|
||||
class="border-b border-gray-lighter mb-4 w-full p-2"
|
||||
>
|
||||
<div class="text-sm mb-1">
|
||||
<span class="text-gray mr-1">{{ index + 1 }}.</span>
|
||||
<span class="text-gray-dark font-semibold uppercase">{{
|
||||
event.action
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="events" v-show="isRecording">
|
||||
<p
|
||||
class="text-muted text-center loading"
|
||||
v-show="liveEvents.length === 0"
|
||||
>
|
||||
Waiting for events
|
||||
</p>
|
||||
<ul class="event-list">
|
||||
<li
|
||||
v-for="(event, index) in liveEvents"
|
||||
:key="index"
|
||||
class="event-list-item"
|
||||
>
|
||||
<div class="event-label">{{ index + 1 }}.</div>
|
||||
<div class="event-description">
|
||||
<div class="event-action">{{ event.action }}</div>
|
||||
<div class="event-props text-muted">
|
||||
{{ event.selector || parseEventValue(event) }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-gray">
|
||||
{{ parseEventValue(event) }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RecordingTab',
|
||||
|
||||
props: {
|
||||
isRecording: { type: Boolean, default: false },
|
||||
liveEvents: {
|
||||
@@ -50,91 +38,28 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
parseEventValue(event) {
|
||||
if (!event) {
|
||||
return
|
||||
return ''
|
||||
}
|
||||
if (event.action === 'viewport*')
|
||||
return `width: ${event.value.width}, height: ${event.value.height}`
|
||||
if (event.action === 'goto*') return event.href
|
||||
if (event.action === 'navigation*') return ''
|
||||
|
||||
if (event.selector) {
|
||||
return event.selector
|
||||
}
|
||||
|
||||
const action = event?.action.toLowerCase()
|
||||
|
||||
if (action === 'viewport') {
|
||||
return `width: ${event.value.width} - height: ${event.value.height}`
|
||||
}
|
||||
if (action === 'goto') {
|
||||
return event.href
|
||||
}
|
||||
|
||||
return ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../assets/styles/_animations.scss';
|
||||
@import '../assets/styles/_variables.scss';
|
||||
|
||||
.recording-tab {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
.empty {
|
||||
padding: $spacer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.events {
|
||||
max-height: $max-content-height;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.loading:after {
|
||||
content: '.';
|
||||
animation: dots 1s steps(5, end) infinite;
|
||||
animation-delay: 1.5s;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.event-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.event-list-item {
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid $gray-light;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
height: 32px;
|
||||
|
||||
.event-label {
|
||||
vertical-align: top;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
|
||||
.event-description {
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
|
||||
.event-action {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.event-props {
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nag-cta {
|
||||
margin-bottom: $spacer;
|
||||
a {
|
||||
color: $pink;
|
||||
font-size: 80%;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<div class="tab results-tab">
|
||||
<div class="tabs">
|
||||
<div
|
||||
data-test-id="results-tab"
|
||||
class="flex flex-col bg-blue-light pt-2 overflow-hidden"
|
||||
>
|
||||
<div class="flex flex-row mb-2">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab"
|
||||
class="tabs__action"
|
||||
v-bind:class="{ selected: activeTab === tab }"
|
||||
class="text-gray w-1/2 font-semibold text-xs capitalize"
|
||||
:class="{ 'text-black': activeTab === tab }"
|
||||
@click.prevent="changeTab(tab)"
|
||||
>
|
||||
<span v-if="tab === 'playwright'">🎭</span>
|
||||
<img
|
||||
v-if="tab === 'puppeteer'"
|
||||
src="@/assets/images/puppeteer.png"
|
||||
width="16"
|
||||
/>
|
||||
<span class="tabs__action--text">{{ tab }}</span>
|
||||
{{ tab }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<pre v-if="code()" v-highlightjs="code()">
|
||||
<code class="javascript">
|
||||
<pre
|
||||
v-if="code()"
|
||||
v-highlightjs="code()"
|
||||
style="background: #2b2b2b"
|
||||
class="overflow-auto px-2 h-100"
|
||||
>
|
||||
<code class="javascript px-2 break-word whitespace-pre-wrap overflow-x-hidden">
|
||||
</code>
|
||||
</pre>
|
||||
<pre v-else>
|
||||
<pre v-else>
|
||||
<code>No code yet...</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -81,207 +81,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../assets/styles/_variables.scss';
|
||||
|
||||
.results-tab {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.generated-code {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
max-height: $max-content-height;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0 $spacer;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
code {
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
padding: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid $gray-lighter;
|
||||
&__action {
|
||||
padding: 12px 20px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: $gray-dark;
|
||||
outline: none;
|
||||
border-bottom: 4px solid transparent;
|
||||
text-transform: capitalize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&--text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&.selected {
|
||||
border-bottom-color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: #011627;
|
||||
color: #d6deeb;
|
||||
}
|
||||
|
||||
/* General Purpose */
|
||||
.hljs-keyword {
|
||||
color: #c792ea;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-built_in {
|
||||
color: #addb67;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-type {
|
||||
color: #82aaff;
|
||||
}
|
||||
.hljs-literal {
|
||||
color: #ff5874;
|
||||
}
|
||||
.hljs-number {
|
||||
color: #f78c6c;
|
||||
}
|
||||
.hljs-regexp {
|
||||
color: #5ca7e4;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #ecc48d;
|
||||
}
|
||||
.hljs-subst {
|
||||
color: #d3423e;
|
||||
}
|
||||
.hljs-symbol {
|
||||
color: #82aaff;
|
||||
}
|
||||
.hljs-class {
|
||||
color: #ffcb8b;
|
||||
}
|
||||
.hljs-function {
|
||||
color: #82aaff;
|
||||
}
|
||||
.hljs-title {
|
||||
color: #dcdcaa;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-params {
|
||||
color: #7fdbca;
|
||||
}
|
||||
|
||||
/* Meta */
|
||||
.hljs-comment {
|
||||
color: #637777;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-doctag {
|
||||
color: #7fdbca;
|
||||
}
|
||||
.hljs-meta {
|
||||
color: #82aaff;
|
||||
}
|
||||
.hljs-meta-keyword {
|
||||
color: #82aaff;
|
||||
}
|
||||
.hljs-meta-string {
|
||||
color: #ecc48d;
|
||||
}
|
||||
|
||||
/* Tags, attributes, config */
|
||||
.hljs-section {
|
||||
color: #82b1ff;
|
||||
}
|
||||
.hljs-tag,
|
||||
.hljs-name {
|
||||
color: #7fdbca;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #7fdbca;
|
||||
}
|
||||
.hljs-attribute {
|
||||
color: #80cbc4;
|
||||
}
|
||||
.hljs-variable {
|
||||
color: #addb67;
|
||||
}
|
||||
|
||||
/* Markup */
|
||||
.hljs-bullet {
|
||||
color: #d9f5dd;
|
||||
}
|
||||
.hljs-code {
|
||||
color: #80cbc4;
|
||||
}
|
||||
.hljs-emphasis {
|
||||
color: #c792ea;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-strong {
|
||||
color: #addb67;
|
||||
font-weight: bold;
|
||||
}
|
||||
.hljs-formula {
|
||||
color: #c792ea;
|
||||
}
|
||||
.hljs-link {
|
||||
color: #ff869a;
|
||||
}
|
||||
.hljs-quote {
|
||||
color: #697098;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CSS */
|
||||
.hljs-selector-tag {
|
||||
color: #ff6363;
|
||||
}
|
||||
|
||||
.hljs-selector-id {
|
||||
color: #fad430;
|
||||
}
|
||||
|
||||
.hljs-selector-class {
|
||||
color: #addb67;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #c792ea;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Templates */
|
||||
.hljs-template-tag {
|
||||
color: #c792ea;
|
||||
}
|
||||
.hljs-template-variable {
|
||||
color: #addb67;
|
||||
}
|
||||
|
||||
/* diff */
|
||||
.hljs-addition {
|
||||
color: #addb67ff;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #ef535090;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@ import eventsToRecord from '@/services/dom-events-to-record'
|
||||
import UIController from './UIController'
|
||||
import actions from '@/models/extension-ui-actions'
|
||||
import ctrl from '@/models/extension-control-messages'
|
||||
import finder from '@medv/finder'
|
||||
import { finder } from '@medv/finder'
|
||||
|
||||
const DEFAULT_MOUSE_CURSOR = 'default'
|
||||
|
||||
@@ -175,6 +175,8 @@ export default class EventRecorder {
|
||||
return `#${e.target.id}`
|
||||
}
|
||||
|
||||
console.log(finder(e.target))
|
||||
|
||||
return finder(e.target, {
|
||||
seedMinLength: 5,
|
||||
optimizedMinLength: e.target.id ? 2 : 10,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import puppeteer from 'puppeteer'
|
||||
import { launchPuppeteerWithExtension } from '@/__e2e-tests__/helpers'
|
||||
import { launchPuppeteerWithExtension } from '@/__tests__/helpers'
|
||||
import { waitForAndGetEvents, cleanEventLog, startServer } from './helpers'
|
||||
|
||||
let server
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import puppeteer from 'puppeteer'
|
||||
import _ from 'lodash'
|
||||
import { launchPuppeteerWithExtension } from '@/__e2e-tests__/helpers'
|
||||
import { launchPuppeteerWithExtension } from '@/__tests__/helpers'
|
||||
import { waitForAndGetEvents, cleanEventLog, startServer } from './helpers'
|
||||
|
||||
let server
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
"storage",
|
||||
"webNavigation",
|
||||
"activeTab",
|
||||
"cookies",
|
||||
"contextMenus",
|
||||
"management",
|
||||
"*://*/"
|
||||
|
||||
@@ -1,69 +1,113 @@
|
||||
<template>
|
||||
<div id="headless-recorder" class="recorder">
|
||||
<div class="header">
|
||||
<a href="#" @click="goHome">
|
||||
Headless recorder
|
||||
<span class="text-muted"
|
||||
><small>{{ version }}</small></span
|
||||
<div class="bg-blue-light p-4 flex flex-col h-screen overflow-hidden">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h1
|
||||
@click="goHome"
|
||||
role="button"
|
||||
class="text-sm font-semibold text-gray-darkest"
|
||||
>
|
||||
Headless Recorder
|
||||
</h1>
|
||||
<div class="flex">
|
||||
<div
|
||||
data-test-id="recording-badge"
|
||||
class="flex justify-center items-center text-red font-semibold"
|
||||
:class="{ 'animate-pulse': recordingBadgeText === 'recording' }"
|
||||
v-show="isRecording"
|
||||
>
|
||||
</a>
|
||||
<div class="left">
|
||||
<div class="recording-badge" v-show="isRecording">
|
||||
<span class="red-dot"></span>
|
||||
<span
|
||||
data-test-id="red-dot"
|
||||
class="bg-red rounded-full w-2 h-2 mr-1 "
|
||||
></span>
|
||||
{{ recordingBadgeText }}
|
||||
</div>
|
||||
<button @click="toggleShowHelp" class="header-button">
|
||||
<img src="@/assets/images/help.svg" alt="help" />
|
||||
<button @click="toggleShowHelp" class="ml-4">
|
||||
<img src="@/assets/icons/question.svg" alt="help" class="w-4" />
|
||||
</button>
|
||||
<button @click="openOptions" class="header-button">
|
||||
<img src="@/assets/images/settings.svg" alt="settings" />
|
||||
<button @click="openOptions" class="ml-2">
|
||||
<img src="@/assets/icons/gear.svg" alt="settings" class="w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="tabs" v-show="!showHelp">
|
||||
<RecordingTab
|
||||
:code="code"
|
||||
:is-recording="isRecording"
|
||||
:live-events="liveEvents"
|
||||
v-show="!showResultsTab"
|
||||
/>
|
||||
<div class="recording-footer" v-show="!showResultsTab">
|
||||
|
||||
<template v-if="!showHelp">
|
||||
<HomeTab v-if="!showResultsTab && !isRecording" @start="toggleRecord" />
|
||||
<RecordingTab
|
||||
:code="code"
|
||||
:is-recording="isRecording"
|
||||
:live-events="liveEvents"
|
||||
v-show="!showResultsTab && isRecording"
|
||||
/>
|
||||
<ResultsTab
|
||||
:puppeteer="code"
|
||||
:playwright="codeForPlaywright"
|
||||
:options="options"
|
||||
v-if="showResultsTab"
|
||||
v-on:update:tab="currentResultTab = $event"
|
||||
/>
|
||||
<div
|
||||
data-test-id="results-footer"
|
||||
class="flex py-2 px-3 justify-between bg-black rounded-b-md"
|
||||
v-show="showResultsTab"
|
||||
>
|
||||
<div class="flex">
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
@click="toggleRecord"
|
||||
:class="isRecording ? 'btn-danger' : 'btn-primary'"
|
||||
class="font-semibold text-sm text-white bg-blue flex justify-center items-center rounded-sm p-2 mr-3"
|
||||
@click="restart"
|
||||
v-show="code"
|
||||
>
|
||||
{{ recordButtonText }}
|
||||
<img src="@/assets/icons/history.svg" alt="restart recording" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-primary btn-outline-primary"
|
||||
@click="togglePause"
|
||||
v-show="isRecording"
|
||||
v-if="isLoggedIn"
|
||||
class="font-semibold text-sm text-white bg-blue flex justify-center items-center rounded-sm p-2"
|
||||
@click="run"
|
||||
v-show="code"
|
||||
>
|
||||
{{ pauseButtonText }}
|
||||
<img src="@/assets/icons/zap.svg" class="mr-2" alt="thunder" />
|
||||
Run on Checkly
|
||||
</button>
|
||||
<a href="#" @click="showResultsTab = true" v-show="code">view code</a>
|
||||
<checkly-badge v-if="!isRecording"></checkly-badge>
|
||||
</div>
|
||||
<ResultsTab
|
||||
:puppeteer="code"
|
||||
:playwright="codeForPlaywright"
|
||||
:options="options"
|
||||
v-if="showResultsTab"
|
||||
v-on:update:tab="currentResultTab = $event"
|
||||
/>
|
||||
<div class="results-footer" v-show="showResultsTab">
|
||||
<button class="btn btn-sm btn-primary" @click="restart" v-show="code">
|
||||
Restart
|
||||
</button>
|
||||
<a href="#" @click.prevent="setCopying" v-show="code">{{
|
||||
copyLinkText
|
||||
}}</a>
|
||||
<a
|
||||
v-else
|
||||
href="https://app.checklyhq.com/signup"
|
||||
class="text-xs text-white"
|
||||
>
|
||||
Signup on Checkly
|
||||
</a>
|
||||
</div>
|
||||
<button @click="copyCode" v-show="code">
|
||||
<img
|
||||
v-show="!isCopying"
|
||||
src="@/assets/icons/duplicate.svg"
|
||||
alt="copy code to clipboard"
|
||||
/>
|
||||
<span class="text-white text-xs" v-show="isCopying">copied!</span>
|
||||
</button>
|
||||
</div>
|
||||
<HelpTab v-show="showHelp"></HelpTab>
|
||||
</template>
|
||||
<!-- <HelpTab v-show="showHelp"></HelpTab> -->
|
||||
|
||||
<div
|
||||
class="flex justify-between pt-2"
|
||||
v-show="!showResultsTab && isRecording"
|
||||
>
|
||||
<button
|
||||
@click="toggleRecord"
|
||||
class="font-semibold text-sm text-white bg-red flex items-center rounded-sm p-2.5"
|
||||
>
|
||||
Finishing Recording
|
||||
</button>
|
||||
<button
|
||||
class="text-sm text-gray-dark"
|
||||
@click="togglePause"
|
||||
v-show="isRecording"
|
||||
>
|
||||
{{ pauseButtonText }}
|
||||
</button>
|
||||
<a href="#" @click="showResultsTab = true" v-show="code">view code</a>
|
||||
</div>
|
||||
|
||||
<Footer class="mt-2" v-if="!isRecording && !showResultsTab" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -74,8 +118,11 @@ import PuppeteerCodeGenerator from '@/services/PuppeteerCodeGenerator'
|
||||
import PlaywrightCodeGenerator from '@/services/PlaywrightCodeGenerator'
|
||||
import RecordingTab from '@/components/RecordingTab.vue'
|
||||
import ResultsTab from '@/components/ResultsTab.vue'
|
||||
import HelpTab from '@/components/HelpTab.vue'
|
||||
import ChecklyBadge from '@/components/ChecklyBadge.vue'
|
||||
import HomeTab from '@/components/HomeTab.vue'
|
||||
|
||||
// import HelpTab from '@/components/HelpTab.vue'
|
||||
|
||||
import Footer from '@/components/Footer.vue'
|
||||
|
||||
import actions from '@/models/extension-ui-actions'
|
||||
|
||||
@@ -83,12 +130,14 @@ let bus
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: { ResultsTab, RecordingTab, HelpTab, ChecklyBadge },
|
||||
components: { ResultsTab, RecordingTab, HomeTab, Footer },
|
||||
|
||||
data() {
|
||||
return {
|
||||
code: '',
|
||||
codeForPlaywright: '',
|
||||
options: {},
|
||||
isLoggedIn: false,
|
||||
showResultsTab: false,
|
||||
showHelp: false,
|
||||
liveEvents: [],
|
||||
@@ -101,6 +150,19 @@ export default {
|
||||
currentResultTab: null,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
recordingBadgeText() {
|
||||
return this.isPaused ? 'paused' : 'recording'
|
||||
},
|
||||
recordButtonText() {
|
||||
return this.isRecording ? 'Stop' : 'Record'
|
||||
},
|
||||
pauseButtonText() {
|
||||
return this.isPaused ? 'Resume' : 'Pause'
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadState(() => {
|
||||
this.trackPageView()
|
||||
@@ -118,12 +180,20 @@ export default {
|
||||
})
|
||||
|
||||
bus = chrome.extension.connect({ name: 'recordControls' })
|
||||
|
||||
chrome.cookies.getAll({}, res => {
|
||||
if (res.find(cookie => cookie.name.startsWith('checkly_has_account'))) {
|
||||
this.isLoggedIn = true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleRecord() {
|
||||
if (this.isRecording) {
|
||||
this.stop()
|
||||
} else {
|
||||
window.close()
|
||||
this.start()
|
||||
}
|
||||
this.isRecording = !this.isRecording
|
||||
@@ -219,13 +289,20 @@ export default {
|
||||
},
|
||||
})
|
||||
},
|
||||
setCopying() {
|
||||
this.trackEvent('Copy')
|
||||
this.isCopying = true
|
||||
setTimeout(() => {
|
||||
this.isCopying = false
|
||||
}, 1500)
|
||||
|
||||
copyCode() {
|
||||
navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
|
||||
if (result.state == 'granted' || result.state == 'prompt') {
|
||||
this.trackEvent('Copy')
|
||||
this.isCopying = true
|
||||
setTimeout(() => {
|
||||
this.isCopying = false
|
||||
navigator.clipboard.writeText(this.code)
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
goHome() {
|
||||
this.showResultsTab = false
|
||||
this.showHelp = false
|
||||
@@ -257,84 +334,18 @@ export default {
|
||||
? this.code
|
||||
: this.codeForPlaywright
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
recordingBadgeText() {
|
||||
return this.isPaused ? 'paused' : 'recording'
|
||||
},
|
||||
recordButtonText() {
|
||||
return this.isRecording ? 'Stop' : 'Record'
|
||||
},
|
||||
pauseButtonText() {
|
||||
return this.isPaused ? 'Resume' : 'Pause'
|
||||
},
|
||||
copyLinkText() {
|
||||
return this.isCopying ? 'copied!' : 'copy to clipboard'
|
||||
run() {
|
||||
const script = encodeURIComponent(btoa(this.code))
|
||||
const url = `https://app.checklyhq.com/checks/new/browser?framework=${this.currentResultTab}&script=${script}`
|
||||
chrome.tabs.create({ url })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../assets/styles/_animations.scss';
|
||||
@import '../assets/styles/_variables.scss';
|
||||
@import '../assets/styles/_mixins.scss';
|
||||
.recorder {
|
||||
font-size: 14px;
|
||||
|
||||
.header {
|
||||
@include header();
|
||||
|
||||
&-button {
|
||||
color: $gray-dark;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.recording-badge {
|
||||
color: $brand-danger;
|
||||
.red-dot {
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
background-color: $brand-danger;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 0.4rem;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.header-button {
|
||||
margin-left: $spacer;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recording-footer {
|
||||
@include footer();
|
||||
img {
|
||||
margin-left: 8px;
|
||||
width: 80px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.results-footer {
|
||||
@include footer();
|
||||
}
|
||||
<style>
|
||||
html {
|
||||
width: 360px;
|
||||
height: 535px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@ import App from './App.vue'
|
||||
import VueHighlightJS from 'vue3-highlightjs'
|
||||
import 'highlight.js/styles/a11y-dark.css'
|
||||
|
||||
import '@/assets/styles/main.scss'
|
||||
import '@/assets/tailwind.css'
|
||||
|
||||
createApp(App)
|
||||
.use(VueHighlightJS)
|
||||
|
||||
@@ -34,7 +34,7 @@ export default class CodeGenerator {
|
||||
let hdr = this._options.wrapAsync ? this._wrappedHeader : this._header
|
||||
hdr = this._options.headless
|
||||
? hdr
|
||||
: hdr.replace('launch()', 'launch({ headless: false })')
|
||||
: hdr?.replace('launch()', 'launch({ headless: false })')
|
||||
return hdr
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@ export default class CodeGenerator {
|
||||
frameUrl,
|
||||
} = events[i]
|
||||
const escapedSelector = selector
|
||||
? selector.replace(/\\/g, '\\\\')
|
||||
? selector?.replace(/\\/g, '\\\\')
|
||||
: selector
|
||||
|
||||
// we need to keep a handle on what frames events originate from
|
||||
@@ -263,6 +263,6 @@ export default class CodeGenerator {
|
||||
}
|
||||
|
||||
_escapeUserInput(value) {
|
||||
return value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
|
||||
return value?.replace(/\\/g, '\\\\')?.replace(/'/g, "\\'")
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user