Add device browser icons
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 2m9s

This commit is contained in:
Braydon 2024-09-22 21:09:30 -04:00
parent dd24443670
commit 580ff7a602
9 changed files with 370 additions and 14 deletions

BIN
bun.lockb Normal file

Binary file not shown.

@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="48"
width="48">
<defs>
<linearGradient id="a" x1="3.2173" y1="15" x2="44.7812" y2="15" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d93025"/>
<stop offset="1" stop-color="#ea4335"/>
</linearGradient>
<linearGradient id="b" x1="20.7219" y1="47.6791" x2="41.5039" y2="11.6837" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fcc934"/>
<stop offset="1" stop-color="#fbbc04"/>
</linearGradient>
<linearGradient id="c" x1="26.5981" y1="46.5015" x2="5.8161" y2="10.506" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1e8e3e"/>
<stop offset="1" stop-color="#34a853"/>
</linearGradient>
</defs>
<circle cx="24" cy="23.9947" r="12" style="fill:#fff"/>
<path d="M3.2154,36A24,24,0,1,0,12,3.2154,24,24,0,0,0,3.2154,36ZM34.3923,18A12,12,0,1,1,18,13.6077,12,12,0,0,1,34.3923,18Z"
style="fill:none"/>
<path d="M24,12H44.7812a23.9939,23.9939,0,0,0-41.5639.0029L13.6079,30l.0093-.0024A11.9852,11.9852,0,0,1,24,12Z"
style="fill:url(#a)"/>
<circle cx="24" cy="24" r="9.5" style="fill:#1a73e8"/>
<path d="M34.3913,30.0029,24.0007,48A23.994,23.994,0,0,0,44.78,12.0031H23.9989l-.0025.0093A11.985,11.985,0,0,1,34.3913,30.0029Z"
style="fill:url(#b)"/>
<path d="M13.6086,30.0031,3.218,12.006A23.994,23.994,0,0,0,24.0025,48L34.3931,30.0029l-.0067-.0068a11.9852,11.9852,0,0,1-20.7778.007Z"
style="fill:url(#c)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -0,0 +1,53 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<defs>
<radialGradient id="b" cx="161.8" cy="68.9" r="95.4" gradientTransform="matrix(1 0 0 -.95 0 248.8)"
gradientUnits="userSpaceOnUse">
<stop offset=".7" stop-opacity="0"/>
<stop offset=".9" stop-opacity=".5"/>
<stop offset="1"/>
</radialGradient>
<radialGradient id="d" cx="-340.3" cy="63" r="143.2" gradientTransform="matrix(.15 -.99 -.8 -.12 176.6 -125.4)"
gradientUnits="userSpaceOnUse">
<stop offset=".8" stop-opacity="0"/>
<stop offset=".9" stop-opacity=".5"/>
<stop offset="1"/>
</radialGradient>
<radialGradient id="e" cx="113.4" cy="570.2" r="202.4"
gradientTransform="matrix(-.04 1 2.13 .08 -1179.5 -106.7)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#35c1f1"/>
<stop offset=".1" stop-color="#34c1ed"/>
<stop offset=".2" stop-color="#2fc2df"/>
<stop offset=".3" stop-color="#2bc3d2"/>
<stop offset=".7" stop-color="#36c752"/>
</radialGradient>
<radialGradient id="f" cx="376.5" cy="568" r="97.3" gradientTransform="matrix(.28 .96 .78 -.23 -303.8 -148.5)"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#66eb6e"/>
<stop offset="1" stop-color="#66eb6e" stop-opacity="0"/>
</radialGradient>
<linearGradient id="a" x1="63.3" y1="84" x2="241.7" y2="84" gradientTransform="matrix(1 0 0 -1 0 266)"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#0c59a4"/>
<stop offset="1" stop-color="#114a8b"/>
</linearGradient>
<linearGradient id="c" x1="157.3" y1="161.4" x2="46" y2="40.1" gradientTransform="matrix(1 0 0 -1 0 266)"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1b9de2"/>
<stop offset=".2" stop-color="#1595df"/>
<stop offset=".7" stop-color="#0680d7"/>
<stop offset="1" stop-color="#0078d4"/>
</linearGradient>
</defs>
<path d="M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z"
transform="translate(-4.6 -5)" style="fill:url(#a)"/>
<path d="M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z"
transform="translate(-4.6 -5)" style="isolation:isolate;opacity:.35;fill:url(#b)"/>
<path d="M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z"
transform="translate(-4.6 -5)" style="fill:url(#c)"/>
<path d="M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z"
transform="translate(-4.6 -5)" style="opacity:.41;fill:url(#d);isolation:isolate"/>
<path d="M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z"
transform="translate(-4.6 -5)" style="fill:url(#e)"/>
<path d="M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z"
transform="translate(-4.6 -5)" style="fill:url(#f)"/>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

