fix: Update broken design elements in dashboard (#7468)

This commit is contained in:
Sivin Varghese
2023-07-07 00:28:54 +05:30
committed by GitHub
parent 528da1d2cf
commit 571e6bd0ec
4 changed files with 12 additions and 24 deletions

View File

@@ -94,11 +94,11 @@
} }
&.alert { &.alert {
@apply bg-red-50 dark:bg-red-700 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800; @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
} }
&.warning { &.warning {
@apply bg-yellow-50 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-100 dark:hover:bg-yellow-800; @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-200 dark:hover:bg-yellow-200;
} }
} }

View File

@@ -3,7 +3,7 @@
<div <div
v-if="show" v-if="show"
v-on-clickaway="onClickAway" v-on-clickaway="onClickAway"
class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-10 rounded-md drop-shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700" class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-10 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
:class="{ 'block visible': show }" :class="{ 'block visible': show }"
> >
<availability-status /> <availability-status />

View File

@@ -144,7 +144,7 @@ export default {
.button--reply { .button--reply {
border-radius: 0; border-radius: 0;
@apply border-r border-slate-50 dark:border-slate-700; @apply border-r border-b-0 border-l-0 border-slate-50 dark:border-slate-700;
&:hover, &:hover,
&:focus { &:focus {
@@ -156,7 +156,7 @@ export default {
border-radius: 0; border-radius: 0;
&.is-active { &.is-active {
@apply border-r border-slate-50 dark:border-slate-700; @apply border-r border-b-0 border-slate-50 dark:border-slate-700;
background: var(--y-50); background: var(--y-50);
} }

View File

@@ -10,15 +10,15 @@
<letter v-else class="text-content" :html="message" /> <letter v-else class="text-content" :html="message" />
<button <button
v-if="showQuoteToggle" v-if="showQuoteToggle"
class="quoted-text--button" class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"
@click="toggleQuotedContent" @click="toggleQuotedContent"
> >
<span v-if="showQuotedContent"> <span v-if="showQuotedContent" class="flex items-center gap-0.5">
<fluent-icon icon="chevron-up" class="fluent-icon" size="16" /> <fluent-icon icon="chevron-up" size="16" />
{{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }} {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
</span> </span>
<span v-else> <span v-else class="flex items-center gap-0.5">
<fluent-icon icon="chevron-down" class="fluent-icon" size="16" /> <fluent-icon icon="chevron-down" size="16" />
{{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }} {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
</span> </span>
</button> </button>
@@ -104,25 +104,13 @@ export default {
.show--quoted { .show--quoted {
blockquote { blockquote {
display: block; @apply block;
} }
} }
.hide--quoted { .hide--quoted {
blockquote { blockquote {
display: none; @apply hidden;
}
}
.quoted-text--button {
color: var(--s-400);
cursor: pointer;
font-size: var(--font-size-mini);
padding-bottom: var(--space-small);
padding-top: var(--space-small);
.fluent-icon {
margin-bottom: var(--space-minus-smaller);
} }
} }
</style> </style>