fix(pro): Add manual refresh to identity page

internal_packages/preferences/lib/tabs/preferences-identity.jsx

@@ -60,6 +60,7 @@ class PreferencesIdentity extends React.Component {
   constructor() {
     super();
     this.state = this.getStateFromStores();
+    this.state.refreshing = false;
   }
 
   componentDidMount() {
@@ -80,6 +81,13 @@ class PreferencesIdentity extends React.Component {
     };
   }
 
+  _onRefresh = () => {
+    this.setState({refreshing: true});
+    IdentityStore.refreshStatus().finally(() => {
+      this.setState({refreshing: false});
+    });
+  }
+
   _renderPaymentRow() {
     const {identity, daysUntilSubscriptionRequired, subscriptionState} = this.state
 
@@ -120,12 +128,30 @@ class PreferencesIdentity extends React.Component {
   }
 
   render() {
-    const {identity} = this.state;
+    const {identity, refreshing} = this.state;
     const {firstname, lastname, email} = identity;
 
+    let refresh = null;
+    if (refreshing) {
+      refresh = (
+        <a className="refresh spinning" onClick={this._onRefresh}>
+          Refreshing... <RetinaImg style={{verticalAlign: 'sub'}} name="ic-refresh.png" mode={RetinaImg.Mode.ContentIsMask} />
+        </a>
+      )
+    } else {
+      refresh = (
+        <a className="refresh" onClick={this._onRefresh}>
+          Refresh <RetinaImg style={{verticalAlign: 'sub'}} name="ic-refresh.png" mode={RetinaImg.Mode.ContentIsMask} />
+        </a>
+      )
+    }
+
     return (
       <div className="container-identity">
-        <div className="id-header">Nylas ID:</div>
+        <div className="id-header">
+          Nylas ID:
+          {refresh}
+        </div>
         <div className="identity-content-box">
           <div className="row info-row">
             <div className="logo">

internal_packages/preferences/stylesheets/preferences-identity.less

@@ -1,5 +1,7 @@
 @import "ui-variables";
 
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
 .container-identity {
   width: 50%;
   min-width: 530px;
@@ -11,6 +13,16 @@
     margin-bottom: @padding-base-vertical * 2;
   }
 
+  .refresh {
+    float: right;
+    color: @text-color-very-subtle;
+    margin-bottom: @padding-base-vertical * 2;
+    img { background-color: @text-color-very-subtle; }
+  }
+  .refresh.spinning img {
+    animation:spin 1.4s linear infinite;
+  }
+
   .identity-content-box {
     display: flex;
     flex-direction: column;