woodpecker/web/src/components/admin/settings/AdminInfoTab.vue
Robert Kaussow 4c2dbca2e9
Replace linter icons to match theme (#2765)
@qwerty287 @anbraten What do you think about this approach? This way the
icons fit more into the existing design. I've also moved the icon in the
tab to the end as this looks IMO a bit better on mobile view, but open
for discussions.


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/f56a9688-4ca2-4b7b-a053-3e74effe6976)
<img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/93cd4dd6-4e22-4210-9fee-f8d134d3df42"
width=350> <img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/6128fec9-3dc5-4483-abde-5a911b236138"
width=350>

Alternative idea for errors:

<img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/bee8b1ea-8d27-43cc-9fb1-2df0031d3551"
width=350>

Or just use one symbol and only change the color for errors/warnings?
2023-11-09 00:03:36 +02:00

29 lines
950 B
Vue

<template>
<Settings :title="$t('info')">
<div class="flex flex-col items-center gap-4">
<WoodpeckerLogo class="w-32 h-32 fill-wp-text-200" />
<i18n-t keypath="running_version" tag="p" class="text-xl">
<span class="font-bold">{{ version?.current }}</span>
</i18n-t>
<i18n-t v-if="version?.needsUpdate" keypath="update_woodpecker" tag="span" class="text-int-wp-state-error-100">
<a
:href="`https://github.com/woodpecker-ci/woodpecker/releases/tag/${version.latest}`"
target="_blank"
rel="noopener noreferrer"
class="underline"
>{{ version.latest }}</a
>
</i18n-t>
</div>
</Settings>
</template>
<script lang="ts" setup>
import WoodpeckerLogo from '~/assets/logo.svg?component';
import Settings from '~/components/layout/Settings.vue';
import { useVersion } from '~/compositions/useVersion';
const version = useVersion();
</script>