diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index e741cc5824..63a38c407c 100644 --- a/packages/theme/styles/_colors.scss +++ b/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; diff --git a/plugins/hr-resources/src/components/ScheduleView.svelte b/plugins/hr-resources/src/components/ScheduleView.svelte index f92064208e..0855d91125 100644 --- a/plugins/hr-resources/src/components/ScheduleView.svelte +++ b/plugins/hr-resources/src/components/ScheduleView.svelte @@ -282,43 +282,41 @@ }) -
- {#if staffDepartmentMap.size > 0} - {#if mode === CalendarMode.Year} - - {:else if mode === CalendarMode.Month} - {#if display === 'chart'} - - {:else if display === 'stats'} - - {/if} +{#if staffDepartmentMap.size > 0} + {#if mode === CalendarMode.Year} + + {:else if mode === CalendarMode.Month} + {#if display === 'chart'} + + {:else if display === 'stats'} + {/if} - {:else} -
-
{/if} -
+{:else} +
+
+{/if} diff --git a/plugins/hr-resources/src/components/schedule/MonthView.svelte b/plugins/hr-resources/src/components/schedule/MonthView.svelte index 707e0ac8b9..337e652ec5 100644 --- a/plugins/hr-resources/src/components/schedule/MonthView.svelte +++ b/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 { diff --git a/plugins/hr-resources/src/components/schedule/ScheduleRequest.svelte b/plugins/hr-resources/src/components/schedule/ScheduleRequest.svelte index 180bb3059a..5051378096 100644 --- a/plugins/hr-resources/src/components/schedule/ScheduleRequest.svelte +++ b/plugins/hr-resources/src/components/schedule/ScheduleRequest.svelte @@ -79,6 +79,8 @@