From d91b6c44731a02bd85144b2d5f27989aabb90b57 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 9 Feb 2022 16:20:30 +0700
Subject: [PATCH] Fix UI. (#986)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ReferenceInput.svelte      | 37 +++++++++----------
 .../src/components/icons/Attach.svelte        |  6 +--
 .../src/components/icons/Emoji.svelte         |  6 +--
 .../src/components/icons/GIF.svelte           |  6 +--
 .../src/components/icons/Send.svelte          |  6 +--
 .../src/components/icons/TextStyle.svelte     |  6 +--
 packages/theme/styles/_layouts.scss           |  1 +
 .../ui/src/components/CircleButton.svelte     |  1 +
 packages/ui/src/components/Scroller.svelte    |  8 ++--
 .../src/components/Activity.svelte            |  2 +-
 .../src/components/ChannelsPopup.svelte       |  9 ++---
 .../src/components/state/StatesBar.svelte     |  4 +-
 .../src/components/Chat.svelte                | 34 +++++++----------
 13 files changed, 58 insertions(+), 68 deletions(-)

diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index 732284d29f..8faadaf014 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -238,10 +238,10 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-left: 8px;
+        margin-left: .5rem;
         padding: 0;
-        width: 20px;
-        height: 20px;
+        width: 1.25rem;
+        height: 1.25rem;
         background-color: transparent;
         border: 1px solid transparent;
         border-radius: .25rem;
@@ -249,41 +249,38 @@
         cursor: pointer;
 
         .icon {
-          width: 20px;
-          height: 20px;
-          opacity: 0.3;
+          width: 1.25rem;
+          height: 1.25rem;
+          color: var(--theme-content-dark-color);
           cursor: pointer;
-          &:hover {
-            opacity: 1;
-          }
+
+          &:hover { color: var(--theme-caption-color); }
         }
         &:focus {
           border: 1px solid var(--primary-button-focused-border);
           box-shadow: 0 0 0 3px var(--primary-button-outline);
-          & > .icon {
-            opacity: 1;
-          }
+          
+          & > .icon { color: var(--theme-caption-color); }
         }
       }
     }
     .buttons {
-      margin: 10px 0 0 8px;
       display: flex;
+      margin: .625rem 0 0 .5rem;
 
       .tool {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 20px;
-        height: 20px;
-        opacity: 0.3;
+        width: 1.25rem;
+        height: 1.25rem;
+        color: var(--theme-content-dark-color);
         cursor: pointer;
-        &:hover {
-          opacity: 1;
-        }
+
+        &:hover { color: var(--theme-caption-color); }
       }
       .tool + .tool {
-        margin-left: 16px;
+        margin-left: 1rem;
       }
     }
   }
diff --git a/packages/text-editor/src/components/icons/Attach.svelte b/packages/text-editor/src/components/icons/Attach.svelte
index 45713bbb1c..0720a90504 100644
--- a/packages/text-editor/src/components/icons/Attach.svelte
+++ b/packages/text-editor/src/components/icons/Attach.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: string
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>
 
-<svg class={`class-${size}`} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
   <path d="M4.82816 10.4853L10.485 4.82845C11.6566 3.65688 13.5561 3.65688 14.7277 4.82845C15.8992 6.00002 15.8992 7.89952 14.7277 9.07109L8.01014 15.7886C7.42436 16.3744 6.47461 16.3744 5.88882 15.7886C5.30304 15.2028 5.30304 14.2531 5.88882 13.6673L11.8992 7.65687C12.0945 7.46161 12.0945 7.14503 11.8992 6.94977C11.704 6.75451 11.3874 6.75451 11.1921 6.94977L5.18172 12.9602C4.20541 13.9365 4.20541 15.5194 5.18172 16.4957C6.15803 17.472 7.74094 17.472 8.71725 16.4957L15.4348 9.77819C16.9969 8.2161 16.9969 5.68344 15.4348 4.12134C13.8727 2.55924 11.34 2.55924 9.77791 4.12134L4.12106 9.77819C3.92579 9.97346 3.92579 10.29 4.12106 10.4853C4.31632 10.6806 4.6329 10.6806 4.82816 10.4853Z"/>
 </svg>
diff --git a/packages/text-editor/src/components/icons/Emoji.svelte b/packages/text-editor/src/components/icons/Emoji.svelte
index 620b5bf255..1bd26aeaf9 100644
--- a/packages/text-editor/src/components/icons/Emoji.svelte
+++ b/packages/text-editor/src/components/icons/Emoji.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: string
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>
 
