Improve code highlighting in web UI

web/src/App.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="app flex flex-col m-auto w-full h-full bg-wp-background-200 dark:bg-wp-background-100">
+  <div class="flex flex-col bg-wp-background-200 dark:bg-wp-background-300 m-auto w-full h-full app">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />
-      <main class="relative flex min-h-0 h-full">
-        <div id="scroll-component" class="flex flex-col overflow-y-auto flex-grow">
+      <main class="relative flex h-full min-h-0">
+        <div id="scroll-component" class="flex flex-col flex-grow overflow-y-auto">
           <router-view />
         </div>
         <transition name="slide-right">
-          <PipelineFeedSidebar class="shadow-md border-l w-full absolute top-0 right-0 bottom-0 max-w-80 xl:max-w-96" />
+          <PipelineFeedSidebar class="top-0 right-0 bottom-0 absolute shadow-md border-l w-full max-w-80 xl:max-w-96" />
         </transition>
       </main>
     </template>

web/src/components/admin/settings/queue/AdminQueueStats.vue

@@ -1,22 +1,22 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="bg-wp-background-200 border border-wp-background-300 dark:bg-wp-background-100 text-wp-text-100 rounded-md py-5 px-5 w-full"
+      class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 px-5 py-5 border rounded-md w-full text-wp-text-100"
     >
       <div class="flex w-full">
-        <h3 class="text-lg font-semibold leading-tight uppercase flex-1">
+        <h3 class="flex-1 font-semibold text-lg uppercase leading-tight">
           {{ $t('admin.settings.queue.stats.completed_count') }}
         </h3>
       </div>
-      <div class="relative overflow-hidden transition-all duration-500">
+      <div class="relative transition-all duration-500 overflow-hidden">
         <div>
           <div class="pb-4 lg:pb-6">
-            <h4 class="text-2xl lg:text-3xl font-semibold leading-tight inline-block">
+            <h4 class="inline-block font-semibold text-2xl lg:text-3xl leading-tight">
               {{ stats.completed_count }}
             </h4>
           </div>
           <div v-if="total > 0" class="pb-4 lg:pb-6">
-            <div class="overflow-hidden rounded-full h-3 flex transition-all duration-500">
+            <div class="flex rounded-full h-3 transition-all duration-500 overflow-hidden">
               <div
                 v-for="item in data"
                 :key="item.key"
@@ -28,15 +28,15 @@
               </div>
             </div>
           </div>
-          <div class="flex -mx-4 sm:flex-wrap">
+          <div class="flex sm:flex-wrap -mx-4">
             <div
               v-for="(item, index) in data"
               :key="item.key"
-              class="px-4 md:w-1/4 sm:w-full"
+              class="px-4 sm:w-full md:w-1/4"
               :class="{ 'md:border-l border-gray-300 dark:border-gray-600': index !== 0 }"
             >
-              <div class="text-sm whitespace-nowrap overflow-hidden text-ellipsis">
-                <span class="inline-block w-2 h-2 rounded-full mr-1 align-middle" :class="`${item.color}`">&nbsp;</span>
+              <div class="text-ellipsis text-sm whitespace-nowrap overflow-hidden">
+                <span class="inline-block mr-1 rounded-full w-2 h-2 align-middle" :class="`${item.color}`">&nbsp;</span>
                 <span class="align-middle">{{ item.label }}</span>
               </div>
               <div class="font-medium text-lg">

web/src/components/agent/AgentList.vue

@@ -3,11 +3,11 @@
     <ListItem
       v-for="agent in props.agents"
       :key="agent.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
-        <span class="hidden md:inline-block space-x-2">
+        <span class="md:inline-block space-x-2 hidden">
           <Badge
             v-if="props.isAdmin === true && agent.org_id !== -1"
             :label="$t('admin.settings.agents.org.badge')"

web/src/components/atomic/CountBadge.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="text-xs font-bold inline-block min-w-5 leading-4 rounded-full bg-wp-background-300 dark:bg-wp-background-100 text-wp-text-100 text-center py-0.5 px-1.5"
+    class="bg-wp-code-inline-200 text-wp-text-code-inline-100 hover:bg-wp-code-inline-200 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
   >
     {{ value }}
   </span>

web/src/components/atomic/ListItem.vue

@@ -2,9 +2,9 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="w-full flex border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200"
+    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
-      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-500': clickable || to,
     }"
   >
     <slot />

web/src/components/form/InputField.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col mt-2 mb-4">
     <div class="flex items-center mb-2">
