Improve dark style text color for better readibility (#985)

This commit is contained in:
Lauris BH 2022-06-17 03:00:31 +03:00 committed by GitHub
parent 17999da20f
commit 14b3cfff1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 125 additions and 147 deletions

View file

@ -49,54 +49,6 @@ export default defineComponent({
}); });
</script> </script>
<!-- eslint-disable-next-line vue-scoped-css/require-scoped -->
<style>
html,
body,
#app {
width: 100%;
height: 100%;
}
.vue-notification {
@apply rounded-md text-base border-l-6;
}
.vue-notification .notification-title {
@apply font-normal;
}
.vue-notification.success {
@apply bg-lime-600 border-l-lime-700;
}
.vue-notification.error {
@apply bg-red-600 border-l-red-700;
}
*::-webkit-scrollbar {
@apply bg-transparent w-12px h-12px;
}
* {
scrollbar-width: thin;
}
*::-webkit-scrollbar-thumb {
transition: background 0.2s ease-in-out;
border: 3px solid transparent;
@apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
}
*::-webkit-scrollbar-thumb:hover {
@apply bg-cool-gray-300 dark:bg-dark-100;
}
*::-webkit-scrollbar-corner {
@apply bg-transparent;
}
</style>
<style scoped> <style scoped>
.app { .app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;

View file

@ -51,7 +51,7 @@
"pipeline_path": { "pipeline_path": {
"path": "Pipeline path", "path": "Pipeline path",
"default": "By default: .woodpecker/*.yml -> .woodpecker.yml -> .drone.yml", "default": "By default: .woodpecker/*.yml -> .woodpecker.yml -> .drone.yml",
"desc": "Path to your pipeline config (for example<span class=\"bg-gray-300 dark:bg-dark-100 rounded-md px-1\">my/path/</span>). Folders should end with a<span class=\"bg-gray-300 dark:bg-dark-100 rounded-md px-1\">/</span>." "desc": "Path to your pipeline config (for example <span class=\"bg-gray-300 dark:bg-dark-300 rounded-md px-1\">my/path/</span>). Folders should end with a <span class=\"bg-gray-300 dark:bg-dark-300 rounded-md px-1\">/</span>."
}, },
"allow_pr": { "allow_pr": {

View file

@ -18,7 +18,7 @@
disabled:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:cursor-not-allowed
" "
:class="{ :class="{
'bg-white hover:bg-gray-200 border-gray-300 text-gray-500 dark:text-gray-500 dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:bg-dark-gray-800': 'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:bg-dark-gray-800':
color === 'gray', color === 'gray',
'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-400 dark:bg-lime-900 dark:hover:bg-lime-800': 'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-400 dark:bg-lime-900 dark:hover:bg-lime-800':
color === 'green', color === 'green',

View file

@ -6,13 +6,13 @@
flex flex
items-center items-center
justify-center justify-center
text-gray-500 text-color
px-1 px-1
py-1 py-1
rounded-full rounded-full
bg-transparent bg-transparent
hover:bg-gray-200 hover:text-gray-700 hover:bg-gray-200 hover:text-gray-700
dark:hover:bg-gray-600 dark:text-gray-500 dark:hover:text-gray-700 dark:hover:bg-gray-600 dark:hover:text-gray-700
cursor-pointer cursor-pointer
transition-all transition-all
duration-150 duration-150

View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="build" class="flex text-gray-600 dark:text-gray-500 w-full"> <div v-if="build" class="flex text-color w-full">
<BuildStatusIcon :build="build" class="flex items-center" /> <BuildStatusIcon :build="build" class="flex items-center" />
<div class="flex flex-col ml-4 min-w-0"> <div class="flex flex-col ml-4 min-w-0">
<span class="underline">{{ build.owner }} / {{ build.name }}</span> <span class="underline">{{ build.owner }} / {{ build.name }}</span>

View file

@ -21,7 +21,7 @@
<BuildFeedItem :build="build" /> <BuildFeedItem :build="build" />
</router-link> </router-link>
<span v-if="sortedBuildFeed.length === 0" class="text-gray-500 m-4">{{ $t('repo.build.no_pipelines') }}</span> <span v-if="sortedBuildFeed.length === 0" class="text-color m-4">{{ $t('repo.build.no_pipelines') }}</span>
</div> </div>
</template> </template>

View file

@ -22,10 +22,8 @@
@click="innerValue = !innerValue" @click="innerValue = !innerValue"
/> />
<div class="flex flex-col ml-4"> <div class="flex flex-col ml-4">
<label v-if="label" class="cursor-pointer text-gray-600 dark:text-gray-500" :for="`checkbox-${id}`">{{ <label v-if="label" class="cursor-pointer text-color" :for="`checkbox-${id}`">{{ label }}</label>
label <span v-if="description" class="text-sm text-color-alt">{{ description }}</span>
}}</label>
<span v-if="description" class="text-sm text-gray-400 dark:text-gray-600">{{ description }}</span>
</div> </div>
</div> </div>
</template> </template>

View file

@ -1,11 +1,11 @@
<template> <template>
<div class="flex flex-col mt-2 mb-4"> <div class="flex flex-col mt-2 mb-4">
<div class="flex items-center text-gray-500 font-bold mb-2"> <div class="flex items-center text-color font-bold mb-2">
<label v-if="label" v-bind="$attrs">{{ label }}</label> <label v-if="label" v-bind="$attrs">{{ label }}</label>
<DocsLink v-if="docsUrl" :url="docsUrl" class="ml-2" /> <DocsLink v-if="docsUrl" :url="docsUrl" class="ml-2" />
</div> </div>
<slot /> <slot />
<div v-if="$slots['description']" class="ml-1 text-gray-400"> <div v-if="$slots['description']" class="ml-1 text-color-alt">
<slot name="description" /> <slot name="description" />
</div> </div>
</div> </div>

View file

@ -21,10 +21,8 @@
@click="innerValue = option.value" @click="innerValue = option.value"
/> />
<div class="flex flex-col ml-4"> <div class="flex flex-col ml-4">
<label class="cursor-pointer text-gray-600 dark:text-gray-500" :for="`radio-${id}-${option.value}`">{{ <label class="cursor-pointer text-color" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
option.text <span v-if="option.description" class="text-sm text-color-alt">{{ option.description }}</span>
}}</label>
<span v-if="option.description" class="text-sm text-gray-400 dark:text-gray-600">{{ option.description }}</span>
</div> </div>
</div> </div>
</template> </template>

View file

@ -3,12 +3,12 @@
v-model="innerValue" v-model="innerValue"
class="w-full border border-gray-900 py-1 px-2 rounded-md bg-white focus:outline-none border-gray-900" class="w-full border border-gray-900 py-1 px-2 rounded-md bg-white focus:outline-none border-gray-900"
:class="{ :class="{
'text-gray-500': innerValue === '', 'text-color': innerValue === '',
'text-gray-900': innerValue !== '', 'text-gray-900': innerValue !== '',
}" }"
> >
<option v-if="placeholder" value="" class="hidden">{{ placeholder }}</option> <option v-if="placeholder" value="" class="hidden">{{ placeholder }}</option>
<option v-for="option in options" :key="option.value" :value="option.value" class="text-gray-500"> <option v-for="option in options" :key="option.value" :value="option.value" class="text-color">
{{ option.text }} {{ option.text }}
</option> </option>
</select> </select>

View file

@ -14,14 +14,7 @@
<input <input
v-if="lines === 1" v-if="lines === 1"
v-model="innerValue" v-model="innerValue"
class=" class="w-full bg-transparent text-color focus:outline-none focus:border-blue-400"
w-full
bg-transparent
text-gray-600
placeholder-gray-400
focus:outline-none focus:border-blue-400
dark:placeholder-gray-600 dark:text-gray-500
"
:disabled="disabled" :disabled="disabled"
:type="type" :type="type"
:placeholder="placeholder" :placeholder="placeholder"
@ -29,14 +22,7 @@
<textarea <textarea
v-else v-else
v-model="innerValue" v-model="innerValue"
class=" class="w-full bg-transparent text-color focus:outline-none focus:border-blue-400"
w-full
bg-transparent
text-gray-600
placeholder-gray-400
focus:outline-none focus:border-blue-400
dark:placeholder-gray-600 dark:text-gray-500
"
:disabled="disabled" :disabled="disabled"
:placeholder="placeholder" :placeholder="placeholder"
:rows="lines" :rows="lines"

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="flex shadow-lg bg-lime-600 text-neutral-content px-2 md:px-8 py-2 dark:bg-dark-gray-900"> <div class="flex shadow-lg dark:shadow-sm bg-lime-600 text-neutral-content px-2 md:px-8 py-2 dark:bg-dark-gray-900">
<div class="flex text-white dark:text-gray-500 items-center"> <div class="flex text-white dark:text-gray-400 items-center">
<router-link :to="{ name: 'home' }" class="relative"> <router-link :to="{ name: 'home' }" class="relative">
<img class="-mt-3 w-8" src="../../../assets/logo.svg?url" /> <img class="-mt-3 w-8" src="../../../assets/logo.svg?url" />
<span class="absolute -bottom-4 text-xs">{{ version }}</span> <span class="absolute -bottom-4 text-xs">{{ version }}</span>
@ -14,7 +14,7 @@
<span class="hidden md:flex">{{ $t('repositories') }}</span> <span class="hidden md:flex">{{ $t('repositories') }}</span>
</router-link> </router-link>
</div> </div>
<div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-500"> <div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-400">
<a <a
:href="docsUrl" :href="docsUrl"
target="_blank" target="_blank"

View file

@ -23,22 +23,13 @@
</div> </div>
<div class="w-full md:w-auto md:mx-4 flex items-center min-w-0"> <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
<span <span class="text-color-alt <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
class="text-gray-600 <md:underline dark:text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis" message
>{{ message }}</span }}</span>
>
</div> </div>
<div <div
class=" 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"
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-gray-500
"
> >
<div class="flex space-x-2 items-center min-w-0"> <div class="flex space-x-2 items-center min-w-0">
<Icon v-if="build.event === 'pull_request'" name="pull_request" /> <Icon v-if="build.event === 'pull_request'" name="pull_request" />

View file

@ -9,7 +9,7 @@
<BuildItem :build="build" /> <BuildItem :build="build" />
</router-link> </router-link>
<Panel v-if="builds.length === 0"> <Panel v-if="builds.length === 0">
<span class="text-gray-500">{{ $t('repo.build.no_pipelines') }}</span> <span class="text-color">{{ $t('repo.build.no_pipelines') }}</span>
</Panel> </Panel>
</div> </div>
</template> </template>

View file

@ -13,7 +13,7 @@
<div id="terminal" class="w-full h-full" /> <div id="terminal" class="w-full h-full" />
</div> </div>
<div class="m-auto text-xl text-gray-500 dark:text-gray-500"> <div class="m-auto text-xl text-color">
<span v-if="proc?.error" class="text-red-400">{{ proc.error }}</span> <span v-if="proc?.error" class="text-red-400">{{ proc.error }}</span>
<span v-else-if="proc?.state === 'skipped'" class="text-red-400">{{ $t('repo.build.actions.canceled') }}</span> <span v-else-if="proc?.state === 'skipped'" class="text-red-400">{{ $t('repo.build.actions.canceled') }}</span>
<span v-else-if="!proc?.start_time">{{ $t('repo.build.step_not_started') }}</span> <span v-else-if="!proc?.start_time">{{ $t('repo.build.step_not_started') }}</span>

View file

@ -1,7 +1,7 @@
<template> <template>
<Panel> <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-gray-600">
<h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.actions.actions') }}</h1> <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.actions.actions') }}</h1>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">

