Color theme tweaks

Author: AustinMroz

src/renderer/extensions/linearMode/LinearControls.vue

@@ -219,7 +219,7 @@ defineExpose({ runButtonClick })
       <Button v-if="false"> {{ t('menuLabels.publish') }} </Button>
     </section>
     <div
-      class="border gap-2 h-full border-[var(--interface-stroke)] bg-comfy-menu-bg flex flex-col px-2"
+      class="border-x md:border-y gap-2 h-full border-[var(--interface-stroke)] bg-comfy-menu-bg flex flex-col px-2"
     >
       <section
         data-testid="linear-widgets"
@@ -290,7 +290,7 @@ defineExpose({ runButtonClick })
         <div v-else class="flex mt-4">
           <Popover side="top" @open-auto-focus.prevent>
             <template #button>
-              <Button size="lg" variant="inverted" class="-mr-3 pr-7">
+              <Button size="lg" class="-mr-3 pr-7">
                 <i v-if="batchCount == 1" class="icon-[lucide--chevron-down]" />
                 <div v-else class="tabular-nums" v-text="`${batchCount}x`" />
               </Button>

src/renderer/extensions/linearMode/MobileDisplay.vue

@@ -146,9 +146,9 @@ const menuEntries = computed<MenuItem[]>(() => [
 ])
 </script>
 <template>
-  <section class="absolute w-full h-full flex flex-col bg-base-background">
+  <section class="absolute w-full h-full flex flex-col bg-secondary-background">
     <header
-      class="w-full h-16 px-4 py-3 flex border-border-subtle border-b items-center gap-3"
+      class="w-full h-16 px-4 py-3 flex border-border-subtle border-b items-center gap-3 bg-base-background"
     >
       <DropdownMenu :entries="menuEntries" />
       <Popover
@@ -182,27 +182,23 @@ const menuEntries = computed<MenuItem[]>(() => [
         :style="{ translate }"
       >
         <AssetsSidebarTab
-          class="h-full w-screen absolute bg-secondary-background [&>:first-child>:nth-child(odd)]:hidden"
+          class="h-full w-screen absolute bg-base-background [&>:first-child>:nth-child(odd)]:hidden"
         />
         <div
           class="overflow-y-auto contain-size h-full w-screen absolute left-[100vw] top-0"
         >
-          <LinearControls
-            class="*:bg-secondary-background"
-            mobile
-            @navigate-assets="activeIndex = 0"
-          />
+          <LinearControls mobile @navigate-assets="activeIndex = 0" />
         </div>
         <div
-          class="w-screen absolute bg-secondary-background h-full left-[200vw] top-0 flex flex-col"
+          class="w-screen absolute h-full bg-base-background left-[200vw] top-0 flex flex-col"
         >
           <LinearPreview mobile />
         </div>
       </div>
     </div>
     <div
       ref="sliderPaneRef"
-      class="h-22 p-4 w-full flex gap-4 items-center justify-around"
+      class="h-22 p-4 w-full flex gap-4 items-center justify-around bg-secondary-background"
     >
       <Button
         v-for="([label, icon], index) in tabs"