-      <label class="text-wp-text-100 font-bold" :for="id" v-bind="$attrs">{{ label }}</label>
+      <label class="font-bold text-wp-text-100" :for="id" v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
       <slot v-else-if="$slots.titleActions" name="titleActions" />
     </div>
     <slot :id="id" />
-    <div v-if="$slots.description" class="ml-1 text-wp-text-alt-100">
+    <div v-if="$slots.description" class="mt-1 ml-1 text-wp-text-alt-100">
       <slot name="description" />
     </div>
   </div>

web/src/components/form/TextField.vue

@@ -2,7 +2,7 @@
   <input
     v-if="lines === 1"
     v-model="innerValue"
-    class="w-full border border-wp-control-neutral-200 py-1 px-2 rounded-md bg-wp-background-100 focus-visible:outline-none focus-visible:border-wp-control-neutral-300"
+    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-200 px-2 py-1 border rounded-md w-full focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :type="type"
@@ -11,7 +11,7 @@
   <textarea
     v-else
     v-model="innerValue"
-    class="w-full border border-wp-control-neutral-200 py-1 px-2 rounded-md bg-wp-background-100 focus-visible:outline-none focus-visible:border-wp-control-neutral-300"
+    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-200 px-2 py-1 border rounded-md w-full focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :placeholder="placeholder"

web/src/components/layout/Panel.vue

@@ -1,18 +1,18 @@
 <template>
   <div
-    class="rounded-md w-full shadow overflow-hidden bg-wp-background-100 dark:bg-wp-background-200 border border-wp-background-400"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="flex w-full font-bold gap-2 text-wp-text-100 px-4 py-2 bg-wp-background-300"
+      class="flex gap-2 bg-wp-background-400 px-4 py-2 w-full font-bold text-wp-text-100"
       @click="_collapsed = !_collapsed"
     >
       <Icon
         v-if="collapsable"
         name="chevron-right"
-        class="transition-transform duration-150 min-w-6 h-6"
+        class="min-w-6 h-6 transition-transform duration-150"
         :class="{ 'transform rotate-90': !collapsed }"
       />
       {{ title }}
@@ -24,7 +24,7 @@
       }"
       class="transition-height duration-150 overflow-hidden"
     >
-      <div class="w-full p-4 text-wp-text-100">
+      <div class="p-4 w-full text-wp-text-100">
         <slot />
       </div>
     </div>

web/src/components/layout/Settings.vue

@@ -1,15 +1,15 @@
 <template>
   <Panel>
-    <div class="flex flex-col border-b mb-4 pb-4 justify-center dark:border-wp-background-100">
-      <div class="flex items-center justify-between">
-        <h1 class="text-xl text-wp-text-100 flex items-center gap-1">
+    <div class="flex flex-col justify-center dark:border-wp-background-100 mb-4 pb-4 border-b">
+      <div class="flex justify-between items-center">
+        <h1 class="flex items-center gap-1 text-wp-text-100 text-xl">
           {{ title }}
           <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
         </h1>
         <slot v-if="$slots.titleActions" name="titleActions" />
       </div>
 
-      <div class="flex flex-wrap gap-x-4 gap-y-2 items-center justify-between">
+      <div class="flex flex-wrap justify-between items-center gap-x-4 gap-y-2">
         <p v-if="description" class="text-sm text-wp-text-alt-100">{{ description }}</p>
         <div v-if="$slots.headerActions">
           <slot name="headerActions" />

web/src/components/layout/header/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="flex border-wp-background-100 bg-wp-primary-200 dark:bg-wp-primary-300 p-4 border-b font-bold text-neutral-content text-wp-primary-text-100"
+    class="flex border-wp-background-300 bg-wp-primary-200 dark:bg-wp-primary-300 p-4 border-b font-bold text-neutral-content text-wp-primary-text-100"
   >
     <div class="flex items-center space-x-2">
       <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">

web/src/components/layout/scaffold/Header.vue

@@ -1,10 +1,10 @@
 <template>
   <header
-    class="bg-wp-background-100 border-b-1 border-wp-background-400 dark:border-wp-background-100 dark:bg-wp-background-300 text-wp-text-100"
+    class="border-wp-background-400 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
-      <div class="flex w-full md:items-center flex-col py-3 gap-2 md:gap-10 md:flex-row md:justify-between">
+      <div class="flex md:flex-row flex-col md:justify-between md:items-center gap-2 md:gap-10 py-3 w-full">
         <div
           class="flex items-center content-start min-h-10"
           :class="{
@@ -18,7 +18,7 @@
             class="flex-shrink-0 mr-2 <md:hidden md:justify-between w-8 h-8"
             @click="goBack"
           />
