UBER-358: Fix icons (#3338)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

plugins/workbench-resources/src/components/App.svelte

@@ -1,85 +0,0 @@
-<!--
-// Copyright © 2020 Anticrm Platform Contributors.
-// 
-// Licensed under the Eclipse Public License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License. You may
-// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
-// 
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// 
-// See the License for the specific language governing permissions and
-// limitations under the License.
--->
-<script lang="ts">
-  import type { IntlString, Asset } from '@hcengineering/platform'
-  import type { AnySvelteComponent } from '@hcengineering/ui'
-  import { Icon, tooltip } from '@hcengineering/ui'
-
-  export let label: IntlString
-  export let icon: Asset | AnySvelteComponent
-  export let selected: boolean
-  export let notify: boolean = false
-</script>
-
-<button class="app" class:selected id={'app-' + label} use:tooltip={{ label }}>
-  <div class="flex-center icon-container" class:noty={notify}>
-    <Icon {icon} size={'medium'} />
-  </div>
-  {#if notify}<div class="marker" />{/if}
-</button>
-
-<style lang="scss">
-  .app {
-    position: relative;
-    padding: 0;
-    width: 2.25rem;
-    height: 2.25rem;
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    outline: none;
-
-    &.horizontal {
-      margin: 0 0.125rem;
-    }
-    &.vertical {
-      margin: 0.125rem 0;
-    }
-    .icon-container {
-      width: 1.25rem;
-      height: 1.25rem;
-      color: var(--theme-navpanel-icons-color);
-    }
-
-    &:hover .icon-container {
-      color: var(--theme-caption-color);
-    }
-    &:focus {
-      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
-      .icon-container {
-        color: var(--theme-caption-color);
-      }
-    }
-
-    &.selected {
-      background-color: var(--theme-button-pressed);
-
-      .icon-container {
-        color: var(--theme-caption-color);
-      }
-    }
-  }
-
-  .marker {
-    position: absolute;
-    top: 1.1rem;
-    right: 0.375rem;
-    width: 0.425rem;
-    height: 0.425rem;
-    border-radius: 50%;
-    background-color: var(--highlight-red);
-  }
-</style>

plugins/workbench-resources/src/components/AppItem.svelte

@@ -77,8 +77,7 @@
     }
 
     &.selected {
-      background-color: var(--theme-button-enabled);
-      border: 1px solid var(--theme-button-border);
+      background-color: var(--theme-button-pressed);
       .icon-container {
         color: var(--theme-caption-color);
       }

plugins/workbench-resources/src/components/Applications.svelte

@@ -19,7 +19,7 @@
   import { NavLink } from '@hcengineering/view-resources'
   import type { Application } from '@hcengineering/workbench'
   import workbench from '@hcengineering/workbench'
-  import App from './App.svelte'
+  import AppItem from './AppItem.svelte'
 
   export let active: Ref<Application> | undefined
   export let apps: Application[] = []
@@ -46,7 +46,7 @@
     >
       {#each apps.filter((it) => !hiddenAppsIds.includes(it._id)) as app}
         <NavLink app={app.alias} shrink={0}>
-          <App selected={app._id === active} icon={app.icon} label={app.label} />
+          <AppItem selected={app._id === active} icon={app.icon} label={app.label} />
         </NavLink>
       {/each}
       <div class="apps-space-{direction}" />