LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Dark mode improvements (#7658)

Browse Source
This commit is contained in:
Sivin Varghese
2023-08-04 00:35:22 +05:30
committed by GitHub
parent 0921a7c817
commit 69d46f278a
13 changed files with 96 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/javascript/dashboard/components/ui/Banner.vue
View File

@@ -96,87 +96,67 @@ export default {
<style lang="scss" scoped>
.banner {
--x-padding: var(--space-normal);
--y-padding: var(--space-slab);
display: flex;
gap: var(--x-padding);
color: var(--white);
font-size: var(--font-size-mini);
padding: var(--y-padding) var(--x-padding);
justify-content: center;
@apply flex items-center gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center;
&.primary {
background: var(--w-500);
@apply bg-woot-500 dark:bg-woot-500;
.banner-action__button {
background: var(--w-600);
border: none;
color: var(--white);
@apply bg-woot-600 dark:bg-woot-600 border-none text-white;
&:hover {
background: var(--w-800);
@apply bg-woot-700 dark:bg-woot-700;
}
}
}
&.secondary {
background: var(--s-200);
color: var(--s-800);
@apply bg-slate-200 dark:bg-slate-300 text-slate-800 dark:text-slate-800;
a {
color: var(--s-800);
@apply text-slate-800 dark:text-slate-800;
}
}
&.alert {
background: var(--r-500);
@apply bg-red-500 dark:bg-red-500;
.banner-action__button {
background: var(--r-700);
border: none;
color: var(--white);
@apply bg-red-700 dark:bg-red-700 border-none text-white dark:text-white;
&:hover {
background: var(--r-800);
@apply bg-red-800 dark:bg-red-800;
}
}
}
&.warning {
background: var(--y-600);
color: var(--y-500);
@apply bg-yellow-500 dark:bg-yellow-500 text-yellow-500 dark:text-yellow-500;
a {
color: var(--y-500);
@apply text-yellow-500 dark:text-yellow-500;
}
}
&.gray {
background: var(--b-500);
@apply text-black-500 dark:text-black-500;
.banner-action__button {
color: var(--white);
@apply text-white dark:text-white;
}
}
a {
margin-left: var(--space-smaller);
text-decoration: underline;
color: var(--white);
font-size: var(--font-size-mini);
@apply ml-1 underline text-white dark:text-white text-xs;
}
.banner-action__button {
::v-deep .button__content {
white-space: nowrap;
@apply whitespace-nowrap;
}
}
.banner-message {
display: flex;
align-items: center;
@apply flex items-center;
}
.actions {
display: flex;
gap: var(--space-smaller);
right: var(--y-padding);
@apply flex gap-1 right-3;
}
}
</style>