-          <h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
+          <h1 class="flex items-center gap-x-2 min-w-0 text-wp-text-100 text-xl">
             <slot name="title" />
           </h1>
         </div>
@@ -32,7 +32,7 @@
         />
         <div
           v-if="$slots.headerActions"
-          class="flex items-center md:justify-end gap-x-2 min-w-0"
+          class="flex md:justify-end items-center gap-x-2 min-w-0"
           :class="{
             'md:flex-1': searchBoxPresent,
           }"
@@ -41,9 +41,9 @@
         </div>
       </div>
 
-      <div v-if="enableTabs" class="flex md:items-center flex-col py-2 md:flex-row md:justify-between md:py-0">
+      <div v-if="enableTabs" class="flex md:flex-row flex-col md:justify-between md:items-center py-2 md:py-0">
         <Tabs class="<md:order-2" />
-        <div v-if="$slots.headerActions" class="flex content-start md:justify-end">
+        <div v-if="$slots.headerActions" class="flex md:justify-end content-start">
           <slot name="tabActions" />
         </div>
       </div>

web/src/components/layout/scaffold/Tabs.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="flex flex-wrap mt-2 md:gap-4">
+  <div class="flex flex-wrap md:gap-4 mt-2">
     <router-link
       v-for="tab in tabs"
       :key="tab.title"
       v-slot="{ isActive, isExactActive }"
       :to="tab.to"
-      class="border-transparent w-full py-1 md:w-auto flex cursor-pointer md:border-b-2 text-wp-text-100 items-center"
+      class="flex items-center py-1 border-transparent md:border-b-2 w-full md:w-auto text-wp-text-100 cursor-pointer"
       :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
       :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
     >
       <Icon
         v-if="isExactActive || (isActive && tab.matchChildren)"
         name="chevron-right"
-        class="md:hidden flex-shrink-0"
+        class="flex-shrink-0 md:hidden"
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
-        class="flex gap-2 items-center md:justify-center flex-row py-1 px-2 w-full min-w-20 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 rounded-md"
+        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-300 hover:bg-wp-background-200 px-2 py-1 rounded-md w-full min-w-20"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>

web/src/components/pipeline-feed/PipelineFeedSidebar.vue

@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="flex flex-col z-50 overflow-y-auto items-center bg-wp-background-100 dark:bg-wp-background-200 border-wp-background-400"
+    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -12,12 +12,12 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-b border-wp-background-400 py-4 px-2 w-full hover:bg-wp-background-300 dark:hover:bg-wp-background-400 hover:shadow-sm"
+      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 hover:shadow-sm px-2 py-4 border-b w-full"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
 
-    <span v-if="sortedPipelines.length === 0" class="text-wp-text-100 m-4">{{ $t('repo.pipeline.no_pipelines') }}</span>
+    <span v-if="sortedPipelines.length === 0" class="m-4 text-wp-text-100">{{ $t('repo.pipeline.no_pipelines') }}</span>
   </aside>
 </template>
 

web/src/components/registry/RegistryList.vue

@@ -3,7 +3,7 @@
     <ListItem
       v-for="registry in registries"
       :key="registry.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
     >
       <span>{{ registry.address }}</span>
       <IconButton

web/src/components/repo/RepoItem.vue

@@ -2,10 +2,10 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200 cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300"
+    class="flex flex-col border-wp-background-400 bg-wp-background-100 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
-    <div class="grid grid-cols-[auto,1fr] gap-y-4 items-center">
-      <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
+    <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
+      <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
       <div class="ml-auto text-wp-text-100">
         <div
           v-if="repo.visibility === RepoVisibility.Private"
@@ -21,14 +21,14 @@
         </div>
       </div>
 
-      <div class="col-span-2 text-wp-text-100 flex w-full gap-x-4">
+      <div class="flex gap-x-4 col-span-2 w-full text-wp-text-100">
         <template v-if="lastPipeline">
-          <div class="flex flex-1 min-w-0 gap-x-1 items-center">
+          <div class="flex flex-1 items-center gap-x-1 min-w-0">
             <PipelineStatusIcon v-if="lastPipeline" :status="lastPipeline.status" />
-            <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ shortMessage }}</span>
+            <span class="whitespace-nowrap overflow-ellipsis overflow-hidden">{{ shortMessage }}</span>
           </div>
 
-          <div class="flex flex-shrink-0 gap-x-1 items-center ml-auto">
+          <div class="flex flex-shrink-0 items-center gap-x-1 ml-auto">
             <Icon name="since" />
             <span>{{ since }}</span>
           </div>