fix: add css reset from @scalar/themes (#124)

scalar · Jun 4, 2024 · 1992f81 · 1992f81
1 parent dd9b6fc
commit 1992f81
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 46 deletions.
diff --git 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
@@ -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] {