From 7e48a2a9ebb02b96b44f7e6a5654226871506868 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Wed, 9 Nov 2016 14:51:08 -0700
Subject: [PATCH] English locale will now show a smaller version of AM/PM

Fixes https://github.com/brave/browser-laptop/issues/5381

Auditors: @cezaraugusto

Test Plan:
1. Set your locale in Preferences to be English (U.S.)
2. Visit about:newtab; AM/PM (if shown for you) should be smaller than the font-size used for the hour/minute
---
 js/about/newTabComponents/clock.js | 18 +++++++++++++++---
 less/about/newtab.less             |  9 +++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/js/about/newTabComponents/clock.js b/js/about/newTabComponents/clock.js
index d5ce4a84439..2b53e6385dc 100644
--- a/js/about/newTabComponents/clock.js
+++ b/js/about/newTabComponents/clock.js
@@ -8,7 +8,8 @@ class Clock extends React.Component {
   constructor () {
     super()
     this.state = {
-      currentTime: this.currentTime
+      time: this.formattedTime,
+      timePeriod: this.formattedTimePeriod
     }
   }
   get currentTime () {
@@ -16,9 +17,20 @@ class Clock extends React.Component {
     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 () {
@@ -26,7 +38,7 @@ class Clock extends React.Component {
   }
   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>
   }
 }
diff --git a/less/about/newtab.less b/less/about/newtab.less
index 524c6f85da4..5a72e07bf04 100644
--- a/less/about/newtab.less
+++ b/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;