View file

@ -1,7 +1,7 @@
<template> <template>
<Panel> <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-gray-600">
<h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.badge.badge') }}</h1> <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.badge.badge') }}</h1>
<a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto"> <a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
<img :src="badgeUrl" /> <img :src="badgeUrl" />
</a> </a>
@ -9,17 +9,17 @@
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<div> <div>
<h2 class="text-lg text-gray-500 ml-2">{{ $t('url') }}</h2> <h2 class="text-lg text-color ml-2">{{ $t('url') }}</h2>
<pre class="box">{{ baseUrl }}{{ badgeUrl }}</pre> <pre class="box">{{ baseUrl }}{{ badgeUrl }}</pre>
</div> </div>
<div> <div>
<h2 class="text-lg text-gray-500 ml-2">{{ $t('repo.settings.badge.url_branch') }}</h2> <h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.url_branch') }}</h2>
<pre class="box">{{ baseUrl }}{{ badgeUrl }}?branch=<span class="font-bold">&lt;branch&gt;</span></pre> <pre class="box">{{ baseUrl }}{{ badgeUrl }}?branch=<span class="font-bold">&lt;branch&gt;</span></pre>
</div> </div>
<div> <div>
<h2 class="text-lg text-gray-500 ml-2">{{ $t('repo.settings.badge.markdown') }}</h2> <h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.markdown') }}</h2>
<pre class="box">[![status-badge]({{ baseUrl }}{{ badgeUrl }})]({{ baseUrl }}{{ repoUrl }})</pre> <pre class="box">[![status-badge]({{ baseUrl }}{{ badgeUrl }})]({{ baseUrl }}{{ repoUrl }})</pre>
</div> </div>
</div> </div>
@ -62,7 +62,7 @@ export default defineComponent({
<style scoped> <style scoped>
.box { .box {
@apply bg-gray-400 p-2 rounded-md text-white break-words dark:bg-dark-300 dark:text-gray-500; @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
white-space: pre-wrap; white-space: pre-wrap;
} }
</style> </style>

View file

@ -1,7 +1,7 @@
<template> <template>
<Panel> <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-gray-600">
<h1 class="text-xl ml-2 text-gray-500">{{ $t('general') }}</h1> <h1 class="text-xl ml-2 text-color">{{ $t('general') }}</h1>
</div> </div>
<div v-if="repoSettings" class="flex flex-col"> <div v-if="repoSettings" class="flex flex-col">
@ -16,7 +16,7 @@
/> />
<template #description> <template #description>
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<p class="text-sm text-gray-400 dark:text-gray-600" v-html="$t('repo.settings.general.pipeline_path.desc')" /> <p class="text-sm text-color-alt" v-html="$t('repo.settings.general.pipeline_path.desc')" />
</template> </template>
</InputField> </InputField>

View file

@ -2,8 +2,8 @@
<Panel> <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-gray-600">
<div class="ml-2"> <div class="ml-2">
<h1 class="text-xl text-gray-500">{{ $t('repo.settings.registries.creds') }}</h1> <h1 class="text-xl text-color">{{ $t('repo.settings.registries.creds') }}</h1>
<p class="text-sm text-gray-400 dark:text-gray-600"> <p class="text-sm text-color-alt">
{{ $t('repo.settings.registries.desc') }} {{ $t('repo.settings.registries.desc') }}
<DocsLink url="docs/usage/registries" /> <DocsLink url="docs/usage/registries" />
</p> </p>
@ -24,13 +24,13 @@
/> />
</div> </div>
<div v-if="!selectedRegistry" class="space-y-4 text-gray-500"> <div v-if="!selectedRegistry" class="space-y-4 text-color">
<ListItem v-for="registry in registries" :key="registry.id" class="items-center"> <ListItem v-for="registry in registries" :key="registry.id" class="items-center">
<span>{{ registry.address }}</span> <span>{{ registry.address }}</span>
<IconButton icon="edit" class="ml-auto w-8 h-8" @click="selectedRegistry = registry" /> <IconButton icon="edit" class="ml-auto w-8 h-8" @click="selectedRegistry = registry" />
<IconButton <IconButton
icon="trash" icon="trash"
class="w-8 h-8 hover:text-red-400" class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
:is-loading="isDeleting" :is-loading="isDeleting"
@click="deleteRegistry(registry)" @click="deleteRegistry(registry)"
/> />

View file

@ -2,8 +2,8 @@
<Panel> <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-gray-600">
<div class="ml-2"> <div class="ml-2">
<h1 class="text-xl text-gray-500">{{ $t('repo.settings.secrets.secrets') }}</h1> <h1 class="text-xl text-color">{{ $t('repo.settings.secrets.secrets') }}</h1>
<p class="text-sm text-gray-400 dark:text-gray-600"> <p class="text-sm text-color-alt">
{{ $t('repo.settings.secrets.desc') }} {{ $t('repo.settings.secrets.desc') }}
<DocsLink url="docs/usage/secrets" /> <DocsLink url="docs/usage/secrets" />
</p> </p>
@ -18,21 +18,21 @@
<Button v-else class="ml-auto" :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" /> <Button v-else class="ml-auto" :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
</div> </div>
<div v-if="!selectedSecret" class="space-y-4 text-gray-500"> <div v-if="!selectedSecret" class="space-y-4 text-color">
<ListItem v-for="secret in secrets" :key="secret.id" class="items-center"> <ListItem v-for="secret in secrets" :key="secret.id" class="items-center">
<span>{{ secret.name }}</span> <span>{{ secret.name }}</span>
<div class="ml-auto"> <div class="ml-auto">
<span <span
v-for="event in secret.event" v-for="event in secret.event"
:key="event" :key="event"
class="bg-gray-400 dark:bg-dark-200 dark:text-gray-500 text-white rounded-md mx-1 py-1 px-2 text-sm" class="bg-gray-500 dark:bg-dark-700 dark:text-gray-400 text-white rounded-md mx-1 py-1 px-2 text-sm"
>{{ event }}</span >{{ event }}</span
> >
</div> </div>
<IconButton icon="edit" class="ml-2 w-8 h-8" @click="selectedSecret = secret" /> <IconButton icon="edit" class="ml-2 w-8 h-8" @click="selectedSecret = secret" />
<IconButton <IconButton
icon="trash" icon="trash"
class="ml-2 w-8 h-8 hover:text-red-400" class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
:is-loading="isDeleting" :is-loading="isDeleting"
@click="deleteSecret(secret)" @click="deleteSecret(secret)"
/> />

View file

@ -11,9 +11,9 @@
flex flex
cursor-pointer cursor-pointer
md:border-b-2 md:border-b-2
text-gray-500 text-color
hover:text-gray-700 hover:text-gray-700
dark:text-gray-500 dark:hover:text-gray-400 dark:hover:text-gray-400
items-center items-center
" "
:class="{ :class="{

View file

@ -1,6 +1,7 @@
import 'windi.css'; import 'windi.css';
import 'floating-vue/dist/style.css'; // eslint-disable-line no-restricted-imports import 'floating-vue/dist/style.css'; // eslint-disable-line no-restricted-imports
import '~/compositions/useFavicon'; import '~/compositions/useFavicon';
import '~/style.css';
import { createPinia } from 'pinia'; import { createPinia } from 'pinia';
import { createApp } from 'vue'; import { createApp } from 'vue';

52
web/src/style.css Normal file
View file

@ -0,0 +1,52 @@
html,
body,
#app {
width: 100%;
height: 100%;
}
.vue-notification {
@apply rounded-md text-base border-l-6;
}
.vue-notification .notification-title {
@apply font-normal;
}
.vue-notification.success {
@apply bg-lime-600 border-l-lime-700;
}
.vue-notification.error {
@apply bg-red-600 border-l-red-700;
}
*::-webkit-scrollbar {
@apply bg-transparent w-12px h-12px;
}
* {
scrollbar-width: thin;
}
*::-webkit-scrollbar-thumb {
transition: background 0.2s ease-in-out;
border: 3px solid transparent;
@apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
}
*::-webkit-scrollbar-thumb:hover {
@apply bg-cool-gray-300 dark:bg-dark-100;
}
*::-webkit-scrollbar-corner {
@apply bg-transparent;
}
.text-color {
@apply text-gray-600 dark:text-gray-400 placeholder-gray-400 dark:placeholder-gray-500;
}
.text-color-alt {
@apply text-gray-500 dark:text-gray-500;
}

View file

@ -19,7 +19,7 @@
<img class="w-48 h-48" src="../assets/logo.svg?url" /> <img class="w-48 h-48" src="../assets/logo.svg?url" />
</div> </div>
<div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center"> <div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
<h1 class="text-xl text-gray-600 dark:text-gray-500">{{ $t('welcome') }}</h1> <h1 class="text-xl text-color">{{ $t('welcome') }}</h1>
<Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button> <Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
</div> </div>
</div> </div>

View file

@ -2,7 +2,7 @@
<FluidContainer class="flex flex-col"> <FluidContainer class="flex flex-col">
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-dark-200"> <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-dark-200">
<IconButton :to="{ name: 'repos' }" icon="back" /> <IconButton :to="{ name: 'repos' }" icon="back" />
<h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.add') }}</h1> <h1 class="text-xl ml-2 text-color">{{ $t('repo.add') }}</h1>
<TextField v-model="search" class="w-auto ml-auto" :placeholder="$t('search')" /> <TextField v-model="search" class="w-auto ml-auto" :placeholder="$t('search')" />
<Button <Button
class="ml-auto" class="ml-auto"
@ -21,8 +21,8 @@
:clickable="repo.active" :clickable="repo.active"
@click="repo.active && $router.push({ name: 'repo', params: { repoOwner: repo.owner, repoName: repo.name } })" @click="repo.active && $router.push({ name: 'repo', params: { repoOwner: repo.owner, repoName: repo.name } })"
> >
<span class="text-gray-500">{{ repo.full_name }}</span> <span class="text-color">{{ repo.full_name }}</span>
<span v-if="repo.active" class="ml-auto text-gray-500">{{ $t('repo.enable.enabled') }}</span> <span v-if="repo.active" class="ml-auto text-color-alt">{{ $t('repo.enable.enabled') }}</span>
<Button <Button
v-if="!repo.active" v-if="!repo.active"
class="ml-auto" class="ml-auto"

View file

@ -1,7 +1,7 @@
<template> <template>
<FluidContainer class="flex flex-col"> <FluidContainer class="flex flex-col">
<div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200"> <div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200">
<h1 class="text-xl text-gray-500">Repositories</h1> <h1 class="text-xl text-color">Repositories</h1>
<TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" /> <TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" />
<Button class="md:ml-auto" :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" /> <Button class="md:ml-auto" :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
</div> </div>
@ -13,7 +13,7 @@
clickable clickable
@click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })" @click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
> >
<span class="text-gray-500">{{ `${repo.owner} / ${repo.name}` }}</span> <span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
</ListItem> </ListItem>
</div> </div>
</FluidContainer> </FluidContainer>

