From 486ee68ca8da60f6b87191e674552bde5100425d Mon Sep 17 00:00:00 2001
From: Uku Taht <Uku.taht@gmail.com>
Date: Thu, 20 Jun 2024 17:32:08 +0300
Subject: [PATCH] Browser icon improvements (#4246)

* Use png for Safari icon

* Fix spacing for screen sizes

* Add browser icon to version drilldown
---
 assets/js/dashboard/stats/devices/index.js |  36 +++++++++++++++------
 priv/static/images/icon/browser/safari.png | Bin 0 -> 3164 bytes
 priv/static/images/icon/browser/safari.svg |   1 -
 3 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 priv/static/images/icon/browser/safari.png
 delete mode 100644 priv/static/images/icon/browser/safari.svg

diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index ccf142d33..7fd8ec58e 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -10,7 +10,7 @@ import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warni
 // Icons copied from https://github.com/alrra/browser-logos
 const BROWSER_ICONS = {
   'Chrome': 'chrome.svg',
-  'Safari': 'safari.svg',
+  'Safari': 'safari.png',
   'Firefox': 'firefox.svg',
   'Microsoft Edge': 'edge.svg',
   'Vivaldi': 'vivaldi.svg',
@@ -28,6 +28,17 @@ const BROWSER_ICONS = {
   'vivo Browser': 'vivo.png'
 }
 
+function browserIconFor(browser) {
+  const filename = BROWSER_ICONS[browser] || 'fallback.svg'
+
+  return (
+    <img
+      src={`/images/icon/browser/${filename}`}
+      className="w-4 h-4 mr-2"
+    />
+  )
+}
+
 function Browsers({ query, site, afterFetchData }) {
   function fetchData() {
     return api.get(url.apiPath(site, '/browsers'), query)
@@ -41,14 +52,7 @@ function Browsers({ query, site, afterFetchData }) {
   }
 
   function renderIcon(listItem) {
-    const filename = BROWSER_ICONS[listItem.name] || 'fallback.svg'
-
-    return (
-      <img
-        src={`/images/icon/browser/${filename}`}
-        className="w-4 h-4 mr-2"
-      />
-    )
+    return browserIconFor(listItem.name)
   }
 
   return (
@@ -67,6 +71,15 @@ function Browsers({ query, site, afterFetchData }) {
 function BrowserVersions({ query, site, afterFetchData }) {
   function fetchData() {
     return api.get(url.apiPath(site, '/browser-versions'), query)
+      .then(res => {
+        return {...res, results: res.results.map((row => {
+          return {...row, name: `${row.browser} ${row.name}`}
+        }))}
+      })
+  }
+
+  function renderIcon(listItem) {
+    return browserIconFor(listItem.browser)
   }
 
   function getFilterFor(listItem) {
@@ -86,6 +99,7 @@ function BrowserVersions({ query, site, afterFetchData }) {
       getFilterFor={getFilterFor}
       keyLabel="Browser version"
       metrics={maybeWithCR([VISITORS_METRIC, PERCENTAGE_METRIC], query)}
+      renderIcon={renderIcon}
       query={query}
     />
   )
@@ -150,7 +164,9 @@ function ScreenSizes({ query, site, afterFetchData }) {
   }
 
   function renderIcon(screenSize) {
-    return iconFor(screenSize.name)
+    return (
+      <span className="mr-1.5">{iconFor(screenSize.name)}</span>
+    )
   }
 
   function getFilterFor(listItem) {
diff --git a/priv/static/images/icon/browser/safari.png b/priv/static/images/icon/browser/safari.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ec59640dbeb5fb0662ebace25a870225c4af628
GIT binary patch
literal 3164
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

literal 0
HcmV?d00001

diff --git a/priv/static/images/icon/browser/safari.svg b/priv/static/images/icon/browser/safari.svg
deleted file mode 100644
index 5b128f31b..000000000
--- a/priv/static/images/icon/browser/safari.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="194.5 190.1 135.1 135.1"><style>.b{color-interpolation-filters:srgb}.c{flood-opacity:.31}</style><defs><linearGradient id="a" x1="132.55" x2="134.37" y1="111.67" y2="-105.3" xlink:href="#b"><stop offset="0" stop-color="#d2d2d2"/><stop offset=".53" stop-color="#f2f2f2"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse"/><linearGradient id="c" x1="65.44" x2="67.4" y1="115.72" y2="17.14" xlink:href="#b"><stop offset="0" stop-color="#005ad5"/><stop offset=".16" stop-color="#0875f0"/><stop offset=".31" stop-color="#218cee"/><stop offset=".63" stop-color="#27a5f3"/><stop offset=".81" stop-color="#25aaf2"/><stop offset="1" stop-color="#21aaef"/></linearGradient><linearGradient id="d" x1="158.7" x2="176.28" y1="96.71" y2="79.53" xlink:href="#b"><stop offset="0" stop-color="#c72e24"/><stop offset="1" stop-color="#fd3b2f"/></linearGradient><filter id="e" class="b"><feFlood flood-opacity=".28"/><feComposite in2="SourceGraphic" operator="in"/><feGaussianBlur stdDeviation="3"/><feOffset dx=".3" dy="2.8"/><feComposite in="SourceGraphic"/></filter><filter id="f" class="b"><feFlood class="c"/><feComposite class="c" in2="SourceGraphic" operator="out"/><feGaussianBlur flood-opacity=".3" stdDeviation=".7"/><feOffset dy="1.8"/><feComposite in2="SourceGraphic" operator="atop"/></filter><filter id="g" class="b"><feFlood flood-opacity=".61"/><feComposite in2="SourceGraphic" operator="in"/><feGaussianBlur stdDeviation=".5"/><feOffset dx=".8" dy=".8"/><feComposite in="SourceGraphic" result="A"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feFlood flood-opacity=".4"/><feComposite in2="A" operator="in"/><feGaussianBlur stdDeviation="3.8"/><feOffset dx="2.3" dy="3.3"/><feComposite in="A"/></filter><filter id="h" width="110%" height="110%" x="-1%" y="-1%"><feGaussianBlur in="SourceAlpha" stdDeviation=".4"/><feOffset dx=".1" dy=".2"/><feComponentTransfer result="A"><feFuncA type="linear"/></feComponentTransfer><feFlood flood-color="rgba(0,0,0,0.5)"/><feComposite in2="A" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><radialGradient id="i" cx="-69.88" cy="69.29" r="54.01" gradientTransform="matrix(.9023 -.01249 .0377 2.7234 -9.44 -120.29)" xlink:href="#b"><stop offset="0" stop-color="#24a5f3" stop-opacity=".01"/><stop offset="1" stop-color="#1e8ceb" stop-opacity=".98"/></radialGradient><radialGradient id="j" cx="109.35" cy="13.76" r="93.08" gradientTransform="matrix(-.01822 1.0922 -1.042 -.01765 136.95 -115.33)" xlink:href="#b"><stop offset="0" stop-opacity="0"/><stop offset=".96" stop-color="#5488d6" stop-opacity="0"/><stop offset="1" stop-color="#5d96eb"/></radialGradient></defs><rect width="220" height="220" x="22" y="-106.53" fill="url(#a)" filter="url(#e)" ry="49" transform="matrix(.56938 0 0 .56921 186.86 255.75)"/><g filter="url(#f)" transform="translate(194.2 190.07)"><ellipse cx="67.77" cy="67.73" fill="url(#c)" paint-order="stroke fill markers" rx="54.01" ry="53.98"/><ellipse cx="-69.88" cy="69.29" fill="url(#i)" rx="54.01" ry="53.98" transform="translate(137.65 -1.55)"/></g><ellipse cx="120" cy="14.15" fill="url(#j)" rx="93.08" ry="93.67" transform="matrix(.58082 0 0 .57636 192.3 249.63)"/><g filter="url(#g)" transform="matrix(.58289 0 0 .56508 196.8 181.63)"><path fill="#cac7c8" d="m46 191.66.73.35 72.18-48.2-7.34-8.95L46 191.66Z"/><path fill="#fbfffc" d="m45.8 190.87.2.8 65.57-56.8-6.95-8.92-58.83 64.92Z"/><path fill="url(#d)" d="m118.91 143.81-7.35-8.95 66.08-57.2.27.73-59 65.42Z"/><path fill="#fb645c" d="m104.62 125.95 6.94 8.92 66.08-57.2-.65-.35-72.37 48.63Z"/></g><path stroke="#fff" stroke-linecap="round" stroke-miterlimit="1" stroke-width="1.33" d="m286.59 278.44 3.14-2.14m-11.23-17.8 7.8-1.37m-8.32-2.9 3.78-.3m-3.3-12.47 7.8 1.38m-8.2 3.03 3.76.38m-1.2-13.05 7.47 2.73m-3.77-10.5 6.86 3.96m-1.87-10.96 6.07 5.09m.05-11.07 5.09 6.07m1.97-10.99 3.97 6.86m3.7-10.53 2.71 7.43m5.62-9.62 1.37 7.8m15.62-7.89-1.38 7.8m9.82-5.6-2.72 7.42m10.5-3.75-3.96 6.86m10.98-1.89-5.12 6.07m16.18 6.96-6.87 3.96m10.45 3.88-7.45 2.7m9.64 5.6-7.82 1.38m7.81 15.79-7.82-1.39m5.6 9.7-7.44-2.71m3.8 10.47-6.87-3.95m1.91 10.98-6.07-5.07m-.05 11.2-5.1-6.08m-1.95 10.99-4-6.88m-3.87 10.5-2.7-7.43m-5.61 9.61-1.37-7.78m-15.78 7.75 1.4-7.86m-9.7 5.58 2.72-7.47m-10.5 3.73 3.97-6.87m-10.96 1.9 5.08-6.03m-8.26 3.13 2.75-2.68m3.84 8.23 2.2-3.1m5.2 7.44 1.66-3.45m6.43 6.47 1.02-3.7m7.52 5.32.43-3.82m8.08 3.8-.31-3.84m8.81 2.33-.97-3.69m9.06.75-1.58-3.48m9.05-.76-2.16-3.18m8.78-2.38-2.68-2.73m8.24-3.85-3.11-2.2m7.42-5.2-3.47-1.67m6.42-6.41-3.7-1.03m5.17-7.46-3.78-.37m3.8-8.24-3.81.3m2.35-8.8-3.7.97m.8-9.06-3.49 1.61m-1.03-9.12-3.2 2.2m-2.12-8.62-2.72 2.7m-3.84-8.28-2.23 3.12m-5.21-7.45-1.66 3.44m-6.55-6.32-1.02 3.63m-7.42-5.2-.38 3.81m-8.09-3.66.28 3.8m-8.79-2.34.95 3.68m-8.9-.72 1.61 3.46m-9.06.82 2.18 3.16m-8.82 2.27 2.68 2.7m-8.25 3.85 3.1 2.23m-7.44 5.17 3.42 1.66m-6.3 6.36 3.7 1.05m-3.71 24.39 3.7-.91m-2.44 5.03 7.48-2.72m-5.86 6.73 3.5-1.61m-1.53 5.43 6.87-3.95m-13.33-20.52 7.96.01m41.16-41.44v-7.96m.02 98.74.01-7.94m49.33-41.4-7.95-.01" filter="url(#h)" transform="translate(-65 7.73)"/></svg>