mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-25 15:52:31 +01:00
feat: enhance UI components with consistent background styling for improved visibility
This commit is contained in:
@@ -93,7 +93,7 @@ const getActivity = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<UCard v-if="getActivity" variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex gap-8 items-center' }">
|
||||
<UCard v-if="getActivity" variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex gap-8 items-center' }">
|
||||
<UIcon
|
||||
:name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
|
||||
size="64"
|
||||
|
||||
@@ -19,7 +19,7 @@ const { t } = useI18n()
|
||||
variant="subtle"
|
||||
color="neutral"
|
||||
target="_blank"
|
||||
class="m-1 shadow-sm"
|
||||
class="m-1 shadow-sm bg-white dark:bg-neutral-900"
|
||||
:href="social.to"
|
||||
:aria-label="social.label"
|
||||
/>
|
||||
|
||||
@@ -19,7 +19,7 @@ const { changeLocale } = useLanguage()
|
||||
</ul>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center gap-2' }">
|
||||
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center gap-2' }">
|
||||
<p class="block">
|
||||
{{ t('tool.language.change') }}
|
||||
</p>
|
||||
|
||||
@@ -15,7 +15,7 @@ const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { l
|
||||
<div v-if="projects" class="m-1 my-4 flex flex-col gap-4">
|
||||
<div v-for="project in projects" :key="project.id">
|
||||
<NuxtLink :to="`/projects/${project.slug}`">
|
||||
<UCard variant="subtle" class="shadow-md">
|
||||
<UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900">
|
||||
<h1 class="text-xl font-medium">
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
|
||||
@@ -23,7 +23,7 @@ const { t, locale } = useI18n()
|
||||
:label="skill.name"
|
||||
variant="subtle"
|
||||
color="neutral"
|
||||
class="shadow-md"
|
||||
class="shadow-sm bg-white dark:bg-neutral-900"
|
||||
:icon="skill.icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@ const { dark, toggleDark } = useTheme()
|
||||
</ul>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center' }">
|
||||
<UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center' }">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon v-if="dark" name="i-ph-moon-duotone" size="24" />
|
||||
<UIcon v-else name="i-ph-sun-duotone" size="24" />
|
||||
|
||||
@@ -7,7 +7,7 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCard v-if="weather" variant="outline" class="md:max-w-2/3 m-1 shadow-sm">
|
||||
<UCard v-if="weather" variant="outline" class="md:max-w-2/3 m-1 shadow-sm bg-white dark:bg-neutral-900">
|
||||
<template #header>
|
||||
<div class="flex gap-4 items-center">
|
||||
<UIcon name="i-ph-cloud-duotone" size="24" />
|
||||
|
||||
Reference in New Issue
Block a user