View file

@ -1,7 +1,7 @@
<template> <template>
<FluidContainer class="flex flex-col"> <FluidContainer class="flex flex-col">
<div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200"> <div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200">
<h1 class="text-xl text-gray-500">{{ repoOwner }}</h1> <h1 class="text-xl text-color">{{ repoOwner }}</h1>
<TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" /> <TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" />
</div> </div>
@ -12,11 +12,11 @@
clickable clickable
@click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })" @click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
> >
<span class="text-gray-500">{{ `${repo.name}` }}</span> <span class="text-color">{{ `${repo.name}` }}</span>
</ListItem> </ListItem>
</div> </div>
<div v-if="(searchedRepos || []).length <= 0" class="text-center"> <div v-if="(searchedRepos || []).length <= 0" class="text-center">
<span class="text-gray-500 m-auto">{{ $t('repo.user_none') }}</span> <span class="text-color m-auto">{{ $t('repo.user_none') }}</span>
</div> </div>
</FluidContainer> </FluidContainer>
</template> </template>

View file

@ -3,23 +3,23 @@
<Button class="ml-auto" :text="$t('logout')" :to="`${address}/logout`" /> <Button class="ml-auto" :text="$t('logout')" :to="`${address}/logout`" />
<div> <div>
<h2 class="text-lg text-gray-500">{{ $t('user.token') }}</h2> <h2 class="text-lg text-color">{{ $t('user.token') }}</h2>
<pre class="cli-box">{{ token }}</pre> <pre class="cli-box">{{ token }}</pre>
</div> </div>
<div> <div>
<h2 class="text-lg text-gray-500">{{ $t('user.shell_setup') }}</h2> <h2 class="text-lg text-color">{{ $t('user.shell_setup') }}</h2>
<pre class="cli-box">{{ usageWithShell }}</pre> <pre class="cli-box">{{ usageWithShell }}</pre>
</div> </div>
<div> <div>
<h2 class="text-lg text-gray-500">{{ $t('user.api_usage') }}</h2> <h2 class="text-lg text-color">{{ $t('user.api_usage') }}</h2>
<pre class="cli-box">{{ usageWithCurl }}</pre> <pre class="cli-box">{{ usageWithCurl }}</pre>
</div> </div>
<div> <div>
<div class="flex items-center"> <div class="flex items-center">
<h2 class="text-lg text-gray-500">{{ $t('user.cli_usage') }}</h2> <h2 class="text-lg text-color">{{ $t('user.cli_usage') }}</h2>
<a :href="cliDownload" target="_blank" class="ml-4 text-link">{{ $t('user.dl_cli') }}</a> <a :href="cliDownload" target="_blank" class="ml-4 text-link">{{ $t('user.dl_cli') }}</a>
</div> </div>
<pre class="cli-box">{{ usageWithCli }}</pre> <pre class="cli-box">{{ usageWithCli }}</pre>
@ -77,7 +77,7 @@ export default defineComponent({
<style scoped> <style scoped>
.cli-box { .cli-box {
@apply bg-gray-400 p-2 rounded-md text-white break-words dark:bg-dark-300 dark:text-gray-500; @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
white-space: pre-wrap; white-space: pre-wrap;
} }
</style> </style>

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="flex w-full mb-4 justify-center"> <div class="flex w-full mb-4 justify-center">
<span class="text-gray-600 dark:text-gray-500 text-xl">{{ $t('repo.build.pipelines_for', { branch }) }}</span> <span class="text-color text-xl">{{ $t('repo.build.pipelines_for', { branch }) }}</span>
</div> </div>
<BuildList :builds="builds" :repo="repo" /> <BuildList :builds="builds" :repo="repo" />
</template> </template>

View file

@ -6,7 +6,7 @@
:to="{ name: 'repo-branch', params: { branch } }" :to="{ name: 'repo-branch', params: { branch } }"
class="flex" class="flex"
> >
<ListItem clickable class="text-gray-600 dark:text-gray-500"> <ListItem clickable class="text-color">
{{ branch }} {{ branch }}
</ListItem> </ListItem>
</router-link> </router-link>

View file

@ -2,7 +2,7 @@
<FluidContainer> <FluidContainer>
<div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600"> <div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600">
<IconButton icon="back" @click="goBack" /> <IconButton icon="back" @click="goBack" />
<h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.settings') }}</h1> <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.settings') }}</h1>
</div> </div>
<Tabs> <Tabs>

