Handle fruit expiry date expiry date cases + CSS variable name convention

src/views/Fruit.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <h2><span @click="() => this.$router.push('/')">◀</span> Details</h2>
+
     <article>
       <img :src="fruit.image" :alt="fruit.name" />
       <section>
@@ -14,7 +15,9 @@
         <hr />
 
         <p class="price">{{ "$" + fruit.price }}</p>
-        {{ "expires" }} {{ fruit.expires | moment("from", "now") }}
+        <div class="alert">
+          {{ "This offer " + expirationState }} {{ fruit.expires | moment("from", "now") }}
+        </div>
       </section>
     </article>
   </div>
@@ -25,8 +28,16 @@ import { mapState } from "vuex";
 
 export default {
   name: "FruitDetails",
+  data() {
+    return {
+      modalOpen: true
+    };
+  },
   computed: {
-    ...mapState(["fruit"])
+    ...mapState(["fruit"]),
+    expirationState() {
+      return new Date(this.fruit.expires) < new Date() ? "expired" : "expires";
+    }
   }
 };
 </script>
@@ -47,7 +58,6 @@ article {
 
   img {
     width: 100%;
-    //max-height: 285px;
     object-fit: scale-down;
     margin-bottom: 1.5rem;
     box-shadow: 0 1px 4px 1px #d2d2f2;
@@ -55,7 +65,7 @@ article {
 
   section {
     padding: 1.5rem 1rem;
-    background-color: @secondary-color;
+    background-color: @color-2;
 
     h3 {
       display: flex;
@@ -87,6 +97,7 @@ article {
       margin: 0;
       font-size: 28px;
       font-weight: bold;
+      color: @color-3;
     }
   }
 
@@ -109,4 +120,12 @@ article {
     }
   }
 }
+
+.alert {
+  margin-top: 1.75rem;
+  background-color: lighten(@color-1, 10%);
+  color: @color-2;
+  padding: 1rem 1.5rem;
+  border-radius: 4px;
+}
 </style>