formatting profiles

components/core/ApplicationNavigation.js

@@ -70,8 +70,7 @@ const STYLES_PROFILE = css`
   align-items: center;
   justify-content: flex-start;
   transition: 200ms ease all;
-  cursor: pointer;
-
+/*
   :hover {
     color: ${Constants.system.white};
     background-color: ${Constants.system.brand};

components/core/Profile.js

@@ -8,6 +8,7 @@ import SlatePreviewBlock from "~/components/core/SlatePreviewBlock";
 const STYLES_PROFILE = css`
   text-align: center;
   width: 100%;
+  margin-top: 16px;
 `;
 
 const STYLES_PROFILE_IMAGE = css`
@@ -30,10 +31,9 @@ const STYLES_LINK = css`
 
 export default class Profile extends React.Component {
   render() {
-    let data = this.props.creator ? this.props.creator : this.props.data;
+    let data = this.props.creator ? this.props.creator : this.props.data; //do we need this?
     return (
       <div css={STYLES_PROFILE}>
-        <br />
         <img css={STYLES_PROFILE_IMAGE} src={data.data.photo} />
         <div css={STYLES_NAME}>{data.username}</div>
         {/* TODO: replace with real name when added */}

components/core/SlatePreviewBlock.js

@@ -11,9 +11,12 @@ const STYLES_IMAGE_ROW = css`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: center;
   max-height: 186px;
   overflow: hidden;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    justify-content: center;
+  }
 `;
 
 const STYLES_ITEM_BOX = css`
@@ -26,14 +29,15 @@ const STYLES_ITEM_BOX = css`
 `;
 
 export function SlatePreviewRow(props) {
+  let numItems = props.numItems || 5;
   let objects =
-    props.slate.data.objects.length > 5
-      ? props.slate.data.objects.slice(0, 5)
+    props.slate.data.objects.length > numItems
+      ? props.slate.data.objects.slice(0, numItems)
       : props.slate.data.objects;
   return (
     <div css={STYLES_IMAGE_ROW}>
       {objects.map((each) => (
-        <div css={STYLES_ITEM_BOX} style={props.style}>
+        <div key={each.url} css={STYLES_ITEM_BOX} style={props.style}>
           <SlateMediaObjectPreview type={each.type} url={each.url} />
         </div>
       ))}

pages/_/profile.js

@@ -15,29 +15,15 @@ export const getServerSideProps = async (context) => {
 };
 
 const STYLES_ROOT = css`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${Constants.system.white};
+  display: grid;
+  grid-template-rows: auto 1fr auto;
   text-align: center;
   font-size: 1rem;
+  min-height: 100vh;
 `;
 
 export default class ProfilePage extends React.Component {
-  state = {
-    follow: false, //TODO: get the real trust status from the api
-    trust: false,
-  };
-
-  _handleFollow = () => {};
-
-  _handleTrust = () => {};
-
-  _handleSendMoney = () => {};
-
   render() {
-    console.log(this.props);
     const title = this.props.creator ? `${this.props.creator.username}` : "404";
     const url = `https://slate.host/${title}`;
     const description = this.props.creator.data.body;
@@ -51,12 +37,9 @@ export default class ProfilePage extends React.Component {
       >
         <div css={STYLES_ROOT}>
           <WebsitePrototypeHeader />
-          <Profile
-            {...this.props}
-            onFollow={this._handleFollow}
-            onTrust={this._handleTrust}
-            onSendMoney={this._handleSendMoney}
-          />
+          <div style={{ marginTop: "80px" }}>
+            <Profile {...this.props} />
+          </div>
           <WebsitePrototypeFooter />
         </div>
       </WebsitePrototypeWrapper>