View file

@ -1,7 +1,7 @@
<template> <template>
<FluidContainer v-if="repo && repoPermissions && $route.meta.repoHeader"> <FluidContainer v-if="repo && repoPermissions && $route.meta.repoHeader">
<div class="flex flex-wrap border-b items-center pb-4 mb-4 dark:border-gray-600 justify-center"> <div class="flex flex-wrap border-b items-center pb-4 mb-4 dark:border-gray-600 justify-center">
<h1 class="text-xl text-gray-500 w-full md:w-auto text-center mb-4 md:mb-0"> <h1 class="text-xl text-color w-full md:w-auto text-center mb-4 md:mb-0">
<router-link :to="{ name: 'repos-owner', params: { repoOwner } }">{{ repoOwner }}</router-link> <router-link :to="{ name: 'repos-owner', params: { repoOwner } }">{{ repoOwner }}</router-link>
{{ ` / ${repo.name}` }} {{ ` / ${repo.name}` }}
</h1> </h1>
@ -11,7 +11,7 @@
<a <a
:href="repo.link_url" :href="repo.link_url"
target="_blank" target="_blank"
class="flex ml-4 p-1 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600" class="flex ml-4 p-1 rounded-full text-color hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600"
> >
<Icon v-if="repo.link_url.startsWith('https://github.com/')" name="github" /> <Icon v-if="repo.link_url.startsWith('https://github.com/')" name="github" />
<Icon v-else name="repo" /> <Icon v-else name="repo" />

