TSK-1353: update ListView headers. Replaced colors in settings. (#3086)

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

packages/theme/styles/_colors.scss

@@ -118,7 +118,7 @@
   --theme-popup-color: #292938;
   --theme-popup-divider: rgba(255, 255, 255, .1);
   --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
-  --theme-panel-color: #1F1F2C;
+  --theme-panel-color: #1A1A28;
 
   --body-color: #1f2023;
   --body-accent: #222326;
@@ -244,7 +244,7 @@
   --theme-caption-color: #000;
 
   --theme-list-border-color: rgba(0, 0, 0, .09);
-  --theme-list-header-color: #ECD4CA;
+  --theme-list-header-color: red; //#ECD4CA;
   --theme-list-subheader-color: #EEEEF0;
   --theme-list-row-color: #F7F7F8;
   --theme-list-button-color: #F2F2F4;

packages/theme/styles/_layouts.scss

@@ -407,6 +407,7 @@ input.search {
   &.reverse > *:not(:last-child) { margin-right: .5rem; }
 }
 .gap-around-2 > * { margin: .25rem; }
+.gap-around-4 > * { margin: .5rem; }
 
 /* --------- */
 .sm-tool-icon {
@@ -480,6 +481,7 @@ input.search {
 .mx-10 { margin: 0 2.5rem; }
 .mx-auto { margin: 0 auto; }
 .my-2 { margin: .5rem 0; }
+.my-3 { margin: .75rem 0; }
 .my-4 { margin: 1rem 0; }
 .my-5 { margin: 1.25rem 0; }
 
@@ -636,6 +638,7 @@ input.search {
 .max-h-0 { max-height: 0; }
 .max-h-2 { max-height: .5rem; }
 .max-h-4 { max-height: 1rem; }
+.max-h-9 { max-height: 2.25rem; }
 .max-h-30 { max-height: 7.5rem; }
 .max-h-50 { max-height: 12.5rem; }
 .max-h-60 { max-height: 15rem; }

packages/theme/styles/common.scss

@@ -48,6 +48,7 @@
   overflow: hidden;
   
   &.filled { background-color: var(--theme-bg-color); }
+  &.filledNav { background-color: var(--theme-navpanel-color); }
   &.border-left { border-left: 1px solid var(--theme-divider-color); }
   &.border-right { border-right: 1px solid var(--theme-divider-color); }
 }

packages/theme/styles/components.scss

@@ -18,6 +18,8 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
+  min-width: 0;
 
   .ac-header {
     padding: 0.5rem 2.25rem;
@@ -216,7 +218,7 @@
     flex-direction: column;
     align-items: flex-start;
     height: 100%;
-    background-color: var(--body-color);
+    background-color: var(--theme-bg-color);
 
     &.columns {
       flex-direction: row;
@@ -242,7 +244,7 @@
       min-width: 17rem;
       max-width: 30rem;
       height: 100%;
-      border-right: 1px solid var(--divider-color);
+      border-right: 1px solid var(--theme-divider-color);
 
       &.max {
         flex-grow: 1;
@@ -262,11 +264,11 @@
         cursor: pointer;
 
         &:hover {
-          background-color: var(--button-bg-color);
+          background-color: var(--theme-button-hovered);
         }
         &.selected {
-          background-color: var(--button-bg-hover);
-          border-color: var(--button-border-color);
+          background-color: var(--theme-button-enabled);
+          border-color: var(--theme-button-border);
           cursor: auto;
         }
       }
@@ -687,16 +689,19 @@
 
 /* ListView - global style */
 .list-container .category-container .categoryHeader.subLevel.closed {
-  border-bottom: 1px solid var(--theme-list-border-color);
   border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom: 1px solid var(--theme-list-border-color);
 }
 .list-container .category-container .categoryHeader.closed:not(.subLevel) {
-  border-radius: 0 0 .25rem .25rem;
+  border-radius: 0 0 0.25rem 0.25rem;
   
-  &::before {
-    border-bottom-color: var(--theme-list-border-color);
+  &::before,
+  &::after {
     border-radius: 0.25rem;
   }
+  &::after {
+    border-bottom-color: var(--theme-list-border-color);
+  }
 }
 .list-container .category-container .listGrid {
   .fix-margin { margin-left: .875rem; }

plugins/setting-resources/src/components/Configure.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { PluginConfiguration } from '@hcengineering/core'
   import { configurationStore, getClient } from '@hcengineering/presentation'
-  import { Button, Icon, IconInfo, Label } from '@hcengineering/ui'
+  import { Button, Icon, IconInfo, Label, Scroller } from '@hcengineering/ui'
   import setting from '../plugin'
 
   const client = getClient()
@@ -32,50 +32,51 @@
     <div class="ac-header__icon"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
     <div class="ac-header__title"><Label label={setting.string.Configuration} /></div>
   </div>
-  <div class="flex flex-wrap p-3">
-    {#each $configurationStore.list as config}
-      {#if config.label}
-        <div class="cardBox flex-col" class:enabled={config.enabled ?? true}>
-          <div class="flex-row-center">
-            <div class="p-1">
-              <Icon icon={config.icon ?? IconInfo} size={'large'} />
-            </div>
-            <div class="fs-title">
-              <Label label={config.label} />
+  <Scroller>
+    <div class="flex-row-center flex-wrap p-1 gap-around-4">
+      {#each $configurationStore.list as config}
+        {#if config.label}
+          <div class="cardBox flex-col clear-mins" class:enabled={config.enabled ?? true}>
+            <div class="flex-row-center">
+              <span class="mr-2">
+                <Icon icon={config.icon ?? IconInfo} size={'medium'} />
+              </span>
+              <span class="fs-title">
+                <Label label={config.label} />
+              </span>
             </div>
+            {#if config.description}
+              <div class="my-3 flex-grow clear-mins">
+                <Label label={config.description} />
+              </div>
+            {/if}
+            {#if config.configurable}
+              <div class="flex-row-center flex-reverse flex-grow max-h-9">
+                <Button
+                  label={config.enabled ?? true ? setting.string.ConfigDisable : setting.string.ConfigEnable}
+                  size={'large'}
+                  on:click={() => change(config, !(config.enabled ?? true))}
+                />
+              </div>
+            {/if}
           </div>
-          {#if config.description}
-            <div class="p-3">
-              <Label label={config.description} />
-            </div>
-          {/if}
-          {#if config.configurable}
-            <div class="flex-grow flex-reverse">
-              <Button
-                label={config.enabled ?? true ? setting.string.ConfigDisable : setting.string.ConfigEnable}
-                size={'small'}
-                kind={'link'}
-                on:click={() => change(config, !(config.enabled ?? true))}
-              />
-            </div>
-          {/if}
-        </div>
-      {/if}
-    {/each}
-  </div>
+        {/if}
+      {/each}
+    </div>
+  </Scroller>
 </div>
 
 <style lang="scss">
   .cardBox {
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 0.75rem;
+    flex-shrink: 0;
+    padding: 1rem;
     width: 24rem;
-    height: 8rem;
-    margin: 0.25rem;
-    padding: 0.25rem;
+    height: 10rem;
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
+    border-radius: 0.5rem;
     &.enabled {
-      background-color: var(--button-bg-color);
+      background-color: var(--theme-button-pressed);
     }
   }
 </style>

plugins/setting-resources/src/components/PluginCard.svelte

@@ -121,8 +121,8 @@
 
 <style lang="scss">
   .plugin-container {
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
   }
   .header {
@@ -139,7 +139,7 @@
   .content {
     flex-grow: 1;
     margin: 0 1.5rem 0.25rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
   }
   .footer {
     flex-shrink: 0;

plugins/setting-resources/src/components/Settings.svelte

@@ -88,7 +88,7 @@
 
 <div class="flex h-full">
   {#if visibileNav}
-    <div class="antiPanel-navigator filled indent">
+    <div class="antiPanel-navigator filledNav indent">
       <div class="antiNav-header">
         <span class="fs-title overflow-label">
           <Label label={setting.string.Settings} />
@@ -124,7 +124,7 @@
     </div>
   {/if}
 
-  <div class="antiPanel-component border-left filled">
+  <div class="antiPanel-component filled">
     {#if category}
       <Component
         is={category.component}

plugins/setting-resources/src/components/WorkspaceSettings.svelte

@@ -61,7 +61,7 @@
 
 <div class="flex h-full">
   {#if visibileNav}
-    <div class="antiPanel-navigator filled indent">
+    <div class="antiPanel-navigator filledNav indent">
       <div class="antiNav-header">
         <span class="fs-title overflow-label">
           <Label label={setting.string.WorkspaceSetting} />
@@ -80,7 +80,7 @@
     </div>
   {/if}
 
-  <div class="antiPanel-component border-left filled">
+  <div class="antiPanel-component filled">
     {#if category}
       <Component is={category.component} />
     {/if}

plugins/setting-resources/src/components/statuses/Folders.svelte

@@ -69,17 +69,16 @@
   }
   .item {
     padding: 1.25rem 1rem 1.25rem 1.25rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--button-border-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
     cursor: pointer;
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
+      background-color: var(--theme-button-hovered);
     }
     &.selected {
-      background-color: var(--button-bg-hover);
-      border-color: var(--button-border-hover);
+      background-color: var(--theme-button-pressed);
       cursor: auto;
     }
   }

plugins/task-resources/src/components/state/StatesEditor.svelte

@@ -250,9 +250,9 @@
 <style lang="scss">
   .states {
     padding: 0.5rem 1rem;
-    color: var(--caption-color);
-    background-color: var(--button-bg-color);
-    border: 1px solid var(--button-border-color);
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
     user-select: none;
 

plugins/templates-resources/src/components/Templates.svelte

@@ -187,7 +187,7 @@
       </div>
     </div>
 
-    <div class="ac-column max background-accent-bg-color template-container">
+    <div class="ac-column max template-container">
       {#if newTemplate}
         <div class="flex-between mr-4">
           <span class="trans-title mb-3">
@@ -266,12 +266,13 @@
 <style lang="scss">
   .template-container {
     padding: 2.25rem 2.5rem 1.75rem;
+    background-color: var(--theme-panel-color);
   }
   .separator {
     flex-shrink: 0;
     margin: 1.5rem 0;
     height: 1px;
-    background-color: var(--divider-color);
+    background-color: var(--theme-divider-color);
   }
   .text {
     flex-grow: 1;

plugins/view-resources/src/components/list/ListHeader.svelte

@@ -55,11 +55,11 @@
 
   $: lth = $deviceInfo.theme === 'theme-light'
 
-  let accentColor = { h: 0, s: 0, l: 65 }
+  let accentColor = { h: 0, s: 50, l: 50 }
 
-  $: headerBGColor = !lth
-    ? hslToRgb(accentColor.h, accentColor.s, accentColor.l / 1.5 + (mouseOver ? -20 : 0))
-    : hslToRgb(accentColor.h, accentColor.s, accentColor.l * 1.5 + (mouseOver ? -20 : 0))
+  $: headerBGColor = !lth ? hslToRgb(accentColor.h, 20, 30) : hslToRgb(accentColor.h, 30, 85)
+
+  $: headerTextColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accentColor.h, 60, 30)
 
   const handleCreateItem = (event: MouseEvent) => {
     if (createItemDialog === undefined) return
@@ -102,7 +102,12 @@
           <Label label={view.string.NoGrouping} />
         </span>
       {:else if headerComponent}
-        <span class="clear-mins">
+        <span
+          class="clear-mins"
+          style:color={lth
+            ? `rgb(${headerTextColor.r}, ${headerTextColor.g}, ${headerTextColor.b})`
+            : 'var(--theme-caption-color)'}
+        >
           <svelte:component
             this={headerComponent.presenter}
             value={category}
@@ -173,38 +178,49 @@
       transition: transform 0.15s ease-in-out;
     }
     &:not(.gradient)::before {
-      background: rgba(var(--list-header-rgb-color), 0.15);
+      background: rgba(var(--list-header-rgb-color), 1);
     }
     &.gradient::before {
       background: linear-gradient(
         90deg,
-        rgba(var(--list-header-rgb-color), 0.15),
-        rgba(var(--list-header-rgb-color), 0.05)
+        rgba(var(--list-header-rgb-color), 0.5),
+        rgba(var(--list-header-rgb-color), 0.3),
+        rgba(var(--list-header-rgb-color), 0.1)
       );
     }
-    &::before {
-      box-sizing: border-box;
+    &::before,
+    &::after {
       position: absolute;
       content: '';
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
+      border-radius: 0.25rem 0.25rem 0 0;
+      pointer-events: none;
+    }
+    &::after {
       border: 1px solid var(--theme-list-border-color);
       border-bottom-color: transparent;
-      border-radius: 0.25rem 0.25rem 0 0;
+    }
+    &::before {
       z-index: -1;
     }
 
     /* Global styles in components.scss and there is an influence from the Scroller component */
     &.collapsed {
+      border-radius: 0 0 0.25rem 0.25rem;
+
       .chevron {
         transform: rotate(0deg);
       }
-      &::before {
-        border-bottom-color: var(--theme-list-border-color);
+      &::before,
+      &::after {
         border-radius: 0.25rem;
       }
+      &::after {
+        border-bottom-color: var(--theme-list-border-color);
+      }
     }
     &.subLevel {
       top: 2.75rem;
@@ -215,7 +231,8 @@
       border-bottom: 1px solid var(--theme-list-subheader-divider);
       // here should be top 3rem for sticky, but with ExpandCollapse it gives strange behavior
 
-      &::before {
+      &::before,
+      &::after {
         content: none;
       }
       &.collapsed.lastCat {