Test icon in Status Bar (#49)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/_layouts.scss

@@ -114,6 +114,19 @@ select:-webkit-autofill:focus {
 .square-36 { width: 2.25rem; height: 2.25rem; }
 
 /* --------- */
+.svg-small {
+  width: 1.143em;
+  height: 1.143em;
+}
+.svg-medium {
+  width: 1.429em;
+  height: 1.429em;
+}
+.svg-large {
+  width: 1.715em;
+  height: 1.715em;
+}
+
 .hidden-text {
   position: absolute;
   visibility: hidden;

packages/ui/src/components/internal/Status.svelte

@@ -3,23 +3,28 @@
   import { Severity } from '@anticrm/platform'
 
   import Info from './icons/Info.svelte'
+  import InfoOld from './icons/InfoOld.svelte'
   import Label from '../Label.svelte'
 
   export let status: Status
 </script>
 
-<div class="flex-center container">
+<div class="container">
   {#if status.severity !== Severity.OK}
-    <Info size={'small'}/>
-    <span><Label label={status.code} params={status.params}/></span>
+  <Info size={'small'}/>
+  <InfoOld size={'small'}/>
+  <InfoOld size={'small'}/>
+  <span><Label label={status.code} params={status.params}/></span>
   {/if}
 </div>
 
 <style lang="scss">
   .container {
+    display: inline-grid;
+    grid-auto-flow: column;
+    column-gap: .75em;
     user-select: none;
     span {
-      margin-left: .75em;
       color: var(--theme-content-accent-color);
     }
   }

packages/ui/src/components/internal/icons/Info.svelte

@@ -14,17 +14,12 @@
 -->
 
 <script lang="ts">
-  import IconSize from '../../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
   const fill: string = 'var(--theme-content-color)'
 </script>
 
-<IconSize {size}>
-  <svg {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g>
-      <path d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M12,23C5.9,23,1,18.1,1,12S5.9,1,12,1s11,4.9,11,11 S18.1,23,12,23z"/>
-      <polygon points="12.6,14.4 12.8,5.1 11.2,5.1 11.4,14.4"/>
-      <path d="M12,15.8c-0.6,0-1.2,0.5-1.2,1.2s0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2S12.6,15.8,12,15.8z"/>
-    </g>
-  </svg>
-</IconSize>
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="12.9,14.8 13.2,4.8 10.8,4.8 11.1,14.8 "/>
+  <path d="M12,16c-0.7,0-1.6,0.6-1.6,1.5S11.1,19,12,19s1.5-0.7,1.5-1.5C13.5,16.6,12.7,16,12,16z"/>
+  <path d="M12,0.5C5.7,0.5,0.5,5.7,0.5,12S5.7,23.5,12,23.5S23.5,18.3,23.5,12S18.3,0.5,12,0.5z M12,22.1C6.4,22.1,1.9,17.6,1.9,12 S6.4,1.9,12,1.9S22.1,6.4,22.1,12S17.6,22.1,12,22.1z"/>
+</svg>

packages/ui/src/components/internal/icons/InfoOld.svelte

@@ -0,0 +1,25 @@
+<!--
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-content-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="12.6,14.4 12.8,5.1 11.2,5.1 11.4,14.4 "/>
+  <path d="M12,15.8c-0.6,0-1.2,0.5-1.2,1.2s0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2S12.6,15.8,12,15.8z"/>
+  <path d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M12,23C5.9,23,1,18.1,1,12S5.9,1,12,1s11,4.9,11,11 S18.1,23,12,23z"/>
+</svg>