small visual changes, slide transition = less jarring?

nvms · Dec 7, 2023 · dd81c02 · dd81c02
1 parent bf745b5
commit dd81c02
Show file tree

Hide file tree

Showing 8 changed files with 4,137 additions and 4,109 deletions.
diff --git a/extension/dist/style.css b/extension/dist/style.css
diff --git a/extension/dist/webview.es.js b/extension/dist/webview.es.js
diff --git a/extension/dist/webview.umd.js b/extension/dist/webview.umd.js
diff --git a/webview/src/components/ExtensionSettings.svelte b/webview/src/components/ExtensionSettings.svelte
@@ -37,7 +37,7 @@
   };
 </script>
 
-<div class="flex-1 bg-neutral-500/10 space-y-6 p-4">
+<div class="flex-1 bg-gray-500/5 space-y-6 p-4">
   <div class="space-y-2">
     <h2 class="text-lg font-semibold">Restore defaults</h2>
     <p>

diff --git a/webview/src/components/ModeSettings.svelte b/webview/src/components/ModeSettings.svelte
@@ -26,7 +26,7 @@
   };
 </script>
 
-<div class="flex flex-1 bg-neutral-500/10">
+<div class="flex flex-1 bg-gray-500/5">
   <div class="flex-0 border-r border-panel overflow-y-auto">
     <div class="font-semibold px-4 pt-2 select-none">Modes</div>
     <div class="flex flex-col">

diff --git a/webview/src/components/ModeView.svelte b/webview/src/components/ModeView.svelte
@@ -27,6 +27,7 @@
   import ModeSettings from "./ModeSettings.svelte";
   import ExtensionSettings from "./ExtensionSettings.svelte";
   import GrowingTextarea from "./GrowingTextarea.svelte";
+  import { slide, fade } from "svelte/transition";
 
   export let showPresetSettings = false;
   export let showPromptSettings = false;
@@ -199,22 +200,22 @@
 
 <div class="flex-1 flex flex-col overflow-y-auto">
   {#if showPresetSettings}
-    <div class="flex-0 border-b border-panel">
+    <div class="flex-0 border-b border-panel" transition:slide={{ duration: 150 }}>
       <PresetSettings />
     </div>
   {/if}
   {#if showPromptSettings}
-    <div class="flex-0 border-b border-panel">
+    <div class="flex-0 border-b border-panel" transition:slide={{ duration: 150 }}>
       <PromptSettings on:getPrompts />
     </div>
   {/if}
   {#if showModeSettings}
-    <div class="flex-0 border-b border-panel">
+    <div class="flex-0 border-b border-panel" transition:slide={{ duration: 150 }}>
       <ModeSettings on:getPrompts />
     </div>
   {/if}
   {#if showExtensionSettings}
-    <div class="flex-0 border-b border-panel">
+    <div class="flex-0 border-b border-panel" transition:slide={{ duration: 150 }}>
       <ExtensionSettings on:getPrompts />
     </div>
   {/if}

diff --git a/webview/src/components/PresetSettings.svelte b/webview/src/components/PresetSettings.svelte
@@ -36,7 +36,7 @@
   });
 </script>
 
-<div class="flex flex-1 bg-neutral-500/10">
+<div class="flex flex-1 bg-gray-500/5">
   <div class="flex-0 border-r border-panel overflow-x-hidden overflow-y-auto">
     <div class="font-semibold px-4 pt-2 select-none">Presets</div>
     <div class="flex flex-col">

diff --git a/webview/src/components/PromptSettings.svelte b/webview/src/components/PromptSettings.svelte
@@ -39,7 +39,7 @@
   };
 </script>
 
-<div class="flex flex-1 bg-neutral-500/10">
+<div class="flex flex-1 bg-gray-500/5">
   <div class="flex-0 border-r border-panel overflow-y-auto">
     <div class="font-semibold px-4 pt-2 select-none">Prompts</div>
     <div class="flex flex-col">