From 978a12312282425a92093de8d2351fc609cbb645 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 23 Jan 2021 10:19:08 -0800
Subject: [PATCH] fix: 16 linting warnings

---
 app/components/ButtonLink.js                  | 23 +++++++++++++++++++
 app/components/InputSelect.js                 |  3 ++-
 app/components/LanguagePrompt.js              | 17 +++++++++++---
 app/embeds/Vimeo.js                           |  2 +-
 app/embeds/components/Frame.js                | 22 +++++++++---------
 .../AddGroupsToCollection.js                  |  5 ++--
 .../AddPeopleToCollection.js                  |  5 ++--
 .../CollectionMembers/CollectionMembers.js    |  9 ++++----
 app/scenes/DocumentShare.js                   |  2 +-
 app/scenes/GroupMembers/AddPeopleToGroup.js   |  5 ++--
 app/scenes/Settings/Profile.js                | 22 +++++++++---------
 app/utils/download.js                         |  4 ++--
 12 files changed, 78 insertions(+), 41 deletions(-)
 create mode 100644 app/components/ButtonLink.js

diff --git a/app/components/ButtonLink.js b/app/components/ButtonLink.js
new file mode 100644
index 000000000..b42e1efdc
--- /dev/null
+++ b/app/components/ButtonLink.js
@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  onClick: (ev: SyntheticEvent<>) => void,
+  children: React.Node,
+};
+
+export default function ButtonLink(props: Props) {
+  return <Button {...props} />;
+}
+
+const Button = styled.button`
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: ${(props) => props.theme.link};
+  line-height: inherit;
+  background: none;
+  text-decoration: none;
+  cursor: pointer;
+`;
diff --git a/app/components/InputSelect.js b/app/components/InputSelect.js
index b23391a7a..8392c06af 100644
--- a/app/components/InputSelect.js
+++ b/app/components/InputSelect.js
@@ -9,11 +9,12 @@ import { Outline, LabelText } from "./Input";
 const Select = styled.select`
   border: 0;
   flex: 1;
-  padding: 8px 0;
+  padding: 4px 0;
   margin: 0 12px;
   outline: none;
   background: none;
   color: ${(props) => props.theme.text};
+  height: 30px;
 
   &:disabled,
   &::placeholder {
diff --git a/app/components/LanguagePrompt.js b/app/components/LanguagePrompt.js
index 140064f90..46e61f64d 100644
--- a/app/components/LanguagePrompt.js
+++ b/app/components/LanguagePrompt.js
@@ -4,6 +4,7 @@ import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { languages, languageOptions } from "shared/i18n";
+import ButtonLink from "components/ButtonLink";
 import Flex from "components/Flex";
 import NoticeTip from "components/NoticeTip";
 import useCurrentUser from "hooks/useCurrentUser";
@@ -68,7 +69,7 @@ export default function LanguagePrompt() {
             like to change?
           </Trans>
           <br />
-          <a
+          <Link
             onClick={() => {
               auth.updateUser({
                 language,
@@ -77,14 +78,24 @@ export default function LanguagePrompt() {
             }}
           >
             {t("Change Language")}
-          </a>{" "}
-          &middot; <a onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</a>
+          </Link>{" "}
+          &middot;{" "}
+          <Link onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</Link>
         </span>
       </Flex>
     </NoticeTip>
   );
 }
 
+const Link = styled(ButtonLink)`
+  color: ${(props) => props.theme.almostBlack};
+  font-weight: 500;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
 const LanguageIcon = styled(Icon)`
   margin-right: 12px;
 `;
diff --git a/app/embeds/Vimeo.js b/app/embeds/Vimeo.js
index b5a32a806..f421f8cad 100644
--- a/app/embeds/Vimeo.js
+++ b/app/embeds/Vimeo.js
@@ -2,7 +2,7 @@
 import * as React from "react";
 import Frame from "./components/Frame";
 
