mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 11:02:02 +00:00
dca01e6817
Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details>  I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues.   What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
28 lines
803 B
Vue
28 lines
803 B
Vue
<template>
|
|
<div
|
|
class="flex items-center justify-center"
|
|
:title="$t('repo.pipeline.status.status', { status: $t(`repo.pipeline.status.${status}`) })"
|
|
>
|
|
<Icon
|
|
:name="`status-${status}`"
|
|
:class="{
|
|
'text-wp-state-error-100': pipelineStatusColors[status] === 'red',
|
|
'text-wp-state-neutral-100': pipelineStatusColors[status] === 'gray',
|
|
'text-wp-state-ok-100': pipelineStatusColors[status] === 'green',
|
|
'text-wp-state-info-100': pipelineStatusColors[status] === 'blue',
|
|
}"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Icon from '~/components/atomic/Icon.vue';
|
|
import { PipelineStatus } from '~/lib/api/types';
|
|
|
|
import { pipelineStatusColors } from './pipeline-status';
|
|
|
|
defineProps<{
|
|
status: PipelineStatus;
|
|
}>();
|
|
</script>
|