Update UI, light theme. (#564)

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

packages/panel/src/components/Panel.svelte

@@ -57,9 +57,7 @@
 {:else}
   <div class="unionSection">
     <div class="flex-row-center header">
-      <div class="content-color">
+      <Icon {icon} size={'large'} />
-        <Icon {icon} size={'large'} />
-      </div>
       <div class="flex-grow ml-4 flex-col">
         <div class="fs-title">{title}</div>
         <div class="small-text content-dark-color">Candidate pool name</div>
@@ -92,7 +90,7 @@
     display: flex;
     flex-direction: column;
     height: calc(100% - 32px - 1.25rem);
-    background: var(--theme-dialog-bg);
+    background: var(--theme-bg-color);
     border-radius: 1.25rem;
     box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
     backdrop-filter: blur(15px);
@@ -102,14 +100,14 @@
       padding: 0 2rem 0 2.5rem;
       height: 4rem;
       color: var(--theme-content-accent-color);
-      border-bottom: 1px solid var(--theme-dialog-divider);
+      border-bottom: 1px solid var(--theme-zone-bg);
     }
 
     .subtitle {
       flex-shrink: 0;
       padding: 0 2rem;
       height: 3.5rem;
-      border-bottom: 1px solid var(--theme-dialog-divider);
+      border-bottom: 1px solid var(--theme-zone-bg);
     }
   }
 
@@ -134,19 +132,19 @@
     flex-direction: column;
   }
   .leftSection {
-    border-right: 1px solid var(--theme-dialog-divider);
+    border-right: 1px solid var(--theme-card-divider);
     .scroll-container {
       overflow: auto;
-      margin: 2rem 2rem 1.5rem;
+      margin: 2.5rem 2rem 1.5rem;
       .content {
         flex-shrink: 0;
         margin: .5rem .5rem 0;
       }
     }
   }
