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,7 +282,6 @@
   })
 </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} />
@@ -321,4 +320,3 @@
     <Label label={hr.string.NoEmployeesInDepartment} />
   </div>
 {/if}
-</div>

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 />