-<svg class={`class-${size}`} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
   <path d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM7.15467 12.4273C8.66416 13.9463 11.0877 14.0045 12.6671 12.5961L12.8453 12.4273C13.04 12.2314 13.3566 12.2304 13.5524 12.4251C13.7265 12.5981 13.7467 12.8674 13.6123 13.0627L13.5547 13.1322L13.5323 13.1545C11.5691 15.1054 8.39616 15.0953 6.44533 13.1322C6.25069 12.9363 6.25169 12.6197 6.44757 12.4251C6.64344 12.2304 6.96002 12.2314 7.15467 12.4273ZM12.5 7.5C13.0523 7.5 13.5 7.94772 13.5 8.5C13.5 9.05228 13.0523 9.5 12.5 9.5C11.9477 9.5 11.5 9.05228 11.5 8.5C11.5 7.94772 11.9477 7.5 12.5 7.5ZM7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5Z"/>
 </svg>
diff --git a/packages/text-editor/src/components/icons/GIF.svelte b/packages/text-editor/src/components/icons/GIF.svelte
index b0883b6bdd..432370f597 100644
--- a/packages/text-editor/src/components/icons/GIF.svelte
+++ b/packages/text-editor/src/components/icons/GIF.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: string
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>
 
-<svg class={`class-${size}`} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
   <path d="M15.4 3C16.7864 3 17.9194 4.1869 17.9959 5.68238L18 5.84375V14.1562C18 15.6727 16.9148 16.9118 15.5475 16.9955L15.4 17H4.6C3.21357 17 2.0806 15.8131 2.00412 14.3176L2 14.1562V5.84375C2 4.32735 3.08516 3.08816 4.45246 3.0045L4.6 3H15.4ZM15.25 4H4.75C3.82377 4 3.06561 4.793 3.00404 5.79653L3 5.92857V14.0714C3 15.0922 3.71957 15.9277 4.63018 15.9956L4.75 16H15.25C16.1762 16 16.9344 15.207 16.996 14.2035L17 14.0714V5.92857C17 4.90783 16.2804 4.0723 15.3698 4.00445L15.25 4ZM6.85135 7.00214C7.4713 7.00214 7.99907 7.0988 8.43229 7.30058C8.69893 7.42477 8.80624 7.72539 8.67198 7.97203C8.53772 8.21867 8.21272 8.31793 7.94609 8.19374C7.6779 8.06883 7.31378 8.00214 6.85135 8.00214C5.82473 8.00214 5.08108 8.8345 5.08108 10.0011C5.08108 11.1209 5.89403 12 6.85135 12C7.44761 12 7.85273 11.6487 7.91152 11.3268L7.91892 11.2472V10.5011L7.54054 10.5C7.24201 10.5 7 10.2761 7 10C7 9.75454 7.19122 9.55039 7.44338 9.50806L7.54054 9.5L8.45946 9.50107C8.72482 9.50107 8.94552 9.67794 8.99129 9.91119L9 10.0011V11.2472C9 12.1244 8.11351 13 6.85135 13C5.25622 13 4 11.6415 4 10.0011C4 8.31985 5.17727 7.00214 6.85135 7.00214ZM11 7C11.2455 7 11.4496 7.17688 11.4919 7.41012L11.5 7.5V12.5C11.5 12.7761 11.2761 13 11 13C10.7545 13 10.5504 12.8231 10.5081 12.5899L10.5 12.5V7.5C10.5 7.22386 10.7239 7 11 7ZM15.5 7C15.7761 7 16 7.22386 16 7.5C16 7.74546 15.8231 7.94961 15.5899 7.99194L15.5 8H14V10H15.5C15.7761 10 16 10.2239 16 10.5C16 10.7455 15.8231 10.9496 15.5899 10.9919L15.5 11H14V12.5C14 12.7761 13.7761 13 13.5 13C13.2545 13 13.0504 12.8231 13.0081 12.5899L13 12.5V7.5C13 7.22386 13.2239 7 13.5 7H15.5Z"/>
 </svg>
diff --git a/packages/text-editor/src/components/icons/Send.svelte b/packages/text-editor/src/components/icons/Send.svelte
index 409148cf56..fbe3fd0a15 100644
--- a/packages/text-editor/src/components/icons/Send.svelte
+++ b/packages/text-editor/src/components/icons/Send.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: number = 20
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>
 
