diff --git a/plugins/love-resources/src/components/widget/MeetingWidgetHeader.svelte b/plugins/love-resources/src/components/widget/MeetingWidgetHeader.svelte
index 93bc348322..6293e03cb2 100644
--- a/plugins/love-resources/src/components/widget/MeetingWidgetHeader.svelte
+++ b/plugins/love-resources/src/components/widget/MeetingWidgetHeader.svelte
@@ -17,7 +17,7 @@
Breadcrumbs,
Header,
BreadcrumbItem,
- IconScaleFull,
+ IconMaximize,
ButtonIcon,
showPopup,
PopupResult
@@ -57,7 +57,7 @@
{#if ($currentRoom !== undefined && $screenSharing) || $currentRoom?.type === RoomType.Video}
-
+
{/if}
diff --git a/plugins/love-resources/src/components/widget/WidgetSwitcher.svelte b/plugins/love-resources/src/components/widget/WidgetSwitcher.svelte
index d0e7718bb5..84d748d75d 100644
--- a/plugins/love-resources/src/components/widget/WidgetSwitcher.svelte
+++ b/plugins/love-resources/src/components/widget/WidgetSwitcher.svelte
@@ -16,7 +16,7 @@
import type { Asset, IntlString } from '@hcengineering/platform'
import type { AnySvelteComponent } from '@hcengineering/ui'
import { AppItem } from '@hcengineering/workbench-resources'
- import { isConnected, screenSharing } from '../../utils'
+ import { isConnected, isSharingEnabled, isCameraEnabled, isMicEnabled } from '../../utils'
export let label: IntlString
export let icon: Asset | AnySvelteComponent
@@ -29,6 +29,14 @@
{icon}
{selected}
{size}
- kind={$screenSharing && !selected ? 'negative' : $isConnected && !selected ? 'positive' : 'default'}
+ kind={$isSharingEnabled
+ ? 'negative'
+ : $isConnected && $isCameraEnabled
+ ? 'positive'
+ : $isConnected && $isMicEnabled
+ ? 'warning'
+ : $isConnected && !($isCameraEnabled && $isMicEnabled)
+ ? 'accented'
+ : 'default'}
on:click
/>
diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
index 02c26f6b3b..b79333ce78 100644
--- a/plugins/workbench-resources/src/components/AppItem.svelte
+++ b/plugins/workbench-resources/src/components/AppItem.svelte
@@ -21,7 +21,7 @@
export let icon: Asset | AnySvelteComponent
export let selected: boolean = false
export let size: 'small' | 'medium' | 'large' = 'large'
- export let kind: 'default' | 'positive' | 'negative' = 'default'
+ export let kind: 'default' | 'positive' | 'negative' | 'warning' | 'accented' = 'default'
export let loading: boolean = false
export let notify: boolean = false
export let navigator: boolean = false
@@ -105,35 +105,27 @@
&.navigator {
border-color: var(--theme-button-border);
}
- &.positive {
- background-color: var(--positive-button-default);
- &:hover {
- background-color: var(--positive-button-hovered);
- }
- &:active,
- &.selected {
- background-color: var(--positive-button-pressed);
- }
- &.selected:hover {
- background-color: var(--positive-button-focused);
- }
+ &.positive,
+ &.positive.selected {
+ background-color: var(--global-online-color);
}
- &.negative {
- background-color: var(--negative-button-default);
- &:hover {
- background-color: var(--negative-button-hovered);
- }
- &:active,
- &.selected {
- background-color: var(--negative-button-pressed);
- }
- &.selected:hover {
- background-color: var(--negative-button-focused);
- }
+ &.negative,
+ &.negative.selected {
+ background-color: var(--button-negative-BackgroundColor);
+ }
+ &.warning,
+ &.warning.selected {
+ background-color: var(--theme-warning-color);
+ }
+ &.accented,
+ &.accented.selected {
+ background-color: var(--global-disabled-PriorityColor);
}
&.positive .icon-container,
- &.negative .icon-container {
- color: var(--theme-caption-color);
+ &.negative .icon-container,
+ &.warning .icon-container,
+ &.accented .icon-container {
+ color: var(--primary-button-color);
}
}