diff --git a/internal_packages/preferences/lib/tabs/preferences-identity.jsx b/internal_packages/preferences/lib/tabs/preferences-identity.jsx index 584a5d0be..6d2567ebe 100644 --- a/internal_packages/preferences/lib/tabs/preferences-identity.jsx +++ b/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 = ( + + Refreshing... + + ) + } else { + refresh = ( + + Refresh + + ) + } + return (
-
Nylas ID:
+
+ Nylas ID: + {refresh} +
diff --git a/internal_packages/preferences/stylesheets/preferences-identity.less b/internal_packages/preferences/stylesheets/preferences-identity.less index a47acbc2c..9fc5b4af7 100644 --- a/internal_packages/preferences/stylesheets/preferences-identity.less +++ b/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; diff --git a/static/images/preferences/identity/ic-refresh@2x.png b/static/images/preferences/identity/ic-refresh@2x.png new file mode 100644 index 000000000..683b65410 Binary files /dev/null and b/static/images/preferences/identity/ic-refresh@2x.png differ