mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-01-23 23:58:44 +00:00
Code Issues Projects Releases Wiki Activity

bump all tailwind classes by +100 to match new logic scheme

Browse source
This commit is contained in:
pat-s 2024-12-21 12:27:57 +01:00
parent f951cf33cc
commit 69d244fe59
No known key found for this signature in database
GPG key ID: 3C6318841EF78925
22 changed files with 97 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/App.vue
View file

@ -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-300 dark:bg-wp-background-200 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>

18
web/src/components/admin/settings/queue/AdminQueueStats.vue
View file

@ -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-300 dark:bg-wp-background-200 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">

4
web/src/components/agent/AgentList.vue
View file

@ -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-300 !dark:bg-wp-background-200"
>
<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')"

2
web/src/components/atomic/CountBadge.vue
View file

@ -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="inline-block bg-wp-background-400 dark:bg-wp-background-200 px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-wp-text-100 text-xs leading-4"
>
{{ value }}
</span>

4
web/src/components/atomic/ListItem.vue
View file

@ -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-500 bg-wp-background-200 dark:bg-wp-background-300 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-400 dark:hover:bg-wp-background-400': clickable || to,
}"
>
<slot />

4
web/src/components/form/TextField.vue
View file

@ -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"

8
web/src/components/layout/Panel.vue
View file

@ -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-500 bg-wp-background-200 dark:bg-wp-background-300 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>

8
web/src/components/layout/Settings.vue
View file

@ -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-200 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" />

22
web/src/components/layout/header/Navbar.vue
View file

