scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-03 20:48:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Dark mode color fixes (#7693)

Browse Source
This commit is contained in:
Sivin Varghese
2023-08-08 21:07:15 +05:30
committed by GitHub
parent 180befbd42
commit 9ed701065e
4 changed files with 43 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View File

@@ -140,6 +140,14 @@
&.is-private { &.is-private {
@apply text-black-900 dark:text-white relative border border-solid bg-yellow-100 dark:bg-yellow-700 border-yellow-200 dark:border-yellow-600/25; @apply text-black-900 dark:text-white relative border border-solid bg-yellow-100 dark:bg-yellow-700 border-yellow-200 dark:border-yellow-600/25;
blockquote {
@apply border-slate-400 dark:border-slate-400 text-slate-800 dark:text-slate-300;
p {
@apply text-slate-600 dark:text-slate-300;
}
}
} }
&.is-image { &.is-image {

2
app/javascript/dashboard/modules/search/components/MessageContent.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<blockquote <blockquote
ref="messageContainer" ref="messageContainer"
class="message border-l-2 border-slate-100 dark:border-slate-800" class="message border-l-2 border-slate-100 dark:border-slate-700"
> >
<p class="header"> <p class="header">
<strong class="text-slate-700 dark:text-slate-100"> <strong class="text-slate-700 dark:text-slate-100">

49
app/javascript/dashboard/modules/search/components/ReadMore.vue
View File

@@ -1,6 +1,11 @@
<template> <template>
<div class="read-more"> <div class="read-more">
<div ref="content" :class="{ 'shrink-container': shrink }"> <div
ref="content"
:class="{
'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark': shrink,
}"
>
<slot /> <slot />
<woot-button <woot-button
v-if="shrink" v-if="shrink"
@@ -27,30 +32,32 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style scoped>
@tailwind components;
@layer components {
.shrink-gradient-light {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1) 100%
);
}
.shrink-gradient-dark {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgb(21, 23, 24) 100%
);
}
}
.shrink-container { .shrink-container {
max-height: 100px; @apply max-h-[100px] overflow-hidden relative;
overflow: hidden;
position: relative;
} }
.shrink-container::after { .shrink-container::after {
content: ''; @apply content-[''] absolute bottom-0 left-0 right-0 h-[50px] z-10;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%);
z-index: 4;
} }
.read-more-button { .read-more-button {
max-width: max-content; @apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
position: absolute;
bottom: var(--space-small);
left: 0;
right: 0;
margin: 0 auto;
z-index: 5;
box-shadow: var(--box-shadow);
} }
</style> </style>

22
app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
View File

@@ -1,14 +1,17 @@
<template> <template>
<div v-if="availableProfiles.length" class="social--icons"> <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
<a <a
v-for="profile in availableProfiles" v-for="profile in availableProfiles"
:key="profile.key" :key="profile.key"
:href="`${profile.link}${socialProfiles[profile.key]}`" :href="`${profile.link}${socialProfiles[profile.key]}`"
target="_blank" target="_blank"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
class="contact--social-icon"
> >
<fluent-icon :icon="`brand-${profile.key}`" size="16" /> <fluent-icon
:icon="`brand-${profile.key}`"
size="16"
class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
/>
</a> </a>
</div> </div>
</template> </template>
@@ -41,16 +44,3 @@ export default {
}, },
}; };
</script> </script>
<style scoped lang="scss">
.social--icons {
align-items: flex-end;
display: flex;
margin: var(--space-small) 0 var(--space-smaller);
}
.contact--social-icon {
padding-right: var(--space-slab);
color: var(--color-body);
}
</style>