feat: update color palette [CW-2293] (#7617)
This commit is contained in:
Shivam Mishra
@@ -60,10 +60,21 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
ninja-keys {
|
||||
--ninja-accent-color: var(--w-500);
|
||||
--ninja-font-family: 'PlusJakarta';
|
||||
z-index: 9999;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--ninja-overflow-background: rgba(26, 29, 30, 0.5);
|
||||
--ninja-modal-background: #151718;
|
||||
--ninja-secondary-background-color: #26292b;
|
||||
--ninja-selected-background: #26292b;
|
||||
--ninja-footer-background: #2b2f31;
|
||||
--ninja-text-color: #f8faf9;
|
||||
--ninja-icon-color: #f8faf9;
|
||||
--ninja-secondary-text-color: #c2c9c6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
|
||||
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
|
||||
>
|
||||
<filter-input-box
|
||||
v-for="(filter, i) in appliedFilters"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
|
||||
<woot-sidemenu-icon />
|
||||
<h1
|
||||
class="m-0 text-2xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
|
||||
class="m-0 text-xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
|
||||
>
|
||||
{{ headerTitle }}
|
||||
</h1>
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<div>Loading...</div>
|
||||
<div
|
||||
class="text-slate-600 dark:text-slate-200 flex items-center justify-center w-full"
|
||||
>
|
||||
Loading...
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container overflow-auto">
|
||||
<div class="py-0 px-4 w-full max-w-full overflow-auto">
|
||||
<article-header
|
||||
:header-title="headerTitle"
|
||||
:count="meta.count"
|
||||
@@ -13,9 +13,14 @@
|
||||
@page-change="onPageChange"
|
||||
@reorder="onReorder"
|
||||
/>
|
||||
<div v-if="shouldShowLoader" class="articles--loader">
|
||||
<div
|
||||
v-if="shouldShowLoader"
|
||||
class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
|
||||
>
|
||||
<spinner />
|
||||
<span>{{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}</span>
|
||||
<span class="text-slate-600 dark:text-slate-200">{{
|
||||
$t('HELP_CENTER.TABLE.LOADING_MESSAGE')
|
||||
}}</span>
|
||||
</div>
|
||||
<empty-state
|
||||
v-else-if="shouldShowEmptyState"
|
||||
@@ -148,18 +153,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 0 var(--space-normal);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
.articles--loader {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-default);
|
||||
justify-content: center;
|
||||
padding: var(--space-big);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container py-2 px-4 w-full">
|
||||
<div class="py-2 px-4 w-full max-w-full">
|
||||
<div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
|
||||
<div class="flex items-center">
|
||||
<woot-sidemenu-icon />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-1 h-full justify-between flex-col m-0 bg-light dark:bg-slate-900"
|
||||
class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900"
|
||||
>
|
||||
<settings-header
|
||||
button-route="new"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
|
||||
<form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
|
||||
<div
|
||||
class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-700"
|
||||
class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
|
||||
>
|
||||
<div
|
||||
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
|
||||
|
||||
@@ -11,7 +11,10 @@
|
||||
</woot-tabs>
|
||||
|
||||
<div class="w-full">
|
||||
<p v-if="!uiFlags.isFetching && !attributes.length" class="mt-12">
|
||||
<p
|
||||
v-if="!uiFlags.isFetching && !attributes.length"
|
||||
class="mt-12 flex items-center justify-center"
|
||||
>
|
||||
{{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
|
||||
</p>
|
||||
<woot-loading-state
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<router-link
|
||||
:to="addAccountScoping('settings/macros/new')"
|
||||
class="button success button--fixed-top"
|
||||
class="button success button--fixed-top flex gap-1"
|
||||
>
|
||||
<fluent-icon icon="add-circle" />
|
||||
<span class="button__content">
|
||||
|
||||
@@ -116,7 +116,7 @@ export default {
|
||||
|
||||
&.has-error {
|
||||
animation: shake 0.3s ease-in-out 0s 2;
|
||||
@apply bg-red-50 dark:bg-red-100;
|
||||
@apply bg-red-50 dark:bg-red-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user