-<svg width={size} height={size} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
   <path d="M2.72113 2.05149L18.0756 9.61746C18.3233 9.73952 18.4252 10.0393 18.3031 10.287C18.2544 10.3858 18.1744 10.4658 18.0756 10.5145L2.72144 18.0803C2.47374 18.2023 2.17399 18.1005 2.05193 17.8528C1.99856 17.7445 1.98619 17.6205 2.0171 17.5038L3.9858 10.0701L2.01676 2.62789C1.94612 2.36093 2.10528 2.08726 2.37224 2.01663C2.48893 1.98576 2.61285 1.99814 2.72113 2.05149ZM3.26445 3.43403L4.87357 9.51612L4.93555 9.50412L5 9.5H12C12.2761 9.5 12.5 9.72386 12.5 10C12.5 10.2455 12.3231 10.4496 12.0899 10.4919L12 10.5H5C4.9686 10.5 4.93787 10.4971 4.90807 10.4916L3.26508 16.6976L16.7234 10.066L3.26445 3.43403Z"/>
 </svg>
diff --git a/packages/text-editor/src/components/icons/TextStyle.svelte b/packages/text-editor/src/components/icons/TextStyle.svelte
index a16e6d819a..7cd0916846 100644
--- a/packages/text-editor/src/components/icons/TextStyle.svelte
+++ b/packages/text-editor/src/components/icons/TextStyle.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: string
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>
 