@ -0,0 +1,147 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" width="77.42" height="79.97"
version="1.1" viewBox="0 0 77.42 79.97"
xmlns="http://www.w3.org/2000/svg">
<title>Firefox Browser logo</title>
<defs>
<linearGradient id="a" x1="70.79" x2="6.447" y1="12.39" y2="74.47" gradientTransform="translate(-1.3 -.004086)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#fff44f" offset=".048"/>
<stop stop-color="#ffe847" offset=".111"/>
<stop stop-color="#ffc830" offset=".225"/>
<stop stop-color="#ff980e" offset=".368"/>
<stop stop-color="#ff8b16" offset=".401"/>
<stop stop-color="#ff672a" offset=".462"/>
<stop stop-color="#ff3647" offset=".534"/>
<stop stop-color="#e31587" offset=".705"/>
</linearGradient>
<radialGradient id="b" cx="-7907" cy="-8515" r="80.8" gradientTransform="translate(7974,8524)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#ffbd4f" offset=".129"/>
<stop stop-color="#ffac31" offset=".186"/>
<stop stop-color="#ff9d17" offset=".247"/>
<stop stop-color="#ff980e" offset=".283"/>
<stop stop-color="#ff563b" offset=".403"/>
<stop stop-color="#ff3750" offset=".467"/>
<stop stop-color="#f5156c" offset=".71"/>
<stop stop-color="#eb0878" offset=".782"/>
<stop stop-color="#e50080" offset=".86"/>
</radialGradient>
<radialGradient id="c" cx="-7937" cy="-8482" r="80.8" gradientTransform="translate(7974,8524)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#960e18" offset=".3"/>
<stop stop-color="#b11927" stop-opacity=".74" offset=".351"/>
<stop stop-color="#db293d" stop-opacity=".343" offset=".435"/>
<stop stop-color="#f5334b" stop-opacity=".094" offset=".497"/>
<stop stop-color="#ff3750" stop-opacity="0" offset=".53"/>
</radialGradient>
<radialGradient id="d" cx="-7927" cy="-8533" r="58.53" gradientTransform="translate(7974,8524)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#fff44f" offset=".132"/>
<stop stop-color="#ffdc3e" offset=".252"/>
<stop stop-color="#ff9d12" offset=".506"/>
<stop stop-color="#ff980e" offset=".526"/>
</radialGradient>
<radialGradient id="e" cx="-7946" cy="-8461" r="38.47" gradientTransform="translate(7974,8524)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#3a8ee6" offset=".353"/>
<stop stop-color="#5c79f0" offset=".472"/>
<stop stop-color="#9059ff" offset=".669"/>
<stop stop-color="#c139e6" offset="1"/>
</radialGradient>
<radialGradient id="f" cx="-7936" cy="-8492" r="20.4"
gradientTransform="matrix(.972 -.235 .275 1.138 10090 7834)" gradientUnits="userSpaceOnUse">
<stop stop-color="#9059ff" stop-opacity="0" offset=".206"/>
<stop stop-color="#8c4ff3" stop-opacity=".064" offset=".278"/>
<stop stop-color="#7716a8" stop-opacity=".45" offset=".747"/>
<stop stop-color="#6e008b" stop-opacity=".6" offset=".975"/>
</radialGradient>
<radialGradient id="g" cx="-7938" cy="-8518" r="27.68" gradientTransform="translate(7974,8524)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#ffe226" offset="0"/>
<stop stop-color="#ffdb27" offset=".121"/>
<stop stop-color="#ffc82a" offset=".295"/>
<stop stop-color="#ffa930" offset=".502"/>
<stop stop-color="#ff7e37" offset=".732"/>
<stop stop-color="#ff7139" offset=".792"/>
</radialGradient>
<radialGradient id="h" cx="-7916" cy="-8536" r="118.1" gradientTransform="translate(7974,8524)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#fff44f" offset=".113"/>
<stop stop-color="#ff980e" offset=".456"/>
<stop stop-color="#ff5634" offset=".622"/>
<stop stop-color="#ff3647" offset=".716"/>
<stop stop-color="#e31587" offset=".904"/>
</radialGradient>
<radialGradient id="i" cx="-7927" cy="-8523" r="86.5"
gradientTransform="matrix(.105 .995 -.653 .069 -4685 8470)" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff44f" offset="0"/>
<stop stop-color="#ffe847" offset=".06"/>
<stop stop-color="#ffc830" offset=".168"/>
<stop stop-color="#ff980e" offset=".304"/>
<stop stop-color="#ff8b16" offset=".356"/>
<stop stop-color="#ff672a" offset=".455"/>
<stop stop-color="#ff3647" offset=".57"/>
<stop stop-color="#e31587" offset=".737"/>
</radialGradient>
<radialGradient id="j" cx="-7938" cy="-8508" r="73.72" gradientTransform="translate(7974,8524)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#fff44f" offset=".137"/>
<stop stop-color="#ff980e" offset=".48"/>
<stop stop-color="#ff5634" offset=".592"/>
<stop stop-color="#ff3647" offset=".655"/>
<stop stop-color="#e31587" offset=".904"/>
</radialGradient>
<radialGradient id="k" cx="-7919" cy="-8504" r="80.69" gradientTransform="translate(7974,8524)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#fff44f" offset=".094"/>
<stop stop-color="#ffe141" offset=".231"/>
<stop stop-color="#ffaf1e" offset=".509"/>
<stop stop-color="#ff980e" offset=".626"/>
</radialGradient>
<linearGradient id="l" x1="70.01" x2="15.27" y1="12.06" y2="66.81" gradientTransform="translate(-1.3 -.004086)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#fff44f" stop-opacity=".8" offset=".167"/>
<stop stop-color="#fff44f" stop-opacity=".634" offset=".266"/>
<stop stop-color="#fff44f" stop-opacity=".217" offset=".489"/>
<stop stop-color="#fff44f" stop-opacity="0" offset=".6"/>
</linearGradient>
</defs>
<g transform="matrix(.9819843 0 0 .9819843 .6974849 .7199239)">
<path d="m74.62 26.83c-1.684-4.052-5.1-8.427-7.775-9.81a40.27 40.27 0 0 1 3.925 11.76l7e-3 0.065c-4.382-10.92-11.81-15.33-17.88-24.92-0.307-0.485-0.614-0.971-0.913-1.484-0.171-0.293-0.308-0.557-0.427-0.8a7.053 7.053 0 0 1-0.578-1.535 0.1 0.1 0 0 0-0.088-0.1 0.138 0.138 0 0 0-0.073 0c-5e-3 0-0.013 9e-3 -0.019 0.011s-0.019 0.011-0.028 0.015l0.015-0.026c-9.735 5.7-13.04 16.25-13.34 21.53a19.39 19.39 0 0 0-10.67 4.111 11.59 11.59 0 0 0-1-0.758 17.97 17.97 0 0 1-0.109-9.473 28.7 28.7 0 0 0-9.329 7.21h-0.018c-1.536-1.947-1.428-8.367-1.34-9.708a6.928 6.928 0 0 0-1.294 0.687 28.22 28.22 0 0 0-3.788 3.245 33.84 33.84 0 0 0-3.623 4.347v6e-3 -7e-3a32.73 32.73 0 0 0-5.2 11.74l-0.052 0.256c-0.073 0.341-0.336 2.049-0.381 2.42 0 0.029-6e-3 0.056-9e-3 0.085a36.94 36.94 0 0 0-0.629 5.343v0.2a38.76 38.76 0 0 0 76.95 6.554c0.065-0.5 0.118-0.995 0.176-1.5a39.86 39.86 0 0 0-2.514-19.47zm-44.67 30.34c0.181 0.087 0.351 0.181 0.537 0.264l0.027 0.017q-0.282-0.135-0.564-0.281zm8.878-23.38m31.95-4.934v-0.037l7e-3 0.041z"
fill="url(#a)"/>
<path d="m74.62 26.83c-1.684-4.052-5.1-8.427-7.775-9.81a40.27 40.27 0 0 1 3.925 11.76v0.037l7e-3 0.041a35.1 35.1 0 0 1-1.206 26.16c-4.442 9.531-15.19 19.3-32.02 18.82-18.18-0.515-34.2-14.01-37.19-31.68-0.545-2.787 0-4.2 0.274-6.465a28.88 28.88 0 0 0-0.623 5.348v0.2a38.76 38.76 0 0 0 76.95 6.554c0.065-0.5 0.118-0.995 0.176-1.5a39.86 39.86 0 0 0-2.514-19.47z"
fill="url(#b)"/>
<path d="m74.62 26.83c-1.684-4.052-5.1-8.427-7.775-9.81a40.27 40.27 0 0 1 3.925 11.76v0.037l7e-3 0.041a35.1 35.1 0 0 1-1.206 26.16c-4.442 9.531-15.19 19.3-32.02 18.82-18.18-0.515-34.2-14.01-37.19-31.68-0.545-2.787 0-4.2 0.274-6.465a28.88 28.88 0 0 0-0.623 5.348v0.2a38.76 38.76 0 0 0 76.95 6.554c0.065-0.5 0.118-0.995 0.176-1.5a39.86 39.86 0 0 0-2.514-19.47z"
fill="url(#c)"/>
<path d="m55.78 31.38c0.084 0.059 0.162 0.118 0.241 0.177a21.1 21.1 0 0 0-3.6-4.695c-12.05-12.05-3.157-26.12-1.658-26.84l0.015-0.022c-9.735 5.7-13.04 16.25-13.34 21.53 0.452-0.031 0.9-0.069 1.362-0.069a19.56 19.56 0 0 1 16.98 9.917z"
fill="url(#d)"/>
<path d="m38.82 33.79c-0.064 0.964-3.47 4.289-4.661 4.289-11.02 0-12.81 6.667-12.81 6.667 0.488 5.614 4.4 10.24 9.129 12.68 0.216 0.112 0.435 0.213 0.654 0.312q0.569 0.252 1.138 0.466a17.24 17.24 0 0 0 5.043 0.973c19.32 0.906 23.06-23.1 9.119-30.07a13.38 13.38 0 0 1 9.345 2.269 19.56 19.56 0 0 0-16.98-9.917c-0.46 0-0.91 0.038-1.362 0.069a19.39 19.39 0 0 0-10.67 4.111c0.591 0.5 1.258 1.168 2.663 2.553 2.63 2.591 9.375 5.275 9.39 5.59z"
fill="url(#e)"/>
<path d="m38.82 33.79c-0.064 0.964-3.47 4.289-4.661 4.289-11.02 0-12.81 6.667-12.81 6.667 0.488 5.614 4.4 10.24 9.129 12.68 0.216 0.112 0.435 0.213 0.654 0.312q0.569 0.252 1.138 0.466a17.24 17.24 0 0 0 5.043 0.973c19.32 0.906 23.06-23.1 9.119-30.07a13.38 13.38 0 0 1 9.345 2.269 19.56 19.56 0 0 0-16.98-9.917c-0.46 0-0.91 0.038-1.362 0.069a19.39 19.39 0 0 0-10.67 4.111c0.591 0.5 1.258 1.168 2.663 2.553 2.63 2.591 9.375 5.275 9.39 5.59z"
fill="url(#f)"/>
<path d="m24.96 24.36c0.314 0.2 0.573 0.374 0.8 0.531a17.97 17.97 0 0 1-0.109-9.473 28.7 28.7 0 0 0-9.329 7.21c0.189-5e-3 5.811-0.106 8.638 1.732z"
fill="url(#g)"/>
<path d="m0.354 42.16c2.991 17.67 19.01 31.17 37.19 31.68 16.83 0.476 27.58-9.294 32.02-18.82a35.1 35.1 0 0 0 1.206-26.16v-0.037c0-0.029-6e-3 -0.046 0-0.037l7e-3 0.065c1.375 8.977-3.191 17.67-10.33 23.56l-0.022 0.05c-13.91 11.33-27.22 6.834-29.91 5q-0.282-0.135-0.564-0.281c-8.109-3.876-11.46-11.26-10.74-17.6a9.953 9.953 0 0 1-9.181-5.775 14.62 14.62 0 0 1 14.25-0.572 19.3 19.3 0 0 0 14.55 0.572c-0.015-0.315-6.76-3-9.39-5.59-1.405-1.385-2.072-2.052-2.663-2.553a11.59 11.59 0 0 0-1-0.758c-0.23-0.157-0.489-0.327-0.8-0.531-2.827-1.838-8.449-1.737-8.635-1.732h-0.018c-1.536-1.947-1.428-8.367-1.34-9.708a6.928 6.928 0 0 0-1.294 0.687 28.22 28.22 0 0 0-3.788 3.245 33.84 33.84 0 0 0-3.638 4.337v6e-3 -7e-3a32.73 32.73 0 0 0-5.2 11.74c-0.019 0.079-1.396 6.099-0.717 9.221z"
fill="url(#h)"/>
<path d="m52.42 26.86a21.1 21.1 0 0 1 3.6 4.7c0.213 0.161 0.412 0.321 0.581 0.476 8.787 8.1 4.183 19.55 3.84 20.36 7.138-5.881 11.7-14.58 10.33-23.56-4.384-10.93-11.82-15.34-17.88-24.93-0.307-0.485-0.614-0.971-0.913-1.484-0.171-0.293-0.308-0.557-0.427-0.8a7.053 7.053 0 0 1-0.578-1.535 0.1 0.1 0 0 0-0.088-0.1 0.138 0.138 0 0 0-0.073 0c-5e-3 0-0.013 9e-3 -0.019 0.011s-0.019 0.011-0.028 0.015c-1.499 0.711-10.39 14.79 1.66 26.83z"
fill="url(#i)"/>
<path d="m56.6 32.04c-0.169-0.155-0.368-0.315-0.581-0.476-0.079-0.059-0.157-0.118-0.241-0.177a13.38 13.38 0 0 0-9.345-2.269c13.94 6.97 10.2 30.97-9.119 30.07a17.24 17.24 0 0 1-5.043-0.973q-0.569-0.213-1.138-0.466c-0.219-0.1-0.438-0.2-0.654-0.312l0.027 0.017c2.694 1.839 16 6.332 29.91-5l0.022-0.05c0.347-0.81 4.951-12.26-3.84-20.36z"
fill="url(#j)"/>
<path d="m21.35 44.74s1.789-6.667 12.81-6.667c1.191 0 4.6-3.325 4.661-4.289a19.3 19.3 0 0 1-14.55-0.572 14.62 14.62 0 0 0-14.25 0.572 9.953 9.953 0 0 0 9.181 5.775c-0.718 6.337 2.632 13.72 10.74 17.6 0.181 0.087 0.351 0.181 0.537 0.264-4.733-2.445-8.641-7.069-9.129-12.68z"
fill="url(#k)"/>
<path d="m74.62 26.83c-1.684-4.052-5.1-8.427-7.775-9.81a40.27 40.27 0 0 1 3.925 11.76l7e-3 0.065c-4.382-10.92-11.81-15.33-17.88-24.92-0.307-0.485-0.614-0.971-0.913-1.484-0.171-0.293-0.308-0.557-0.427-0.8a7.053 7.053 0 0 1-0.578-1.535 0.1 0.1 0 0 0-0.088-0.1 0.138 0.138 0 0 0-0.073 0c-5e-3 0-0.013 9e-3 -0.019 0.011s-0.019 0.011-0.028 0.015l0.015-0.026c-9.735 5.7-13.04 16.25-13.34 21.53 0.452-0.031 0.9-0.069 1.362-0.069a19.56 19.56 0 0 1 16.98 9.917 13.38 13.38 0 0 0-9.345-2.269c13.94 6.97 10.2 30.97-9.119 30.07a17.24 17.24 0 0 1-5.043-0.973q-0.569-0.213-1.138-0.466c-0.219-0.1-0.438-0.2-0.654-0.312l0.027 0.017q-0.282-0.135-0.564-0.281c0.181 0.087 0.351 0.181 0.537 0.264-4.733-2.446-8.641-7.07-9.129-12.68 0 0 1.789-6.667 12.81-6.667 1.191 0 4.6-3.325 4.661-4.289-0.015-0.315-6.76-3-9.39-5.59-1.405-1.385-2.072-2.052-2.663-2.553a11.59 11.59 0 0 0-1-0.758 17.97 17.97 0 0 1-0.109-9.473 28.7 28.7 0 0 0-9.329 7.21h-0.018c-1.536-1.947-1.428-8.367-1.34-9.708a6.928 6.928 0 0 0-1.294 0.687 28.22 28.22 0 0 0-3.788 3.245 33.84 33.84 0 0 0-3.623 4.347v6e-3 -7e-3a32.73 32.73 0 0 0-5.2 11.74l-0.052 0.256c-0.073 0.341-0.4 2.073-0.447 2.445a45.09 45.09 0 0 0-0.572 5.403v0.2a38.76 38.76 0 0 0 76.95 6.554c0.065-0.5 0.118-0.995 0.176-1.5a39.86 39.86 0 0 0-2.514-19.47zm-3.845 1.991 7e-3 0.041z"
fill="url(#l)"/>
</g>
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:title>Firefox Browser logo</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 17 KiB

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" x="0px"
y="0px" viewBox="0 0 493 493" enable-background="new 0 0 493 493" xml:space="preserve">
<g>
<path fill="#7882FF"
d="M488.5,173c-6.1-45.8-22.3-87.3-50.8-117.7h0C407.3,26.8,365.8,10.6,320,4.5c-43.7-5.8-73.5-4.4-73.5-4.4 S216.7-1.3,173,4.5c-45.8,6.1-87.3,22.3-117.6,50.8C26.8,85.7,10.6,127.2,4.5,173c-5.8,43.7-4.4,73.5-4.4,73.5s-1.4,29.8,4.4,73.5 c6.1,45.8,22.3,87.3,50.8,117.7c30.4,28.6,71.9,44.8,117.6,50.9c43.7,5.8,73.5,4.4,73.5,4.4s29.8,1.4,73.5-4.4 c45.8-6.1,87.3-22.3,117.6-50.9h0c28.6-30.4,44.8-71.9,50.8-117.7c5.8-43.7,4.4-73.5,4.4-73.5S494.3,216.7,488.5,173"/>
<path fill="#FFFFFF"
d="M372.7,210c19.5,70-21.5,142.6-91.5,162.1c-70,19.5-142.6-21.5-162.1-91.5c-19.5-70,21.5-142.6,91.5-162.1 C280.6,99,353.2,140,372.7,210"/>
<path fill="#FFFFFF" d="M372.7,210c7.3,26.3,6.1,52.9-1.9,76.9c-0.6,1.9-1.3,3.9-2.1,5.8"/>
<path fill="#FFFFFF" d="M370.6,210c5.1,18.4,6.1,37,3.4,54.7"/>
<path fill="#4D5CC1"
d="M333.9,337.7L333.9,337.7c-33.3,0-73.8-8.5-114.2-23.8c-40.4-15.3-76.3-35.9-101.2-58 c-40.4-35.9-37.9-63.7-32.8-77.1c5.1-13.4,21.7-35.9,75.7-35.9h0c33.3,0,73.8,8.5,114.2,23.8c40.4,15.3,76.3,35.9,101.2,58 c40.4,35.9,37.9,63.7,32.8,77.1C404.6,315.2,388,337.7,333.9,337.7 M161.5,184.6c-25,0-35.7,6.2-36.8,9 c-1.1,2.8,2.9,14.6,21.6,31.2c20.9,18.5,53.1,36.9,88.3,50.2c35.2,13.4,71.5,21.1,99.4,21.1h0c25,0,35.7-6.2,36.8-9 c1.1-2.8-2.9-14.6-21.5-31.2c-20.9-18.5-53.1-36.9-88.3-50.2C225.6,192.3,189.4,184.6,161.5,184.6L161.5,184.6L161.5,184.6z"/>
<path fill="#FFFFFF"
d="M124.7,194l245.9,93.4c8.2-24.2,9.5-51,2.1-77.4c-19.5-70-92-111-162.1-91.5 C170.4,129.7,139.8,158.4,124.7,194"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@ -0,0 +1,36 @@
import { ReactElement } from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import SimpleTooltip from "@/components/simple-tooltip";
const CreateStatusPageDialog = (): ReactElement => {
return (
<Dialog>
<DialogTrigger>
<SimpleTooltip content="Create a new status page">
<Button className="w-20" variant="outline" size="sm">
Create
</Button>
</SimpleTooltip>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently
delete your account and remove your data from our
servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
);
};
export default CreateStatusPageDialog;

