UBER-615 HR Schedule fixes (#3549)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>

packages/theme/styles/_colors.scss

@@ -164,6 +164,12 @@
   --theme-calendar-today-bgcolor: rgba(32, 93, 194, .1);
   --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
+  --theme-calendar-weekend-stroke-color: #444;
+  --theme-calendar-event-caption-color: rgba(0, 0, 0, .6);
+  --theme-calendar-event-available-color: rgba(55, 122, 230, .2);
+  --theme-calendar-event-available-bgcolor: #f6f9fe;
+  --theme-calendar-event-unavailable-color: rgba(244, 119, 88, .2);
+  --theme-calendar-event-unavailable-bgcolor: #fdece7;
 
   --theme-tooltip-color: rgba(255, 255, 255, .8);
   --theme-tooltip-bg: #353347;
@@ -353,9 +359,11 @@
   --theme-calendar-today-bgcolor: rgba(51, 157, 255, .1);
   --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
-  --theme-calendar-event-available-color: rgba(55, 122, 230, 0.20);
+  --theme-calendar-weekend-stroke-color: #ddd;
+  --theme-calendar-event-caption-color: rgba(0, 0, 0, .8);
+  --theme-calendar-event-available-color: rgba(55, 122, 230, .2);
   --theme-calendar-event-available-bgcolor: #f6f9fe;
-  --theme-calendar-event-unavailable-color: rgba(244, 119, 88, 0.20);
+  --theme-calendar-event-unavailable-color: rgba(244, 119, 88, .2);
   --theme-calendar-event-unavailable-bgcolor: #fdece7;
 
   --theme-tooltip-color: #FFF;

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

@@ -282,43 +282,41 @@
   })
 </script>
 
-<div class="w-full h-full background-comp-header-color">
-  {#if staffDepartmentMap.size > 0}
-    {#if mode === CalendarMode.Year}
-      <YearView {departmentStaff} {employeeRequests} {types} {currentDate} {holidays} {staffDepartmentMap} />
-    {:else if mode === CalendarMode.Month}
-      {#if display === 'chart'}
-        <MonthView
-          {departmentStaff}
-          {employeeRequests}
-          {types}
-          {startDate}
-          {endDate}
-          {editableList}
-          {currentDate}
-          {timeReports}
-          {holidays}
-          {department}
-          {departments}
-          {departmentById}
-          {staffDepartmentMap}
-        />
-      {:else if display === 'stats'}
-        <MonthTableView
-          {departmentStaff}
-          {employeeRequests}
-          {types}
-          {currentDate}
-          {timeReports}
-          {holidays}
-          {staffDepartmentMap}
-          {getHolidays}
-        />
-      {/if}
+{#if staffDepartmentMap.size > 0}
+  {#if mode === CalendarMode.Year}
+    <YearView {departmentStaff} {employeeRequests} {types} {currentDate} {holidays} {staffDepartmentMap} />
+  {:else if mode === CalendarMode.Month}
+    {#if display === 'chart'}
+      <MonthView
+        {departmentStaff}
+        {employeeRequests}
+        {types}
+        {startDate}
+        {endDate}
+        {editableList}
+        {currentDate}
+        {timeReports}
+        {holidays}
+        {department}
+        {departments}
+        {departmentById}
+        {staffDepartmentMap}
+      />
+    {:else if display === 'stats'}
+      <MonthTableView
+        {departmentStaff}
+        {employeeRequests}
+        {types}
+        {currentDate}
+        {timeReports}
+        {holidays}
+        {staffDepartmentMap}
+        {getHolidays}
+      />
     {/if}
-  {:else}
-    <div class="flex-center h-full w-full flex-grow fs-title">
-      <Label label={hr.string.NoEmployeesInDepartment} />
-    </div>
   {/if}
-</div>
+{:else}
+  <div class="flex-center h-full w-full flex-grow fs-title">
+    <Label label={hr.string.NoEmployeesInDepartment} />
+  </div>
+{/if}

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

@@ -369,6 +369,7 @@
   $timeline-bg-color: var(--theme-comp-header-color);
   $timeline-border-color: var(--theme-bg-divider-color);
   $timeline-border: 1px solid $timeline-border-color;
+  $timeline-weekend-stroke-color: var(--theme-calendar-weekend-stroke-color);
 
   .timeline {
     width: 100%;
@@ -448,15 +449,15 @@
   .timeline-grid-bg {
     background-image: linear-gradient(
       135deg,
-      $timeline-border-color 8.33%,
-      $timeline-bg-color 8.33%,
+      $timeline-weekend-stroke-color 10%,
+      $timeline-bg-color 10%,
       $timeline-bg-color 50%,
-      $timeline-border-color 50%,
-      $timeline-border-color 58.33%,
-      $timeline-bg-color 58.33%,
+      $timeline-weekend-stroke-color 50%,
+      $timeline-weekend-stroke-color 60%,
+      $timeline-bg-color 60%,
       $timeline-bg-color 100%
     );
-    background-size: 6px 6px;
+    background-size: 7px 7px;
   }
 
   .timeline-row {

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

@@ -79,6 +79,8 @@
 
 <style lang="scss">
   .request {
+    color: var(--theme-calendar-event-caption-color);
+
     border-radius: 0.25rem;
     height: 100%;
     width: 100%;

plugins/hr-resources/src/components/sidebar/Sidebar.svelte

@@ -42,11 +42,11 @@
       <DepartmentsHierarchy {departments} {descendants} {departmentById} selected={department} on:selected />
     </TreeNode>
 
-    <div class="antiNav-divider short line" />
+    <!-- TODO Add Positions -->
+    <!-- <div class="antiNav-divider short line" /> -->
 
-    <TreeNode label={hr.string.Positions} parent>
-      <!-- TODO Positions -->
-    </TreeNode>
+    <!-- <TreeNode label={hr.string.Positions} parent> -->
+    <!-- </TreeNode> -->
   </Scroller>
 
   <NavFooter />