-  .rightSection {
+  // .rightSection {
-    background-color: transparent;
+  //   background-color: transparent;
-  }
+  // }
 
   .tools {
     position: absolute;

packages/presentation/src/components/Avatar.svelte

@@ -36,31 +36,19 @@
 </div>
 
 <style lang="scss">
-  @import '../../../../packages/theme/styles/mixins.scss';
-
   .avatar-container {
     flex-shrink: 0;
     position: relative;
     overflow: hidden;
+    background-color: rgba(196, 196, 204, .2);
     border-radius: 50%;
     pointer-events: none;
 
-    img { object-fit: cover; }
+    img {
-
+      object-fit: cover;
-    &.no-img {
       border: 2px solid var(--theme-avatar-border);
-
-      &::after {
-        content: '';
-        @include bg-layer(var(--theme-avatar-hover), .5);
-        border-radius: 50%;
-      }
-      &::before {
-        content: '';
-        @include bg-layer(var(--theme-avatar-bg), .1);
-        border-radius: 50%;
-      }
     }
+    &.no-img { border-color: transparent; }
   }
 
   .ava-x-small {

packages/presentation/src/components/Card.svelte

@@ -39,7 +39,7 @@
 <form class="card-container" on:submit|preventDefault={ () => {} }>
   <div class="card-bg" />
   <div class="flex-between header">
-    <div class="overflow-label label"><Label {label} /></div>
+    <div class="overflow-label fs-title"><Label {label} /></div>
     {#if $$slots.error}
       <div class="flex-grow error">
         <slot name="error" />
@@ -62,9 +62,9 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 20rem;
+    width: 21.25rem;
-    min-width: 20rem;
+    min-width: 21.25rem;
-    max-width: 20rem;
+    max-width: 21.25rem;
     border-radius: 1.25rem;
 
     .header {
@@ -72,12 +72,6 @@
       flex-shrink: 0;
       padding: 1.75rem;
 
-      .label {
-        font-weight: 500;
-        font-size: 1rem;
-        color: var(--theme-caption-color);
-      }
-
       .error {
         position: absolute;
         display: flex;
@@ -118,7 +112,6 @@
       column-gap: .75rem;
       padding: 1rem 1.75rem 1.75rem;
       height: 5.25rem;
-      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
       overflow: hidden;
       border-radius: 0 0 1.25rem 1.25rem;
     }

packages/presentation/src/components/Channels.svelte

@@ -20,6 +20,7 @@
   import type { Channel, ChannelProvider } from '@anticrm/contact'
   import { getClient } from '..'
 
+  import type { AnyComponent } from '@anticrm/ui'
   import { Tooltip, CircleButton } from '@anticrm/ui'
   import ChannelsPopup from './ChannelsPopup.svelte'
 
@@ -81,9 +82,9 @@
 >
   {#each displayItems as item}
     <div on:click|stopPropagation={() => { dispatch('click', item) }}>
-    <Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
+      <Tooltip component={ChannelsPopup} props={{ value: item }} label={undefined} anchor={divHTML}>
-      <CircleButton icon={item.icon} {size} primary={item.label === 'Telegram'} />
+        <CircleButton icon={item.icon} {size} primary={item.label === 'Telegram'} />
-    </Tooltip>
+      </Tooltip>
     </div>
   {/each}
 </div>

packages/presentation/src/components/SpaceCreateCard.svelte

@@ -49,9 +49,9 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 20rem;
+    width: 21.25rem;
-    min-width: 20rem;
+    min-width: 21.25rem;
-    max-width: 20rem;
+    max-width: 21.25rem;
     border-radius: 1.25rem;
 
     .header {
@@ -95,7 +95,6 @@
       column-gap: .75rem;
       padding: 1rem 1.75rem 1.75rem;
       height: 5.25rem;
-      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
       overflow: hidden;
       border-radius: 0 0 1.25rem 1.25rem;
     }

packages/presentation/src/components/SpaceSelect.svelte

@@ -47,7 +47,7 @@
   })
 </script>
 
-<div class="flex-col spaceselect-container"
+<div class="flex-col cursor-pointer"
   bind:this={btn}
   on:click|preventDefault={() => {
     showPopup(SpacesPopup, { _class }, btn, (result) => {
@@ -58,9 +58,9 @@
   }}
 >
   <div class="overflow-label label"><Label {label} /></div>
-  <div class="flex-row-center space" class:selected={selected}>
+  <div class="flex-row-center space">
-    <span class="icon"><IconFolder size={'small'} /></span>
+    <span class="scale-75 mr-1"><IconFolder size={'small'} /></span>
-    <span class="overflow-label">
+    <span class="overflow-label" class:caption-color={selected} class:content-dark-color={!selected}>
       {#if selected}
         {selected.name}
       {:else}
@@ -71,23 +71,10 @@
 </div>
 
 <style lang="scss">
-  .spaceselect-container {
+  .label {
-    cursor: pointer;
+    margin-bottom: .125rem;
-    .label {
+    font-weight: 500;
-      margin-bottom: .125rem;
+    font-size: .75rem;
-      font-weight: 500;
+    color: var(--theme-content-accent-color);
-      font-size: .75rem;
-      color: var(--theme-content-accent-color);
-    }
-    .space {
-      opacity: .3;
-
-      .icon {
-        transform-origin: center center;
-        transform: scale(.75);
-        margin-right: .25rem;
-      }
-      &.selected { opacity: 1; }
-    }
   }
 </style>

packages/presentation/src/components/UserBox.svelte

@@ -95,7 +95,7 @@
 
   <div class="selectUser">
     <div class="title"><Label label={title} /></div>
-    <div class="caption-color">
+    <div class:caption-color={selected} class:content-dark-color={!selected}>
       {#if selected}{getName(selected)}{:else}<Label label={'Not selected'} />{/if}
     </div>
   </div>

packages/presentation/src/components/icons/Avatar.svelte

@@ -28,7 +28,6 @@
 
 <style lang="scss">
   .svg-avatar {
-    fill: var(--theme-caption-color);
     .op { opacity: .05; }
   }
   .x-small {

packages/theme/styles/_colors.scss

@@ -27,18 +27,6 @@
 
   --duotone-color: rgba(126, 134, 158, .25);
 
-  --trans-primary-button-color: #fff;
-  --trans-primary-button-bg: #4474F6;
-  --trans-primary-button-border: transparent;
-  --trans-primary-button-bg-hovered: #2A5FF6;
-  --trans-primary-button-border-hovered: transparent;
-  
-  --trans-button-color: #fff;
-  --trans-button-bg: transparent;
-  --trans-button-border: rgba(255, 255, 255, .2);
-  --trans-button-bg-hovered: rgba(255, 255, 255, .05);
-  --trans-button-border-hovered: rgba(255, 255, 255, .25);
-
   --system-error-color: #EE7A7A;
   --system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60%
 
@@ -47,6 +35,8 @@
   --activity-status-busy: #FCC500;
   --activity-status-away: #9099A2;
 
+  --grayscale-grey-03: #77818E;
+  
   --primary-color-purple-01: #4B38BD;
   --primary-color-purple-02: #6552DB;
   --primary-color-purple-03: #9D92C4;
@@ -66,12 +56,12 @@
   --theme-menu-selection: #1D1D23;
   --theme-menu-divider: rgba(255, 255, 255, .05);
   --theme-scroll-bar: #2C2C34;
-  --theme-dialog-bg: rgba(31, 31, 37, .8);
+  // --theme-dialog-bg: rgba(31, 31, 37, .8);
   --theme-dialog-accent: rgba(255, 255, 255, .03);
   --theme-dialog-divider: rgba(255, 255, 255, .1);
   --theme-dialog-spec: rgba(47, 47, 53, .6);
   --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
-  --theme-border-modal: rgba(0, 0, 0, 0.2);
+  --theme-border-modal: rgba(0, 0, 0, .2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(36, 36, 41);
   --theme-incoming-msg: rgba(67, 67, 72, .3);
@@ -79,14 +69,13 @@
 
   --theme-card-bg: rgba(222, 222, 240, .2);
   --theme-card-bg-dark: rgba(222, 222, 240, .1);
-  --theme-card-bg-accent: rgba(255, 255, 255, .04);
   --theme-card-divider: rgba(255, 255, 255, .1);
-  --theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
+  --theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .2);
-  --theme-avatar-bg: #E0DAD5;
-  --theme-avatar-hover: rgba(195, 195, 204, .2);
   --theme-avatar-border: rgba(255, 255, 255, .1);
-  --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
   --theme-msgbox-bg: rgba(170, 170, 191, .25);
+  --theme-zone-bg: rgba(255, 255, 255, .05);
+  --theme-zone-border: rgba(255, 255, 255, .2);
+  --theme-zone-border-lite: rgba(255, 255, 255, .16);
 
   --theme-bg-accent-color: rgba(255, 255, 255, .03);
   --theme-bg-accent-hover: rgba(255, 255, 255, .06);
@@ -95,7 +84,7 @@
   --theme-bg-focused-border: rgba(255, 255, 255, .4);
   --theme-bg-accent-error: rgba(251, 158, 158, .06);
   --theme-on-color: #4474F6;
-  --theme-off-color: #77818E;
+  --theme-off-color: #2A2A30;
   --theme-bg-check: #F2F2F2;
   --theme-tooltip-color: #2F2F34;
   --theme-showmore-color: #484850;
@@ -112,6 +101,10 @@
   --theme-button-border-disabled: rgba(255, 255, 255, .06);
   --theme-button-border-focused: rgba(255, 255, 255, .4);
   --theme-button-border-error: rgba(205, 104, 104, .1);
+  --theme-button-trans-primary-disabled: rgba(255, 255, 255, .1);
+  --theme-circle-select: #1F1F25;
+  --theme-circle-trans: rgba(31, 31, 37, .3);
+  --theme-circle-border: rgba(255, 255, 255, .2);
 
   --theme-table-bg-color: rgba(255, 255, 255, .02);
   --theme-table-bg-hover: rgba(255, 255, 255, .04);
@@ -144,12 +137,12 @@
   --theme-menu-selection: #37363F;
   --theme-menu-divider: rgba(255, 255, 255, .05);
   --theme-scroll-bar: #494852;
-  --theme-dialog-bg: rgba(31, 31, 37, .8);
+  // --theme-dialog-bg: rgba(31, 31, 37, .8);
   --theme-dialog-accent: rgba(255, 255, 255, .03);
   --theme-dialog-divider: rgba(255, 255, 255, .1);
   --theme-dialog-spec: rgba(47, 47, 53, .6);
   --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
-  --theme-border-modal: rgba(0, 0, 0, 0.2);
+  --theme-border-modal: rgba(0, 0, 0, .2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(66, 65, 76);
   --theme-incoming-msg: rgba(67, 67, 72, .3);
@@ -157,14 +150,13 @@
 
   --theme-card-bg: rgba(222, 222, 240, .2);
   --theme-card-bg-dark: rgba(222, 222, 240, .1);
-  --theme-card-bg-accent: rgba(255, 255, 255, .04);
   --theme-card-divider: rgba(255, 255, 255, .1);
   --theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
-  --theme-avatar-bg: #E0DAD5;
-  --theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
   --theme-avatar-border: rgba(255, 255, 255, .1);
-  --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
   --theme-msgbox-bg: rgba(170, 170, 191, .25);
+  --theme-zone-bg: rgba(255, 255, 255, .05);
+  --theme-zone-border: rgba(255, 255, 255, .2);
+  --theme-zone-border-lite: rgba(255, 255, 255, .16);
 
   --theme-bg-accent-color: rgba(255, 255, 255, .03);
   --theme-bg-accent-hover: rgba(255, 255, 255, .06);
@@ -173,7 +165,7 @@
   --theme-bg-focused-border: rgba(255, 255, 255, .4);
   --theme-bg-accent-error: rgba(251, 158, 158, .06);
   --theme-on-color: #4474F6;
-  --theme-off-color: #77818E;
+  --theme-off-color: #494853;
   --theme-bg-check: #F2F2F2;
   --theme-tooltip-color: #4D4C58;
   --theme-showmore-color: #484850;
@@ -190,6 +182,10 @@
   --theme-button-border-disabled: rgba(255, 255, 255, .06);
   --theme-button-border-focused: rgba(255, 255, 255, .4);
   --theme-button-border-error: rgba(205, 104, 104, .1);
+  --theme-button-trans-primary-disabled: rgba(255, 255, 255, .1);
+  --theme-circle-select: #3F3E4A;
+  --theme-circle-trans: rgba(31, 31, 37, .3);
+  --theme-circle-border: rgba(255, 255, 255, .2);
 
   --theme-table-bg-color: rgba(255, 255, 255, .02);
   --theme-table-bg-hover: rgba(255, 255, 255, .04);
@@ -221,27 +217,26 @@
   --theme-menu-selection: #DBDBDB;
   --theme-menu-divider: rgba(0, 0, 0, .08);
   --theme-scroll-bar: #CBCBCB;
-  --theme-dialog-bg: rgba(255, 255, 255, .4);
+  // --theme-dialog-bg: rgba(255, 255, 255, .4);
   --theme-dialog-accent: rgba(31, 33, 43, .03);
   --theme-dialog-divider: rgba(31, 33, 43, .06);
   --theme-dialog-spec: rgba(47, 47, 53, .6);
   --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
-  --theme-border-modal: rgba(0, 0, 0, 0.2);
+  --theme-border-modal: rgba(0, 0, 0, .2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(233, 233, 233);
   --theme-incoming-msg: rgba(67, 67, 72, .3);
   --theme-outcoming-msg: rgba(67, 67, 72, .6);
 
-  --theme-card-bg: rgba(255, 255, 255, .6);
+  --theme-card-bg: #FFF;
   --theme-card-bg-dark: rgba(255, 255, 255, .3);
-  --theme-card-bg-accent: rgba(0, 0, 0, .04);
   --theme-card-divider: rgba(0, 0, 0, .1);
   --theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, .5);
-  --theme-avatar-bg: #C4C4C4;
+  --theme-avatar-border: transparent;
-  --theme-avatar-hover: #EEEDED;
-  --theme-avatar-border: rgba(255, 255, 255, .7);
-  --theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
   --theme-msgbox-bg: rgba(170, 170, 191, .25);
+  --theme-zone-bg: rgba(0, 0, 0, .05);
+  --theme-zone-border: rgba(0, 0, 0, .2);
+  --theme-zone-border-lite: rgba(0, 0, 0, .16);
 
   --theme-bg-accent-color: rgba(0, 0, 0, .03);
   --theme-bg-accent-hover: rgba(0, 0, 0, .05);
@@ -250,7 +245,7 @@
   --theme-bg-focused-border: rgba(0, 0, 0, .4);
   --theme-bg-accent-error: rgba(251, 158, 158, .06);
   --theme-on-color: #4474F6;
-  --theme-off-color: #ECEEF5;
+  --theme-off-color: #DBDBDB;
   --theme-bg-check: #45444F;
   --theme-tooltip-color: #F1F1F4;
   --theme-showmore-color: #484850;
@@ -267,6 +262,10 @@
   --theme-button-border-disabled: rgba(255, 255, 255, .06);
   --theme-button-border-focused: rgba(255, 255, 255, .4);
   --theme-button-border-error: rgba(205, 104, 104, .1);
+  --theme-button-trans-primary-disabled: #E7E7E7;
+  --theme-circle-select: #F7F7F7;
+  --theme-circle-trans: #F7F7F7;
+  --theme-circle-border: rgba(31, 33, 43, .2);
 
   --theme-table-bg-color: rgba(0, 0, 0, .02);
   --theme-table-bg-hover: rgba(0, 0, 0, .04);
@@ -276,10 +275,10 @@
   --theme-popup-border: 1px solid rgba(0, 0, 0, .06);
   --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
 
-  --theme-caption-color: #272121;
+  --theme-caption-color: #1F212B;
-  --theme-content-accent-color: rgba(39, 33, 33, 0.8);
+  --theme-content-accent-color: rgba(31, 33, 43, .8);
-  --theme-content-color: rgba(39, 33, 33, 0.6);
+  --theme-content-color: rgba(31, 33, 43, .6);
-  --theme-content-dark-color: rgba(39, 33, 33, 0.4);
+  --theme-content-dark-color: rgba(31, 33, 43, .4);
   --theme-content-trans-color: rgba(31, 33, 43, 0.3);
 
   --theme-userlink-color: #b92d52;

packages/theme/styles/_layouts.scss

@@ -19,6 +19,7 @@ a {
   font-weight: 500;
   text-decoration: none;
   color: var(--theme-content-accent-color);
+  outline: none;
   &:hover {
     color: var(--theme-caption-color);
     text-decoration: underline;

packages/ui/src/components/Button.svelte

@@ -29,14 +29,10 @@
   export let width: string | undefined = undefined
 </script>
 
-<button class="button {size}" class:primary class:transparent disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
+<button class="button {size}" class:transparent class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
   {#if icon && !loading}
-    <div class="icon">
+    <div class="scale-75 icon">
-      {#if typeof (icon) === 'string'}
+      <Icon {icon} size={'small'}/>
-        <Icon {icon} size={'small'}/>
-      {:else}
-        <svelte:component this={icon} size={'small'} />
-      {/if}
     </div>
   {/if}
   {#if loading}
@@ -55,13 +51,9 @@
     background-color: var(--theme-button-bg-enabled);
     color: var(--theme-caption-color);
     border: 1px solid var(--theme-button-border-enabled);
-    border-radius: 0.75rem;
+    border-radius: .75rem;
 
-    .icon {
+    .icon { margin-right: .375rem; }
-      margin-right: .375rem;
-      transform-origin: center center;
-      transform: scale(.75);
-    }
 
     &:hover {
       background-color: var(--theme-button-bg-hovered);
@@ -83,6 +75,21 @@
     }
   }
 
+  .transparent {
+    padding: 0 1.25rem;
+    border-radius: .5rem;
+    color: var(--theme-caption-color);
+    background-color: transparent;
+    border-color: var(--theme-card-divider);
+    backdrop-filter: blur(20px);
+
+    &:hover, &:focus, &:active, &:disabled {
+      background-color: transparent;
+      border-color: var(--theme-card-divider);
+    }
+    &:disabled { color: var(--theme-content-dark-color); }
+  }
+
   .primary {
     color: var(--primary-button-color);
     background-color: var(--primary-button-enabled);
@@ -103,66 +110,14 @@
       box-shadow: none;
     }
     &:disabled {
+      color: var(--theme-content-dark-color);
       background-color: var(--primary-button-disabled);
       border-color: var(--primary-button-border);
-      color: rgb(var(--theme-caption-color) / 60%);
       cursor: not-allowed;
     }
   }
-
+  .transparent.primary:disabled {
-  .transparent {
+    background-color: var(--theme-button-trans-primary-disabled);
-    padding: 0 1.25rem;
+    border-color: transparent;
-    font-weight: 500;
-    border-radius: .5rem;
-    color: var(--theme-caption-color);
-    background-color: var(--trans-button-bg);
-    border-color: var(--theme-bg-accent-color);
-
-    &:hover {
-      background-color: var(--trans-button-bg-hovered);
-      border-color: var(--trans-button-border-hovered);
-      box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
-    }
-    &:focus {
-      background-color: var(--trans-button-bg-hovered);
-      border-color: var(--primary-button-focused-border);
-      box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
-    }
-    &:active {
-      background-color: var(--trans-button-bg);
-      border-color: var(--trans-button-border);
-      box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
-    }
-    &:disabled {
-      background-color: var(--trans-button-bg);
-      border-color: var(--trans-button-border);
-    }
-
-    &.primary {
-      color: var(--trans-primary-button-color);
-      background-color: var(--trans-primary-button-bg);
-      border-color: var(--trans-primary-button-border);
-      backdrop-filter: blur(3px);
-
-      &:hover {
-        background-color: var(--trans-primary-button-bg-hovered);
-        border-color: var(--trans-primary-button-border-hovered);
-        box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
-      }
-      &:focus {
-        background-color: var(--trans-primary-button-bg-hovered);
-        border-color: var(--primary-button-focused-border);
-        box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
-      }
-      &:active {
-        background-color: var(--trans-primary-button-bg);
-        border-color: var(--trans-primary-button-border);
-        box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
-      }
-      &:disabled {
-        background-color: var(--primary-button-disabled);
-        border-color: var(--trans-primary-button-border);
-      }
-    }
   }
 </style>

packages/ui/src/components/CircleButton.svelte

@@ -25,24 +25,17 @@
   export let primary: boolean = false
 </script>
 
-<div class="icon-button icon-{size}" class:selected class:transparent class:primary on:click on:mousemove>
+<div class="flex-center icon-button icon-{size}" class:selected class:transparent class:primary on:click on:mousemove>
   <div class="content">
-    {#if typeof (icon) === 'string'}
+    <Icon {icon} size={'small'} />
-      <Icon {icon} size={'small'} />
-    {:else}
-      <svelte:component this={icon} size={'small'} />
-    {/if}
   </div>
 </div>
 
 <style lang="scss">
   .icon-button {
-    display: flex;
+    color: var(--theme-caption-color);
-    justify-content: center;
+    border: 1px solid var(--theme-circle-border);
-    align-items: center;
-    border: 1px solid var(--theme-card-divider);
     border-radius: 50%;
-    backdrop-filter: blur(3px);
     cursor: pointer;
 
     .content {
@@ -50,16 +43,9 @@
       transform: scale(.75);
       pointer-events: none;
     }
-    &:hover {
+
-      color: var(--theme-caption-color);
+    &.selected { background-color: var(--theme-circle-select); }
-      border-color: var(--theme-bg-focused-border);
+    &.transparent { background-color: var(--theme-circle-trans); }
-    }
-    &:active {
-      color: var(--theme-content-accent-color);
-      background-color: var(--theme-bg-accent-color);
-    }
-    &.selected { background-color: var(--theme-button-bg-hovered); }
-    &.transparent { background-color: rgba(31, 31, 37, .3); }
     &.primary {
       color: var(--primary-button-color);
       background-color: var(--primary-button-enabled);

packages/ui/src/components/Spinner.svelte

@@ -19,12 +19,12 @@
 
 <div class="spinner spinner-{size}">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M12 0v1c6.1 0 11 4.9 11 11s-4.9 11-11 11v1c6.6 0 12-5.4 12-12S18.6 0 12 0z" fill="#fff"/>
+    <path d="M12 0v1c6.1 0 11 4.9 11 11s-4.9 11-11 11v1c6.6 0 12-5.4 12-12S18.6 0 12 0z" fill="#fff" />
     <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" y1="22" x2="0" y2="2">
-      <stop offset="0" stop-color="#fff"/>
+      <stop offset="0" stop-color={'var(--theme-caption-color)'} />
-      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+      <stop offset="1" stop-color={'var(--theme-caption-color)'} stop-opacity="0" />
     </linearGradient>
-    <path d="M12 23C5.9 23 1 18.1 1 12S5.9 1 12 1V0C5.4 0 0 5.4 0 12s5.4 12 12 12v-1z" fill="url(#a)"/>
+    <path d="M12 23C5.9 23 1 18.1 1 12S5.9 1 12 1V0C5.4 0 0 5.4 0 12s5.4 12 12 12v-1z" fill="url(#a)" />
   </svg>
 </div>
 

packages/ui/src/components/Toggle.svelte

@@ -25,6 +25,8 @@
 <style lang="scss">
   .toggle {
     display: inline-block;
+    width: 3.25rem;
+    min-width: 3.25rem;
     height: 1.75rem;
     line-height: 1.75rem;
     vertical-align: middle;
@@ -42,43 +44,31 @@
       
       &:checked + .toggle-switch {
         background-color: var(--theme-on-color);
-        &:before {
+        &:before { left: calc(3.5rem - 1.625rem); }
-          left: 1.625rem;
-        }
-      }
-      &:not(:disabled) + .toggle-switch {
-        cursor: pointer;
       }
+      &:not(:disabled) + .toggle-switch { cursor: pointer; }
       &:disabled + .toggle-switch {
         filter: grayscale(70%);
-        &:before {
+        &:before { background: #eee; }
-          background: #eee;
-        }
-      }
-      &:focus-within + .toggle-switch {
-        border: 1px solid var(--primary-button-focused-border);
-        box-shadow: 0 0 0 2px var(--primary-button-outline);
       }
+      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
     }
-    &:active > .toggle-switch {
+    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
-      border: 1px solid var(--primary-button-focused-border);
-      box-shadow: 0 0 0 2px var(--primary-button-outline);
-    }
     .toggle-switch {
       position: relative;
       display: inline-block;
       width: 3.5rem;
-      height: 1.875rem;
+      height: 1.75rem;
       border-radius: 3.125rem;
       // vertical-align: top;
       background-color: var(--theme-off-color);
-      border: 1px solid rgba(0, 0, 0, .1);
+      box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
-      transition: left .2s;
+      transition: left .2s, background-color .2s;
       &:before {
         content: '';
         position: absolute;
         top: .125rem;
-        left: .25rem;
+        left: .125rem;
         display: inline-block;
         width: 1.5rem;
         height: 1.5rem;

packages/ui/src/components/icons/Activity.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">

packages/ui/src/components/icons/Add.svelte

@@ -4,5 +4,5 @@
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
+  <path d="M15.4,7.4H8.6V0.6C8.6,0.3,8.3,0,8,0S7.4,0.3,7.4,0.6v6.8H0.6C0.3,7.4,0,7.7,0,8s0.3,0.6,0.6,0.6h6.8v6.8 C7.4,15.7,7.7,16,8,16s0.6-0.3,0.6-0.6V8.6h6.8C15.7,8.6,16,8.3,16,8S15.7,7.4,15.4,7.4z"/>
 </svg>

plugins/activity-resources/src/components/Activity.svelte

@@ -100,13 +100,13 @@
     flex-shrink: 0;
     padding: 0 2.5rem;
     height: 4rem;
-    border-bottom: 1px solid var(--theme-card-divider);
+    border-bottom: 1px solid var(--theme-zone-bg);
 
     .icon {
       margin-right: 1rem;
       width: 2.25rem;
       height: 2.25rem;
-      color: var(--theme-caption-color);
+      color: var(--primary-button-color);
       background-color: var(--primary-button-enabled);
       border-radius: 50%;
     }
@@ -145,7 +145,7 @@
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
-      padding: 1.5rem 2.5rem;
+      padding: 3rem 2.5rem;
       height: max-content;
     }
   }

plugins/attachment-resources/src/components/Attachments.svelte

@@ -89,6 +89,7 @@
       <CircleButton
         icon={IconAdd}
         size={'small'}
+        selected
         on:click={() => {
           inputFile.click()
         }}
@@ -141,7 +142,7 @@
     flex-direction: column;
 
     .title {
-      margin-right: 0.75rem;
+      margin-right: .75rem;
       font-weight: 500;
       font-size: 1.25rem;
       color: var(--theme-caption-color);
@@ -151,8 +152,8 @@
   .zone-container {
     padding: 1rem;
     color: var(--theme-caption-color);
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--theme-bg-accent-color);
-    border: 1px dashed rgba(255, 255, 255, 0.16);
+    border: 1px dashed var(--theme-zone-border-lite);
-    border-radius: 0.75rem;
+    border-radius: .75rem;
   }
 </style>

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

@@ -41,7 +41,7 @@
 <div class="applications-container">
   <div class="flex-row-center">
     <div class="title">Applications</div>
-    <CircleButton icon={IconAdd} size={'small'} on:click={createApp} />
+    <CircleButton icon={IconAdd} size={'small'} selected on:click={createApp} />
   </div>
   {#if applications.length > 0}
     <Table 

plugins/recruit-resources/src/components/CreateCandidate.svelte

@@ -157,7 +157,7 @@
     {/if}
   </div>
 
-  <div class="flex-center resume" class:solid={dragover} 
+  <div class="flex-center resume" class:solid={dragover || resume.uuid} 
       on:dragover|preventDefault={ () => { dragover = true } } 
       on:dragleave={ () => { dragover = false } } 
       on:drop|preventDefault|stopPropagation={drop}>
@@ -213,15 +213,10 @@
   .resume {
     margin-top: 1rem;
     padding: .75rem;
-    background: rgba(255, 255, 255, .05);
+    background: var(--theme-zone-bg);
-    border: 1px dashed rgba(255, 255, 255, .2);
+    border: 1px dashed var(--theme-zone-border);
     border-radius: .5rem;
     backdrop-filter: blur(10px);
     &.solid { border-style: solid; }
   }
-  // .resume a {
-  //   font-size: .75rem;
-  //   color: var(--theme-content-dark-color);
-  //   &:hover { color: var(--theme-content-color); }
-  // }
 </style>

plugins/recruit-resources/src/components/EditCandidate.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Ref } from '@anticrm/core'
-  import { CircleButton, EditBox, showPopup, IconAdd, Label, AnyComponent } from '@anticrm/ui'
+  import { CircleButton, EditBox, showPopup, IconAdd, Label, AnyComponent, IconActivity } from '@anticrm/ui'
   import { getClient, createQuery, Channels, AttributeEditor, AttributesBar, Avatar } from '@anticrm/presentation'
   import { Panel } from '@anticrm/panel'
   import type { Candidate } from '@anticrm/recruit'
@@ -57,6 +57,11 @@
   function lastNameChange() {
     client.updateDoc(recruit.class.Candidate, object.space, object._id, { name: combineName(getFirstName(object.name), lastName) })
   }
+
+  const openActivity = (): void => {
+    rightSection = undefined
+    fullSize = true
+  }
 </script>
 
 {#if object !== undefined}
@@ -67,26 +72,39 @@
     <div class="mr-8">
       <Avatar avatar={object.avatar} size={'x-large'} />
     </div>
-    <div class="flex-col">
+    <div class="flex-grow flex-col">
+
       <div class="name"><EditBox placeholder="John" maxWidth="20rem" bind:value={firstName} on:change={ firstNameChange }/></div>
       <div class="name"><EditBox placeholder="Appleseed" maxWidth="20rem" bind:value={lastName} on:change={ lastNameChange }/></div>
       <div class="title"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} {object} key="title"/></div>
       <!-- <div class="city"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} {object} key="city"/></div> -->
-      <div class="flex-row-center channels">
+
-        {#if !object.channels || object.channels.length === 0}
+      <div class="separator" />
-          <CircleButton icon={IconAdd} size={'small'} selected on:click={(ev) => showPopup(contact.component.SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
+
-          <span><Label label={'Add social links'} /></span>
+      <div class="flex-between">
-        {:else}
+        <div class="flex-row-center">
-          <Channels value={object.channels} size={'small'} on:click={(ev) => {
+          {#if !object.channels || object.channels.length === 0}
-            if (ev.detail.presenter) {
+            <CircleButton icon={IconAdd} size={'small'} selected on:click={(ev) => showPopup(contact.component.SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
-              fullSize = true
+            <span class="ml-2"><Label label={'Add social links'} /></span>
-              rightSection = ev.detail.presenter
+          {:else}
-            }
+            <Channels value={object.channels} size={'small'} on:click={(ev) => {
-          }} />
+              if (ev.detail.presenter) {
-          <div class="ml-1">
+                fullSize = true
-            <CircleButton icon={Edit} size={'small'} selected on:click={(ev) => showPopup(contact.component.SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
+                rightSection = ev.detail.presenter
-          </div>
+              }
-        {/if}
+            }} />
+            <div class="ml-1">
+              <CircleButton icon={Edit} size={'small'} on:click={(ev) => showPopup(contact.component.SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
+            </div>
+          {/if}
+        </div>
+
+        <div class="flex-row-center">
+          <a href={'#'} class="flex-row-center" on:click={openActivity}>
+            <CircleButton icon={IconActivity} size={'small'} primary on:click={openActivity} />
+            <span class="ml-2 small-text">View activity</span>
+          </a>
+        </div>
       </div>
     </div>
   </div>
@@ -112,8 +130,9 @@
     margin-top: .25rem;
     font-size: .75rem;
   }
-  .channels {
+  .separator {
-    margin-top: .75rem;
+    margin: 1rem 0;
-    span { margin-left: .5rem; }
+    height: 1px;
+    background-color: var(--theme-card-divider);
   }
 </style>

plugins/recruit-resources/src/components/YesNo.svelte

@@ -30,7 +30,7 @@
   else if (value === false) value = undefined
   else value = true
 }}>
-  <svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <svg class="yesno-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
     <circle fill="#fff" cx="8" cy="8" r="6"/>
     {#if value === true}
       <polygon fill="#60B96E" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
@@ -40,28 +40,32 @@
       <path fill="#77818E" d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"/>
     {/if}
   </svg>
-  <span><Label label={getLabel(value)} /></span>
+  <div class="label"><Label label={getLabel(value)} /></div>
 </div>
 
 <style lang="scss">
   .yesno-container {
-    padding: .25rem .5rem .25rem .25rem;
+    padding: .25rem .5rem .25rem .4rem;
     max-width: fit-content;
     border-radius: 1.25rem;
     user-select: none;
     cursor: pointer;
 
-    background-color: #77818E;
+    background-color: var(--grayscale-grey-03);
     &.yes { background-color: #60B96E; }
     &.no { background-color: #F06C63; }
 
-    span {
+    .label {
-      width: 1.6rem;
+      width: 1.4rem;
       margin-left: .25rem;
       text-transform: uppercase;
       font-weight: 500;
       font-size: .625rem;
-      color: var(--theme-caption-color);
+      color: #FFF;
     }
   }
+  .yesno-svg {
+    width: 1rem;
+    height: 1rem;
+  }
 </style>

plugins/view-resources/src/components/BooleanEditor.svelte

@@ -42,7 +42,7 @@
     onChange(value)
   }}
 >
-  <svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <svg class="yesno-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
     <circle class:yes={value === true} class:no={value === false} cx="8" cy="8" r="6"/>
     {#if value === true}
       <polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
@@ -73,4 +73,8 @@
       color: var(--theme-caption-color);
     }
   }
+  .yesno-svg {
+    width: 1rem;
+    height: 1rem;
+  }
 </style>