github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2026-04-15 01:41:56 +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

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

@@ -1,10 +1,12 @@
<template>
<div class="rounded-md w-full shadow overflow-hidden bg-gray-300 dark:bg-dark-gray-700">
<div
class="rounded-md w-full shadow overflow-hidden bg-wp-background-100 dark:bg-wp-background-200 border border-wp-background-400"
>
<component
:is="collapsable ? 'button' : 'div'"
v-if="title"
type="button"
class="flex w-full font-bold gap-2 text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2"
class="flex w-full font-bold gap-2 text-wp-text-100 px-4 py-2 bg-wp-background-300"
@click="collapsed && (_collapsed = !_collapsed)"
>
<Icon
@@ -22,7 +24,7 @@
}"
class="transition-height duration-150 overflow-hidden"
>
<div class="w-full p-4 bg-white dark:bg-dark-gray-700 text-color">
<div class="w-full p-4 text-wp-text-100">
<slot />
</div>
</div>

8
web/src/components/layout/header/Navbar.vue
View File

@@ -1,8 +1,10 @@
<template>
<!-- Navbar -->
<nav class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
<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"
>
<!-- Left Links Box -->
<div class="flex text-white dark:text-gray-400 items-center space-x-2">
<div class="flex items-center space-x-2">
<!-- Logo -->
<router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
<img class="w-8 h-8" src="../../../assets/logo.svg?url" />
@@ -19,7 +21,7 @@
<a :href="apiUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{ $t('api') }}</a>
</div>
<!-- Right Icons Box -->
<div class="flex ml-auto -m-1.5 items-center space-x-2 text-white dark:text-gray-400">
<div class="flex ml-auto -m-1.5 items-center space-x-2">
<!-- Dark Mode Toggle -->
<IconButton
:icon="darkMode ? 'dark' : 'light'"

6
web/src/components/layout/popups/DeployPipelinePopup.vue
View File

@@ -2,12 +2,14 @@
<Popup :open="open" @close="$emit('close')">
<Panel v-if="!loading">
<form @submit.prevent="triggerDeployPipeline">
<span class="text-xl text-color">{{ $t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber }) }}</span>
<span class="text-xl text-wp-text-100">{{
$t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber })
}}</span>
<InputField :label="$t('repo.deploy_pipeline.enter_target')">
<TextField v-model="payload.environment" required />
</InputField>
<InputField :label="$t('repo.deploy_pipeline.variables.title')">
<span class="text-sm text-color-alt mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
<span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
<div class="flex flex-col gap-2">
<div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
<TextField :model-value="name" disabled />

4
web/src/components/layout/popups/ManualPipelinePopup.vue
View File

@@ -2,12 +2,12 @@
<Popup :open="open" @close="$emit('close')">
<Panel v-if="!loading">
<form @submit.prevent="triggerManualPipeline">
<span class="text-xl text-color">{{ $t('repo.manual_pipeline.title') }}</span>
<span class="text-xl text-wp-text-100">{{ $t('repo.manual_pipeline.title') }}</span>
<InputField :label="$t('repo.manual_pipeline.select_branch')">
<SelectField v-model="payload.branch" :options="branches" required />
</InputField>
<InputField :label="$t('repo.manual_pipeline.variables.title')">
<span class="text-sm text-color-alt mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
<span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
<div class="flex flex-col gap-2">
<div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
<TextField :model-value="name" disabled />

8
web/src/components/layout/scaffold/Header.vue
View File

@@ -1,5 +1,7 @@
<template>
<header class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700 text-color">
<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"
>
<FluidContainer class="!py-0">
<div class="flex w-full items-center justify-between py-4 <md:flex-row <md:gap-y-4">
<div
@@ -15,13 +17,13 @@
class="flex-shrink-0 mr-2 <md:hidden"
@click="goBack"
/>
<h1 class="flex text-xl min-w-0 text-color items-center gap-x-2">
<h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
<slot name="title" />
</h1>
</div>
<TextField
v-if="searchBoxPresent"
class="w-auto !bg-gray-100 !dark:bg-dark-gray-600 placeholder-gray-500 <md:w-full <md:order-3"
class="w-auto <md:w-full <md:order-3"
:placeholder="$t('search')"
:model-value="search"
@update:model-value="(value: string) => $emit('update:search', value)"

4
web/src/components/layout/scaffold/Tabs.vue
View File

@@ -3,9 +3,9 @@
<button
v-for="tab in tabs"
:key="tab.id"
class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-color hover:text-gray-700 dark:hover:text-gray-400 items-center"
class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
:class="{
'border-gray-400 dark:border-gray-600': activeTab === tab.id,
'border-wp-text-100': activeTab === tab.id,
'border-transparent': activeTab !== tab.id,
}"
type="button"