-<svg class={`class-${size}`} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
   <path d="M14.0872 6.70308C14.9271 5.85998 16.2664 5.81735 17.1568 6.57701L17.2869 6.69697L17.4134 6.83357C18.1376 7.68212 18.1376 8.93671 17.4134 9.78526L17.293 9.91574L10.4167 16.8183C10.2617 16.9739 10.0749 17.0931 9.86988 17.1682L9.71291 17.2161L6.62737 17.9764C6.28827 18.0599 5.98023 17.7813 6.00917 17.4498L6.0236 17.366L6.81558 14.2953C6.86895 14.0883 6.96574 13.8958 7.09885 13.7302L7.20537 13.6112L14.0872 6.70308ZM16.5811 7.40543C16.1201 6.94613 15.393 6.91684 14.898 7.31661L14.7957 7.40884L7.91383 14.317C7.87193 14.359 7.83804 14.408 7.8135 14.4616L7.7839 14.545L7.20061 16.805L9.47368 16.2452C9.51317 16.2354 9.55114 16.221 9.58682 16.2022L9.6385 16.1709L9.70829 16.1126L16.5845 9.20999C17.0806 8.71206 17.0806 7.90677 16.5811 7.40543ZM6.42419 2.22879L6.46607 2.31323L9.448 9.94224L8.676 10.7172L8.004 8.99824H4.007L2.96614 11.678C2.87719 11.9068 2.63835 12.0329 2.40561 11.9879L2.31893 11.9628C2.09015 11.8738 1.96399 11.635 2.00906 11.4023L2.03413 11.3156L5.53436 2.31403C5.6877 1.9197 6.21661 1.89109 6.42419 2.22879ZM6.00061 3.871L4.396 7.99824H7.614L6.00061 3.871Z"/>
 </svg>
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index b0a4a667f0..1425c9e293 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -372,6 +372,7 @@ a.no-line {
 /* Text */
 .text-sm { font-size: .75rem; }
 .text-lg { font-size: 1.125rem; }
+.font-medium { font-weight: 500; }
 .fs-title {
   font-weight: 500;
   font-size: 1rem;
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index 8b1177d2c3..7b9cdf4941 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -33,6 +33,7 @@
 
 <style lang="scss">
   .icon-button {
+    flex-shrink: 0;
     color: var(--theme-caption-color);
     border: 1px solid var(--theme-circle-border);
     border-radius: 50%;
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 1d3a4c0854..bfce7ff4a0 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -17,7 +17,6 @@
   import { afterUpdate, onDestroy, onMount } from 'svelte'
 
   export let padding: boolean = false
-  export let isBack: boolean = false
 
   let mask: 'top' | 'bottom' | 'both' | 'none' = 'bottom'
 
@@ -53,7 +52,8 @@
       const procTop = divScroll.scrollTop / divScroll.scrollHeight
       divBar.style.height = procScroll * proc + 'px'
       divBar.style.top = procTop * (divScroll.clientHeight - 8) + 4 + 'px'
-      divBar.style.visibility = 'visible'
+      if (mask === 'none') divBar.style.visibility = 'hidden'
+      else divBar.style.visibility = 'visible'
     }
   }
 
@@ -82,8 +82,8 @@
     else if (t > 0) mask = 'bottom'
     else if (b > 0) mask = 'top'
     else mask = 'none'
-    if (isBack) checkBack()
-    if (mask !== 'none') checkBar()
+    checkBack()
+    checkBar()
   }
 
   onMount(() => {
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index e4c3835397..f5acf96761 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -75,7 +75,7 @@
     </div>
   </div>
 {:else}
-  <Scroller isBack>
+  <Scroller>
     <div class="p-10">
       <slot />
     </div>
diff --git a/plugins/contact-resources/src/components/ChannelsPopup.svelte b/plugins/contact-resources/src/components/ChannelsPopup.svelte
index ecff2913ed..2be96edf7b 100644
--- a/plugins/contact-resources/src/components/ChannelsPopup.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPopup.svelte
@@ -42,8 +42,8 @@
 
 <div class="flex-row-center">
   <CircleButton icon={value.icon} size={'x-large'} />
-  <div class="flex-col caption-color ml-3">
-    <div class="label">{value.label}</div>
+  <div class="flex-col caption-color clear-mins ml-3">
+    <div class="text-sm font-medium">{value.label}</div>
     <div class="overflow-label">{value.value}</div>
   </div>
   <div class="button" on:click|preventDefault={copyLink}>
@@ -52,11 +52,8 @@
 </div>
 
 <style lang="scss">
-  .label {
-    font-weight: 500;
-    font-size: .75rem;
-  }
   .button {
+    flex-shrink: 0;
     margin-left: 1.5rem;
     color: var(--theme-content-dark-color);
     cursor: pointer;
diff --git a/plugins/task-resources/src/components/state/StatesBar.svelte b/plugins/task-resources/src/components/state/StatesBar.svelte
index fd4d4b30dc..8cdc8549fb 100644
--- a/plugins/task-resources/src/components/state/StatesBar.svelte
+++ b/plugins/task-resources/src/components/state/StatesBar.svelte
@@ -92,7 +92,7 @@
         class="flex-row-center overflow-label label"
         style={item._id === state ? `background-color: ${getPlatformColor(item.color)};` : ''}
       >
-        {item.title}
+        &nbsp;&nbsp;&nbsp;{item.title}&nbsp;&nbsp;&nbsp;
       </div>
       <StatesBarElement
         side={'right'}
@@ -121,7 +121,7 @@
   }
 
   .label {
-    padding: 0.5rem 2rem;
+    // padding: 0.5rem 2rem;
     height: 2.25rem;
     max-height: 2.25rem;
     color: var(--theme-caption-color);
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index 52d8c11134..ef2fafe01c 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@@ -194,11 +194,13 @@
   }
 </script>
 
-<div class="flex-between header">
-  <div class="flex-center icon"><TelegramIcon size={'small'} /></div>
-  <div class="flex-grow flex-col">
-    <div class="fs-title">Telegram</div>
-    <div class="text-sm content-dark-color">You and {formatName(object.name)}</div>
+<div class="ac-header short mirror-tool divide">
+  <div class="ac-header__wrap-title">
+    <div class="flex-center icon"><TelegramIcon size={'small'} /></div>
+    <div class="ac-header__wrap-description">
+      <span class="ac-header__title">Telegram</span>
+      <span class="ac-header__description">You and {formatName(object.name)}</span>
+    </div>
   </div>
   <ActionIcon
     icon={IconShare}
@@ -253,21 +255,13 @@
 </div>
 
 <style lang="scss">
-  .header {
-    flex-shrink: 0;
-    padding: 0 6rem 0 2.5rem;
-    height: 4rem;
-    color: var(--theme-content-accent-color);
-    border-bottom: 1px solid var(--theme-zone-bg);
-
-    .icon {
-      margin-right: 1rem;
-      width: 2.25rem;
-      height: 2.25rem;
-      color: var(--theme-caption-color);
-      background-color: var(--primary-button-enabled);
-      border-radius: 50%;
-    }
+  .icon {
+    margin-right: 1rem;
+    width: 2.25rem;
+    height: 2.25rem;
+    color: var(--theme-caption-color);
+    background-color: var(--primary-button-enabled);
+    border-radius: 50%;
   }
 
   .ref-input {