fix: coloring

holistics · Sep 7, 2024 · a13bbfa · a13bbfa
1 parent 91b9da1
commit a13bbfa
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 6 deletions.
diff --git a/packages/dbml-playground/src/App.vue b/packages/dbml-playground/src/App.vue
@@ -6,7 +6,7 @@ import Header from './components/Header/Header.vue'
 
 <template>
   <Header />
-  <main class='w-full h-full'>
+  <main class='w-full h-full bg-[#eeeeee]'>
     <RouterView class='w-full h-full'/>
   </main>
 </template>
diff --git a/packages/dbml-playground/src/components/AstExplorerPane/AstExplorerPane.vue b/packages/dbml-playground/src/components/AstExplorerPane/AstExplorerPane.vue
@@ -1,7 +1,7 @@
 <template>
   <pane max-size='30' min-size='30' size='30'>
     <slot>
-      <section class='h-full overflow-auto border rounded border-gray-300 flex flex-col p-2'>
+      <section class='h-full bg-white overflow-auto border rounded border-gray-300 flex flex-col p-2'>
       </section>
     </slot>
   </pane>

diff --git a/packages/dbml-playground/src/components/ErrorPane/ErrorPane.vue b/packages/dbml-playground/src/components/ErrorPane/ErrorPane.vue
@@ -1,17 +1,17 @@
 <template>
   <pane min-size='30' max-size='30' size='30'>
     <slot>
-      <section class='h-full overflow-auto border rounded border-gray-300 flex flex-col p-4 text-sm'>
+      <section class='h-full bg-white overflow-auto border rounded border-gray-300 flex flex-col p-4 text-sm'>
         <ul v-if='errors.length' class='list-none'>
           <li v-for='error in errors' :key='error'>
-            <p class='font-light flex gap-2 items-center'>
+            <p class='flex gap-2 items-center'>
               <FontAwesomeIcon :icon='faExclamationCircle' class='text-red-500' />
               {{ error }}
             </p>
           </li>
         </ul>
 
-        <p v-else class='font-light flex gap-2 items-center'>
+        <p v-else class='flex gap-2 items-center'>
           <FontAwesomeIcon :icon='faCheckCircle' class='text-green-400' />
           <span>No errors.</span>
         </p>

diff --git a/packages/dbml-playground/src/components/FileTreePane/FileTreePane.vue b/packages/dbml-playground/src/components/FileTreePane/FileTreePane.vue
@@ -1,7 +1,7 @@
 <template>
   <pane min-size='25' max-size='25' size='25'>
     <slot>
-      <section class='h-full overflow-auto border rounded border-gray-300 flex flex-col p-2'>
+      <section class='h-full bg-white overflow-auto border rounded border-gray-300 flex flex-col p-2'>
       </section>
     </slot>
   </pane>

diff --git a/packages/dbml-playground/src/pages/PlaygroundPage.vue b/packages/dbml-playground/src/pages/PlaygroundPage.vue
@@ -27,6 +27,7 @@
 
 <style>
 div.splitpanes__splitter {
+  background-color: #eeeeee !important;
   &::before {
     background-color: #1e1e1e !important;
   }