Colorize next open closing text

src/Components/NextOpenCloseMini/Component.css

@@ -4,7 +4,6 @@
     height: 100%;
     font-size: 1em;
     background-color: rgba(0, 0, 0, 0.75);
-    
     color: rgba(255, 255, 255, 0.60);
     font-size: 2em;
     position: relative;
@@ -23,4 +22,12 @@
     top: 50%;
     width: 80%;
     transform: translate(-50%, -50%);
+}
+
+.NextOpenCloseMini .green-text {
+    color: rgba(46, 204, 64, 0.75);
+}
+
+.NextOpenCloseMini .red-text {
+    color: rgba(255, 64, 54, 0.75);
 }

src/Components/NextOpenCloseMini/Component.tsx

@@ -31,13 +31,17 @@ export class NextOpenCloseMini extends React.Component<NextOpenCloseMiniProps, {
         return this.openOrClose === OpenOrClose.Open ? "opening" : "closing";
     }
 
+    getOpeningClosingClassName() {
+        return this.openOrClose === OpenOrClose.Open ? "green-text" : "red-text";
+    }
+
     renderDate(): JSX.Element[] {
         const tmpNextDate = this.nextOpenOrCloseDate as moment.Moment;
         var nextDateString = tmpNextDate.from(this.xDay);
         return [
             (
                 <div className="openCloseDecription" key="title">
-                    Next {this.getOpeningClosingString()}
+                    Next <span className={this.getOpeningClosingClassName()}>{this.getOpeningClosingString()}</span>
                 </div>
             ),
             (