Merge branch 'main' into @aminejv/multi-download

2024-12-24 01:23:08 +03:00 · 2021-03-05 20:15:47 +01:00 · 2021-03-05 20:15:47 +01:00 · d3ce08f8f7
commit d3ce08f8f7
parent 228d3a9934 3d46e4f87f
15 changed files with 517 additions and 1643 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,5 +1,6 @@
 module.exports = {
  root: true,
+  parser: "@babel/eslint-parser",
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
@ -28,6 +29,7 @@ module.exports = {
    "prettier/prettier": ["error", {}, { usePrettierrc: true }],
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
+    "react/display-name": "off",
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
--- a/common/actions.js
+++ b/common/actions.js
@ -161,7 +161,6 @@ export const search = async (data) => {
  if (Strings.isEmpty(data.resourceURI)) {
    return { decorator: "NO_RESOURCE_URI", data: { results: [] } };
  }
-
  return await returnJSON(`${data.resourceURI}/search`, {
    ...CORS_OPTIONS,
    body: JSON.stringify({ data }),
@ -357,7 +356,7 @@ export const getActivity = async (data) => {
 };

 export const getZipFilePaths = async (data) => {
-  return await returnJSON(`../api/zip/get-paths`, {
+  return await returnJSON(`/api/zip/get-paths`, {
    ...DEFAULT_OPTIONS,
    body: JSON.stringify({ data }),
  });
--- a/common/search.js
+++ b/common/search.js
@ -1,45 +0,0 @@
-createUserSearchResult = (user) => {
-  return {
-    id: user.id,
-    type: "user",
-    name: user.data.name,
-    username: user.username,
-    url: user.data.photo,
-  };
-};
-
-createSlateSearchResult = (slate) => {
-  let files;
-  if (slate.data.objects.length > 3) {
-    files = slate.data.objects.slice(0, 3);
-  } else {
-    files = slate.data.objects;
-  }
-  return {
-    id: slate.id,
-    type: "slate",
-    name: slate.slatename,
-    username: slate.user.username,
-    url: files.map((file) => {
-      return {
-        type: file.type
-          ? file.type.includes("image")
-            ? "image"
-            : "file"
-          : "file",
-        name: file.name,
-        url: file.url,
-      };
-    }),
-  };
-};
-
-createFileSearchResult = (file) => {
-  return {
-    id: file.id,
-    type: file.type ? (file.type.includes("image") ? "image" : "file") : "file",
-    name: file.name,
-    username: file.user.username,
-    url: file.url,
-  };
-};
--- a/common/user-behaviors.js
+++ b/common/user-behaviors.js
@ -309,12 +309,14 @@ export const downloadZip = async (file) => {

    let zip = new JSZip();

-    for (let filePath of filesPaths) {
-      let url = `${baseUrl}/${filePath}`;
-      const blob = await Window.getBlobFromUrl(url);
+    await Promise.all(
+      filesPaths.map(async (filePath) => {
+        let url = `${baseUrl}/${filePath}`;
+        const blob = await Window.getBlobFromUrl(url);

-      zip.file(filePath, blob);
-    }
+        zip.file(filePath, blob);
+      })
+    );

    zip.generateAsync({ type: "blob" }).then((blob) => {
      saveAs(blob, zipFileName);
--- a/components/core/Application.js
+++ b/components/core/Application.js
@ -722,7 +722,6 @@ export default class ApplicationPage extends React.Component {
        </WebsitePrototypeWrapper>
      );
    }
-
    return (
      <React.Fragment>
        <WebsitePrototypeWrapper description={description} title={title} url={url}>
--- a/components/core/CarouselSidebarSlate.js
+++ b/components/core/CarouselSidebarSlate.js
@ -385,9 +385,9 @@ export default class CarouselSidebarSlate extends React.Component {
        if (hasTitle) {
          elements.push(
            <div key="sidebar-media-info-title" css={STYLES_SIDEBAR_SECTION}>
-              <h1 css={STYLES_HEADING}>
+              <div css={STYLES_HEADING}>
                <ProcessedText dark text={this.props.data.title || this.props.data.name} />
-              </h1>
+              </div>
            </div>
          );
        }
@ -395,9 +395,9 @@ export default class CarouselSidebarSlate extends React.Component {
        if (hasBody) {
          elements.push(
            <div key="sidebar-media-info-body" css={STYLES_SIDEBAR_SECTION}>
-              <p css={STYLES_BODY}>
+              <div css={STYLES_BODY}>
                <ProcessedText dark text={this.props.data.body} />
-              </p>
+              </div>
            </div>
          );
        }
--- a/components/core/OnboardingModal.js
+++ b/components/core/OnboardingModal.js
@ -108,7 +108,7 @@ export class OnboardingModal extends React.Component {
    {
      title: "Welcome to Slate",
      text:
-        "Slate is distributed file-sharing network designed for private and public storage. Drag and drop your files into the app to easily start uploading your books, images, and documents.",
+        "Slate is a distributed file-sharing network designed for private and public storage. Drag and drop your files into the app to easily start uploading your books, images, and documents.",
      image: (
        <img
          src="https://slate.textile.io/ipfs/bafybeih4yqlefcbvuuhuyddg5vyfcm7latyifexzynmnbep4dx5hapbbjq"
--- a/components/core/SearchModal.js
+++ b/components/core/SearchModal.js
@ -76,19 +76,19 @@ const STYLES_PROFILE_PREVIEW = css`
  border-radius: 4px;
 `;

-const UserEntry = ({ item }) => {
+const UserEntry = ({ user }) => {
  return (
    <div css={STYLES_ENTRY}>
      <div css={STYLES_ENTRY_CONTAINER}>
-        <div style={{ backgroundImage: `url(${item.data.photo})` }} css={STYLES_PROFILE_PREVIEW} />
+        <div style={{ backgroundImage: `url(${user.data.photo})` }} css={STYLES_PROFILE_PREVIEW} />
        <div css={STYLES_TEXT_ROWS}>
-          {item.data.name ? (
+          {user.data.name ? (
            <React.Fragment>
-              <div css={STYLES_TITLE}>{item.data.name}</div>
-              <div css={STYLES_SUBTITLE}>@{item.username}</div>
+              <div css={STYLES_TITLE}>{user.data.name}</div>
+              <div css={STYLES_SUBTITLE}>@{user.username}</div>
            </React.Fragment>
          ) : (
-            <div css={STYLES_TITLE}>@{item.username}</div>
+            <div css={STYLES_TITLE}>@{user.username}</div>
          )}
        </div>
      </div>
@ -107,15 +107,15 @@ const STYLES_PROFILE_IMAGE = css`
  border-radius: 4px;
 `;

-const UserPreview = ({ item, viewer }) => {
+const UserPreview = ({ user }) => {
  return (
    <div>
-      <div css={STYLES_PROFILE_IMAGE} style={{ backgroundImage: `url('${item.data.photo}')` }} />
-      {item.data.name ? <div css={STYLES_PREVIEW_TEXT}>{item.data.name}</div> : null}
-      <div css={STYLES_PREVIEW_TEXT}>@{item.username}</div>
-      {item.data.slates ? (
+      <div css={STYLES_PROFILE_IMAGE} style={{ backgroundImage: `url('${user.data.photo}')` }} />
+      {user.data.name ? <div css={STYLES_PREVIEW_TEXT}>{user.data.name}</div> : null}
+      <div css={STYLES_PREVIEW_TEXT}>@{user.username}</div>
+      {user.data.slates ? (
        <div css={STYLES_PREVIEW_TEXT}>
-          {item.data.slates.length} Slate{item.data.slates.length === 1 ? "" : "s"}
+          {user.data.slates.length} Slate{user.data.slates.length === 1 ? "" : "s"}
        </div>
      ) : null}
    </div>
@ -159,7 +159,7 @@ const STYLES_SUBTITLE = css`
  word-break: break-all;
 `;

-const SlateEntry = ({ item, viewer }) => {
+const SlateEntry = ({ slate, user }) => {
  return (
    <div css={STYLES_ENTRY}>
      <div css={STYLES_ENTRY_CONTAINER}>
@ -167,12 +167,8 @@ const SlateEntry = ({ item, viewer }) => {
          <SVG.Slate height="24px" />
        </div>
        <div css={STYLES_TEXT_ROWS}>
-          <div css={STYLES_TITLE}>{item.data.name || item.slatename}</div>
-          {viewer ? (
-            <div css={STYLES_SUBTITLE}>{item.data.objects.length} Files</div>
-          ) : item.owner && (item.owner.username || item.owner.data.name) ? (
-            <div css={STYLES_SUBTITLE}>{item.owner.data.name || `@${item.owner.username}`}</div>
-          ) : null}
+          <div css={STYLES_TITLE}>{slate.data.name || slate.slatename}</div>
+          {user ? <div css={STYLES_SUBTITLE}>{user.data.name || `@${user.username}`}</div> : null}
        </div>
      </div>
    </div>
@ -206,16 +202,16 @@ const STYLES_EMPTY_SLATE_PREVIEW = css`
  border: 1px solid ${Constants.system.bgGray};
 `;

-const SlatePreview = ({ item, viewer }) => {
+const SlatePreview = ({ slate, user }) => {
  let preview;
-  for (let obj of item.data.objects) {
+  for (let obj of slate.data.objects) {
    if (obj.type && Validations.isPreviewableImage(obj.type)) {
      preview = obj;
      break;
    }
  }
-  if (!item && item.data.objects && item.data.objects.length) {
-    preview = item.data.objects[0];
+  if (!slate && slate.data.objects && slate.data.objects.length) {
+    preview = slate.data.objects[0];
  }
  return (
    <div style={{ textAlign: "center" }}>
@ -234,24 +230,17 @@ const SlatePreview = ({ item, viewer }) => {
          </div>
        )}
      </div>
-      {viewer || item.owner ? (
-        <div css={STYLES_PREVIEW_TEXT}>
-          Created by:{" "}
-          {viewer
-            ? viewer.data.name || `@${viewer.username}`
-            : item.owner.data.name || `@${item.owner.username}`}
-        </div>
+      {user ? (
+        <div css={STYLES_PREVIEW_TEXT}>Created by: {user.data.name || `@${user.username}`}</div>
      ) : null}
      <div css={STYLES_PREVIEW_TEXT}>
-        {item.data.objects.length} File{item.data.objects.length === 1 ? "" : "s"}
+        {slate.data.objects.length} File{slate.data.objects.length === 1 ? "" : "s"}
      </div>
    </div>
  );
 };

-const FileEntry = ({ item, viewer }) => {
-  let file = item.data.file;
-  let slate = item.data.slate;
+const FileEntry = ({ file }) => {
  return (
    <div css={STYLES_ENTRY}>
      <div css={STYLES_ENTRY_CONTAINER}>
@ -275,9 +264,7 @@ const FileEntry = ({ item, viewer }) => {
  );
 };

-const FilePreview = ({ item, viewer }) => {
-  let file = item.data.file;
-  let slate = item.data.slate;
+const FilePreview = ({ file, slate, user, viewerId }) => {
  return (
    <div style={{ textAlign: "center" }}>
      <div css={STYLES_PREVIEW_IMAGE}>
@ -290,17 +277,12 @@ const FilePreview = ({ item, viewer }) => {
          coverImage={file.coverImage}
        />
      </div>
-      {viewer || (slate && slate.owner) ? (
-        <div css={STYLES_PREVIEW_TEXT}>
-          Owner:{" "}
-          {viewer
-            ? viewer.data.name || `@${viewer.username}`
-            : slate.owner.data.name || `@${slate.owner.username}`}
-        </div>
+      {user ? (
+        <div css={STYLES_PREVIEW_TEXT}>Owner: {user.data.name || `@${user.username}`}</div>
      ) : null}
      {slate ? (
        <div css={STYLES_PREVIEW_TEXT}>Slate: {slate.data.name || slate.slatename}</div>
-      ) : viewer ? (
+      ) : user?.id === viewerId ? (
        <div css={STYLES_PREVIEW_TEXT}>In your files</div>
      ) : null}
    </div>
@ -520,12 +502,11 @@ export class SearchModal extends React.Component {
    let defaultResults = this.props.viewer.slates;
    defaultResults = defaultResults.map((slate) => {
      return {
-        value: {
-          type: "SLATE",
-          data: slate,
-        },
-        component: <SlateEntry item={slate} viewer={this.props.viewer} />,
-        preview: <SlatePreview item={slate} viewer={this.props.viewer} />,
+        id: slate.id,
+        type: "SLATE",
+        data: { slate: slate },
+        component: <SlateEntry slate={slate} user={this.props.viewer} />,
+        preview: <SlatePreview slate={slate} user={this.props.viewer} />,
      };
    });
    this.setState({ defaultResults });
@ -574,7 +555,6 @@ export class SearchModal extends React.Component {
            ...file,
            url: Strings.getCIDGatewayURL(file.cid),
          },
-          index: i,
        },
      };
    });
@ -592,7 +572,6 @@ export class SearchModal extends React.Component {
            data: {
              file,
              slate,
-              index: i,
            },
          };
        })
@ -676,7 +655,7 @@ export class SearchModal extends React.Component {
      e.preventDefault();
    } else if (e.keyCode === 13) {
      if (results.length > this.state.selectedIndex && this.state.selectedIndex >= 0) {
-        this._handleSelect(results[this.state.selectedIndex].value);
+        this._handleSelect(results[this.state.selectedIndex]);
      }
      e.preventDefault();
    }
@ -731,21 +710,26 @@ export class SearchModal extends React.Component {
      for (let item of searchResults) {
        if (item.type === "SLATE") {
          results.push({
-            value: {
-              type: "SLATE",
-              data: item,
-            },
-            component: <SlateEntry item={item} viewer={this.props.viewer} />,
-            preview: <SlatePreview item={item} viewer={this.props.viewer} />,
+            id: slate.id,
+            type: item.type,
+            data: { slate: item },
+            component: <SlateEntry slate={item} user={this.props.viewer} />,
+            preview: <SlatePreview slate={item} user={this.props.viewer} />,
          });
        } else if (item.type === "FILE" || item.type === "DATA_FILE") {
          results.push({
-            value: {
-              type: item.type,
-              data: item,
-            },
-            component: <FileEntry item={item} viewer={this.props.viewer} />,
-            preview: <FilePreview item={item} viewer={this.props.viewer} />,
+            id: item.data.file.id,
+            type: item.type,
+            data: { file: item },
+            component: <FileEntry file={item.data.file} />,
+            preview: (
+              <FilePreview
+                file={item.data.file}
+                slate={item.data.slate}
+                user={this.props.viewer}
+                viewerId={this.props.viewer.id}
+              />
+            ),
          });
        }
      }
@ -757,9 +741,6 @@ export class SearchModal extends React.Component {
        resourceURI: this.props.resourceURI,
        query: this.state.inputValue,
        type: this.state.typeFilter,
-        userId: this.props.viewer.id,
-        filterBy: null,
-        networkIds: this.networkIds || [],
      });
      this.setState({ unfilteredResults: response.data.results });
      res = response.data.results;
@ -767,50 +748,47 @@ export class SearchModal extends React.Component {
      res = this.state.unfilteredResults;
    }
    searchResults = this.processResults(res);
-    for (let item of searchResults) {
-      if (ids.has(item.id)) continue;
-      ids.add(item.id);
-      if (item.type === "USER") {
+    for (let res of searchResults) {
+      if (res.type === "USER") {
+        let id = res.user.id;
+        if (ids.has(id)) continue;
+        ids.add(id);
        results.push({
-          value: {
-            type: "USER",
-            data: item,
-          },
-          component: <UserEntry item={item} />,
-          preview: <UserPreview item={item} viewer={this.props.viewer} />,
+          id,
+          type: res.type,
+          data: res,
+          component: <UserEntry user={res.user} />,
+          preview: <UserPreview user={res.user} />,
        });
-      } else if (item.type === "SLATE") {
+      } else if (res.type === "SLATE") {
+        let id = res.user.id;
+        if (ids.has(id)) continue;
+        ids.add(id);
        results.push({
-          value: {
-            type: "SLATE",
-            data: item,
-          },
-          component: (
-            <SlateEntry
-              item={item}
-              viewer={
-                item.owner && item.owner.id === this.props.viewer.id ? this.props.viewer : null
-              }
-            />
-          ),
+          id,
+          type: res.type,
+          data: res,
+          component: <SlateEntry slate={res.slate} user={res.user} />,
+          preview: <SlatePreview slate={res.slate} user={res.user} />,
+        });
+      } else if (res.type === "FILE") {
+        let id = res.user.id;
+        if (ids.has(id)) continue;
+        ids.add(id);
+        results.push({
+          id,
+          type: res.type,
+          data: res,
+          component: <FileEntry file={res.file} />,
          preview: (
-            <SlatePreview
-              item={item}
-              viewer={
-                item.owner && item.owner.id === this.props.viewer.id ? this.props.viewer : null
-              }
+            <FilePreview
+              file={res.file}
+              slate={res.slate}
+              user={res.user}
+              viewerId={this.props.viewer.id}
            />
          ),
        });
-      } else if (item.type === "FILE") {
-        results.push({
-          value: {
-            type: item.type,
-            data: item,
-          },
-          component: <FileEntry item={item} />,
-          preview: <FilePreview item={item} />,
-        });
      }
    }
    this.setState({ results, selectedIndex: 0 });
@ -828,10 +806,9 @@ export class SearchModal extends React.Component {
      });
    } else if (this.state.scopeFilter === "NETWORK" && this.networkIds && this.networkIds.length) {
      results = results.filter((res) => {
-        let item = res.item;
        if (
-          (item.type === "USER" && this.networkIds.includes(item.id)) ||
-          (item.type === "SLATE" && this.slateIds.includes(item.id)) ||
+          (res.type === "USER" && this.networkIds.includes(res.id)) ||
+          (res.type === "SLATE" && this.slateIds.includes(res.id)) ||
          this.networkIds.includes(res.ownerId)
        ) {
          return true;
@ -854,12 +831,12 @@ export class SearchModal extends React.Component {
          this.state.scopeFilter !== "MY"
        ) {
          let aInNetwork =
-            (a.item.type === "USER" && this.networkIds.includes(a.item.id)) ||
-            (a.item.type === "SLATE" && this.slateIds.includes(a.item.id)) ||
+            (a.type === "USER" && this.networkIds.includes(a.user.id)) ||
+            (a.type === "SLATE" && this.slateIds.includes(a.slate.id)) ||
            this.networkIds.includes(a.ownerId);
          let bInNetwork =
-            (b.item.type === "USER" && this.networkIds.includes(b.item.id)) ||
-            (b.item.type === "SLATE" && this.slateIds.includes(b.item.id)) ||
+            (b.type === "USER" && this.networkIds.includes(b.user.id)) ||
+            (b.type === "SLATE" && this.slateIds.includes(b.slate.id)) ||
            this.networkIds.includes(b.ownerId);
          if (aInNetwork && !bInNetwork) {
            return -1;
@ -870,38 +847,37 @@ export class SearchModal extends React.Component {
        return 0;
      });
    }
-    results = results.map((res) => res.item);
    return results;
  };

-  _handleSelect = async (value) => {
-    if (value.type === "SLATE") {
+  _handleSelect = async (res) => {
+    if (res.type === "SLATE") {
      this.props.onAction({
        type: "NAVIGATE",
        value: "NAV_SLATE",
-        data: value.data,
+        data: res.data.slate,
      });
    }
-    if (value.type === "USER") {
+    if (res.type === "USER") {
      this.props.onAction({
        type: "NAVIGATE",
        value: "NAV_PROFILE",
-        data: value.data,
+        data: res.data.user,
      });
    }
-    if (value.type === "DATA_FILE") {
+    if (res.type === "DATA_FILE") {
      await this.props.onAction({
        type: "NAVIGATE",
        value: "NAV_DATA",
-        index: value.data.data.index,
+        fileId: res.data.file.id,
      });
    }
-    if (value.type === "FILE") {
+    if (res.type === "FILE") {
      await this.props.onAction({
        type: "NAVIGATE",
        value: "NAV_SLATE",
-        data: value.data.data.slate,
-        fileId: value.data.data.file.id,
+        data: res.data.slate,
+        fileId: res.data.file.id,
      });
    }
    this._handleHide();
@ -913,27 +889,25 @@ export class SearchModal extends React.Component {
      this._handleSelect({
        type: "FILE",
        data: {
-          data: {
-            file: { id: "rick-roll" },
-            slate: {
-              id: isProd
-                ? "01edcede-53c9-46b3-ac63-8f8479e10bcf"
-                : "60d199e7-6bf5-4994-94e8-b17547c64449",
-              data: {
-                objects: [
-                  {
-                    id: "rick-roll",
-                    url:
-                      "https://slate.textile.io/ipfs/bafybeifcxjvbad4lgpnbwff2dafufmnlylylmku4qoqtlkwgidupwi6f3a",
-                    ownerId: "owner",
-                    name: "Never gonna give you up",
-                    title: "never-gonna-give-you-up.mp4",
-                    type: "video/mp4",
-                  },
-                ],
-              },
-              ownerId: "owner",
+          file: { id: "rick-roll" },
+          slate: {
+            id: isProd
+              ? "01edcede-53c9-46b3-ac63-8f8479e10bcf"
+              : "60d199e7-6bf5-4994-94e8-b17547c64449",
+            data: {
+              objects: [
+                {
+                  id: "rick-roll",
+                  url:
+                    "https://slate.textile.io/ipfs/bafybeifcxjvbad4lgpnbwff2dafufmnlylylmku4qoqtlkwgidupwi6f3a",
+                  ownerId: "owner",
+                  name: "Never gonna give you up",
+                  title: "never-gonna-give-you-up.mp4",
+                  type: "video/mp4",
+                },
+              ],
            },
+            ownerId: "owner",
          },
        },
      });
@ -1209,11 +1183,7 @@ export class SearchModal extends React.Component {
                    >
                      {results.map((each, i) => (
                        <div
-                          key={
-                            each.value.type === "FILE"
-                              ? `${each.value.data.data.file.id}-${each.value.data.data.slate.id}`
-                              : each.value.data.id
-                          }
+                          key={each.id}
                          css={STYLES_DROPDOWN_ITEM}
                          style={{
                            background:
@ -1224,7 +1194,7 @@ export class SearchModal extends React.Component {
                          }}
                          onClick={() => {
                            selectedIndex === i || this.props.mobile
-                              ? this._handleSelect(each.value)
+                              ? this._handleSelect(each)
                              : this.setState({ selectedIndex: i });
                          }}
                        >
@ -1245,7 +1215,7 @@ export class SearchModal extends React.Component {
                        css={STYLES_PREVIEW_PANEL}
                        onClick={() => {
                          if (selectedIndex >= 0 && selectedIndex < results.length) {
-                            this._handleSelect(results[selectedIndex].value);
+                            this._handleSelect(results[selectedIndex]);
                          }
                        }}
                      >
--- a/components/core/SlatePreviewBlock.js
+++ b/components/core/SlatePreviewBlock.js
@ -296,19 +296,14 @@ export class SlatePreviewBlock extends React.Component {
      <div css={STYLES_BLOCK}>
        <span css={STYLES_MOBILE_HIDDEN}>
          <div css={STYLES_TITLE_LINE}>
-            <div css={STYLES_TITLE} style={{ width: `85%` }}>
+            <div css={STYLES_TITLE} style={{ width: "85%" }}>
              {this.props.slate.data.name}
-            </div>
-
-            {this.props.isOwner && (
-              <div style={{ color: Constants.system.darkGray, margin: `2px 0 0 0` }}>
-                {this.props.isPublic ? (
-                  <SVG.Globe height="20px" />
-                ) : (
+              {this.props.isOwner && !this.props.isPublic && (
+                <span style={{ marginLeft: 8 }}>
                  <SVG.SecurityLock height="20px" />
-                )}
-              </div>
-            )}
+                </span>
+              )}
+            </div>

            {this.props.isOwner ? (
              <div
--- a/components/sidebars/SidebarFAQ.js
+++ b/components/sidebars/SidebarFAQ.js
@ -72,6 +72,14 @@ export default class SidebarFAQ extends React.Component {
            the network by other people.
          </System.P>
        </div>
+
+        <div css={STYLES_GROUPING}>
+          <System.P css={STYLES_HEADER}>When will more storage be available?</System.P>
+          <System.P css={STYLES_TEXT}>
+            50GB of storage free will be coming to Slate soon with email verification!
+          </System.P>
+        </div>
+
        <div css={STYLES_GROUPING}>
          <System.P css={STYLES_HEADER}>Can I get involved?</System.P>
          <System.P css={STYLES_TEXT}>
@ -80,13 +88,15 @@ export default class SidebarFAQ extends React.Component {
          </System.P>
        </div>

-        <System.P
-          css={STYLES_TEXT}
-          style={{ cursor: "pointer" }}
-          onClick={() => this.props.onAction({ type: "SIDEBAR", value: "SIDEBAR_HELP" })}
-        >
-          Still have questions? Send us a message!
-        </System.P>
+        <div css={STYLES_GROUPING}>
+          <System.P
+            css={STYLES_TEXT}
+            style={{ color: Constants.system.brand, cursor: "pointer" }}
+            onClick={() => this.props.onAction({ type: "SIDEBAR", value: "SIDEBAR_HELP" })}
+          >
+            Still have questions? Send us a message!
+          </System.P>
+        </div>
      </div>
    );
  }
--- a/components/sidebars/SidebarHelp.js
+++ b/components/sidebars/SidebarHelp.js
@ -79,6 +79,16 @@ export default class SidebarCreateSlate extends React.Component {
          Talk to us
        </System.P>

+        <div css={STYLES_GROUPING} style={{ marginTop: 24 }}>
+          <System.P
+            css={STYLES_TEXT}
+            style={{ color: Constants.system.brand, cursor: "pointer" }}
+            onClick={() => this.props.onAction({ type: "SIDEBAR", value: "SIDEBAR_FAQ" })}
+          >
+            Check out our FAQ here!
+          </System.P>
+        </div>
+
        <div css={STYLES_GROUPING}>
          <System.P css={STYLES_HEADER}>Your Info</System.P>
          <System.P css={STYLES_TEXT} style={{ marginTop: 12 }}>
@ -127,14 +137,6 @@ export default class SidebarCreateSlate extends React.Component {
        <System.ButtonPrimary full onClick={this._handleSubmit}>
          Send message
        </System.ButtonPrimary>
-
-        <System.P
-          css={STYLES_TEXT}
-          style={{ cursor: "pointer", marginTop: 24 }}
-          onClick={() => this.props.onAction({ type: "SIDEBAR", value: "SIDEBAR_FAQ" })}
-        >
-          In the meantime, feel free to view our FAQ!
-        </System.P>
      </div>
    );
  }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -51,7 +51,7 @@
    "isomorphic-fetch": "^3.0.0",
    "jsonwebtoken": "^8.5.1",
    "jszip": "^3.6.0",
-    "knex": "^0.21.17",
+    "knex": "^0.95.1",
    "minisearch": "^3.0.2",
    "moment": "^2.29.1",
    "morgan": "^1.10.0",
@ -74,7 +74,8 @@
    "ws": "^7.4.3"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@babel/core": "^7.13.8",
+    "@babel/eslint-parser": "^7.13.8",
    "@babel/plugin-proposal-optional-chaining": "^7.12.16",
    "@babel/preset-env": "^7.12.16",
    "@babel/register": "^7.12.13",
--- a/scenes/SceneFilesFolder.js
+++ b/scenes/SceneFilesFolder.js
@ -107,7 +107,7 @@ const STYLES_COMMAND_TOOLTIP_ANCHOR = css`
  width: 275px;
  height: auto;
  position: absolute;
-  top: -11px;
+  top: -7px;
  right: 50px;
  z-index: ${Constants.zindex.tooltip};
  padding-bottom: 15px;
@ -130,6 +130,10 @@ export default class SceneFilesFolder extends React.Component {
    keyboardTooltip: false,
  };

+  componentDidMount = () => {
+    this.openCarouselToItem();
+  };
+
  componentDidUpdate = (prevProps, prevState) => {
    if (prevProps.viewer.library[0].children !== this.props.viewer.library[0].children) {
      if (this.state.filtersActive) {
@ -204,10 +208,6 @@ export default class SceneFilesFolder extends React.Component {
    });
  };

-  componentDidMount = () => {
-    this.openCarouselToItem();
-  };
-
  openCarouselToItem = () => {
    let index = -1;
    let page = this.props.page;
--- a/server.js
+++ b/server.js
@ -401,7 +401,6 @@ app.prepare().then(async () => {
    }

    let library = creator.data.library;
-    console.log(library);

    creator = Serializers.user(creator);

@ -424,7 +423,6 @@ app.prepare().then(async () => {
    }

    creator.library = library;
-    console.log(creator);

    return app.render(req, res, "/_/profile", {
      viewer,