Update Login. Fix warnings. (#2300)

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

packages/theme/styles/_layouts.scss

@@ -668,6 +668,9 @@ a.no-line {
     box-shadow: 0 0 0 3px var(--primary-button-outline);
     & > .icon { color: var(--theme-caption-color); }
   }
+
+  &.bordered,
+  &.bordered:hover { border-color: var(--theme-button-border-pressed); }
 }
 
 .overflow-x-auto { overflow-x: auto; }

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

@@ -20,7 +20,7 @@
   onDestroy(() => clearInterval(interval))
 </script>
 
-<div>
+<div style="min-width: 2.5rem">
   <span>{hours}</span>
   <span style="visibility: {delimiter ? 'visible' : 'hidden'}">:</span>
   <span>{minutes}</span>

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

@@ -42,7 +42,7 @@
   export let viewlets: Map<ActivityKey, TxViewlet>
   export let showIcon: boolean = true
   export let isNew: boolean = false
-  export let showDocument = false
+  // export let showDocument = false
 
   let ptx: DisplayTx | undefined
 

plugins/hr-resources/src/components/ScheduleRequests.svelte

@@ -19,7 +19,7 @@
   import { ContextMenu } from '@hcengineering/view-resources'
 
   export let requests: Request[]
-  export let date: Date
+  // export let date: Date
   export let editable: boolean = false
 
   const client = getClient()

plugins/hr-resources/src/components/ScheduleView.svelte

@@ -133,89 +133,3 @@
     <Label label={hr.string.NoEmployeesInDepartment} />
   </div>
 {/if}
-
-<style lang="scss">
-  table {
-    position: relative;
-    width: 100%;
-
-    td,
-    th {
-      width: auto;
-      width: 2rem;
-      min-width: 1.5rem;
-      border: none;
-      &.fixed {
-        width: 5rem;
-        padding: 0 0.125rem;
-        hyphens: auto;
-      }
-      &:first-child {
-        width: 15rem;
-        padding: 0.5rem;
-      }
-    }
-    th {
-      flex-shrink: 0;
-      padding: 0;
-      height: 2.5rem;
-      min-height: 2.5rem;
-      max-height: 2.5rem;
-      text-transform: uppercase;
-      font-weight: 500;
-      font-size: 0.75rem;
-      line-height: 105%;
-      color: var(--dark-color);
-      box-shadow: inset 0 -1px 0 0 var(--divider-color);
-      user-select: none;
-      cursor: pointer;
-
-      span {
-        display: block;
-        font-weight: 600;
-        font-size: 1rem;
-      }
-      &.today {
-        color: var(--caption-color);
-      }
-      &.weekend:not(.today) {
-        color: var(--warning-color);
-      }
-    }
-    td {
-      height: 3.5rem;
-      border: none;
-      color: var(--caption-color);
-      &.today {
-        background-color: var(--theme-bg-accent-hover);
-      }
-      &.weekend:not(.today) {
-        background-color: var(--theme-bg-accent-color);
-      }
-    }
-    td:not(:last-child) {
-      border-right: 1px solid var(--divider-color);
-    }
-    tr:not(.scroller-thead__tr) {
-      border-bottom: 1px solid var(--divider-color);
-    }
-    tr.scroller-thead__tr:not(:last-child) {
-      border-right: 1px solid var(--divider-color);
-    }
-
-    .hovered {
-      position: relative;
-
-      &::after {
-        position: absolute;
-        content: '';
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--caption-color);
-        opacity: 0.15;
-      }
-    }
-  }
-</style>

plugins/hr-resources/src/components/schedule/MonthTableView.svelte

@@ -242,89 +242,3 @@
     <Label label={hr.string.NoEmployeesInDepartment} />
   </div>
 {/if}
