Profectus-Demo/src/data/Changelog.vue

<template>
    <Modal :show="show" @close="$emit('closeDialog', 'Changelog')">
        <template v-slot:header>
            <h2>Changelog</h2>
        </template>
        <template v-slot:body>
            <details open>
                <summary>v0.0 Initial Commit - <time>2021-09-04</time></summary>
                This is the first release :D
                <ul>
                    <li class="feature">Did everything</li>
                    <li class="fix">Had some fun</li>
                    <li class="breaking">Removed everything</li>
                    <li class="balancing">Created some bugs to fix later</li>
                </ul>
            </details>
        </template>
    </Modal>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Changelog",
    props: {
        show: Boolean
    },
    emits: ["closeDialog"]
});
</script>

<style scoped>
details {
    margin: 10px 0;
    padding-left: 18px;
}

summary {
    cursor: pointer;
    margin-bottom: 10px;
    margin-left: -18px;
}

ul {
    margin: var(--feature-margin) 0;
    background: var(--raised-background);
    border: 2px solid rgba(0, 0, 0, 0.125);
    padding: 5px 5px 5px 15px;
    list-style: inside;
}

li {
    margin: 8px 0;
}

li::before {
    padding: 2px 8px;
    margin-right: 8px;
    border-radius: var(--border-radius);
}

.feature::before {
    content: "Feature";
    background: var(--accent1);
}

.fix::before {
    content: "Fix";
    background: var(--accent2);
}

.balancing::before {
    content: "Balancing";
    background: var(--accent3);
}

.breaking::before {
    content: "Breaking";
    background: var(--danger);
}
</style>