New: Unaired premieres on calendar are displayed in pink

src/UI/Calendar/CalendarLayoutTemplate.html

@@ -14,6 +14,7 @@
         <div id="x-calendar" class="calendar"/>
         <div class="legend calendar">
             <ul class='legend-labels'>
+                <li><span class="pink" title="Premiere episode hasn't aired yet"></span>Unaired Premiere</li>
                 <li><span class="primary" title="Episode hasn't aired yet"></span>Unaired</li>
                 <li><span class="warning" title="Episode is currently airing"></span>On Air</li>
                 <li><span class="purple" title="Episode is currently downloading"></span>Downloading</li>

src/UI/Calendar/CalendarView.js

@@ -165,6 +165,10 @@ define(
                     statusLevel = 'danger';
                 }
 
+                else if (element.get('episodeNumber') === 1) {
+                    statusLevel = 'pink';
+                }
+
                 if (end.isBefore(currentTime.startOf('day'))) {
                     statusLevel += ' past';
                 }

src/UI/Calendar/calendar.less

@@ -111,6 +111,10 @@
     border-color : @nzbdronePurple;
   }
 
+  .pink {
+    border-color : @nzbdronePink;
+  }
+
   .episode-title {
     .btn-link;
     .text-overflow;
@@ -167,6 +171,11 @@
     background-color : @nzbdronePurple;
   }
 
+  .pink {
+    border-color     : @nzbdronePink;
+    background-color : @nzbdronePink;
+  }
+
   .chart {
     margin-top  : 2px;
     margin-right: 2px;

src/UI/Content/variables.less

@@ -1,6 +1,7 @@
 @nzbdroneRed    : #c4273c;
 @purple         : #7a43b6;
 @nzbdronePurple : #7932ea;
+@nzbdronePink   : #F43565;
 @droneTeal      : #35c5f4;
 
 @screen-tn-max: @screen-xs-min - 1;

src/UI/Handlebars/Helpers/Episode.js

@@ -37,6 +37,10 @@ define(
                 return 'purple';
             }
 
+            if (this.episodeNumber === 1) {
+                return 'pink';
+            }
+
             if (currentTime.isAfter(start) && currentTime.isBefore(end)) {
                 return 'warning';
             }