Redesign dashboard UI on the current Stellar brand

frontend/components/AccountBadge.jsx

@@ -4,31 +4,40 @@ import { knownAccounts } from "../common/known_accounts";
 
 export default class AccountBadge extends React.Component {
   render() {
+    const known =
+      this.props.id != this.props.known ? knownAccounts[this.props.id] : null;
+    const accountUrl = this.props.horizonURL + "/accounts/" + this.props.id;
+
+    // Known entities read by name; the raw key stays one hover away.
+    if (known) {
+      const name = isObject(known) ? known.name : known;
+      return (
+        <span className="account">
+          <a
+            className="account-known"
+            href={accountUrl}
+            target="_blank"
+            rel="noreferrer"
+            title={this.props.id}
+          >
+            {name}
+          </a>
+        </span>
+      );
+    }
+
     return (
       <span className="account">
         <code>
           <a
-            href={this.props.horizonURL + "/accounts/" + this.props.id}
+            href={accountUrl}
             target="_blank"
+            rel="noreferrer"
+            title={this.props.id}
           >
             {this.props.id.substr(0, 4)}
           </a>
         </code>
-        {knownAccounts[this.props.id] && this.props.id != this.props.known ? (
-          isObject(knownAccounts[this.props.id]) ? (
-            <a
-              href={knownAccounts[this.props.id].url}
-              target="_blank"
-              title={knownAccounts[this.props.id].name}
-            >
-              <img src={knownAccounts[this.props.id].icon} />
-            </a>
-          ) : (
-            <span className="account-tag">{knownAccounts[this.props.id]}</span>
-          )
-        ) : (
-          ""
-        )}
       </span>
     );
   }

frontend/components/AccountBalance.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import AmountWidget from "./AmountWidget.jsx";
-import Panel from "muicss/lib/react/panel";
 import axios from "axios";
 import find from "lodash/find";
 
@@ -31,16 +30,11 @@ export default class AccountBalance extends AmountWidget {
     });
   }
 
-  renderName() {
-    return (
-      <span>
-        {this.props.name}:{" "}
-        <code>
-          <a href={this.url} target="_blank">
-            {this.props.id.substr(0, 4)}
-          </a>
-        </code>
-      </span>
-    );
+  name() {
+    return `${this.props.name} balance`;
+  }
+
+  apiUrl() {
+    return this.url;
   }
 }

frontend/components/AmountWidget.jsx

@@ -1,23 +1,26 @@
 import React from "react";
-import Panel from "muicss/lib/react/panel";
 import BigNumber from "bignumber.js";
+import Card from "./ui/Card.jsx";
 
 export default class AmountWidget extends React.Component {
   constructor(props) {
     super(props);
     this.state = { loading: true };
   }
 
-  renderName() {
+  // Subclasses override these.
+  name() {
+    return null;
+  }
+
+  apiUrl() {
     return null;
   }
 
   render() {
     let amountBig;
     let amount;
-    if (this.state.loading) {
-      amountBig = "Loading...";
-    } else {
+    if (!this.state.loading) {
       if (this.state.amount >= 1000000000) {
         amountBig = Math.floor(this.state.amount / 10000000) / 100 + "B";
       } else if (this.state.amount >= 1000000) {
@@ -28,27 +31,32 @@ export default class AmountWidget extends React.Component {
         amountBig = Math.floor(this.state.amount);
       }
 
-      if (this.state.code) {
-        amountBig += ` ${this.state.code}`;
-      }
-
       amount = new BigNumber(this.state.amount).toFormat(7);
     }
 
     return (
-      <Panel>
-        <div className="widget-name">{this.renderName()}</div>
-        <div className="mui--text-display3 mui--text-center">{amountBig}</div>
-        <div className="mui--text-caption mui--text-center">
-          {this.state.loading ? (
-            ""
-          ) : (
-            <span>
+      <Card title={this.name()} apiUrl={this.apiUrl()}>
+        {this.state.loading ? (
+          <div>
+            <div className="amount-hero">
+              <span className="skeleton" style={{ width: "60%" }}></span>
+            </div>
+            <div className="amount-precise">
+              <span className="skeleton" style={{ width: "40%" }}></span>
+            </div>
+          </div>
+        ) : (
+          <div>
+            <div className="amount-hero">
+              {amountBig}
+              <span className="amount-unit">{this.state.code}</span>
+            </div>
+            <div className="amount-precise">
               {amount} {this.state.code}
-            </span>
-          )}
-        </div>
-      </Panel>
+            </div>
+          </div>
+        )}
+      </Card>
     );
   }
 }