Merge pull request #205 from filecoin-project/@martinalong/misc-style-improvements

@martinalong/misc style improvements

components/core/SearchModal.js

@@ -59,7 +59,7 @@ const UserEntry = ({ item }) => {
           style={{ backgroundImage: `url(${item.data.photo})` }}
           css={STYLES_PROFILE_IMAGE}
         />
-        {item.data.name ? <strong>{item.data.name}</strong> : null}
+        {item.data.name ? <div>{item.data.name}</div> : null}
         <div>@{item.username}</div>
       </div>
     </div>

components/core/SlatePreviewBlock.js

@@ -1,9 +1,10 @@
-import React, { Component } from "react";
-
+import * as React from "react";
 import * as Constants from "~/common/constants";
 import * as SVG from "~/common/svg";
 
 import { css } from "@emotion/react";
+import { ProcessedText } from "~/components/system/components/Typography";
+
 import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
 
 const STYLES_IMAGE_ROW = css`
@@ -139,6 +140,7 @@ const STYLES_BODY = css`
   font-size: 0.9rem;
   margin-bottom: 24px;
   line-height: 20px;
+  white-space: pre-wrap;
 `;
 
 const STYLES_CREATE_NEW = css`
@@ -152,7 +154,7 @@ const STYLES_CREATE_NEW = css`
   height: 160px;
 `;
 
-export default class SlatePreviewBlock extends Component {
+export default class SlatePreviewBlock extends React.Component {
   _ref;
 
   state = {
@@ -175,14 +177,14 @@ export default class SlatePreviewBlock extends Component {
     return (
       <div css={STYLES_BLOCK}>
         <div css={STYLES_TITLE_LINE}>
-          <strong
+          <div
             style={{
               fontSize: Constants.typescale.lvl2,
               fontFamily: Constants.font.semiBold,
             }}
           >
             {this.props.slate.data.name}
-          </strong>
+          </div>
           {this.props.editing ? (
             this.props.slate.data.public ? (
               <div
@@ -195,7 +197,13 @@ export default class SlatePreviewBlock extends Component {
                 Public
               </div>
             ) : (
-              <div css={STYLES_TAG} style={{ opacity: "25%" }}>
+              <div
+                css={STYLES_TAG}
+                style={{
+                  color: "rgba(0,0,0,0.25)",
+                  borderColor: "rgba(0,0,0,0.25)",
+                }}
+              >
                 Private
               </div>
             )
@@ -212,7 +220,9 @@ export default class SlatePreviewBlock extends Component {
           ) : null}
         </div>
         {this.props.slate.data.body ? (
-          <div css={STYLES_BODY}>{this.props.slate.data.body}</div>
+          <div css={STYLES_BODY}>
+            <ProcessedText text={this.props.slate.data.body} />
+          </div>
         ) : (
           <div style={{ height: "8px" }} />
         )}

components/core/TabGroup.js

@@ -37,7 +37,10 @@ export class TabGroup extends React.Component {
             css={STYLES_TAB}
             key={tab}
             style={{
-              opacity: this.props.value === i ? "100%" : "25%",
+              color:
+                this.props.value === i
+                  ? Constants.system.black
+                  : "rgba(0,0,0,0.25)",
             }}
             onClick={() => this.props.onChange(i)}
           >

pages/api/slates/get-serialized.js

@@ -4,7 +4,7 @@ import * as Strings from "~/common/strings";
 
 export default async (req, res) => {
   let slate = await Data.getSlateById({ id: req.body.data.id });
-  if (!slate) {
+  if (!slate || slate.error) {
     return res.status(404).send({
       decorator: "SLATE_NOT_FOUND",
       error: true,
@@ -13,7 +13,7 @@ export default async (req, res) => {
   slate = Serializers.slate(slate);
 
   let user = await Data.getUserById({ id: slate.data.ownerId });
-  if (!user) {
+  if (!user || user.error) {
     return res.status(200).send({
       decorator: "SLATE_OWNER_NOT_FOUND",
       data: slate,

pages/api/users/get-serialized.js

@@ -4,7 +4,7 @@ import * as Strings from "~/common/strings";
 
 export default async (req, res) => {
   let user = await Data.getUserById({ id: req.body.data.id });
-  if (!user) {
+  if (!user || user.error) {
     return res.status(404).send({
       decorator: "USER_NOT_FOUND",
       error: true,
@@ -16,6 +16,14 @@ export default async (req, res) => {
     userId: req.body.data.id,
     publicOnly: true,
   });
+  if (slates.error) {
+    if (!user || user.error) {
+      return res.status(404).send({
+        decorator: "SLATES_NOT_FOUND",
+        error: true,
+      });
+    }
+  }
   user.slates = [];
   for (let slate of slates) {
     user.slates.push(Serializers.slate(slate));