From 840c1c02bf897df61551d6f49aacf59f79306fe4 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Fri, 9 Aug 2024 11:49:08 -0700
Subject: [PATCH] Fixed type icons.

---
 .../[websiteId]/sessions/SessionsTable.tsx    | 20 ++++++++++++++++---
 src/components/common/TypeIcon.tsx            |  4 +++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
index 6e2e53ed..ad4a8ac9 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
@@ -31,11 +31,25 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
       </GridColumn>
       <GridColumn name="city" label={formatMessage(labels.city)} />
       <GridColumn name="browser" label={formatMessage(labels.browser)}>
-        {row => formatValue(row.browser, 'browser')}
+        {row => (
+          <TypeIcon type="browser" value={row.browser}>
+            {formatValue(row.browser, 'browser')}
+          </TypeIcon>
+        )}
+      </GridColumn>
+      <GridColumn name="os" label={formatMessage(labels.os)}>
+        {row => (
+          <TypeIcon type="os" value={row.os}>
+            {formatValue(row.os, 'os')}
+          </TypeIcon>
+        )}
       </GridColumn>
-      <GridColumn name="os" label={formatMessage(labels.os)} />
       <GridColumn name="device" label={formatMessage(labels.device)}>
-        {row => formatValue(row.device, 'device')}
+        {row => (
+          <TypeIcon type="device" value={row.device}>
+            {formatValue(row.device, 'device')}
+          </TypeIcon>
+        )}
       </GridColumn>
       <GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
         {row => formatDate(new Date(row.lastAt), 'PPPpp', locale)}
diff --git a/src/components/common/TypeIcon.tsx b/src/components/common/TypeIcon.tsx
index 475fe643..bb99c2f7 100644
--- a/src/components/common/TypeIcon.tsx
+++ b/src/components/common/TypeIcon.tsx
@@ -12,7 +12,9 @@ export function TypeIcon({
   return (
     <>
       <img
-        src={`${process.env.basePath || ''}/images/${type}/${value || 'unknown'}.png`}
+        src={`${process.env.basePath || ''}/images/${type}/${
+          value.replaceAll(' ', '-').toLowerCase() || 'unknown'
+        }.png`}
         alt={value}
         width={type === 'country' ? undefined : 16}
         height={type === 'country' ? undefined : 16}