Fix icon sizes and status icon (#16)

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

packages/theme/styles/_colors.scss

@@ -196,11 +196,3 @@
   --theme-status-online: #4ebc53;
   --theme-shadow: 0px 4px 8px rgba(155, 155, 155, 0.5);
 }
-
-.small-font {
-  font-size: 12px;
-}
-
-.normal-font {
-  font-size: 14px;
-}

packages/theme/styles/global.scss

@@ -81,6 +81,14 @@
   border-radius: 4px;
 }
 
+.small-font {
+  font-size: 12px;
+}
+
+.normal-font {
+  font-size: 14px;
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

packages/ui/src/components/ActionIcon.svelte

@@ -51,6 +51,7 @@
     outline: none;
     background-color: transparent;
     cursor: pointer;
+    font-size: inherit;
 
     .icon {
       opacity: .3;
@@ -78,7 +79,7 @@
     height: 1.429em;
   }
   .large {
-    width: 1.714em;
-    height: 1.714em;
+    width: 1.715em;
+    height: 1.715em;
   }
 </style>

packages/ui/src/components/Icon.svelte

@@ -39,7 +39,7 @@
     height: 1.429em;
   }
   .large {
-    width: 1.714em;
-    height: 1.714em;
+    width: 1.715em;
+    height: 1.715em;
   }
 </style>

packages/ui/src/components/IconSize.svelte

@@ -31,7 +31,7 @@
     height: 1.429em;
   }
   .large {
-    width: 1.714em;
-    height: 1.714em;
+    width: 1.715em;
+    height: 1.715em;
   }
 </style>

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

@@ -96,7 +96,6 @@
           display: flex;
           align-items: center;
           flex-direction: row-reverse;
-          color: var(--theme-content-color);
 
           .clock {
             margin: 0 40px 0 24px;
@@ -110,7 +109,7 @@
             justify-content: center;
             width: 32px;
             height: 32px;
-            opacity: .3;
+            opacity: .6;
           }
         }
       }

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

@@ -24,10 +24,9 @@
     align-items: center;
     font-size: 11px;
     user-select: none;
-    opacity: .5;
 
     span {
-      margin-left: 8px;
+      margin-left: .75em;
     }
   }
 </style>

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

@@ -16,12 +16,12 @@
 <script lang="ts">
   import IconSize from '../../IconSize.svelte'
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'var(--theme-content-color)'
 </script>
 
 <IconSize {size}>
   <svg {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <g opacity="0.6">
+    <g>
       <path d="M8,16c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S12.4,16,8,16z M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7 C15,4.1,11.9,1,8,1z"/>
       <path d="M8,12.1c0.4,0,0.8-0.3,0.8-0.8S8.4,10.5,8,10.5s-0.8,0.3-0.8,0.8S7.6,12.1,8,12.1z M7.6,9.6h0.8l0.2-6.2H7.5 L7.6,9.6z"/>
     </g>

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

@@ -48,6 +48,7 @@
     outline: none;
     background-color: transparent;
     cursor: pointer;
+    font-size: inherit;
 
     .marker {
       position: absolute;

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

@@ -55,6 +55,7 @@
       align-items: center;
       width: 48px;
       height: 48px;
+      font-size: inherit;
     }
     .app + .app {
       margin-top: 4px;