Added attention grabbing CSS to the calendar date.

ui/src/wishList/wish/index.js

@@ -1,77 +1,83 @@
 import React from 'react'
 import './styles.scss'
 import ImgPlaceholder from '../imgPlaceholder'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import {faChevronRight} from '@fortawesome/free-solid-svg-icons'
 import Rocket from '../../assets/images/icn_To_Go_Rocket_130x130.png'
 import Alien from '../../assets/images/icn_To_Meet_Alien_White_Inside_130x130.png'
 import Astronaut from '../../assets/images/icn_To_Be_Astronaut_130x130.png'
 import Telescope from '../../assets/images/icn_To_See_Telescope_White_Inside_130x130.png'
 
-const Wish = ({ wish, history }) => {
-  const { child, sponsor, details } = wish
+const Wish = ({wish, history}) => {
+    const {child, sponsor, details} = wish
 
-  const handleWishClick = id => {
-    const url = `/wish-summary/${id}`
-    history.push(url)
-  }
+    const isToday = date => {
+        let paramDate = new Date(date);
+        let today = new Date();
+        return paramDate.getDate() === today.getDate() && paramDate.getMonth() === today.getMonth() && paramDate.getFullYear() === today.getFullYear();
+    }
+
+    const handleWishClick = id => {
+        const url = `/wish-summary/${id}`
+        history.push(url)
+    }
 
-  const getImageSource = wish => {
-    switch (wish.type.toLowerCase()) {
-      case 'go':
-        return Rocket
-      case 'meet':
-        return Alien
-      case 'be':
-        return Astronaut
-      case 'have':
-        return Telescope
-      default:
-        return ''
+    const getImageSource = wish => {
+        switch (wish.type.toLowerCase()) {
+            case 'go':
+                return Rocket
+            case 'meet':
+                return Alien
+            case 'be':
+                return Astronaut
+            case 'have':
+                return Telescope
+            default:
+                return ''
+        }
     }
-  }
 
-  const getWishType = wish => {
-    switch (wish.type.toLowerCase()) {
-      case 'go':
-        return 'To Go'
-      case 'meet':
-        return 'To Meet'
-      case 'be':
-        return 'To Be'
-      case 'have':
-        return 'To Have'
-      default:
-        return ''
+    const getWishType = wish => {
+        switch (wish.type.toLowerCase()) {
+            case 'go':
+                return 'To Go'
+            case 'meet':
+                return 'To Meet'
+            case 'be':
+                return 'To Be'
+            case 'have':
+                return 'To Have'
+            default:
+                return ''
+        }
     }
-  }
 
-  return (
-    <li className="wish" onClick={() => handleWishClick(wish._id)}>
-      <div className="date">18</div>
-      {child.image ? (
-        <img src={child.image} alt="child" />
-      ) : (
-        <ImgPlaceholder text="Add Image" />
-      )}
-      <div>
-        <p>
-          <strong>{child.name}</strong> - Age {child.age} from {child.hometown}
-        </p>
-        <span className="summary">{details}</span>
-      </div>
-      {sponsor.logo ? (
-        <img src={sponsor.logo} alt="Sponsor" className="sponsor" />
-      ) : (
-        <p>Add Sponsor</p>
-      )}
-      <div className="wish-type-container">
-        <img src={getImageSource(wish)} alt={wish.type} />
-        <span>{getWishType(wish)}</span>
-      </div>
-      <FontAwesomeIcon icon={faChevronRight} className="wish-chevron" />
-    </li>
-  )
+    return (
+        <li className="wish" onClick={() => handleWishClick(wish._id)}>
+<div className={isToday(wish.createdAt) ? "date-now" : "date"}>{new Date(wish.createdAt).getDate()}</div>
+    {child.image ? (
+        <img src={child.image} alt="child"/>
+    ) : (
+    <ImgPlaceholder text="Add Image"/>
+    )}
+<div>
+    <p>
+    <strong>{child.name}</strong> - Age {child.age} from {child.hometown}
+    </p>
+    <span className="summary">{details}</span>
+        </div>
+    {sponsor.logo ? (
+        <img src={sponsor.logo} alt="Sponsor" className="sponsor"/>
+    ) : (
+    <p>Add Sponsor</p>
+    )}
+<div className="wish-type-container">
+        <img src={getImageSource(wish)} alt={wish.type}/>
+    <span>{getWishType(wish)}</span>
+    </div>
+    <FontAwesomeIcon icon={faChevronRight} className="wish-chevron"/>
+        </li>
+)
 }
 
 export default Wish

ui/src/wishList/wish/index.test.js

@@ -26,6 +26,46 @@ describe('Wish tests', () => {
   })
 })
 
+describe('isToday', () => {
+  let wish;
+  let historyMock;
+
+  beforeEach(() => {
+    wish = {
+      child: {
+        name: 'Jerel Weber',
+        age: 5,
+        hometown: 'North Robertside',
+        illness: 'SMTP'
+      },
+      sponsor: {
+        links: []
+      },
+      _id: '5d0528c11170183ea576e3da',
+      type: 'be',
+      details: 'overriding calculating Shirt',
+      __v: 0,
+      createdAt: new Date()
+    }
+
+    historyMock = { push: jest.fn() };
+  })
+
+  it('should return true if passed in date equals current date', () => {
+    const testWish = Wish({wish, historyMock});
+
+    expect(JSON.stringify(testWish)).toContain('date-now');
+  })
+
+  it('should return true if passed in date equals current date', () => {
+    const oldDate = new Date().getDate() - 2;
+    wish.createdAt = oldDate;
+    const testWish = Wish({wish, historyMock});
+
+    expect(JSON.stringify(testWish)).not.toContain('date-now');
+  })
+})
+
 describe('handle wish click', () => {
   const wish = {
     child: {

ui/src/wishList/wish/styles.scss

@@ -10,11 +10,9 @@
   box-shadow: 0 8px 6px -6px $light-gray;
   margin-bottom: 0.6em;
 
-  .date {
+  .date, .date-now {
     width: 2.5em;
     height: 2.5em;
-    border: 0.4em solid $medium-blue;
-    border-top: 1em solid $medium-blue;
     border-radius: .5em;
     font-weight: bold;
     display: flex;
@@ -23,6 +21,23 @@
     font-size: 1.2em;
   }
 
+  .date {
+    border: 0.4em solid $medium-blue;
+    border-top: 1em solid $medium-blue;
+  }
+
+  .date-now {
+    border: 0.4em solid $yellow;
+    border-top: 1em solid $yellow;
+    animation: border-pulsate 2s infinite;
+  }
+
+  @keyframes border-pulsate {
+    0%   { border-color: $red; }
+    50%  { border-color: $medium-blue; }
+    100% { border-color: $red; }
+  }
+
   .summary {
     font-size: .7em;
   }