@ -1,39 +1,39 @@
<template>
<nav
class="flex bg-wp-primary-200 dark:bg-wp-primary-300 text-neutral-content p-4 border-b border-wp-background-100 font-bold text-wp-primary-text-100"
class="flex border-wp-background-200 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">
<WoodpeckerLogo class="w-8 h-8" />
<span class="text-xs" :title="version?.current">{{ version?.currentShort }}</span>
</router-link>
<router-link v-if="user" :to="{ name: 'repos' }" class="navbar-link navbar-clickable">
<router-link v-if="user" :to="{ name: 'repos' }" class="navbar-clickable navbar-link">
<span class="flex md:hidden">{{ $t('repos') }}</span>
<span class="hidden md:flex">{{ $t('repositories') }}</span>
<span class="md:flex hidden">{{ $t('repositories') }}</span>
</router-link>
<a href="https://woodpecker-ci.org/" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{
<a href="https://woodpecker-ci.org/" target="_blank" class="md:flex hidden navbar-clickable navbar-link">{{
$t('docs')
}}</a>
<a v-if="enableSwagger" :href="apiUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{
<a v-if="enableSwagger" :href="apiUrl" target="_blank" class="md:flex hidden navbar-clickable navbar-link">{{
$t('api')
}}</a>
</div>
<div class="flex ml-auto -m-1.5 items-center space-x-2">
<div class="flex items-center space-x-2 -m-1.5 ml-auto">
<IconButton
v-if="user?.admin"
class="navbar-icon relative"
class="relative navbar-icon"
:title="$t('settings')"
:to="{ name: 'admin-settings' }"
>
<Icon name="settings" />
<div
v-if="version?.needsUpdate"
class="absolute top-2 right-2 bg-int-wp-state-error-100 rounded-full w-3 h-3"
class="top-2 right-2 absolute bg-int-wp-state-error-100 rounded-full w-3 h-3"
/>
</IconButton>
<ActivePipelines v-if="user" class="navbar-icon" />
<IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon !p-1.5">
<IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="!p-1.5 navbar-icon">
<img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
</IconButton>
<Button v-else :text="$t('login')" :to="`/login?url=${route.fullPath}`" />
@ -66,7 +66,7 @@ const { enableSwagger } = config;
<style scoped>
.navbar-icon {
@apply w-11 h-11 rounded-md p-2.5;
@apply p-2.5 rounded-md w-11 h-11;
}
.navbar-icon :deep(svg) {
@ -74,6 +74,6 @@ const { enableSwagger } = config;
}
.navbar-link {
@apply px-3 py-2 -my-1 rounded-md hover-effect;
@apply -my-1 px-3 py-2 rounded-md hover-effect;
}
</style>

12
web/src/components/layout/scaffold/Header.vue
View file

@ -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-500 dark:border-wp-background-200 bg-wp-background-200 dark:bg-wp-background-400 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>

8
web/src/components/layout/scaffold/Tabs.vue
View file

@ -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-200 hover:bg-wp-background-300 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>

6
web/src/components/pipeline-feed/PipelineFeedSidebar.vue
View file

@ -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-500 bg-wp-background-200 dark:bg-wp-background-300 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-500 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 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>

2
web/src/components/registry/RegistryList.vue
View file

@ -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-300 !dark:bg-wp-background-200"
>
<span>{{ registry.address }}</span>
<IconButton

14
web/src/components/repo/RepoItem.vue
View file

@ -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-500 bg-wp-background-200 hover:bg-wp-background-400 dark:hover:bg-wp-background-400 dark:bg-wp-background-300 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>

36
web/src/components/repo/pipeline/PipelineStepList.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="flex flex-col w-full md:w-3/12 md:max-w-md md:min-w-xs text-wp-text-100 gap-2 pb-2">
<div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
<div
class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md"
>
<div class="flex space-x-1 items-center flex-shrink-0">
<div class="flex flex-shrink-0 items-center space-x-1">
<div class="flex items-center">
<Icon v-if="pipeline.event === 'cron'" name="stopwatch" />
<img v-else class="rounded-md w-6" :src="pipeline.author_avatar" />
@ -12,7 +12,7 @@
</div>
<a
v-if="pipeline.event === 'pull_request' || pipeline.event === 'pull_request_closed'"
class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
class="flex items-center space-x-1 min-w-0 text-wp-link-100 hover:text-wp-link-200"
:href="pipeline.forge_url"
>
<Icon name="pull-request" />
@ -20,7 +20,7 @@
</a>
<router-link
v-else-if="pipeline.event === 'push' || pipeline.event === 'manual' || pipeline.event === 'deployment'"
class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
class="flex items-center space-x-1 min-w-0 text-wp-link-100 hover:text-wp-link-200"
:to="{ name: 'repo-branch', params: { branch: prettyRef } }"
>
<Icon v-if="pipeline.event === 'manual'" name="manual-pipeline" />
@ -28,19 +28,19 @@
<Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
<span class="truncate">{{ prettyRef }}</span>
</router-link>
<div v-else class="flex space-x-1 items-center min-w-0">
<div v-else class="flex items-center space-x-1 min-w-0">
<Icon v-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
<span class="truncate">{{ prettyRef }}</span>
</div>
<div class="flex items-center flex-shrink-0">
<div class="flex flex-shrink-0 items-center">
<template v-if="pipeline.event === 'pull_request'">
<Icon name="commit" />
<span>{{ pipeline.commit.slice(0, 10) }}</span>
</template>
<a
v-else
class="text-wp-link-100 hover:text-wp-link-200 flex items-center"
class="flex items-center text-wp-link-100 hover:text-wp-link-200"
:href="pipeline.forge_url"
target="_blank"
>
@ -54,15 +54,15 @@
<span>{{ $t('repo.pipeline.no_pipeline_steps') }}</span>
</Panel>
<div class="flex-grow min-h-0 w-full relative">
<div class="absolute top-0 left-0 right-0 h-full flex flex-col md:overflow-y-auto gap-y-2">
<div class="relative flex-grow w-full min-h-0">
<div class="top-0 right-0 left-0 absolute flex flex-col gap-y-2 h-full md:overflow-y-auto">
<div
v-for="workflow in pipeline.workflows"
:key="workflow.id"
class="p-2 rounded-md shadow border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
class="border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 shadow p-2 border rounded-md"
>
<div class="flex flex-col gap-2">
<div v-if="workflow.environ" class="flex flex-wrap gap-x-1 gap-y-2 text-xs justify-end pt-1 pr-1">
<div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
<div v-for="(value, key) in workflow.environ" :key="key">
<Badge :label="key" :value="value" />
</div>
@ -71,15 +71,15 @@
v-if="!singleConfig"
type="button"
:title="workflow.name"
class="flex items-center gap-2 py-2 px-1 hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 rounded-md"
class="flex items-center gap-2 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 px-1 py-2 rounded-md hover-effect"
@click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
>
<Icon
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': !workflowsCollapsed[workflow.id] }"
/>
<PipelineStatusIcon :status="workflow.state" class="!h-4 !w-4" />
<PipelineStatusIcon :status="workflow.state" class="!w-4 !h-4" />
<span class="truncate">{{ workflow.name }}</span>
<PipelineStepDuration
v-if="workflow.started !== workflow.finished"
@ -100,14 +100,14 @@
:key="step.pid"
type="button"
:title="step.name"
class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 w-full"
class="flex items-center gap-2 border-2 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 p-2 border-transparent rounded-md w-full hover-effect"
:class="{
'bg-wp-background-300 dark:bg-wp-background-400': selectedStepId && selectedStepId === step.pid,
'bg-wp-background-400 dark:bg-wp-background-500': selectedStepId && selectedStepId === step.pid,
'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),
}"
@click="$emit('update:selected-step-id', step.pid)"
>
<PipelineStatusIcon :service="step.type === StepType.Service" :status="step.state" class="!h-4 !w-4" />
<PipelineStatusIcon :service="step.type === StepType.Service" :status="step.state" class="!w-4 !h-4" />
<span class="truncate">{{ step.name }}</span>
<PipelineStepDuration :step="step" />
</button>

2
web/src/components/secrets/SecretList.vue
View file

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

