github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-10-30 22:25:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use consistent woodpecker color scheme (#2003)

Browse Source 
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>


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f)

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.


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb)

![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27)

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>
This commit is contained in:
Robert Kaussow
2023-08-02 09:09:12 +02:00
committed by GitHub
parent a8b8c9a588
commit dca01e6817
57 changed files with 561 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/components/repo/pipeline/PipelineItem.vue
View File

@@ -4,11 +4,11 @@
<div
class="h-full w-3"
:class="{
'bg-yellow-400 dark:bg-dark-200': pipeline.status === 'pending',
'bg-red-400 dark:bg-red-800': pipelineStatusColors[pipeline.status] === 'red',
'bg-gray-600 dark:bg-gray-500': pipelineStatusColors[pipeline.status] === 'gray',
'bg-lime-400 dark:bg-lime-900': pipelineStatusColors[pipeline.status] === 'green',
'bg-blue-400 dark:bg-blue-900': pipelineStatusColors[pipeline.status] === 'blue',
'bg-wp-state-warn-100': pipeline.status === 'pending',
'bg-wp-state-error-100': pipelineStatusColors[pipeline.status] === 'red',
'bg-wp-state-neutral-100': pipelineStatusColors[pipeline.status] === 'gray',
'bg-wp-state-ok-100': pipelineStatusColors[pipeline.status] === 'green',
'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
}"
/>
<div class="w-8 flex flex-wrap justify-between items-center h-full">
@@ -19,18 +19,20 @@
<div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
<div class="<md:hidden flex items-center flex-shrink-0">
<Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-color" />
<Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
<img v-else class="rounded-md w-8" :src="pipeline.author_avatar" />
</div>
<div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
<span class="text-color-alt <md:hidden">#{{ pipeline.number }}</span>
<span class="text-color-alt <md:hidden mx-2">-</span>
<span class="text-color <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
<span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
<span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
<span class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
message
}}</span>
</div>
<div
class="grid grid-rows-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-color"
class="grid grid-rows-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100"
>
<div class="flex space-x-2 items-center min-w-0">
<Icon v-if="pipeline.event === 'pull_request'" name="pull_request" />