View file

@ -10,8 +10,8 @@
</div> </div>
<div v-else-if="build.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center"> <div v-else-if="build.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center">
<Icon name="status-blocked" class="w-32 h-32 text-gray-500" /> <Icon name="status-blocked" class="w-32 h-32 text-color" />
<p class="text-xl text-gray-500">{{ $t('repo.build.protected.awaits') }}</p> <p class="text-xl text-color">{{ $t('repo.build.protected.awaits') }}</p>
<div v-if="repoPermissions.push" class="flex mt-2 space-x-4"> <div v-if="repoPermissions.push" class="flex mt-2 space-x-4">
<Button <Button
color="green" color="green"
@ -29,8 +29,8 @@
</div> </div>
<div v-else-if="build.status === 'declined'" class="flex flex-col flex-grow justify-center items-center"> <div v-else-if="build.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
<Icon name="status-blocked" class="w-32 h-32 text-gray-500" /> <Icon name="status-blocked" class="w-32 h-32 text-color" />
<p class="text-xl text-gray-500">{{ $t('repo.build.protected.declined') }}</p> <p class="text-xl text-color">{{ $t('repo.build.protected.declined') }}</p>
</div> </div>
<BuildLog <BuildLog

View file

@ -1,8 +1,8 @@
<template> <template>
<FluidContainer v-if="build" class="flex flex-col gap-y-6 text-gray-500 justify-between py-0"> <FluidContainer v-if="build" class="flex flex-col gap-y-6 text-color justify-between py-0">
<Panel> <Panel>
<div v-if="build.changed_files === undefined || build.changed_files.length < 1" class="w-full"> <div v-if="build.changed_files === undefined || build.changed_files.length < 1" class="w-full">
<span class="text-gray-500">{{ $t('repo.build.no_files') }}</span> <span class="text-color">{{ $t('repo.build.no_files') }}</span>
</div> </div>
<div v-for="file in build.changed_files" v-else :key="file" class="w-full"> <div v-for="file in build.changed_files" v-else :key="file" class="w-full">
<div>- {{ file }}</div> <div>- {{ file }}</div>

