github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-10-23 02:52:01 +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

18
web/src/components/admin/settings/AdminAgentsTab.vue
View File

@@ -1,9 +1,9 @@
<template>
<Panel>
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
<div class="ml-2">
<h1 class="text-xl text-color">{{ $t('admin.settings.agents.agents') }}</h1>
<p class="text-sm text-color-alt">{{ $t('admin.settings.agents.desc') }}</p>
<h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.agents.agents') }}</h1>
<p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.agents.desc') }}</p>
</div>
<Button
v-if="selectedAgent"
@@ -15,8 +15,12 @@
<Button v-else class="ml-auto" :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
</div>
<div v-if="!selectedAgent" class="space-y-4 text-color">
<ListItem v-for="agent in agents" :key="agent.id" class="items-center">
<div v-if="!selectedAgent" class="space-y-4 text-wp-text-100">
<ListItem
v-for="agent in agents"
:key="agent.id"
class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
>
<span>{{ agent.name || `Agent ${agent.id}` }}</span>
<span class="ml-auto">
<span class="hidden md:inline-block space-x-2">
@@ -35,7 +39,7 @@
<IconButton
icon="trash"
:title="$t('admin.settings.agents.delete_agent')"
class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
:is-loading="isDeleting"
@click="deleteAgent(agent)"
/>
@@ -85,7 +89,7 @@
:label="$t('admin.settings.agents.capacity.capacity')"
docs-url="docs/next/administration/agent-config#woodpecker_max_procs"
>
<span class="text-color-alt">{{ $t('admin.settings.agents.capacity.desc') }}</span>
<span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.capacity.desc') }}</span>
<TextField :model-value="selectedAgent.capacity?.toString()" disabled />
</InputField>