Style ledger notifications like update notifications

app/filtering.js

@@ -352,7 +352,10 @@ function registerPermissionHandler (session, partition) {
     }
 
     appActions.showMessageBox({
-      buttons: [locale.translation('deny'), locale.translation('allow')],
+      buttons: [
+        {text: locale.translation('deny')},
+        {text: locale.translation('allow')}
+      ],
       frameOrigin,
       options: {
         persist: true

app/index.js

@@ -421,7 +421,10 @@ app.on('ready', () => {
         appActions.hideMessageBox(message)
       } else {
         appActions.showMessageBox({
-          buttons: [locale.translation('yes'), locale.translation('no')],
+          buttons: [
+            {text: locale.translation('yes')},
+            {text: locale.translation('no')}
+          ],
           options: {
             persist: false
           },
@@ -639,9 +642,9 @@ app.on('ready', () => {
         // Notification not shown already
         appActions.showMessageBox({
           buttons: [
-            locale.translation('yes'),
-            locale.translation('no'),
-            locale.translation('neverForThisSite')
+            {text: locale.translation('yes')},
+            {text: locale.translation('no')},
+            {text: locale.translation('neverForThisSite')}
           ],
           options: {
             persist: false,

app/ledger.js

@@ -1222,21 +1222,27 @@ const showNotifications = () => {
         balance + unconfirmed < 0.9 * Number(ledgerInfo.btc)) {
       addFundsMessage = addFundsMessage || locale.translation('addFundsNotification')
       appActions.showMessageBox({
+        greeting: locale.translation('updateHello'),
         message: addFundsMessage,
-        buttons: [locale.translation('updateLater'),
-          locale.translation('addFunds')],
+        buttons: [
+          {text: locale.translation('updateLater')},
+          {text: locale.translation('addFunds'), className: 'primary'}
+        ],
         options: {
-          updateStyle: true, // TODO: Show this in the style of updateBar.less
+          style: 'greetingStyle',
           persist: false
         }
       })
     } else if (!reconciliationNotificationShown) {
       reconciliationMessage = reconciliationMessage || locale.translation('reconciliationNotification')
       appActions.showMessageBox({
+        greeting: locale.translation('updateHello'),
         message: reconciliationMessage,
-        buttons: [locale.translation('reviewSites')],
+        buttons: [
+          {text: locale.translation('reviewSites'), className: 'primary'}
+        ],
         options: {
-          updateStyle: true,
+          style: 'greetingStyle',
           persist: false
         }
       })

docs/state.md

@@ -124,12 +124,16 @@ AppStore
   },
   notifications: [{
     message: string,
-    buttons: Array<string>,
+    buttons: [{
+      text: string, // button text
+      className: string, // button class e.g. 'primary'. see notificationBar.less
+    }],
     frameOrigin: (string|undefined), // origin that the notification is from, or undefined if not applicable.
     options: {
-      persist: boolean, // whether to show a 'Remember this decision' checkbox
       advancedText: string, // more info text
       advancedLink: string, // more info link URL
+      persist: boolean, // whether to show a 'Remember this decision' checkbox
+      style: string // css class for notification bar. See notificationBar.less
     }
   }], // the notifications for the frame. not preserved across restart.
   settings: [{

js/components/frame.js

@@ -544,7 +544,10 @@ class Frame extends ImmutableComponent {
       const message = locale.translation('allowFlashPlayer').replace(/{{\s*origin\s*}}/, this.origin)
       // Show Flash notification bar
       appActions.showMessageBox({
-        buttons: [locale.translation('deny'), locale.translation('allow')],
+        buttons: [
+          {text: locale.translation('deny')},
+          {text: locale.translation('allow')}
+        ],
         message,
         frameOrigin: this.origin,
         options: {

js/components/notificationBar.js

@@ -33,16 +33,22 @@ class NotificationItem extends ImmutableComponent {
   render () {
     let i = 0
     const options = this.props.detail.get('options')
-    return <div className='notificationItem'>
-      <span className='notificationMessage'>{this.props.detail.get('message')}</span>
+    const greeting = this.props.detail.get('greeting')
+    return <div className={'notificationItem ' + (options.get('style') || '')}>
+      {
+        greeting
+          ? <span className='greeting'>{greeting}</span>
+          : null
+      }
+      <span className='message'>{this.props.detail.get('message')}</span>
       <span className='notificationAdvanced'>
         {
           options.get('advancedText') && options.get('advancedLink')
             ? <span onClick={this.openAdvanced.bind(this)}>{options.get('advancedText')}</span>
             : null
         }
       </span>
-      <span className='notificationOptions'>
+      <span className='options'>
         {
           options.get('persist')
             ? <span id='rememberOption'>
@@ -55,8 +61,8 @@ class NotificationItem extends ImmutableComponent {
           this.props.detail.get('buttons').map((button) =>
             <button
               type='button'
-              className='notificationButton'
-              onClick={this.clickHandler.bind(this, i++)}>{button}</button>
+              className={'button ' + (button.get('className') || '')}
+              onClick={this.clickHandler.bind(this, i++)}>{button.get('text')}</button>
           )
         }
       </span>

js/components/updateBar.js

@@ -45,7 +45,7 @@ class UpdateHello extends ImmutableComponent {
   }
 
   render () {
-    return <span className='updateHello'>
+    return <span className='greeting'>
       <span onClick={this.onSpinnerClick.bind(this)}
         className={cx({
           fa: this.loading,
@@ -59,7 +59,7 @@ class UpdateHello extends ImmutableComponent {
 
 class UpdateHide extends ImmutableComponent {
   render () {
-    return <Button className='updateButton updateSecondaryButton'
+    return <Button className='button secondary'
       l10nId='updateHide'
       onClick={appActions.setUpdateStatus.bind(null, this.props.reset ? UpdateStatus.UPDATE_NONE : undefined, false, undefined)} />
   }
@@ -70,7 +70,7 @@ class UpdateLog extends ImmutableComponent {
     remote.shell.openItem(path.join(remote.app.getPath('userData'), 'updateLog.log'))
   }
   render () {
-    return <Button className='updateButton updateViewLogButton updateSecondaryButton'
+    return <Button className='button updateViewLogButton secondary'
       l10nId='updateViewLog'
       onClick={this.onViewLog.bind(this)} />
   }
@@ -80,22 +80,24 @@ class UpdateAvailable extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateHello' />
-      <span className='updateMessage' data-l10n-id='updateAvail' />
-      <span className='updateRequiresRelaunch' data-l10n-id='updateRequiresRelaunch' />
-      <span className='updateSpacer' />
-      {
-        this.props.metadata && this.props.metadata.get('notes')
-        ? <Button className='updateButton updateDetails updateSecondaryButton'
-          l10nId='updateDetails'
-          onClick={windowActions.setReleaseNotesVisible.bind(null, true)} />
-        : null
-      }
-      <Button className='updateButton updateLaterButton updateSecondaryButton'
-        l10nId='updateLater'
-        onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_AVAILABLE_DEFERRED, false, undefined)} />
-      <Button className='updateButton updateNowButton'
-        l10nId='updateNow'
-        onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_APPLYING_RESTART, false, undefined)} />
+      <span className='message' data-l10n-id='updateAvail' />
+      <span className='message secondary' data-l10n-id='updateRequiresRelaunch' />
+      <span className='spacer' />
+      <span className='options'>
+        {
+          this.props.metadata && this.props.metadata.get('notes')
+          ? <Button className='button updateDetails secondary'
+            l10nId='updateDetails'
+            onClick={windowActions.setReleaseNotesVisible.bind(null, true)} />
+          : null
+        }
+        <Button className='button updateLaterButton secondary'
+          l10nId='updateLater'
+          onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_AVAILABLE_DEFERRED, false, undefined)} />
+        <Button className='button primary'
+          l10nId='updateNow'
+          onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_APPLYING_RESTART, false, undefined)} />
+      </span>
     </div>
   }
 }
@@ -104,10 +106,12 @@ class UpdateChecking extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} />
-      <span className='updateMessage' data-l10n-id='updateChecking' />
-      <span className='updateSpacer' />
-      <UpdateLog />
-      <UpdateHide />
+      <span className='message' data-l10n-id='updateChecking' />
+      <span className='spacer' />
+      <span className='options'>
+        <UpdateLog />
+        <UpdateHide />
+      </span>
     </div>
   }
 }
@@ -116,10 +120,12 @@ class UpdateDownloading extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} />
-      <span className='updateMessage' data-l10n-id='updateDownloading' />
-      <span className='updateSpacer' />
-      <UpdateLog />
-      <UpdateHide />
+      <span className='message' data-l10n-id='updateDownloading' />
+      <span className='spacer' />
+      <span className='options'>
+        <UpdateLog />
+        <UpdateHide />
+      </span>
     </div>
   }
 }
@@ -128,10 +134,12 @@ class UpdateError extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateOops' />
-      <span className='updateMessage' data-l10n-id='updateError' />
-      <span className='updateSpacer' />
-      <UpdateLog />
-      <UpdateHide reset />
+      <span className='message' data-l10n-id='updateError' />
+      <span className='spacer' />
+      <span className='options'>
+        <UpdateLog />
+        <UpdateHide reset />
+      </span>
     </div>
   }
 }
@@ -140,9 +148,11 @@ class UpdateNotAvailable extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateNotYet' />
-      <span className='updateMessage' data-l10n-id='updateNotAvail' />
-      <span className='updateSpacer' />
-      <UpdateHide reset />
+      <span className='message' data-l10n-id='updateNotAvail' />
+      <span className='spacer' />
+      <span className='options'>
+        <UpdateHide reset />
+      </span>
     </div>
   }
 }

js/stores/appStore.js

@@ -360,7 +360,9 @@ const handleAppAction = (action) => {
         })
 
         appActions.showMessageBox({
-          buttons: [locale.translation('ok')],
+          buttons: [
+            {text: locale.translation('ok')}
+          ],
           options: {
             persist: false
           },
@@ -505,13 +507,34 @@ const handleAppAction = (action) => {
       break
     case AppConstants.APP_SHOW_MESSAGE_BOX:
       let notifications = appState.get('notifications')
-      appState = appState.set('notifications', notifications.filterNot((notification) => {
+      notifications = notifications.filterNot((notification) => {
         let message = notification.get('message')
         // action.detail is a regular mutable object only when running tests
         return action.detail.get
           ? message === action.detail.get('message')
           : message === action.detail['message']
-      }).push(Immutable.fromJS(action.detail)))
+      })
+
+      // Insert notification next to those with the same style, or at the end
+      let insertIndex = notifications.size
+      const style = action.detail.get
+        ? action.detail.get('options').get('style')
+        : action.detail['options']['style']
+      if (style) {
+        const styleIndex = notifications.findLastIndex((notification) => {
+          return notification.get('options').get('style') === style
+        })
+        if (styleIndex > -1) {
+          insertIndex = styleIndex
+        } else {
+          // Insert after the last notification with a style
+          insertIndex = notifications.findLastIndex((notification) => {
+            return typeof notification.get('options').get('style') === 'string'
+          }) + 1
+        }
+      }
+      notifications = notifications.insert(insertIndex, Immutable.fromJS(action.detail))
+      appState = appState.set('notifications', notifications)
       break
     case AppConstants.APP_HIDE_MESSAGE_BOX:
       appState = appState.set('notifications', appState.get('notifications').filterNot((notification) => {

less/button.less

@@ -13,7 +13,7 @@
   padding: 0px 20px;
 }
 
-span.browserButton {
+.browserButton {
   cursor: default;
   display: inline-block;
   line-height: 30px;