-
-<style lang="scss">
-  table {
-    position: relative;
-    width: 100%;
-
-    td,
-    th {
-      width: auto;
-      width: 2rem;
-      min-width: 1.5rem;
-      border: none;
-      &.fixed {
-        width: 5rem;
-        padding: 0 0.125rem;
-        hyphens: auto;
-      }
-      &:first-child {
-        width: 15rem;
-        padding: 0.5rem;
-      }
-    }
-    th {
-      flex-shrink: 0;
-      padding: 0;
-      height: 2.5rem;
-      min-height: 2.5rem;
-      max-height: 2.5rem;
-      text-transform: uppercase;
-      font-weight: 500;
-      font-size: 0.75rem;
-      line-height: 105%;
-      color: var(--dark-color);
-      box-shadow: inset 0 -1px 0 0 var(--divider-color);
-      user-select: none;
-      cursor: pointer;
-
-      span {
-        display: block;
-        font-weight: 600;
-        font-size: 1rem;
-      }
-      &.today {
-        color: var(--caption-color);
-      }
-      &.weekend:not(.today) {
-        color: var(--warning-color);
-      }
-    }
-    td {
-      height: 3.5rem;
-      border: none;
-      color: var(--caption-color);
-      &.today {
-        background-color: var(--theme-bg-accent-hover);
-      }
-      &.weekend:not(.today) {
-        background-color: var(--theme-bg-accent-color);
-      }
-    }
-    td:not(:last-child) {
-      border-right: 1px solid var(--divider-color);
-    }
-    tr:not(.scroller-thead__tr) {
-      border-bottom: 1px solid var(--divider-color);
-    }
-    tr.scroller-thead__tr:not(:last-child) {
-      border-right: 1px solid var(--divider-color);
-    }
-
-    .hovered {
-      position: relative;
-
-      &::after {
-        position: absolute;
-        content: '';
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--caption-color);
-        opacity: 0.15;
-      }
-    }
-  }
-</style>

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -191,11 +191,6 @@
       width: 2rem;
       min-width: 1.5rem;
       border: none;
-      &.fixed {
-        width: 5rem;
-        padding: 0 0.125rem;
-        hyphens: auto;
-      }
       &:first-child {
         width: 15rem;
         padding: 0.5rem;

plugins/hr-resources/src/components/schedule/YearView.svelte

@@ -187,9 +187,6 @@
       &.today {
         color: var(--caption-color);
       }
-      &.weekend:not(.today) {
-        color: var(--warning-color);
-      }
     }
     td {
       height: 3.5rem;
@@ -198,9 +195,6 @@
       &.today {
         background-color: var(--theme-bg-accent-hover);
       }
-      &.weekend:not(.today) {
-        background-color: var(--theme-bg-accent-color);
-      }
     }
     td:not(:last-child) {
       border-right: 1px solid var(--divider-color);
@@ -211,20 +205,5 @@
     tr.scroller-thead__tr:not(:last-child) {
       border-right: 1px solid var(--divider-color);
     }
-
-    .hovered {
-      position: relative;
-
-      &::after {
-        position: absolute;
-        content: '';
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--caption-color);
-        opacity: 0.15;
-      }
-    }
   }
 </style>

