diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css index 80903d404..71f834605 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css +++ b/frontend/src/Calendar/Events/CalendarEvent.css @@ -1,3 +1,5 @@ +$fullColorGradient: rgba(244, 245, 246, 0.2); + .event { overflow-x: hidden; margin: 4px 2px; @@ -44,6 +46,11 @@ font-size: $defaultFontSize; } +.statusContainer { + display: flex; + align-items: center; +} + .statusIcon { margin-left: 3px; } @@ -55,35 +62,84 @@ .downloaded { border-left-color: var(--successColor) !important; + &:global(.fullColor) { + background-color: rgba(39, 194, 76, 0.4) !important; + } + &:global(.colorImpaired) { - border-left-color: color(var(--successColor), saturation(+15%)) !important; + border-left-color: color(#27c24c saturation(+15%)) !important; } } .queue { border-left-color: var(--purple) !important; + + &:global(.fullColor) { + background-color: rgba(122, 67, 182, 0.4) !important; + } } .unmonitored { border-left-color: var(--gray) !important; + + &:global(.fullColor) { + background-color: rgba(173, 173, 173, 0.5) !important; + } + + &:global(.colorImpaired) { + background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(45deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); + } } .missingUnmonitored { border-left-color: var(--warningColor) !important; + &:global(.fullColor) { + background-color: rgba(255, 165, 0, 0.6) !important; + } + &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); } } .missingMonitored { border-left-color: var(--dangerColor) !important; + &:global(.fullColor) { + background-color: rgba(240, 80, 80, 0.6) !important; + } + &:global(.colorImpaired) { + border-left-color: color(#f05050 saturation(+15%)) !important; background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); + } } .continuing { border-left-color: var(--primaryColor) !important; + + &:global(.fullColor) { + background-color: rgba(93, 156, 236, 0.4) !important; + } + + &:global(.colorImpaired) { + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(90deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); + } } diff --git a/frontend/src/Calendar/Events/CalendarEvent.css.d.ts b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts index 595199ef9..73a345f30 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css.d.ts +++ b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts @@ -12,6 +12,7 @@ interface CssExports { 'movieInfo': string; 'movieTitle': string; 'queue': string; + 'statusContainer': string; 'statusIcon': string; 'unmonitored': string; } diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js index 9e6d60ab0..f8be8ccae 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.js +++ b/frontend/src/Calendar/Events/CalendarEvent.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import moment from 'moment'; import PropTypes from 'prop-types'; -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import Icon from 'Components/Icon'; import Link from 'Components/Link/Link'; import { icons, kinds } from 'Helpers/Props'; @@ -32,6 +32,7 @@ class CalendarEvent extends Component { queueItem, showMovieInformation, showCutoffUnmetIcon, + fullColorEvents, colorImpairedMode, date } = this.props; @@ -56,13 +57,14 @@ class CalendarEvent extends Component { } return ( -