mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 09:14:08 +00:00
88adfe0e50
Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
<template>
|
|
<div class="rounded-md bg-alert-warning-bg p-4 relative">
|
|
<BaseIcon
|
|
name="XMarkIcon"
|
|
class="h-5 w-5 text-alert-warning-text absolute right-4 cursor-pointer"
|
|
@click="$emit('hide')"
|
|
/>
|
|
<div class="flex flex-col">
|
|
<div class="flex">
|
|
<div class="shrink-0">
|
|
<BaseIcon
|
|
name="ExclamationIcon"
|
|
class="h-5 w-5 text-alert-warning-text"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-alert-warning-text">
|
|
{{ title }}
|
|
</h3>
|
|
<div class="mt-2 text-sm text-alert-warning-text">
|
|
<ul role="list" class="list-disc pl-5 space-y-1">
|
|
<li v-for="(list, key) in lists" :key="key">
|
|
{{ list }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="actions.length" class="mt-4 ml-3">
|
|
<div class="-mx-2 -my-1.5 flex flex-row-reverse">
|
|
<button
|
|
v-for="(action, i) in actions"
|
|
:key="i"
|
|
type="button"
|
|
class="
|
|
bg-alert-warning-bg
|
|
px-2
|
|
py-1.5
|
|
rounded-md
|
|
text-sm
|
|
font-medium
|
|
text-alert-warning-text
|
|
hover:bg-alert-warning-bg
|
|
focus:outline-hidden
|
|
focus:ring-2
|
|
focus:ring-offset-2
|
|
focus:ring-offset-yellow-50
|
|
focus:ring-yellow-600
|
|
mr-3
|
|
"
|
|
@click="$emit(`${action}`)"
|
|
>
|
|
{{ action }}
|
|
</button>
|
|
<!-- <button
|
|
v-if="actions[1]"
|
|
type="button"
|
|
class="
|
|
ml-3
|
|
bg-yellow-50
|
|
px-2
|
|
py-1.5
|
|
rounded-md
|
|
text-sm
|
|
font-medium
|
|
text-yellow-800
|
|
hover:bg-yellow-100
|
|
focus:outline-hidden
|
|
focus:ring-2
|
|
focus:ring-offset-2
|
|
focus:ring-offset-yellow-50
|
|
focus:ring-yellow-600
|
|
"
|
|
@click="$emit('action2')"
|
|
>
|
|
{{ actions[1] }}
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { XCircleIcon } from '@heroicons/vue/24/solid'
|
|
|
|
const emits = defineEmits(['hide'])
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: 'There were some errors with your submission',
|
|
},
|
|
lists: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
actions: {
|
|
type: Array,
|
|
default: () => ['Dismiss'],
|
|
},
|
|
})
|
|
</script>
|