plugins/login-resources/src/components/Form.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { StylishEdit, Label, Button, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  import { StylishEdit, Label, Button, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import StatusControl from './StatusControl.svelte'
   import { OK, Status, Severity } from '@hcengineering/platform'
   import type { IntlString } from '@hcengineering/platform'
@@ -107,49 +107,51 @@
   <div class="status">
     <StatusControl {status} />
   </div>
-  <div class="form">
+  <Scroller padding={'.125rem 0'}>
-    {#each fields as field (field.name)}
+    <div class="form">
-      <div class={field.short && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>
+      {#each fields as field (field.name)}
-        <StylishEdit
+        <div class={field.short && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>
-          label={field.i18n}
+          <StylishEdit
-          name={field.id}
+            label={field.i18n}
-          password={field.password}
+            name={field.id}
-          bind:value={object[field.name]}
+            password={field.password}
-          on:input={validate}
+            bind:value={object[field.name]}
-          on:blur={() => {
+            on:input={validate}
-            trim(field.name)
+            on:blur={() => {
-          }}
+              trim(field.name)
-        />
+            }}
-      </div>
+          />
-    {/each}
+        </div>
+      {/each}
 
-    <div class="form-row send">
+      <div class="form-row send">
-      <Button
-        label={action.i18n}
-        kind={'primary'}
-        size={'x-large'}
-        width="100%"
-        loading={inAction}
-        disabled={status.severity !== Severity.OK && status.severity !== Severity.ERROR}
-        on:click={(e) => {
-          e.preventDefault()
-          performAction(action)
-        }}
-      />
-    </div>
-    {#if secondaryButtonLabel && secondaryButtonAction}
-      <div class="form-row">
         <Button
-          label={secondaryButtonLabel}
+          label={action.i18n}
+          kind={'primary'}
+          size={'x-large'}
           width="100%"
+          loading={inAction}
+          disabled={status.severity !== Severity.OK && status.severity !== Severity.ERROR}
           on:click={(e) => {
             e.preventDefault()
-            secondaryButtonAction?.()
+            performAction(action)
           }}
         />
       </div>
-    {/if}
+      {#if secondaryButtonLabel && secondaryButtonAction}
-  </div>
+        <div class="form-row">
+          <Button
+            label={secondaryButtonLabel}
+            width="100%"
+            on:click={(e) => {
+              e.preventDefault()
+              secondaryButtonAction?.()
+            }}
+          />
+        </div>
+      {/if}
+    </div>
+  </Scroller>
   {#if bottomCaption || (bottomActionLabel && bottomActionFunc)}
     <div class="grow-separator" />
     <div class="footer">

plugins/login-resources/src/components/Intro.svelte

@@ -16,10 +16,11 @@
 <script lang="ts">
   import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
-  export let size: 'small' | 'medium' = 'medium'
+  export let landscape: boolean = false
+  export let mini: boolean = false
 </script>
 
-<div class="intro">
+<div class="intro" class:landscape class:mini>
   <div class="content">
     <div class="logo {$deviceInfo.theme === 'theme-light' ? 'dark' : 'light'}" />
   </div>
@@ -44,12 +45,16 @@
       justify-content: center;
       align-items: center;
       flex-grow: 1;
+      transition: all 0.15s var(--timing-main);
       .logo {
         position: relative;
-        &::after {
+        &::after,
+        &::before {
           position: absolute;
           content: '';
           transform: translate(-50%, -50%);
+        }
+        &::after {
           width: 63px;
           height: 79px;
         }
@@ -60,9 +65,6 @@
           background: center url('../../img/logo-dark.svg');
         }
         &::before {
-          position: absolute;
-          content: '';
-          transform: translate(-50%, -50%);
           width: 16rem;
           height: 16rem;
           border: 1.8px solid var(--caption-color);
@@ -72,6 +74,7 @@
       }
     }
     .slogan {
+      transition: all 0.15s var(--timing-main);
       margin-bottom: 60px;
       p {
         margin: 0;
@@ -82,5 +85,52 @@
         opacity: 0.8;
       }
     }
+
+    &.landscape {
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      min-width: 20rem;
+      min-height: 10rem;
+      margin-bottom: 1.25rem;
+
+      .content .logo::after,
+      .content .logo::before {
+        transform: translate(-50%, -50%) scale(0.5);
+      }
+      .content {
+        max-width: 8rem;
+        max-height: 10rem;
+        margin: 0 1rem 0 0;
+      }
+      .slogan {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin: 0 0 0 1rem;
+      }
+
+      &.mini {
+        min-width: 16rem;
+        min-height: 8rem;
+
+        .content .logo::after,
+        .content .logo::before {
+          transform: translate(-50%, -50%) scale(0.35);
+        }
+        .content {
+          max-width: 5.5rem;
+          max-height: 8rem;
+          margin: 0 0.5rem 0 0;
+        }
+        .slogan {
+          margin: 0 0 0 0.5rem;
+          p {
+            font-size: 0.6rem;
+          }
+        }
+      }
+    }
   }
 </style>

plugins/login-resources/src/components/LoginApp.svelte

@@ -47,9 +47,11 @@
 <Scroller padding={'1.25rem'} contentDirection={$deviceInfo.docWidth <= 768 ? 'vertical-reverse' : 'horizontal'}>
   <div
     class="panel"
+    class:minHeight={!$deviceInfo.isPortrait}
     class:landscape={$deviceInfo.docWidth > 768}
     style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
   >
+    <div class="flex-grow" />
     {#if page === 'login'}
       <LoginForm {navigateUrl} />
     {:else if page === 'signup'}
@@ -62,7 +64,7 @@
       <Join />
     {/if}
   </div>
-  <Intro />
+  <Intro landscape={$deviceInfo.docWidth <= 768} mini={$deviceInfo.docWidth <= 480} />
 </Scroller>
 <Popup />
 
@@ -71,11 +73,14 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    min-height: 100%;
+    height: 100%;
-    height: max-content;
     background: var(--popup-bg-color);
     box-shadow: var(--popup-aside-shadow);
 
+    &.minHeight {
+      min-height: 40rem;
+    }
+
     $circle-size: calc(1vh + 1vw);
     $r1: 23;
     $r2: 17;
@@ -87,16 +92,18 @@
       z-index: -1;
     }
     &::before {
-      top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 4);
+      top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 5);
-      left: calc(-1 * $circle-size * $r1 / 2);
+      left: auto;
+      right: calc(-1 * $circle-size * $r1 / 2);
       width: calc($circle-size * $r1);
       height: calc($circle-size * $r1);
       border: 1px solid var(--content-color);
       opacity: 0.05;
     }
     &::after {
-      top: calc(-1 * $circle-size * $r2 / 2 + $circle-size * 4);
+      top: calc(-1 * $circle-size * $r2 / 2 + $circle-size * 5);
-      left: calc(-1 * $circle-size * $r2 / 2);
+      left: auto;
+      right: calc(-1 * $circle-size * $r2 / 2);
       width: calc($circle-size * $r2);
       height: calc($circle-size * $r2);
       background: var(--dark-color);
@@ -106,6 +113,14 @@
     &.landscape {
       margin-right: 1.25rem;
       width: 41.75rem;
+      &::before {
+        left: calc(-1 * $circle-size * $r1 / 2);
+        right: auto;
+      }
+      &::after {
+        left: calc(-1 * $circle-size * $r2 / 2);
+        right: auto;
+      }
     }
   }
 </style>

plugins/login-resources/src/components/SelectWorkspace.svelte

@@ -22,7 +22,9 @@
     Label,
     Location,
     navigate,
-    setMetadataLocalStorage
+    setMetadataLocalStorage,
+    deviceOptionsStore as deviceInfo,
+    Scroller
   } from '@hcengineering/ui'
   import { workbenchId } from '@hcengineering/workbench'
   import login from '../plugin'
@@ -84,28 +86,30 @@
   }
 </script>
 
-<form class="container">
+<form class="container" style:padding={$deviceInfo.docWidth <= 480 ? '1.25rem' : '5rem'}>
   <div class="grow-separator" />
   <div class="title"><Label label={login.string.SelectWorkspace} /></div>
   <div class="status">
     <StatusControl {status} />
   </div>
   {#await _getWorkspaces() then workspaces}
-    <div class="form">
+    <Scroller padding={'.125rem 0'}>
-      {#each workspaces as workspace}
+      <div class="form">
-        <div
+        {#each workspaces as workspace}
-          class="workspace flex-center fs-title cursor-pointer focused-button form-row"
+          <div
-          on:click={() => select(workspace.workspace)}
+            class="workspace flex-center fs-title cursor-pointer focused-button bordered form-row"
-        >
+            on:click={() => select(workspace.workspace)}
-          {workspace.workspace}
+          >
-        </div>
+            {workspace.workspace}
-      {/each}
+          </div>
-      {#if !workspaces.length}
+        {/each}
-        <div class="form-row send">
+        {#if !workspaces.length}
-          <Button label={login.string.CreateWorkspace} kind={'primary'} width="100%" on:click={createWorkspace} />
+          <div class="form-row send">
-        </div>
+            <Button label={login.string.CreateWorkspace} kind={'primary'} width="100%" on:click={createWorkspace} />
-      {/if}
+          </div>
-    </div>
+        {/if}
+      </div>
+    </Scroller>
     <div class="grow-separator" />
     <div class="footer">
       {#if workspaces.length}
@@ -127,9 +131,8 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    flex-grow: 1;
     overflow: hidden;
-    height: 100%;
-    padding: 5rem;
 
     .title {
       font-weight: 600;

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

@@ -155,12 +155,6 @@
     font-size: 0.75rem;
   }
 
-  .name {
-    font-weight: 500;
-    font-size: 1.25rem;
-    color: var(--theme-caption-color);
-  }
-
   .separator {
     margin: 1rem 0;
     height: 1px;

plugins/tracker-resources/src/components/issues/GrowPresenter.svelte

@@ -8,9 +8,5 @@
     white-space: nowrap;
     overflow: hidden;
     flex-shrink: 10;
-
-    &.with-margin {
-      margin-left: 0.5rem;
-    }
   }
 </style>

plugins/tracker-resources/src/components/issues/PriorityEditor.svelte

@@ -119,10 +119,6 @@
       height: 1rem;
       color: var(--content-color);
     }
-    .label {
-      font-weight: 500;
-      color: var(--accent-color);
-    }
     &:hover {
       .icon {
         color: var(--caption-color) !important;

plugins/tracker-resources/src/components/issues/RelationEditor.svelte

@@ -29,35 +29,3 @@
     {/if}
   {/each}
 </div>
-
-<style lang="scss">
-  .tag-container {
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding-left: 0.5rem;
-    height: 1.5rem;
-    min-width: 0;
-    min-height: 0;
-    border-radius: 0.5rem;
-    width: fit-content;
-    &:hover {
-      border: 1px solid var(--divider-color);
-    }
-
-    .btn-close {
-      flex-shrink: 0;
-      margin-left: 0.125rem;
-      padding: 0 0.25rem 0 0.125rem;
-      height: 1.75rem;
-      color: var(--content-color);
-      border-left: 1px solid transparent;
-
-      &:hover {
-        color: var(--caption-color);
-        border-left-color: var(--divider-color);
-      }
-    }
-  }
-</style>

plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte

@@ -89,14 +89,3 @@
     </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .list {
-    border-top: 1px solid var(--divider-color);
-
-    &.collapsed {
-      padding-top: 1px;
-      border-top: none;
-    }
-  }
-</style>

plugins/tracker-resources/src/components/issues/timereport/SubIssuesEstimations.svelte

@@ -49,14 +49,3 @@
     <Spinner />
   </div>
 {/if}
-
-<style lang="scss">
-  .list {
-    border-top: 1px solid var(--divider-color);
-
-    &.collapsed {
-      padding-top: 1px;
-      border-top: none;
-    }
-  }
-</style>

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte

@@ -56,14 +56,3 @@
     <Spinner />
   </div>
 {/if}
-
-<style lang="scss">
-  .list {
-    border-top: 1px solid var(--divider-color);
-
-    &.collapsed {
-      padding-top: 1px;
-      border-top: none;
-    }
-  }
-</style>

plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte

@@ -199,7 +199,7 @@
     }
   }
 
-  .filterButton {
+  // .filterButton {
-    color: var(--caption-color);
+  //   color: var(--caption-color);
-  }
+  // }
 </style>

plugins/tracker-resources/src/components/sprints/EditSprint.svelte

@@ -92,9 +92,3 @@
     </div>
   </svelte:fragment>
 </IssuesView>
-
-<style lang="scss">
-  .showWarning {
-    color: var(--warning-color) !important;
-  }
-</style>

plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte

@@ -212,7 +212,7 @@
     }
   }
 
-  .filterButton {
+  // .filterButton {
-    color: var(--caption-color);
+  //   color: var(--caption-color);
-  }
+  // }
 </style>

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

@@ -22,7 +22,7 @@
   export let placeholder: IntlString
   export let value: number | undefined
   export let focus: boolean
-  export let maxWidth: string = '10rem'
+  // export let maxWidth: string = '10rem'
   export let onChange: (value: number | undefined) => void
   export let kind: 'no-border' | 'link' = 'no-border'
   export let readonly = false

plugins/view-resources/src/components/filter/FilterSection.svelte

@@ -23,7 +23,7 @@
   import { createEventDispatcher, onDestroy } from 'svelte'
   import view from '../../plugin'
 
-  export let _class: Ref<Class<Doc>>
+  // export let _class: Ref<Class<Doc>>
   export let filter: Filter
 
   $: currentFilter = filter.nested ? filter.nested : filter