scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-12-24 22:57:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Dark Mode (PR -12) (#7590)

Browse Source
This commit is contained in:
Sivin Varghese
2023-07-27 12:28:06 +05:30
committed by GitHub
parent 2cc82af344
commit fcf0ba12d0
10 changed files with 153 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/javascript/dashboard/modules/notes/components/ContactNote.vue
View File

@@ -1,20 +1,28 @@
<template>
<div class="card note-wrap">
<div class="header">
<div class="meta">
<div
class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
>
<div class="flex justify-between items-end text-xs gap-1">
<div class="flex items-center">
<thumbnail
:title="noteAuthorName"
:src="noteAuthor.thumbnail"
:username="noteAuthorName"
size="20px"
/>
<div class="date-wrap">
<span class="fw-medium"> {{ noteAuthorName }} </span>
<span> {{ $t('NOTES.LIST.LABEL') }} </span>
<span class="fw-medium time-stamp"> {{ readableTime }} </span>
<div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
<span class="font-medium text-slate-800 dark:text-slate-100">
{{ noteAuthorName }}
</span>
<span class="text-slate-700 dark:text-slate-100">
{{ $t('NOTES.LIST.LABEL') }}
</span>
<span class="font-medium text-slate-700 dark:text-slate-100">
{{ readableTime }}
</span>
</div>
</div>
<div class="actions">
<div class="actions flex invisible">
<woot-button
v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
variant="smooth"
@@ -35,7 +43,10 @@
:reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
/>
</div>
<p v-dompurify-html="formatMessage(note || '')" class="note__content" />
<p
v-dompurify-html="formatMessage(note || '')"
class="note__content mt-4"
/>
</div>
</template>
@@ -116,39 +127,9 @@ export default {
}
}
.note__content {
margin-top: var(--space-normal);
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: var(--font-size-mini);
.meta {
display: flex;
align-items: center;
.date-wrap {
margin: 0 var(--space-smaller);
padding: var(--space-micro);
color: var(--color-body);
}
}
.actions {
display: flex;
visibility: hidden;
.button {
margin-left: var(--space-small);
}
}
}
.note-wrap:hover {
.actions {
visibility: visible;
@apply visible;
}
}
</style>