From e9c6f408a8a51ec2a6edd33b7982a1704c16d601 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Fri, 6 Dec 2024 04:16:47 +0300
Subject: [PATCH] Fixed colors and icon in LOVE (#7270)

---
 .../widget/MeetingWidgetHeader.svelte         |  4 +-
 .../components/widget/WidgetSwitcher.svelte   | 12 ++++-
 .../src/components/AppItem.svelte             | 46 ++++++++-----------
 3 files changed, 31 insertions(+), 31 deletions(-)

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 @@
   <Breadcrumbs items={breadcrumbs} currentOnly />
   <svelte:fragment slot="actions">
     {#if ($currentRoom !== undefined && $screenSharing) || $currentRoom?.type === RoomType.Video}
-      <ButtonIcon icon={IconScaleFull} kind="tertiary" size="small" noPrint on:click={maximize} />
+      <ButtonIcon icon={IconMaximize} kind="tertiary" size="small" noPrint on:click={maximize} />
     {/if}
   </svelte:fragment>
 </Header>
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);
     }
   }