From 1992f818782d2fddce2caddd9ab37fc62bc43c75 Mon Sep 17 00:00:00 2001
From: Brynn <brynn@hawker.me>
Date: Tue, 4 Jun 2024 09:49:58 -0600
Subject: [PATCH] fix: add css reset from @scalar/themes (#124)

---
 src/App.vue                    | 94 ++++++++++++++++++----------------
 src/components/ShareButton.vue |  9 +++-
 2 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index df42f27..65e9210 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@ import { useMediaQuery } from '@vueuse/core'
 import ModeToggleButton from './components/ModeToggleButton.vue'
 import GitHubLogo from './components/GithubLogo.vue'
 import ScalarLogo from './components/ScalarLogo.vue'
-import { ThemeStyles } from '@scalar/themes'
+import { ResetStyles, ThemeStyles } from '@scalar/themes'
 import { useDarkMode } from './hooks/useDarkMode'
 
 const isDark = useDarkMode()
@@ -156,54 +156,58 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Toaster theme="dark" />
-  <ThemeStyles id="default" />
-  <FileDrop @drop="handleDrop">
-    <div class="app">
-      <header class="header">
-        <div class="logo">
-          <ScalarLogo />
-          <div class="logo-text">Sandbox</div>
-        </div>
-        <div class="mode">
-          <ModeToggleButton v-model="editing" />
-        </div>
-        <div class="actions">
-          <DarkModeToggle />
-          <a href="https://github.com/scalar/scalar">
-            <GitHubLogo />
-          </a>
-          <ShareButton
-            @click="share"
-            :loading="loading" />
-        </div>
-      </header>
-      <div class="layout">
-        <!-- Mobile Layout -->
-        <template v-if="isMobile">
-          <div v-if="editing">
-            <MonacoEditor v-model="content" />
+  <ResetStyles v-slot="{ styles }">
+    <Toaster theme="dark" />
+    <ThemeStyles id="default" />
+    <FileDrop @drop="handleDrop">
+      <div
+        class="app"
+        :class="styles">
+        <header class="header">
+          <div class="logo">
+            <ScalarLogo />
+            <div class="logo-text">Sandbox</div>
           </div>
-          <div v-else>
-            <ApiReference
-              :configuration="{ spec: { content }, darkMode: isDark }" />
+          <div class="mode">
+            <ModeToggleButton v-model="editing" />
           </div>
-        </template>
-        <!-- Desktop Layout -->
-        <template v-else>
-          <div
-            class="left"
-            v-if="editing">
-            <MonacoEditor v-model="content" />
+          <div class="actions">
+            <DarkModeToggle />
+            <a href="https://github.com/scalar/scalar">
+              <GitHubLogo />
+            </a>
+            <ShareButton
+              @click="share"
+              :loading="loading" />
           </div>
-          <div class="right">
-            <ApiReference
-              :configuration="{ spec: { content }, darkMode: isDark }" />
-          </div>
-        </template>
+        </header>
+        <div class="layout">
+          <!-- Mobile Layout -->
+          <template v-if="isMobile">
+            <div v-if="editing">
+              <MonacoEditor v-model="content" />
+            </div>
+            <div v-else>
+              <ApiReference
+                :configuration="{ spec: { content }, darkMode: isDark }" />
+            </div>
+          </template>
+          <!-- Desktop Layout -->
+          <template v-else>
+            <div
+              class="left"
+              v-if="editing">
+              <MonacoEditor v-model="content" />
+            </div>
+            <div class="right">
+              <ApiReference
+                :configuration="{ spec: { content }, darkMode: isDark }" />
+            </div>
+          </template>
+        </div>
       </div>
-    </div>
-  </FileDrop>
+    </FileDrop>
+  </ResetStyles>
 </template>
 
 <style scoped>
diff --git a/src/components/ShareButton.vue b/src/components/ShareButton.vue
index 4c4787e..7e02271 100644
--- a/src/components/ShareButton.vue
+++ b/src/components/ShareButton.vue
@@ -32,7 +32,14 @@ defineEmits<{
   font-size: var(--scalar-small);
   padding: 6px 12px;
   border-radius: var(--scalar-radius-lg);
-  transition: all 0.5s ease-in-out;
+  cursor: pointer;
+}
+.button:hover {
+  background: color-mix(
+    in srgb,
+    var(--scalar-color-1),
+    var(--scalar-background-3) 95%
+  );
 }
 
 .button[disabled] {