From f1f0128676b5dc5014216d859ec250b9d3128a1a Mon Sep 17 00:00:00 2001
From: Christina Yang <ychristina011@gmail.com>
Date: Fri, 25 Oct 2024 12:58:10 -0700
Subject: [PATCH] remove unused classNames, add native to data-attribute

---
 panda.config.ts                 | 1 +
 src/components/AppComponent.tsx | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/panda.config.ts b/panda.config.ts
index 052abb023b..f01887f3d5 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -373,6 +373,7 @@ export default defineConfig({
     safari: '[data-browser=safari] &',
     mobile: '[data-device=mobile] &',
     desktop: '[data-device=desktop] &',
+    native: '[data-native=true] &',
     android: '[data-platform=android] &',
     mac: '[data-platform=mac] &',
     iphone: '[data-platform=iphone] &',
diff --git a/src/components/AppComponent.tsx b/src/components/AppComponent.tsx
index 64ba1c663f..d0e827c49c 100644
--- a/src/components/AppComponent.tsx
+++ b/src/components/AppComponent.tsx
@@ -134,6 +134,7 @@ const AppComponent: FC = () => {
     document.body.classList[dark ? 'add' : 'remove']('dark')
     document.body.setAttribute('data-color-mode', dark ? 'dark' : 'light')
     document.body.setAttribute('data-device', isTouch ? 'mobile' : 'desktop')
+    document.body.setAttribute('data-native', Capacitor.isNativePlatform() ? 'true' : 'false')
     document.body.setAttribute('data-platform', isAndroid ? 'android' : isMac ? 'mac' : isiPhone ? 'iphone' : 'other')
     document.body.setAttribute(
       'data-browser',
@@ -175,11 +176,7 @@ const AppComponent: FC = () => {
   const componentClassNames = classNames({
     // mobile safari must be detected because empty and full bullet points in Helvetica Neue have different margins
     mobile: isTouch,
-    android: isAndroid,
-    native: Capacitor.isNativePlatform(),
     'drag-in-progress': dragInProgress,
-    chrome: /Chrome/.test(navigator.userAgent),
-    safari: isSafari(),
   })
 
   if (showModal && !modals[showModal]) {