View file

@ -1,5 +1,5 @@
<template> <template>
<FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-gray-500 justify-between !pt-0"> <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-color justify-between !pt-0">
<Panel v-for="buildConfig in buildConfigs" :key="buildConfig.hash" :title="buildConfig.name"> <Panel v-for="buildConfig in buildConfigs" :key="buildConfig.hash" :title="buildConfig.name">
<span class="font-mono whitespace-pre">{{ buildConfig.data }}</span> <span class="font-mono whitespace-pre">{{ buildConfig.data }}</span>
</Panel> </Panel>

View file

@ -11,7 +11,7 @@
<md:flex-wrap <md:flex-wrap
md:order-none md:w-auto md:ml-2 md:order-none md:w-auto md:ml-2
flex flex
text-center text-xl text-gray-500 text-center text-xl text-color
whitespace-nowrap whitespace-nowrap
overflow-hidden overflow-ellipsis overflow-hidden overflow-ellipsis
" "
@ -48,7 +48,7 @@
<Tab id="changed-files" :title="$t('repo.build.files', { files: build.changed_files?.length || 0 })" /> <Tab id="changed-files" :title="$t('repo.build.files', { files: build.changed_files?.length || 0 })" />
</Tabs> </Tabs>
<div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0"> <div class="flex justify-between gap-x-4 text-color flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
<div class="flex space-x-1 items-center flex-shrink-0"> <div class="flex space-x-1 items-center flex-shrink-0">
<Icon name="since" /> <Icon name="since" />
<Tooltip> <Tooltip>