Merge pull request #5520 from bsclifton/update-am-pm-size

English locale will now show a smaller version of AM/PM

js/about/newTabComponents/clock.js

@@ -8,25 +8,37 @@ class Clock extends React.Component {
   constructor () {
     super()
     this.state = {
-      currentTime: this.currentTime
+      time: this.formattedTime,
+      timePeriod: this.formattedTimePeriod
     }
   }
   get currentTime () {
     const date = new Date()
     const timeOptions = {hour: '2-digit', minute: '2-digit'}
     return date.toLocaleTimeString([], timeOptions)
   }
+  get formattedTime () {
+    const time = this.currentTime
+    return time.replace(' AM', '').replace(' PM', '')
+  }
+  get formattedTimePeriod () {
+    const time = this.currentTime
+    if (time.toUpperCase().indexOf(' AM') > -1) return 'AM'
+    if (time.toUpperCase().indexOf(' PM') > -1) return 'PM'
+    return ''
+  }
   updateClock () {
     this.setState({
-      currentTime: this.currentTime
+      time: this.formattedTime,
+      timePeriod: this.formattedTimePeriod
     })
   }
   componentDidMount () {
     window.setInterval(this.updateClock.bind(this), 1000)
   }
   render () {
     return <div className='clock'>
-      <span className='time'>{this.state.currentTime}</span>
+      <span className='time'>{this.state.time}</span><span className='timePeriod'>{this.state.timePeriod}</span>
     </div>
   }
 }

less/about/newtab.less

@@ -138,6 +138,15 @@ ul {
         color: #fff;
       }
 
+      .timePeriod {
+        color: #fff;
+        display: inline-block;
+        font-size: 20px;
+        font-weight: 400;
+        margin-top: 6px;
+        vertical-align: top;
+      }
+
       .dayTime {
         font-size: 51px;
         color: #fff;