16
web/src/views/Login.vue
View file

@ -1,26 +1,26 @@
<template>
<main class="flex flex-col w-full h-full justify-center items-center">
<main class="flex flex-col justify-center items-center w-full h-full">
<Error v-if="errorMessage" class="w-full md:w-3xl">
<span class="whitespace-pre">{{ errorMessage }}</span>
<span v-if="errorDescription" class="whitespace-pre mt-1">{{ errorDescription }}</span>
<span v-if="errorDescription" class="mt-1 whitespace-pre">{{ errorDescription }}</span>
<a
v-if="errorUri"
:href="errorUri"
target="_blank"
class="text-wp-link-100 hover:text-wp-link-200 cursor-pointer mt-1"
class="mt-1 text-wp-link-100 hover:text-wp-link-200 cursor-pointer"
>
<span>{{ errorUri }}</span>
</a>
</Error>
<div
class="flex flex-col w-full overflow-hidden bg-wp-background-100 shadow border border-wp-background-400 dark:bg-wp-background-200 md:m-8 md:rounded-md md:flex-row md:w-3xl md:h-sm"
class="flex md:flex-row flex-col border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
>
<div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 min-h-48 md:w-3/5">
<WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 h-30 md:w-48 md:h-48" />
<div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
<WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />
</div>
<div class="flex justify-center items-center flex-col md:w-2/5 min-h-48 gap-4 text-center">
<h1 class="text-xl text-wp-text-100">{{ $t('welcome') }}</h1>
<div class="flex flex-col justify-center items-center gap-4 md:w-2/5 min-h-48 text-center">
<h1 class="text-wp-text-100 text-xl">{{ $t('welcome') }}</h1>
<div class="flex flex-col gap-2">
<Button
v-for="forge in forges"

2
web/src/views/admin/AdminOrgs.vue
View file

@ -4,7 +4,7 @@
<ListItem
v-for="org in orgs"
:key="org.id"
class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
>
<span>{{ org.name }}</span>
<IconButton

4
web/src/views/admin/AdminQueue.vue
View file

@ -29,7 +29,7 @@
<ListItem
v-for="task in tasks"
:key="task.id"
class="items-center mb-2 !bg-wp-background-200 !dark:bg-wp-background-100"
class="items-center !bg-wp-background-300 !dark:bg-wp-background-200 mb-2"
>
<div
class="flex items-center"
@ -57,7 +57,7 @@
/>
</div>
<span class="ml-2">{{ task.id }}</span>
<span class="flex ml-auto gap-2">
<span class="flex gap-2 ml-auto">
<Badge v-if="task.agent_id !== 0" :label="$t('admin.settings.queue.agent')" :value="task.agent_id" />
<template v-for="(value, label) in task.labels">
<Badge v-if="value" :key="label" :label="label.toString()" :value="value" />

4
web/src/views/admin/AdminRepos.vue
View file

@ -13,10 +13,10 @@
<ListItem
v-for="repo in repos"
:key="repo.id"
class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
>
<span>{{ repo.full_name }}</span>
<div class="ml-auto flex items-center">
<div class="flex items-center ml-auto">
<Badge v-if="!repo.active" class="<md:hidden mr-2" :label="$t('admin.settings.repos.disabled')" />
<IconButton
icon="chevron-right"

6
web/src/views/admin/AdminUsers.vue
View file

@ -14,13 +14,13 @@
<ListItem
v-for="user in users"
:key="user.id"
class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
>
<img v-if="user.avatar_url" class="rounded-md h-6" :src="user.avatar_url" />
<span>{{ user.login }}</span>
<Badge
v-if="user.admin"
class="ml-auto hidden md:inline-block"
class="md:inline-block hidden ml-auto"
:label="$t('admin.settings.users.admin.admin')"
/>
<IconButton
@ -53,7 +53,7 @@
<InputField v-slot="{ id }" :label="$t('admin.settings.users.avatar_url')">
<div class="flex gap-2">
<img v-if="selectedUser.avatar_url" class="rounded-md h-8 w-8" :src="selectedUser.avatar_url" />
<img v-if="selectedUser.avatar_url" class="rounded-md w-8 h-8" :src="selectedUser.avatar_url" />
<TextField :id="id" v-model="selectedUser.avatar_url" />
</div>
</InputField>

4
web/src/views/repo/settings/Crons.vue
View file

@ -18,7 +18,7 @@
<ListItem
v-for="cron in crons"
:key="cron.id"
class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
>
<span class="grid grid-cols-3 w-full">
<span>{{ cron.name }}</span>
@ -74,7 +74,7 @@
/>
</InputField>
<div v-if="isEditingCron" class="ml-auto mb-4">
<div v-if="isEditingCron" class="mb-4 ml-auto">
<span v-if="selectedCron.next_exec && selectedCron.next_exec > 0" class="text-wp-text-100">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
{{ $t('repo.settings.crons.next_exec') }}: