Make the editor get along with dark mode

grammyjs · Aug 3, 2023 · b8ac6a2 · b8ac6a2
1 parent 673eb10
commit b8ac6a2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/src/components/vue/update-explorer/Explorer.vue b/src/components/vue/update-explorer/Explorer.vue
@@ -200,8 +200,20 @@ onMounted(async () => {
         source-url="https://github.com/grammyjs/tools/blob/main/src/components/vue/update-explorer/Explorer.vue#L44"
       />
     </section>
-    <section class="flex flex-1 border-t">
-      <div class="w-52">
+    <section class="flex flex-1">
+      <div class="w-full flex-1 overflow-auto bg-altbackground p-0" style="max-height: 86.5vh">
+        <component
+          :is="Editor"
+          :mode="'text'"
+          read-only
+          class="jse h-full"
+          :navigation-bar="false"
+          :main-menu-bar="false"
+          :status-bar="false"
+          :model-value="selectedUpdate ? undecoratedSelectedUpdate : undefined"
+        />
+      </div>
+      <div class="jse w-52" style="border-top: var(--jse-main-border); background-color: var(--jse-background-color)">
         <div class="flex flex-row items-center justify-between border-b py-1 pl-2" v-if="updatesList.length">
           <button class="h-fit" @click="clearUpdates" title="Clear updates">
             <TrashIcon stroke="white" class="relative mr-2 h-5 w-5" />
@@ -221,18 +233,6 @@ onMounted(async () => {
           </span>
         </div>
       </div>
-      <div class="w-full flex-1 overflow-auto bg-altbackground p-0" style="max-height: 86.5vh">
-        <component
-          :is="Editor"
-          :mode="'text'"
-          read-only
-          class="jse h-full"
-          :navigation-bar="false"
-          :main-menu-bar="false"
-          :status-bar="false"
-          :model-value="selectedUpdate ? undecoratedSelectedUpdate : undefined"
-        />
-      </div>
     </section>
   </main>
 </template>
diff --git a/src/style/global.css b/src/style/global.css
@@ -136,3 +136,8 @@ code {
 .button {
   @apply self-end text-grammy-600 duration-75 enabled:cursor-pointer enabled:hover:opacity-50 disabled:cursor-not-allowed disabled:opacity-50;
 }
+
+.jse-main, .cm-scroller, .jse-text-mode, .jse-contents {
+  border-left: none !important;
+  border-bottom: none !important;
+}
diff --git a/src/style/jse-theme-dark.css b/src/style/jse-theme-dark.css
@@ -167,7 +167,7 @@
     /* over all fonts, sizes, and colors */
     --jse-theme-color: #2f6dd0;
     --jse-theme-color-highlight: #467cd2;
-    --jse-background-color: #1e1e1e;
+    --jse-background-color: var(--grammy-background);
     --jse-text-color: #d4d4d4;
 
     /* main, menu, modal */
@@ -185,7 +185,7 @@
     --jse-tooltip-action-button-background: #737373;
 
     /* panels: navigation bar, gutter, search box */
-    --jse-panel-background: #333333;
+    --jse-panel-background: var(--altbackground);
     --jse-panel-background-border: 1px solid #464646;
     --jse-panel-color: var(--jse-text-color);
     --jse-panel-color-readonly: #737373;