Add calendar integrations and collaboration updates
This commit is contained in:
@@ -1,26 +1,41 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import AppAvatar from '@/components/AppAvatar.vue';
|
||||
import ImageCropperDialog from '@/components/ImageCropperDialog.vue';
|
||||
import {
|
||||
mdiAccountGroupOutline,
|
||||
mdiBriefcaseOutline,
|
||||
mdiCogOutline,
|
||||
mdiChartBar,
|
||||
mdiCheck,
|
||||
mdiClose,
|
||||
mdiCreditCardOutline,
|
||||
mdiLanConnect,
|
||||
mdiPencilOutline,
|
||||
} from '@mdi/js';
|
||||
import {
|
||||
organizationPermissions,
|
||||
useOrganizationStore,
|
||||
} from '@/features/organizations/stores/organizationStore.js';
|
||||
import { useWorkspaceStore } from '@/features/workspaces/stores/workspaceStore.js';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const organizationStore = useOrganizationStore();
|
||||
const workspaceStore = useWorkspaceStore();
|
||||
const activeSectionKey = ref('profile');
|
||||
const activeSectionKey = ref('members');
|
||||
const settingsError = ref(null);
|
||||
const settingsStatus = ref(null);
|
||||
const logoError = ref(null);
|
||||
const logoStatus = ref(null);
|
||||
const isLogoDialogOpen = ref(false);
|
||||
const isEditingName = ref(false);
|
||||
const profileForm = reactive({
|
||||
name: '',
|
||||
});
|
||||
const memberForm = reactive({
|
||||
email: '',
|
||||
role: 'Member',
|
||||
});
|
||||
const memberRoleOptions = ['Member', 'Admin', 'BillingManager', 'ConnectorManager'];
|
||||
|
||||
const organizationId = computed(() => route.params.organizationId);
|
||||
const organization = computed(() =>
|
||||
@@ -32,22 +47,26 @@
|
||||
const canViewMembers = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageOrganizationMembers)
|
||||
);
|
||||
const canManageSettings = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageOrganizationSettings)
|
||||
);
|
||||
const canViewBilling = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageBilling)
|
||||
);
|
||||
const canViewConnections = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageConnectors)
|
||||
);
|
||||
const canViewWorkspaces = computed(() =>
|
||||
const canViewUsage = computed(() =>
|
||||
permissions.value.includes(organizationPermissions.manageWorkspaces) ||
|
||||
permissions.value.includes(organizationPermissions.manageBilling) ||
|
||||
permissions.value.includes(organizationPermissions.createWorkspaces)
|
||||
);
|
||||
const usageItems = computed(() => organization.value?.usage?.items ?? []);
|
||||
const visibleSections = computed(() => [
|
||||
{ key: 'profile', icon: mdiCogOutline, visible: true },
|
||||
{ key: 'members', icon: mdiAccountGroupOutline, visible: canViewMembers.value },
|
||||
{ key: 'usage', icon: mdiChartBar, visible: canViewUsage.value },
|
||||
{ key: 'billing', icon: mdiCreditCardOutline, visible: canViewBilling.value },
|
||||
{ key: 'connections', icon: mdiLanConnect, visible: canViewConnections.value },
|
||||
{ key: 'workspaces', icon: mdiBriefcaseOutline, visible: canViewWorkspaces.value },
|
||||
].filter(section => section.visible));
|
||||
const activeSection = computed(() =>
|
||||
visibleSections.value.find(section => section.key === activeSectionKey.value) ??
|
||||
@@ -55,10 +74,6 @@
|
||||
null
|
||||
);
|
||||
|
||||
function hasPermission(permission) {
|
||||
return permissions.value.includes(permission);
|
||||
}
|
||||
|
||||
async function loadOrganization() {
|
||||
if (!organizationId.value) {
|
||||
return;
|
||||
@@ -67,22 +82,103 @@
|
||||
await organizationStore.fetchOrganization(organizationId.value);
|
||||
}
|
||||
|
||||
async function openWorkspace(workspaceId) {
|
||||
const workspace = organization.value?.workspaces?.find(candidate => candidate.id === workspaceId);
|
||||
if (workspace) {
|
||||
workspaceStore.setActiveWorkspace(workspace.id);
|
||||
await router.push({ name: 'workspace-dashboard' });
|
||||
async function submitProfile() {
|
||||
settingsError.value = null;
|
||||
settingsStatus.value = null;
|
||||
|
||||
const name = profileForm.name.trim();
|
||||
if (!name) {
|
||||
settingsError.value = t('organizationSettings.errors.nameRequired');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await organizationStore.updateOrganization(organizationId.value, { name });
|
||||
settingsStatus.value = t('organizationSettings.profileSaved');
|
||||
isEditingName.value = false;
|
||||
} catch (error) {
|
||||
console.error('Failed to save organization profile:', error);
|
||||
settingsError.value = t('organizationSettings.errors.profileSaveFailed');
|
||||
}
|
||||
}
|
||||
|
||||
function startEditingName() {
|
||||
profileForm.name = organization.value?.name ?? '';
|
||||
settingsError.value = null;
|
||||
settingsStatus.value = null;
|
||||
isEditingName.value = true;
|
||||
}
|
||||
|
||||
function cancelEditingName() {
|
||||
profileForm.name = organization.value?.name ?? '';
|
||||
settingsError.value = null;
|
||||
isEditingName.value = false;
|
||||
}
|
||||
|
||||
async function saveOrganizationLogo(result) {
|
||||
if (!organization.value || organizationStore.isUploadingLogo) {
|
||||
return;
|
||||
}
|
||||
|
||||
logoError.value = null;
|
||||
logoStatus.value = null;
|
||||
|
||||
try {
|
||||
await organizationStore.uploadLogo(organizationId.value, result.file);
|
||||
logoStatus.value = t('organizationSettings.logo.saved');
|
||||
isLogoDialogOpen.value = false;
|
||||
} catch (error) {
|
||||
console.error('Failed to update organization logo:', error);
|
||||
logoError.value = t('organizationSettings.errors.logoUploadFailed');
|
||||
}
|
||||
}
|
||||
|
||||
async function submitMember() {
|
||||
settingsError.value = null;
|
||||
settingsStatus.value = null;
|
||||
|
||||
if (!memberForm.email.trim() || !memberForm.role) {
|
||||
settingsError.value = t('organizationSettings.errors.memberRequired');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await organizationStore.addMember(organizationId.value, {
|
||||
email: memberForm.email.trim(),
|
||||
role: memberForm.role,
|
||||
});
|
||||
memberForm.email = '';
|
||||
memberForm.role = 'Member';
|
||||
settingsStatus.value = t('organizationSettings.memberAdded');
|
||||
} catch (error) {
|
||||
console.error('Failed to add organization member:', error);
|
||||
settingsError.value = t('organizationSettings.errors.memberAddFailed');
|
||||
}
|
||||
}
|
||||
|
||||
function usagePercent(item) {
|
||||
if (!item.limit) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return Math.min(100, Math.round((item.used / item.limit) * 100));
|
||||
}
|
||||
|
||||
onMounted(loadOrganization);
|
||||
|
||||
watch(organizationId, loadOrganization);
|
||||
watch(
|
||||
organization,
|
||||
currentOrganization => {
|
||||
profileForm.name = currentOrganization?.name ?? '';
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
watch(
|
||||
visibleSections,
|
||||
sections => {
|
||||
if (!sections.some(section => section.key === activeSectionKey.value)) {
|
||||
activeSectionKey.value = sections[0]?.key ?? 'profile';
|
||||
activeSectionKey.value = sections[0]?.key ?? null;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
@@ -92,10 +188,88 @@
|
||||
<template>
|
||||
<section class="organization-settings-shell">
|
||||
<div class="settings-hero">
|
||||
<div>
|
||||
<div class="settings-hero-copy">
|
||||
<div class="eyebrow">{{ t('organizationSettings.eyebrow') }}</div>
|
||||
<h1>{{ organization?.name ?? t('organizationSettings.title') }}</h1>
|
||||
<p>{{ t('organizationSettings.description') }}</p>
|
||||
<div class="organization-title-line">
|
||||
<button
|
||||
v-if="organization"
|
||||
class="organization-logo-button"
|
||||
type="button"
|
||||
:disabled="!canManageSettings || organizationStore.isUploadingLogo"
|
||||
:aria-label="t('organizationSettings.logo.changeAction')"
|
||||
:title="t('organizationSettings.logo.changeAction')"
|
||||
@click="isLogoDialogOpen = true"
|
||||
>
|
||||
<AppAvatar
|
||||
:name="profileForm.name || organization.name"
|
||||
:src="organization.logoUrl"
|
||||
size="lg"
|
||||
/>
|
||||
</button>
|
||||
<form
|
||||
v-if="organization && isEditingName"
|
||||
class="title-edit-form"
|
||||
@submit.prevent="submitProfile"
|
||||
>
|
||||
<input
|
||||
v-model="profileForm.name"
|
||||
type="text"
|
||||
maxlength="256"
|
||||
autocomplete="organization"
|
||||
:aria-label="t('organizationSettings.fields.name')"
|
||||
>
|
||||
<button
|
||||
class="icon-action"
|
||||
type="submit"
|
||||
:disabled="organizationStore.isSaving"
|
||||
:aria-label="t('organizationSettings.saveName')"
|
||||
:title="t('organizationSettings.saveName')"
|
||||
>
|
||||
<v-icon :icon="mdiCheck" />
|
||||
</button>
|
||||
<button
|
||||
class="icon-action secondary"
|
||||
type="button"
|
||||
:disabled="organizationStore.isSaving"
|
||||
:aria-label="t('organizationSettings.cancelNameEdit')"
|
||||
:title="t('organizationSettings.cancelNameEdit')"
|
||||
@click="cancelEditingName"
|
||||
>
|
||||
<v-icon :icon="mdiClose" />
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
v-else
|
||||
class="title-row"
|
||||
>
|
||||
<h1>{{ organization?.name ?? t('organizationSettings.title') }}</h1>
|
||||
<button
|
||||
v-if="organization && canManageSettings"
|
||||
class="icon-action secondary"
|
||||
type="button"
|
||||
:aria-label="t('organizationSettings.editName')"
|
||||
:title="t('organizationSettings.editName')"
|
||||
@click="startEditingName"
|
||||
>
|
||||
<v-icon :icon="mdiPencilOutline" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-status">
|
||||
<small
|
||||
v-if="logoError"
|
||||
class="field-error"
|
||||
>
|
||||
{{ logoError }}
|
||||
</small>
|
||||
<small
|
||||
v-if="logoStatus"
|
||||
class="field-success"
|
||||
>
|
||||
{{ logoStatus }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -145,35 +319,57 @@
|
||||
|
||||
<article class="content-card">
|
||||
<div
|
||||
v-if="activeSection.key === 'profile'"
|
||||
class="detail-list"
|
||||
v-if="settingsError"
|
||||
class="settings-alert error"
|
||||
>
|
||||
<div>
|
||||
<span>{{ t('organizationSettings.fields.name') }}</span>
|
||||
<strong>{{ organization.name }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('organizationSettings.fields.createdAt') }}</span>
|
||||
<strong>{{ new Date(organization.createdAt).toLocaleDateString() }}</strong>
|
||||
</div>
|
||||
<div class="permissions-panel">
|
||||
<span>{{ t('organizationSettings.permissions.title') }}</span>
|
||||
<div class="permission-grid">
|
||||
<span
|
||||
v-for="permission in Object.values(organizationPermissions)"
|
||||
:key="permission"
|
||||
:class="{ enabled: hasPermission(permission) }"
|
||||
>
|
||||
{{ t(`organizationSettings.permissions.items.${permission}`) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{ settingsError }}
|
||||
</div>
|
||||
<div
|
||||
v-if="settingsStatus"
|
||||
class="settings-alert success"
|
||||
>
|
||||
{{ settingsStatus }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeSection.key === 'members'"
|
||||
v-if="activeSection.key === 'members'"
|
||||
class="table-list"
|
||||
>
|
||||
<form
|
||||
class="settings-form invite-form"
|
||||
@submit.prevent="submitMember"
|
||||
>
|
||||
<label>
|
||||
<span>{{ t('organizationSettings.fields.memberEmail') }}</span>
|
||||
<input
|
||||
v-model="memberForm.email"
|
||||
type="email"
|
||||
maxlength="256"
|
||||
autocomplete="email"
|
||||
>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ t('organizationSettings.fields.memberRole') }}</span>
|
||||
<select v-model="memberForm.role">
|
||||
<option
|
||||
v-for="role in memberRoleOptions"
|
||||
:key="role"
|
||||
:value="role"
|
||||
>
|
||||
{{ t(`organizationSettings.roles.${role}`, role) }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="form-actions">
|
||||
<button
|
||||
class="primary-action"
|
||||
type="submit"
|
||||
:disabled="organizationStore.isAddingMember"
|
||||
>
|
||||
{{ organizationStore.isAddingMember ? t('organizationSettings.addingMember') : t('organizationSettings.addMember') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
v-for="member in organization.members"
|
||||
:key="member.userId"
|
||||
@@ -210,31 +406,48 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeSection.key === 'workspaces'"
|
||||
class="table-list"
|
||||
v-else-if="activeSection.key === 'usage'"
|
||||
class="usage-list"
|
||||
>
|
||||
<button
|
||||
v-for="workspace in organization.workspaces"
|
||||
:key="workspace.id"
|
||||
class="table-row table-row-button"
|
||||
type="button"
|
||||
@click="openWorkspace(workspace.id)"
|
||||
>
|
||||
<div>
|
||||
<strong>{{ workspace.name }}</strong>
|
||||
<span>{{ workspace.timeZone }}</span>
|
||||
</div>
|
||||
</button>
|
||||
<div class="usage-plan">
|
||||
<strong>{{ t('organizationSettings.sections.usage.planLabel') }}</strong>
|
||||
<span>{{ organization.usage?.planName ?? t('organizationSettings.sections.usage.planFallback') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="!organization.workspaces?.length"
|
||||
v-for="item in usageItems"
|
||||
:key="item.key"
|
||||
class="usage-row"
|
||||
>
|
||||
<div class="usage-row-heading">
|
||||
<strong>{{ t(`organizationSettings.usage.items.${item.key}`) }}</strong>
|
||||
<span>
|
||||
{{ item.used }} / {{ item.limit ?? t('organizationSettings.usage.unlimited') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="usage-meter">
|
||||
<span :style="{ width: `${usagePercent(item)}%` }" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!usageItems.length"
|
||||
class="empty-state"
|
||||
>
|
||||
{{ t('organizationSettings.sections.workspaces.empty') }}
|
||||
{{ t('organizationSettings.sections.usage.empty') }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImageCropperDialog
|
||||
v-model="isLogoDialogOpen"
|
||||
:title="t('organizationSettings.logo.cropperTitle')"
|
||||
:confirm-label="t('organizationSettings.logo.saveAction')"
|
||||
:upload-label="t('organizationSettings.logo.chooseAction')"
|
||||
:initial-url="organization?.logoUrl"
|
||||
:is-saving="organizationStore.isUploadingLogo"
|
||||
@save="saveOrganizationLogo"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -243,19 +456,35 @@
|
||||
@apply mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 py-8 md:px-8;
|
||||
}
|
||||
|
||||
.settings-hero {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.settings-hero-copy {
|
||||
@apply flex min-w-0 flex-1 flex-col gap-1;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@apply text-xs font-bold uppercase tracking-[0.2em];
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.settings-hero h1 {
|
||||
@apply mt-3 text-3xl font-black md:text-4xl;
|
||||
.title-row {
|
||||
@apply flex min-w-0 items-center gap-2;
|
||||
}
|
||||
|
||||
.title-row h1 {
|
||||
@apply min-w-0 break-words;
|
||||
}
|
||||
|
||||
.settings-hero h1,
|
||||
.title-edit-form input {
|
||||
@apply min-w-0 text-3xl font-black md:text-4xl;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.settings-hero p,
|
||||
.section-heading p,
|
||||
.detail-list span,
|
||||
.table-row span,
|
||||
.placeholder-panel span,
|
||||
.empty-state {
|
||||
@@ -263,6 +492,62 @@
|
||||
color: #526178;
|
||||
}
|
||||
|
||||
.organization-title-line {
|
||||
@apply mt-5 flex min-w-0 items-center gap-3;
|
||||
}
|
||||
|
||||
.organization-logo-button {
|
||||
@apply inline-flex size-14 flex-shrink-0 items-center justify-center rounded-[0.75rem] border bg-white transition-colors md:size-16;
|
||||
border-color: rgba(23, 32, 51, 0.12);
|
||||
}
|
||||
|
||||
.organization-logo-button:hover:not(:disabled) {
|
||||
border-color: #0f766e;
|
||||
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
|
||||
}
|
||||
|
||||
.organization-logo-button:disabled {
|
||||
@apply cursor-default opacity-80;
|
||||
}
|
||||
|
||||
.title-edit-form {
|
||||
@apply flex min-w-0 flex-1 flex-wrap items-center gap-2;
|
||||
}
|
||||
|
||||
.title-edit-form input {
|
||||
@apply h-12 min-w-0 flex-1 rounded-[0.5rem] border bg-white px-3 outline-none transition-colors md:h-14;
|
||||
border-color: rgba(23, 32, 51, 0.14);
|
||||
}
|
||||
|
||||
.title-edit-form input:focus {
|
||||
border-color: #0f766e;
|
||||
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
|
||||
}
|
||||
|
||||
.icon-action {
|
||||
@apply inline-flex size-9 flex-shrink-0 items-center justify-center rounded-[0.5rem] transition-colors;
|
||||
background: #172033;
|
||||
color: #fffaf2;
|
||||
}
|
||||
|
||||
.icon-action.secondary {
|
||||
background: rgba(23, 32, 51, 0.06);
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.icon-action:hover:not(:disabled) {
|
||||
background: #0f766e;
|
||||
color: #fffaf2;
|
||||
}
|
||||
|
||||
.icon-action:disabled {
|
||||
@apply cursor-not-allowed opacity-60;
|
||||
}
|
||||
|
||||
.hero-status {
|
||||
@apply flex min-h-5 flex-col;
|
||||
}
|
||||
|
||||
.settings-page {
|
||||
@apply flex flex-col gap-5;
|
||||
}
|
||||
@@ -305,17 +590,15 @@
|
||||
}
|
||||
|
||||
.content-card {
|
||||
@apply rounded-[0.75rem] border p-5;
|
||||
@apply flex flex-col gap-4 rounded-[0.75rem] border p-5;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-color: rgba(23, 32, 51, 0.08);
|
||||
}
|
||||
|
||||
.detail-list,
|
||||
.table-list {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
.detail-list div,
|
||||
.table-row {
|
||||
@apply flex items-center justify-between gap-4 rounded-[0.75rem] px-4 py-3;
|
||||
background: rgba(23, 32, 51, 0.04);
|
||||
@@ -337,7 +620,6 @@
|
||||
@apply flex min-w-0 flex-col;
|
||||
}
|
||||
|
||||
.detail-list strong,
|
||||
.table-row strong,
|
||||
.placeholder-panel strong {
|
||||
@apply font-semibold;
|
||||
@@ -349,33 +631,120 @@
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.permissions-panel,
|
||||
.placeholder-panel,
|
||||
.empty-state {
|
||||
@apply rounded-[0.75rem] px-4 py-4;
|
||||
background: rgba(23, 32, 51, 0.04);
|
||||
}
|
||||
|
||||
.permissions-panel {
|
||||
@apply flex-col items-start gap-3;
|
||||
.settings-form {
|
||||
@apply flex flex-col gap-4 rounded-[0.75rem] p-4;
|
||||
background: rgba(23, 32, 51, 0.04);
|
||||
}
|
||||
|
||||
.usage-plan span,
|
||||
.usage-row-heading span {
|
||||
@apply text-sm;
|
||||
color: #526178;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: #991b1b !important;
|
||||
}
|
||||
|
||||
.field-success {
|
||||
color: #0f766e !important;
|
||||
}
|
||||
|
||||
.invite-form {
|
||||
@apply md:grid md:grid-cols-[minmax(0,1fr)_14rem_auto] md:items-end;
|
||||
}
|
||||
|
||||
.settings-form label {
|
||||
@apply flex min-w-0 flex-col gap-2 text-sm font-semibold;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.settings-form input,
|
||||
.settings-form select {
|
||||
@apply h-11 w-full rounded-[0.5rem] border px-3 text-sm outline-none transition-colors;
|
||||
background: #ffffff;
|
||||
border-color: rgba(23, 32, 51, 0.14);
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.settings-form input:focus,
|
||||
.settings-form select:focus {
|
||||
border-color: #0f766e;
|
||||
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
@apply flex justify-end;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
@apply inline-flex h-11 items-center justify-center rounded-[0.5rem] px-4 text-sm font-bold transition-colors;
|
||||
background: #172033;
|
||||
color: #fffaf2;
|
||||
}
|
||||
|
||||
.primary-action:hover:not(:disabled) {
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.primary-action:disabled {
|
||||
@apply cursor-not-allowed opacity-60;
|
||||
}
|
||||
|
||||
.settings-alert {
|
||||
@apply rounded-[0.5rem] px-4 py-3 text-sm font-semibold;
|
||||
}
|
||||
|
||||
.settings-alert.error {
|
||||
background: rgba(185, 28, 28, 0.1);
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.settings-alert.success {
|
||||
background: rgba(15, 118, 110, 0.12);
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.placeholder-panel {
|
||||
@apply flex flex-col gap-1;
|
||||
}
|
||||
|
||||
.permission-grid {
|
||||
@apply flex flex-wrap gap-2;
|
||||
.usage-list {
|
||||
@apply flex flex-col gap-3;
|
||||
}
|
||||
|
||||
.permission-grid span {
|
||||
@apply rounded-full px-3 py-2 text-xs font-bold;
|
||||
background: rgba(23, 32, 51, 0.06);
|
||||
color: #526178;
|
||||
.usage-plan,
|
||||
.usage-row {
|
||||
@apply rounded-[0.75rem] p-4;
|
||||
background: rgba(23, 32, 51, 0.04);
|
||||
}
|
||||
|
||||
.permission-grid span.enabled {
|
||||
background: rgba(15, 118, 110, 0.12);
|
||||
color: #0f766e;
|
||||
.usage-plan {
|
||||
@apply flex items-center justify-between gap-4;
|
||||
}
|
||||
|
||||
.usage-row {
|
||||
@apply flex flex-col gap-3;
|
||||
}
|
||||
|
||||
.usage-row-heading {
|
||||
@apply flex items-center justify-between gap-4;
|
||||
}
|
||||
|
||||
.usage-meter {
|
||||
@apply h-2 overflow-hidden rounded-full;
|
||||
background: rgba(23, 32, 51, 0.1);
|
||||
}
|
||||
|
||||
.usage-meter span {
|
||||
@apply block h-full rounded-full;
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user