misc style changes

components/core/Application.js

@@ -481,9 +481,11 @@ export default class ApplicationPage extends React.Component {
 
     // NOTE(jim): Authenticated.
     const navigation = NavigationData.generate(this.state.viewer);
+    console.log(navigation);
     const next = this.state.history[this.state.currentIndex];
     const current = NavigationData.getCurrentById(navigation, next.id);
     console.log(this.state.history);
+    console.log(current);
 
     const navigationElement = (
       <ApplicationNavigation

components/core/Profile.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
+import { ProcessedText } from "~/components/system/components/Typography";
 
 import SlatePreviewBlock from "~/components/core/SlatePreviewBlock";
 
@@ -23,7 +24,18 @@ const STYLES_PROFILE_IMAGE = css`
 
 const STYLES_NAME = css`
   font-size: ${Constants.typescale.lvl3};
-  margin: 16px 0px;
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  padding: 0 24px 0 24px;
+`;
+
+const STYLES_DESCRIPTION = css`
+  font-size: ${Constants.typescale.lvl1};
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  padding: 0 24px 0 24px;
 `;
 
 const STYLES_LINK = css`
@@ -40,11 +52,22 @@ export default class Profile extends React.Component {
           css={STYLES_PROFILE_IMAGE}
           style={{ backgroundImage: `url('${data.data.photo}')` }}
         />
-        <div css={STYLES_NAME}>{data.username}</div>
+        <br />
+        <div css={STYLES_NAME}>{data.data.name || data.username}</div>
+        <br />
+        {data.data.body ? (
+          <React.Fragment>
+            <div css={STYLES_DESCRIPTION}>
+              <ProcessedText text={data.data.body} />
+            </div>
+            <br />
+          </React.Fragment>
+        ) : null}
+        <br />
         {this.props.buttons}
         <br />
         {data.slates && data.slates.length ? (
-          <div style={{ width: "100%" }}>
+          <div>
             {data.slates.map((slate) => {
               const url = `/${data.username}/${slate.slatename}`;
               if (this.props.onAction) {

components/sidebars/SidebarCreateSlate.js

@@ -28,12 +28,19 @@ export default class SidebarCreateSlate extends React.Component {
       name: this.state.name,
     });
 
+    console.log(response);
+
     if (response && response.error) {
       // TODO(jim): Error task.
       alert(response.decorator);
     }
 
     this.setState({ loading: false });
+    this.props.onAction({
+      type: "NAVIGATE",
+      value: response.slate.id,
+      data: response.slate,
+    });
   };
 
   _handleCancel = () => {

pages/_/profile.js

@@ -37,7 +37,7 @@ export default class ProfilePage extends React.Component {
       >
         <div css={STYLES_ROOT}>
           <WebsitePrototypeHeader />
-          <div style={{ marginTop: "80px" }}>
+          <div style={{ margin: "80px 24px 0px 24px" }}>
             <Profile {...this.props} />
           </div>
           <WebsitePrototypeFooter />

scenes/SceneDirectory.js

@@ -239,7 +239,6 @@ export default class SceneDirectory extends React.Component {
           />
         );
       });
-
     return (
       <ScenePage>
         <ScenePageHeader title="Directory" />

scenes/SceneProfile.js

@@ -5,7 +5,10 @@ import * as Constants from "~/common/constants";
 import * as SVG from "~/components/system/svg";
 
 import { css } from "@emotion/react";
-import { ButtonPrimary } from "~/components/system/components/Buttons";
+import {
+  ButtonPrimary,
+  ButtonSecondary,
+} from "~/components/system/components/Buttons";
 
 import ScenePage from "~/components/core/ScenePage";
 import Profile from "~/components/core/Profile";
@@ -19,18 +22,6 @@ const BUTTON_STYLES = {
   minHeight: "30px",
 };
 
-const BUTTON_SECONDARY_STYLE = {
-  ...BUTTON_STYLES,
-  backgroundColor: Constants.system.white,
-  color: Constants.system.brand,
-};
-
-const BUTTON_PRIMARY_STYLE = {
-  ...BUTTON_STYLES,
-  backgroundColor: Constants.system.brand,
-  color: Constants.system.white,
-};
-
 const STATUS_BUTTON_MAP = {
   trusted: "Remove peer",
   untrusted: "Add peer",
@@ -151,36 +142,46 @@ export default class SceneProfile extends React.Component {
   render() {
     let buttons = (
       <div>
-        <ButtonPrimary
-          style={
-            this.state.followStatus
-              ? BUTTON_SECONDARY_STYLE
-              : BUTTON_PRIMARY_STYLE
-          }
-          onClick={this._handleFollow}
-        >
-          {this.state.followStatus ? "Unfollow" : "Follow"}
-        </ButtonPrimary>
-        <ButtonPrimary
-          style={
-            this.state.trustStatus === "untrusted" ||
-            this.state.trustStatus === "received"
-              ? BUTTON_PRIMARY_STYLE
-              : BUTTON_SECONDARY_STYLE
-          }
-          onClick={this._handleTrust}
-        >
-          {STATUS_BUTTON_MAP[this.state.trustStatus]}
-        </ButtonPrimary>
-        {this.state.isTrusted ? (
+        {this.state.followStatus ? (
+          <ButtonSecondary
+            style={{ margin: "0px 8px" }}
+            onClick={this._handleFollow}
+          >
+            Unfollow
+          </ButtonSecondary>
+        ) : (
+          <ButtonPrimary
+            style={{ margin: "0px 8px" }}
+            onClick={this._handleFollow}
+          >
+            Follow
+          </ButtonPrimary>
+        )}
+        {this.state.trustStatus === "untrusted" ||
+        this.state.trustStatus === "received" ? (
+          <ButtonPrimary
+            style={{ margin: "0px 8px" }}
+            onClick={this._handleTrust}
+          >
+            {STATUS_BUTTON_MAP[this.state.trustStatus]}
+          </ButtonPrimary>
+        ) : (
+          <ButtonSecondary
+            style={{ margin: "0px 8px" }}
+            onClick={this._handleTrust}
+          >
+            {STATUS_BUTTON_MAP[this.state.trustStatus]}
+          </ButtonSecondary>
+        )}
+        {/* {this.state.trustStatus === "trusted" ? (
           <ButtonPrimary style={BUTTON_STYLE} onClick={this._handleSendMoney}>
             Send Money
           </ButtonPrimary>
-        ) : null}
+        ) : null} */}
       </div>
     );
     return (
-      <ScenePage style={{ padding: `88px 24px 128px 24px` }}>
+      <ScenePage>
         <Profile
           onAction={this.props.onAction}
           creator={this.props.data}

scenes/SceneSlate.js

@@ -5,6 +5,7 @@ import * as Constants from "~/common/constants";
 import * as SVG from "~/components/system/svg";
 
 import { css } from "@emotion/react";
+import { ProcessedText } from "~/components/system/components/Typography";
 
 import ScenePage from "~/components/core/ScenePage";
 import ScenePageHeader from "~/components/core/ScenePageHeader";
@@ -325,7 +326,7 @@ export default class SceneSlate extends React.Component {
             ) : null
           }
         >
-          {body}
+          <ProcessedText text={body} />
         </ScenePageHeader>
         <Slate
           key={slatename}