Merge pull request #242 from filecoin-project/@martinalong/sidebars

New sidebar designs
2024-12-25 18:13:10 +03:00 · 2020-09-09 20:31:00 -07:00 · 2020-09-09 20:31:00 -07:00 · 8c23f4b53a
commit 8c23f4b53a
parent 78abfedfb0 63234352c4
31 changed files with 260 additions and 130 deletions
--- a/common/svg.js
+++ b/common/svg.js
@ -109,7 +109,7 @@ export const Activity = (props) => {
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
-      strokeWidth="1"
+      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      height={props.height}
@ -317,26 +317,6 @@ export const Home = (props) => (
  </svg>
 );

-export const Image = (props) => (
-  <svg
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    height={props.height}
-    style={props.style}
-  >
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m21.207 4.5-.00000002-.00000002c.187549.187493.292943.441805.293.707v17.293c0 .552285-.447715 1-1 1h-17-.00000004c-.552285-.00000002-1-.447715-1-1v-21 .00000015c-.00000008-.552285.447715-1 1-1h13.293.00000001c.265195.00005664.519507.105451.707.293z" />
-      <path d="m12.826 12.366-2.8-3.74.00000001.00000002c-.165798-.22083-.479221-.265442-.700051-.0996437-.0578698.0434484-.105619.0989405-.139949.162644l-3.276 6.074.00000001-.00000002c-.130892.24315-.0398879.546371.203262.677262.0727636.0391698.154101.0596942.236738.0597376h4.181" />
-      <path d="m17.3284 13.1716c1.5621 1.5621 1.5621 4.09476 0 5.65685-1.5621 1.5621-4.09476 1.5621-5.65685 0-1.5621-1.5621-1.5621-4.09476 0-5.65685 1.5621-1.5621 4.09476-1.5621 5.65685 0" />
-    </g>
-  </svg>
-);
-
 // export const Folder = (props) => (
 //   <svg
 //     viewBox="0 0 24 24"
@ -739,7 +719,7 @@ export const Video = (props) => (
  </svg>
 );

-export const NoImage = (props) => (
+export const Image = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height={props.height}
@ -751,8 +731,9 @@ export const NoImage = (props) => (
    strokeLinecap="round"
    strokeLinejoin="round"
  >
-    <path d="M1 1L23 23" />
-    <path d="M15.28 15.28C14.9481 15.765 14.5134 16.171 14.0068 16.469C13.5002 16.7669 12.9342 16.9496 12.3489 17.004C11.7637 17.0584 11.1737 16.9831 10.6209 16.7836C10.0681 16.5841 9.56601 16.2652 9.15042 15.8496C8.73483 15.434 8.41593 14.9319 8.2164 14.3791C8.01688 13.8263 7.94163 13.2363 7.99601 12.6511C8.05039 12.0658 8.23306 11.4998 8.53103 10.9932C8.829 10.4866 9.23495 10.0519 9.72 9.72M21 21H3C2.46957 21 1.96086 20.7893 1.58579 20.4142C1.21071 20.0391 1 19.5304 1 19V8C1 7.46957 1.21071 6.96086 1.58579 6.58579C1.96086 6.21071 2.46957 6 3 6H6L21 21ZM9 3H15L17 6H21C21.5304 6 22.0391 6.21071 22.4142 6.58579C22.7893 6.96086 23 7.46957 23 8V17.34L9 3Z" />
+    <path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" />
+    <path d="M8.5 10C9.32843 10 10 9.32843 10 8.5C10 7.67157 9.32843 7 8.5 7C7.67157 7 7 7.67157 7 8.5C7 9.32843 7.67157 10 8.5 10Z" />
+    <path d="M21 15L16 10L5 21" />
  </svg>
 );

--- a/components/core/ApplicationLayout.js
+++ b/components/core/ApplicationLayout.js
@ -111,12 +111,12 @@ const STYLES_SIDEBAR_WEB = css`
  width: ${Constants.sizes.sidebar}px;
  padding: 0;
  flex-shrink: 0;
-  position: fixed;
-  background-color: ${Constants.system.foreground};
+  position: absolute;
+  background-color: rgba(247, 247, 247, 0.75);
+  -webkit-backdrop-filter: blur(75px);
+  backdrop-filter: blur(25px);
  top: 0;
  right: 0;
-  bottom: 0;
-  box-shadow: inset 1px 0 0 0 ${Constants.system.border};
  ${STYLES_SCROLL}
  @media (max-width: ${Constants.sizes.mobile}px) {
    display: none;
@ -130,10 +130,11 @@ const STYLES_SIDEBAR_HEADER = css`
 `;

 const STYLES_SIDEBAR_CONTENT = css`
-  padding: 30px 24px 24px 24px;
+  padding: 8px 24px 24px 24px;
 `;

 const STYLES_BLOCK = css`
+  margin-top: 8px;
  height: 56px;
  width: 56px;
  display: inline-flex;
@ -141,6 +142,7 @@ const STYLES_BLOCK = css`
  justify-content: center;
  transition: 200ms ease all;
  cursor: pointer;
+  color: rgba(0, 0, 0, 0.25);
 `;

 export default class ApplicationLayout extends React.Component {
--- a/components/core/ApplicationNavigation.js
+++ b/components/core/ApplicationNavigation.js
@ -66,9 +66,7 @@ const STYLES_CHILDREN = css`
  overflow-wrap: break-word;
  padding: 11px 0px 14px 8px;
  font-family: ${Constants.font.medium};
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.225;
+  font-size: ${Constants.typescale.lvl1};
  position: relative;
  display: flex;
  align-items: flex-start;
--- a/components/core/ApplicationUserControls.js
+++ b/components/core/ApplicationUserControls.js
@ -32,11 +32,9 @@ const STYLES_PROFILE = css`
  min-width: 10%;
  width: 204px;

-  font-family: ${Constants.font.semiBold};
  color: ${Constants.system.pitchBlack};
  background-color: ${Constants.system.white};
  font-size: 12px;
-  line-height: 12px;
  text-decoration: none;
  border-radius: 4px;
  min-height: 48px;
@ -88,7 +86,7 @@ const STYLES_PROFILE_USERNAME = css`
  padding: 12px;
  user-select: none;
  font-family: ${Constants.font.medium};
-  font-size: 14px;
+  font-size: ${Constants.typescale.lvl1};
 `;

 const STYLES_ITEM_BOX_MOBILE = css`
--- a/components/core/Profile.js
+++ b/components/core/Profile.js
@ -13,6 +13,7 @@ const STYLES_PROFILE = css`
 `;

 const STYLES_PROFILE_IMAGE = css`
+  background-color: ${Constants.system.foreground};
  background-size: cover;
  background-position: 50% 50%;
  width: 152px;
--- a/components/core/ScenePage.js
+++ b/components/core/ScenePage.js
@ -6,7 +6,7 @@ import { css } from "@emotion/react";
 const STYLES_SCENE = css`
  flex-shrink: 0;
  width: 100%;
-  padding: 88px 48px 128px 48px;
+  padding: 82px 48px 128px 48px;
  display: block;

  @media (max-width: ${Constants.sizes.mobile}px) {
--- a/components/core/SearchModal.js
+++ b/components/core/SearchModal.js
@ -44,6 +44,7 @@ const STYLES_USER_ENTRY_CONTAINER = css`
 `;

 const STYLES_PROFILE_IMAGE = css`
+  background-color: ${Constants.system.foreground};
  background-size: cover;
  background-position: 50% 50%;
  height: 24px;
--- a/components/core/SlateMediaObjectPreview.js
+++ b/components/core/SlateMediaObjectPreview.js
@ -5,6 +5,7 @@ import * as SVG from "~/common/svg";
 import { css } from "@emotion/react";

 const STYLES_IMAGE = css`
+  background-color: ${Constants.system.foreground};
  display: block;
  max-width: 100%;
  max-height: 100%;
@ -53,7 +54,7 @@ export default class SlateMediaObjectPreview extends React.Component {
    let element = (
      <article css={STYLES_ENTITY} style={this.props.style}>
        <div>
-          <SVG.NoImage height="24px" />
+          <SVG.Document height="24px" />
        </div>
        {this.props.title && !this.props.small ? (
          <div css={STYLES_TITLE}>{title}</div>
--- a/components/core/TabGroup.js
+++ b/components/core/TabGroup.js
@ -4,13 +4,12 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";

 const STYLES_TAB_GROUP = css`
-  margin: 36px 0px 24px 0px;
+  margin: 44px 0px 24px 0px;
  padding: 0 0 0 2px;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  box-sizing: border-box;
-  font-family: ${Constants.font.text};
  width: 100%;
 `;

@ -18,8 +17,8 @@ const STYLES_TAB = css`
  padding: 8px 8px 8px 0px;
  margin-right: 24px;
  display: inline-block;
-  font-size: ${Constants.typescale.lvl1};
  font-family: ${Constants.font.medium};
+  font-size: ${Constants.typescale.lvl1};
  user-select: none;

  @media (max-width: ${Constants.sizes.mobile}px) {
--- a/components/sidebars/SidebarAddFileToBucket.js
+++ b/components/sidebars/SidebarAddFileToBucket.js
@ -3,6 +3,7 @@ import * as Constants from "~/common/constants";
 import * as Strings from "~/common/strings";
 import * as System from "~/components/system";
 import * as Validations from "~/common/validations";
+import * as SVG from "~/common/svg";

 import { css } from "@emotion/react";
 import { DataMeterBar } from "~/components/core/DataMeter";
@ -61,6 +62,13 @@ const STYLES_PERFORMANCE = css`
  margin: 0 0 8px 0;
 `;

+const STYLES_ICONS = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 64px 0;
+`;
+
 export default class SidebarAddFileToBucket extends React.Component {
  _handleUpload = async (e) => {
    e.persist();
@ -135,7 +143,13 @@ export default class SidebarAddFileToBucket extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+            marginBottom: "64px",
+          }}
+        >
          Upload Data
        </System.P>
        <input
@ -146,12 +160,31 @@ export default class SidebarAddFileToBucket extends React.Component {
          onChange={this._handleUpload}
        />

-        {this.props.data && this.props.data.decorator === "SLATE" ? (
-          <System.P style={{ marginTop: 24 }}>
-            This will add data to your Slate named{" "}
-            <strong>{this.props.data.slatename}</strong>.
-          </System.P>
-        ) : null}
+        <div css={STYLES_ICONS}>
+          <SVG.Sound height="24px" style={{ margin: "0 16px" }} />
+          <SVG.Document height="24px" style={{ margin: "0 16px" }} />
+          <SVG.Image height="24px" style={{ margin: "0 16px" }} />
+          <SVG.Book height="24px" style={{ margin: "0 16px" }} />
+          <SVG.Video height="24px" style={{ margin: "0 16px" }} />
+        </div>
+
+        <System.P style={{ marginTop: 24 }}>
+          Click below or drop a file anywhere on the page to upload a file
+          {this.props.data &&
+          (this.props.data.slatename ||
+            (this.props.data.data && this.props.data.data.name)) ? (
+            <span>
+              {" "}
+              to{" "}
+              <strong>
+                {this.props.data.data.name || this.props.data.slatename}
+              </strong>
+            </span>
+          ) : (
+            ""
+          )}
+          .
+        </System.P>

        {!this.props.fileLoading ? (
          <System.ButtonPrimary
--- a/components/sidebars/SidebarAddMiner.js
+++ b/components/sidebars/SidebarAddMiner.js
@ -24,7 +24,12 @@ export default class SidebarAddMiner extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Add a miner
        </System.P>
      </React.Fragment>
--- a/components/sidebars/SidebarAddPeer.js
+++ b/components/sidebars/SidebarAddPeer.js
@ -24,7 +24,12 @@ export default class SidebarAddPeer extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Add a peer
        </System.P>
      </React.Fragment>
--- a/components/sidebars/SidebarCreatePaymentChannel.js
+++ b/components/sidebars/SidebarCreatePaymentChannel.js
@ -46,7 +46,12 @@ export default class SidebarCreatePaymentChannel extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Create a payment channel
        </System.P>

--- a/components/sidebars/SidebarCreateSlate.js
+++ b/components/sidebars/SidebarCreateSlate.js
@ -57,22 +57,44 @@ export default class SidebarCreateSlate extends React.Component {
  render() {
    return (
      <div>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+            marginBottom: "64px",
+          }}
+        >
          Create Slate
        </System.P>

+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: "1.1rem",
+          }}
+        >
+          Name
+        </System.P>
        <System.Input
-          containerStyle={{ marginTop: 24 }}
-          label="Slate name"
          name="name"
+          style={{ marginTop: 12 }}
+          placeholder="Slate name..."
          value={this.state.name}
          onChange={this._handleChange}
          onSubmit={this._handleSubmit}
        />

-        <System.P style={{ marginTop: 24 }}>
-          This will create a new slate address at https://slate.host/
-          {this.props.viewer.username}/{Strings.createSlug(this.state.name)}
+        <System.P style={{ marginTop: 12 }}>
+          Your slate URL will be:{" "}
+          <a
+            href={`${this.props.viewer.username}/${Strings.createSlug(
+              this.state.name
+            )}`}
+            target="_blank"
+          >
+            https://slate.host/
+            {this.props.viewer.username}/{Strings.createSlug(this.state.name)}
+          </a>
        </System.P>

        <System.ButtonPrimary
--- a/components/sidebars/SidebarCreateWalletAddress.js
+++ b/components/sidebars/SidebarCreateWalletAddress.js
@ -57,7 +57,12 @@ export default class SidebarCreateWalletAddress extends React.Component {
  render() {
    return (
      <div>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Create a new address
        </System.P>

--- a/components/sidebars/SidebarDeleteWalletAddress.js
+++ b/components/sidebars/SidebarDeleteWalletAddress.js
@ -23,7 +23,12 @@ export default class SidebarDeleteWalletAddress extends React.Component {
  render() {
    return (
      <div>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Are you sure you want to delete the selected wallet?
        </System.P>

--- a/components/sidebars/SidebarDragDropNotice.js
+++ b/components/sidebars/SidebarDragDropNotice.js
@ -6,6 +6,13 @@ import * as System from "~/components/system";

 import { css } from "@emotion/react";

+const STYLES_ICONS = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 64px 0;
+`;
+
 export default class SidebarDragDropNotice extends React.Component {
  state = {};

@ -24,11 +31,26 @@ export default class SidebarDragDropNotice extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>Drag & Drop</System.P>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
+          Drag & Drop
+        </System.P>
+        <div css={STYLES_ICONS}>
+          <SVG.Sound height="24px" style={{ margin: "0 16px" }} />
+          <SVG.Document height="24px" style={{ margin: "0 16px" }} />
+          <SVG.Image height="24px" style={{ margin: "0 16px" }} />
+          <SVG.Book height="24px" style={{ margin: "0 16px" }} />
+          <SVG.Video height="24px" style={{ margin: "0 16px" }} />
+        </div>
        <System.P style={{ marginTop: 24 }}>
-          Drop your data anywhere on the screen to add it to your data bucket. <br />
+          Drag and drop a file anywhere on the screen to add it to your data.{" "}
          <br />
-          If you drop your data onto your slate page you will add the data to your slate.
+          <br />
+          Dropping a file while on a slate page will add it to that slate.
        </System.P>
      </React.Fragment>
    );
--- a/components/sidebars/SidebarFileRetrievalDeal.js
+++ b/components/sidebars/SidebarFileRetrievalDeal.js
@ -24,7 +24,12 @@ export default class SidebarFileRetrievalDeal extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Retrieve file
        </System.P>
      </React.Fragment>
--- a/components/sidebars/SidebarFileStorageDeal.js
+++ b/components/sidebars/SidebarFileStorageDeal.js
@ -101,7 +101,12 @@ export default class SidebarFileStorageDeal extends React.Component {

    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Make Filecoin storage deal
        </System.P>

--- a/components/sidebars/SidebarFilecoinArchive.js
+++ b/components/sidebars/SidebarFilecoinArchive.js
@ -39,7 +39,12 @@ export default class SidebarFilecoinArchive extends React.Component {

    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Make Filecoin storage deal
        </System.P>

--- a/components/sidebars/SidebarNotifications.js
+++ b/components/sidebars/SidebarNotifications.js
@ -37,7 +37,12 @@ export default class SidebarNotifications extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Notifications
        </System.P>
        {this.props.viewer.notifications.map((n) => {
--- a/components/sidebars/SidebarRedeemPaymentChannel.js
+++ b/components/sidebars/SidebarRedeemPaymentChannel.js
@ -24,7 +24,12 @@ export default class SidebarRedeemPaymentChannel extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Redeem Payment Channel
        </System.P>
      </React.Fragment>
--- a/components/sidebars/SidebarSingleSlateSettings.js
+++ b/components/sidebars/SidebarSingleSlateSettings.js
@ -16,7 +16,7 @@ const STYLES_GROUP = css`
 `;

 const STYLES_LEFT = css`
-  padding: 12px 0 0 0;
+  padding: 4px 0 0 0;
  min-width: 10%;
  overflow-wrap: break-word;
  white-space: pre-wrap;
@ -24,10 +24,16 @@ const STYLES_LEFT = css`

 const STYLES_RIGHT = css`
  padding-left: 48px;
-  padding-top: 24px;
+  padding-top: 12px;
  flex-shrink: 0;
 `;

+const STYLES_HEADER = css`
+  font-family: ${Constants.font.semiBold};
+  font-size: 18px;
+  margin-top: 48px;
+`;
+
 export default class SidebarSingleSlateSettings extends React.Component {
  state = {
    slatename: this.props.current.slatename,
@ -105,46 +111,49 @@ export default class SidebarSingleSlateSettings extends React.Component {

  render() {
    console.log(this.props);
-    const { slatename } = this.state;
    const slug = Strings.createSlug(this.state.name);
    const url = `/${this.props.viewer.username}/${slug}`;

    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+            marginBottom: 64,
+          }}
+        >
          Slate Settings
        </System.P>
-        <System.P style={{ marginTop: 24 }}>
-          Update settings for {this.props.current.slatename}.
-        </System.P>

+        <System.P css={STYLES_HEADER}>Name</System.P>
+        <System.P
+          style={{
+            marginTop: 12,
+          }}
+        >
+          Changing the slatename will change your public slate URL. Your slate
+          URL is:{" "}
+          <a href={url} target="_blank">
+            https://slate.host{url}
+          </a>
+        </System.P>
        <System.Input
-          containerStyle={{ marginTop: 48 }}
+          placeholder="Slate name..."
          style={{ marginTop: 24 }}
-          label="Slate name"
-          description={
-            <React.Fragment>
-              Changing the slatename will change your public slate URL. Your
-              slate URL is:{" "}
-              <a href={url} target="_blank">
-                https://slate.host{url}
-              </a>
-            </React.Fragment>
-          }
          name="name"
          value={this.state.name}
          placeholder="Name"
          onChange={this._handleChange}
          onSubmit={this._handleSubmit}
+          descriptionStyle={{ fontSize: "20px !important" }}
+          labelStyle={{ fontSize: "20px" }}
        />

-        <System.DescriptionGroup
-          label="Description"
-          style={{ marginTop: 48 }}
-        />
+        <System.P css={STYLES_HEADER}>Description</System.P>
+
        <System.Textarea
-          style={{ marginTop: 24 }}
-          label="Description"
+          style={{ marginTop: 12 }}
          name="body"
          value={this.state.body}
          placeholder="A slate."
@ -152,12 +161,14 @@ export default class SidebarSingleSlateSettings extends React.Component {
          onSubmit={this._handleSubmit}
        />

-        <div css={STYLES_GROUP} style={{ marginTop: 48 }}>
+        <System.P css={STYLES_HEADER} style={{ marginTop: 48 }}>
+          Privacy
+        </System.P>
+        <div css={STYLES_GROUP} styles={{ margin: 0 }}>
          <div css={STYLES_LEFT}>
-            <System.DescriptionGroup
-              label="Change privacy"
-              description="If enabled, your slate will be visible to anyone in the world. If disabled, your slate will only be visible to you on this screen."
-            />
+            <System.P>
+              {this.state.public ? "Make slate private" : "Make slate public"}
+            </System.P>
          </div>
          <div css={STYLES_RIGHT}>
            <System.Toggle
@ -179,7 +190,12 @@ export default class SidebarSingleSlateSettings extends React.Component {

          {!this.state.loading ? (
            <System.ButtonSecondary
-              style={{ marginTop: 16 }}
+              style={{
+                marginTop: 16,
+                backgroundColor: "#e5e5e5",
+                color: Constants.system.red,
+                boxShadow: "none",
+              }}
              full
              onClick={this._handleCancel}
            >
@ -189,21 +205,21 @@ export default class SidebarSingleSlateSettings extends React.Component {
        </div>

        {!this.state.loading ? (
-          <System.DescriptionGroup
-            style={{ marginTop: 48 }}
-            label="Delete this slate"
-            description="This action is irreversible."
-          />
-        ) : null}
-
-        {!this.state.loading ? (
-          <div style={{ marginTop: 32 }}>
+          <div style={{ marginTop: 48 }}>
            <System.ButtonSecondary
              full
              onClick={this._handleDelete}
              loading={this.state.loading}
+              style={{
+                backgroundColor: "#e5e5e5",
+                color: Constants.system.red,
+                boxShadow: "none",
+              }}
            >
-              Delete {this.props.current.slatename}
+              Delete{" "}
+              {this.props.current.data && this.props.current.data.name
+                ? this.props.current.data.name
+                : this.props.current.slatename}
            </System.ButtonSecondary>
          </div>
        ) : null}
--- a/components/sidebars/SidebarWalletSendFunds.js
+++ b/components/sidebars/SidebarWalletSendFunds.js
@ -72,7 +72,12 @@ export default class SidebarWalletSendFunds extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
+        <System.P
+          style={{
+            fontFamily: Constants.font.semiBold,
+            fontSize: Constants.typescale.lvl3,
+          }}
+        >
          Send Filecoin
        </System.P>

--- a/components/system/components/Input.js
+++ b/components/system/components/Input.js
@ -53,14 +53,11 @@ const STYLES_INPUT = css`
  padding: 0 24px 0 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
-    inset 0 0 0 1px ${Constants.system.darkGray};
+  box-shadow: 0 0 0 1px inset ${Constants.system.border};

  :focus {
    outline: 0;
    border: 0;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07),
-      inset 0 0 0 2px ${Constants.system.brand};
  }

  ::placeholder {
--- a/components/system/components/Textarea.js
+++ b/components/system/components/Textarea.js
@ -24,8 +24,7 @@ const STYLES_TEXTAREA = css`
  border: 0;
  transition: 200ms ease all;
  padding: 16px 24px 16px 24px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
-    inset 0 0 0 1px ${Constants.system.darkGray};
+  box-shadow: 0 0 0 1px inset ${Constants.system.border};
 `;

 export class Textarea extends React.Component {
--- a/components/system/components/Toggle.js
+++ b/components/system/components/Toggle.js
@ -51,8 +51,9 @@ export class Toggle extends React.Component {
          css={STYLES_TOGGLE}
          onClick={this._handleChange}
          style={{
-            backgroundColor: this.props.active ? Constants.system.yellow : null,
-          }}>
+            backgroundColor: this.props.active ? Constants.system.brand : null,
+          }}
+        >
          <figure
            css={STYLES_DIAL}
            style={{ transform: this.props.active ? `translateX(40px)` : null }}
--- a/components/system/components/fragments/DescriptionGroup.js
+++ b/components/system/components/fragments/DescriptionGroup.js
@ -50,12 +50,15 @@ export const DescriptionGroup = (props) => {
  return (
    <div style={{ maxWidth: props.full ? "none" : "480px", ...props.style }}>
      {!Strings.isEmpty(props.label) ? (
-        <div css={STYLES_DESCRIPTION_GROUP_LABEL}>
+        <div css={STYLES_DESCRIPTION_GROUP_LABEL} style={props.labelStyle}>
          {props.label} {props.tooltip ? null : null}
        </div>
      ) : null}
      {!Strings.isEmpty(props.description) ? (
-        <div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>
+        <div
+          css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}
+          style={props.descriptionStyle}
+        >
          {props.description}
        </div>
      ) : null}
--- a/pages/index.js
+++ b/pages/index.js
@ -123,7 +123,7 @@ const STYLES_SECTION_SLATE = css`
  flex-direction: column;
  padding: 88px;
  width: 100vw;
-  background: ${Constants.system.slate};
+  ${"" /* background: ${Constants.system.slate}; */}

  @media (max-width: ${Constants.sizes.mobile}px) {
    padding: 64px 24px;
@ -424,9 +424,9 @@ const STYLES_SLATE_CARD_IMAGE = css`
  }
 `;

-export const getServerSideProps = async context => {
+export const getServerSideProps = async (context) => {
  return {
-    props: { ...context.query }
+    props: { ...context.query },
  };
 };

@ -601,7 +601,7 @@ export default class IndexPage extends React.Component {
                borderRadius: `4px`,
                width: `100%`,
                boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
-                backgroundSize: `cover`
+                backgroundSize: `cover`,
              }}
            />
            <div css={STYLES_TEXT_BLOCK}>
@ -690,7 +690,7 @@ export default class IndexPage extends React.Component {
                      backgroundImage: `url('https://bafybeihez3rtyqqftx7mkyktwozyqjkwdtk2kglxqjc4zspah26bva3yk4.ipfs.slate.textile.io/')`,
                      backgroundSize: `cover`,
                      borderRadius: `4px`,
-                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
+                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
                    }}
                  />
                </div>
@ -707,7 +707,7 @@ export default class IndexPage extends React.Component {
                      backgroundImage: `url('https://bafybeidnt2l3lslxi7ofkxs5ffncsh4fw5h2ohbukxumngrqj5pdrooaou.ipfs.slate.textile.io/')`,
                      backgroundSize: `cover`,
                      borderRadius: `4px`,
-                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
+                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
                    }}
                  />
                </div>
@ -726,7 +726,7 @@ export default class IndexPage extends React.Component {
                      backgroundImage: `url('https://bafkreibb3onijljnmonrbs7qguimjf5qwbnkx3m33pouxbtar2yb7hupti.ipfs.slate.textile.io/')`,
                      backgroundSize: `cover`,
                      borderRadius: `4px`,
-                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
+                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
                    }}
                  />
                </div>
@ -743,7 +743,7 @@ export default class IndexPage extends React.Component {
                      backgroundImage: `url('https://bafkreihu7k46n6eixx6sxjv7aolou5bgvksvb7ryju3gbwie22t6r2dhli.ipfs.slate.textile.io/')`,
                      backgroundSize: `cover`,
                      borderRadius: `4px`,
-                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
+                      boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
                    }}
                  />
                </div>
@ -801,7 +801,7 @@ export default class IndexPage extends React.Component {
                  backgroundImage: `url('https://bafybeicoaponp2nv3ikpsjgcgu7pio6aercflsvsiyxrpaonza7ncg73dq.ipfs.slate.textile.io/')`,
                  backgroundSize: `cover`,
                  borderRadius: `4px`,
-                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
+                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
                }}
              />

@ -819,7 +819,7 @@ export default class IndexPage extends React.Component {
                  backgroundImage: `url('https://bafybeie4p45yfvbjdzc2rgw67e7crcltpu7o544xtugs3wyv3qh3t3oegi.ipfs.slate.textile.io/')`,
                  backgroundSize: `cover`,
                  borderRadius: `4px`,
-                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
+                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
                }}
              />

@ -837,7 +837,7 @@ export default class IndexPage extends React.Component {
                  backgroundImage: `url('https://bafkreiglefskwq7bpa3aazihegawd4qwxockl6shipnps7zlokrbnu4f7u.ipfs.slate.textile.io/')`,
                  backgroundSize: `cover`,
                  borderRadius: `4px`,
-                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
+                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
                }}
              />
            </div>
@ -871,7 +871,7 @@ export default class IndexPage extends React.Component {
                  backgroundImage: `url('https://bafkreiagwjqvmisseb6voj7cwd3lhjudigkel63hqg6efpqjmhlfv5ucj4.ipfs.slate.textile.io/')`,
                  backgroundSize: `cover`,
                  borderRadius: `4px`,
-                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
+                  boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
                }}
              />
            </div>
--- a/scenes/SceneDirectory.js
+++ b/scenes/SceneDirectory.js
@ -60,6 +60,7 @@ const STYLES_ACTION_BUTTON = css`
 `;

 const STYLES_PROFILE_IMAGE = css`
+  background-color: ${Constants.system.foreground};
  background-size: cover;
  background-position: 50% 50%;
  height: 24px;
--- a/scenes/SceneSlate.js
+++ b/scenes/SceneSlate.js
@ -384,7 +384,7 @@ export default class SceneSlate extends React.Component {

    return (
      <ScenePage
-        style={{ padding: `88px 24px 128px 24px` }}
+        style={{ paddingLeft: "24px", paddingRight: "24px" }}
        contentStyle={{ maxWidth: "1660px" }}
      >
        <ScenePageHeader