@ -1,13 +1,12 @@
"use client"; "use client";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { Button } from "@/components/ui/button";
import SimpleTooltip from "@/components/simple-tooltip";
import { Organization } from "@/app/types/org/organization"; import { Organization } from "@/app/types/org/organization";
import { useOrganizationContext } from "@/app/provider/organization-provider"; import { useOrganizationContext } from "@/app/provider/organization-provider";
import { OrganizationState } from "@/app/store/organization-store"; import { OrganizationState } from "@/app/store/organization-store";
import { StatusPage as StatusPageType } from "@/app/types/page/status-page"; import { StatusPage as StatusPageType } from "@/app/types/page/status-page";
import StatusPage from "@/components/dashboard/org/status-page/status-page"; import StatusPage from "@/components/dashboard/org/status-page/status-page";
import CreateStatusPageDialog from "@/components/dashboard/org/status-page/create-status-page-dialog";
/** /**
* A list of status pages for the * A list of status pages for the
@ -22,11 +21,9 @@ const StatusPageList = (): ReactElement => {
return ( return (
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{/* Create */} {/* Create */}
<SimpleTooltip content="Create a new status page"> <div>
<Button className="w-24" variant="outline" size="sm" disabled> <CreateStatusPageDialog />
Create </div>
</Button>
</SimpleTooltip>
{/* Status Pages */} {/* Status Pages */}
{organization?.statusPages.map( {organization?.statusPages.map(

@ -7,15 +7,29 @@ import { DateTime } from "luxon";
import { import {
ArrowLeftEndOnRectangleIcon, ArrowLeftEndOnRectangleIcon,
ComputerDesktopIcon, ComputerDesktopIcon,
DevicePhoneMobileIcon,
DeviceTabletIcon,
QuestionMarkCircleIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import SimpleTooltip from "@/components/simple-tooltip";
import Image from "next/image";
const deviceIcons = { const deviceIcons = {
DESKTOP: <ComputerDesktopIcon />, DESKTOP: <ComputerDesktopIcon />,
TABLET: <ComputerDesktopIcon />, TABLET: <DeviceTabletIcon />,
PHONE: <ComputerDesktopIcon />, PHONE: <DevicePhoneMobileIcon />,
UNKNOWN: <ComputerDesktopIcon />, UNKNOWN: <QuestionMarkCircleIcon />,
};
const browserIcons = {
FIREFOX: "firefox.svg",
EDGE: "edge.svg",
CHROME: "firefox.svg",
SAFARI: "safari.svg",
SAMSUNGBROWSER: "samsung.svg",
UNKNOWN: <QuestionMarkCircleIcon />,
}; };
const Device = ({ const Device = ({
@ -28,6 +42,7 @@ const Device = ({
const [timeSinceFirstLogin, setTimeSinceFirstLogin] = useState( const [timeSinceFirstLogin, setTimeSinceFirstLogin] = useState(
DateTime.fromISO(device.firstLogin.toString()).toRelative() DateTime.fromISO(device.firstLogin.toString()).toRelative()
); );
const browserIcon: ReactElement | string = browserIcons[device.browserType];
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
@ -45,6 +60,18 @@ const Device = ({
<div className="relative w-6 h-6"> <div className="relative w-6 h-6">
{deviceIcons[device.type]} {deviceIcons[device.type]}
</div> </div>
<div className="absolute bottom-0 right-0 w-3.5 h-3.5">
{typeof browserIcon === "string" ? (
<Image
src={`/media/browsers/${browserIcon}`}
alt={`The ${capitalizeWords(device.browserType)} browser icon`}
fill
draggable={false}
/>
) : (
browserIcon
)}
</div>
</div> </div>
{/* Name & Location */} {/* Name & Location */}
@ -53,10 +80,12 @@ const Device = ({
{capitalizeWords(device.type)} ·{" "} {capitalizeWords(device.type)} ·{" "}
{capitalizeWords(device.browserType)} {capitalizeWords(device.browserType)}
</h1> </h1>
<SimpleTooltip content={`IP Address: ${device.ip}`}>
<p className="opacity-75"> <p className="opacity-75">
{device.location ?? "Unknown Location"} ·{" "} {device.location ?? "Unknown Location"} ·{" "}
{timeSinceFirstLogin} {timeSinceFirstLogin}
</p> </p>
</SimpleTooltip>
</div> </div>
{/* Corner Content */} {/* Corner Content */}