-const URL_REGEX = /(http|https)?:\/\/(www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|)(\d+)(?:|\/\?)/;
+const URL_REGEX = /(http|https)?:\/\/(www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(\d+)(?:|\/\?)/;
 
 type Props = {|
   attrs: {|
diff --git a/app/embeds/components/Frame.js b/app/embeds/components/Frame.js
index 9afb93e33..77e69c762 100644
--- a/app/embeds/components/Frame.js
+++ b/app/embeds/components/Frame.js
@@ -6,6 +6,17 @@ import * as React from "react";
 import styled from "styled-components";
 import Flex from "components/Flex";
 
+// This wrapper allows us to pass non-standard HTML attributes through to the DOM element
+// https://www.styled-components.com/docs/basics#passed-props
+const Iframe = (props) => <iframe title="Embed" {...props} />;
+
+const StyledIframe = styled(Iframe)`
+  border: 1px solid;
+  border-color: ${(props) => props.theme.embedBorder};
+  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
+  display: block;
+`;
+
 type Props = {
   src?: string,
   border?: boolean,
@@ -129,17 +140,6 @@ const Bar = styled(Flex)`
   user-select: none;
 `;
 
-// This wrapper allows us to pass non-standard HTML attributes through to the DOM element
-// https://www.styled-components.com/docs/basics#passed-props
-const Iframe = (props) => <iframe {...props} />;
-
-const StyledIframe = styled(Iframe)`
-  border: 1px solid;
-  border-color: ${(props) => props.theme.embedBorder};
-  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
-  display: block;
-`;
-
 export default React.forwardRef<Props, typeof Frame>((props, ref) => (
   <Frame {...props} forwardedRef={ref} />
 ));
diff --git a/app/scenes/CollectionMembers/AddGroupsToCollection.js b/app/scenes/CollectionMembers/AddGroupsToCollection.js
index 5912a2d15..bc36bc469 100644
--- a/app/scenes/CollectionMembers/AddGroupsToCollection.js
+++ b/app/scenes/CollectionMembers/AddGroupsToCollection.js
@@ -13,6 +13,7 @@ import Collection from "models/Collection";
 import Group from "models/Group";
 import GroupNew from "scenes/GroupNew";
 import Button from "components/Button";
+import ButtonLink from "components/ButtonLink";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
 import GroupListItem from "components/GroupListItem";
@@ -85,9 +86,9 @@ class AddGroupsToCollection extends React.Component<Props> {
       <Flex column>
         <HelpText>
           {t("Can’t find the group you’re looking for?")}{" "}
-          <a role="button" onClick={this.handleNewGroupModalOpen}>
+          <ButtonLink onClick={this.handleNewGroupModalOpen}>
             {t("Create a group")}
-          </a>
+          </ButtonLink>
           .
         </HelpText>
 
diff --git a/app/scenes/CollectionMembers/AddPeopleToCollection.js b/app/scenes/CollectionMembers/AddPeopleToCollection.js
index 33543123e..72aa7ab5a 100644
--- a/app/scenes/CollectionMembers/AddPeopleToCollection.js
+++ b/app/scenes/CollectionMembers/AddPeopleToCollection.js
@@ -11,6 +11,7 @@ import UsersStore from "stores/UsersStore";
 import Collection from "models/Collection";
 import User from "models/User";
 import Invite from "scenes/Invite";
+import ButtonLink from "components/ButtonLink";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
@@ -81,9 +82,9 @@ class AddPeopleToCollection extends React.Component<Props> {
       <Flex column>
         <HelpText>
           {t("Need to add someone who’s not yet on the team yet?")}{" "}
-          <a role="button" onClick={this.handleInviteModalOpen}>
+          <ButtonLink onClick={this.handleInviteModalOpen}>
             {t("Invite people to {{ teamName }}", { teamName: team.name })}
-          </a>
+          </ButtonLink>
           .
         </HelpText>
 
diff --git a/app/scenes/CollectionMembers/CollectionMembers.js b/app/scenes/CollectionMembers/CollectionMembers.js
index a8742f921..0d866ded2 100644
--- a/app/scenes/CollectionMembers/CollectionMembers.js
+++ b/app/scenes/CollectionMembers/CollectionMembers.js
@@ -12,6 +12,7 @@ import UiStore from "stores/UiStore";
 import UsersStore from "stores/UsersStore";
 import Collection from "models/Collection";
 import Button from "components/Button";
+import ButtonLink from "components/ButtonLink";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
@@ -139,9 +140,9 @@ class CollectionMembers extends React.Component<Props> {
               documents in the private <strong>{collection.name}</strong>{" "}
               collection. You can make this collection visible to the entire
               team by{" "}
-              <a role="button" onClick={this.props.onEdit}>
+              <ButtonLink onClick={this.props.onEdit}>
                 changing the visibility
-              </a>
+              </ButtonLink>
               .
             </HelpText>
             <span>
@@ -160,9 +161,7 @@ class CollectionMembers extends React.Component<Props> {
             The <strong>{collection.name}</strong> collection is accessible by
             everyone on the team. If you want to limit who can view the
             collection,{" "}
-            <a role="button" onClick={this.props.onEdit}>
-              make it private
-            </a>
+            <ButtonLink onClick={this.props.onEdit}>make it private</ButtonLink>
             .
           </HelpText>
         )}
diff --git a/app/scenes/DocumentShare.js b/app/scenes/DocumentShare.js
index 6bc86102e..33162dc11 100644
--- a/app/scenes/DocumentShare.js
+++ b/app/scenes/DocumentShare.js
@@ -115,7 +115,7 @@ class DocumentShare extends React.Component<Props> {
           </Button>
         </CopyToClipboard>
         &nbsp;&nbsp;&nbsp;
-        <a href={share.url} target="_blank">
+        <a href={share.url} target="_blank" rel="noreferrer">
           Preview
         </a>
       </div>
diff --git a/app/scenes/GroupMembers/AddPeopleToGroup.js b/app/scenes/GroupMembers/AddPeopleToGroup.js
index 14b3f9986..980502a09 100644
--- a/app/scenes/GroupMembers/AddPeopleToGroup.js
+++ b/app/scenes/GroupMembers/AddPeopleToGroup.js
@@ -11,6 +11,7 @@ import UsersStore from "stores/UsersStore";
 import Group from "models/Group";
 import User from "models/User";
 import Invite from "scenes/Invite";
+import ButtonLink from "components/ButtonLink";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
@@ -81,9 +82,9 @@ class AddPeopleToGroup extends React.Component<Props> {
           {t(
             "Add team members below to give them access to the group. Need to add someone who’s not yet on the team yet?"
           )}{" "}
-          <a role="button" onClick={this.handleInviteModalOpen}>
+          <ButtonLink onClick={this.handleInviteModalOpen}>
             {t("Invite them to {{teamName}}", { teamName: team.name })}
-          </a>
+          </ButtonLink>
           .
         </HelpText>
 
diff --git a/app/scenes/Settings/Profile.js b/app/scenes/Settings/Profile.js
index 61ec678b5..3734f02ae 100644
--- a/app/scenes/Settings/Profile.js
+++ b/app/scenes/Settings/Profile.js
@@ -154,13 +154,16 @@ class Profile extends React.Component<Props> {
         </form>
 
         <DangerZone>
-          <LabelText>{t("Delete Account")}</LabelText>
-          <p>
-            {t(
-              "You may delete your account at any time, note that this is unrecoverable"
-            )}
-            . <a onClick={this.toggleDeleteAccount}>{t("Delete account")}</a>.
-          </p>
+          <h2>{t("Delete Account")}</h2>
+          <HelpText small>
+            <Trans>
+              You may delete your account at any time, note that this is
+              unrecoverable
+            </Trans>
+          </HelpText>
+          <Button onClick={this.toggleDeleteAccount} neutral>
+            {t("Delete account")}…
+          </Button>
         </DangerZone>
         {this.showDeleteModal && (
           <UserDelete onRequestClose={this.toggleDeleteAccount} />
@@ -171,10 +174,7 @@ class Profile extends React.Component<Props> {
 }
 
 const DangerZone = styled.div`
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
-  position: absolute;
-  bottom: 16px;
+  margin-top: 60px;
 `;
 
 const ProfilePicture = styled(Flex)`
diff --git a/app/utils/download.js b/app/utils/download.js
index 4ec871422..0f7e43659 100644
--- a/app/utils/download.js
+++ b/app/utils/download.js
@@ -36,7 +36,7 @@ export default function download(
   }
 
   //go ahead and download dataURLs right away
-  if (String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)) {
+  if (String(x).match(/^data:[\w+-]+\/[\w+-]+[,;]/)) {
     // $FlowIssue
     return navigator.msSaveBlob // IE10 can't do a[download], only Blobs:
       ? // $FlowIssue
@@ -98,7 +98,7 @@ export default function download(
     D.body && D.body.appendChild(f);
     if (!winMode) {
       // force a mime that will download:
-      url = "data:" + url.replace(/^data:([\w\/\-\+]+)/, u);
+      url = "data:" + url.replace(/^data:([\w/\-+]+)/, u);
     }
 
     f.src = url;