chore: Normalize "new" actions in settings (#2226)

* fix: Unauthorized request to views.list from shared documents

* Bump dep styled-components

* chore: Normalize 'new' actions in settings area to top right
chore: Add translation hooks to API tokens screen
chore: Move API tokens loading to paginated list

app/scenes/Settings/Groups.js

@@ -4,6 +4,7 @@ import { PlusIcon, GroupIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import GroupNew from "scenes/GroupNew";
+import { Action } from "components/Actions";
 import Button from "components/Button";
 import Empty from "components/Empty";
 import GroupListItem from "components/GroupListItem";
@@ -33,25 +34,31 @@ function Groups() {
   }, []);
 
   return (
-    <Scene title={t("Groups")} icon={<GroupIcon color="currentColor" />}>
+    <Scene
+      title={t("Groups")}
+      icon={<GroupIcon color="currentColor" />}
+      actions={
+        <>
+          {can.createGroup && (
+            <Action>
+              <Button
+                type="button"
+                onClick={handleNewGroupModalOpen}
+                icon={<PlusIcon />}
+              >
+                {`${t("New group")}…`}
+              </Button>
+            </Action>
+          )}
+        </>
+      }
+    >
       <Heading>{t("Groups")}</Heading>
       <HelpText>
         <Trans>
           Groups can be used to organize and manage the people on your team.
         </Trans>
       </HelpText>
-
-      {can.createGroup && (
-        <Button
-          type="button"
-          onClick={handleNewGroupModalOpen}
-          icon={<PlusIcon />}
-          neutral
-        >
-          {`${t("New group")}…`}
-        </Button>
-      )}
-
       <Subheading>{t("All groups")}</Subheading>
       <PaginatedList
         items={groups.orderedData}