Convert accounts dashboard button into a link.

assets/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.6,0,334.4.17A14.4,14.4,0,0,0,320,14.57V47.88a14.4,14.4,0,0,0,14.69,14.4l73.63-2.72,2.06,2.06L131.52,340.49a12,12,0,0,0,0,17l23,23a12,12,0,0,0,17,0L450.38,101.62l2.06,2.06-2.72,73.63A14.4,14.4,0,0,0,464.12,192h33.31a14.4,14.4,0,0,0,14.4-14.4L512,14.4A14.4,14.4,0,0,0,497.6,0ZM432,288H416a16,16,0,0,0-16,16V458a6,6,0,0,1-6,6H54a6,6,0,0,1-6-6V118a6,6,0,0,1,6-6H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V304A16,16,0,0,0,432,288Z"/></svg>

components/settings/AccountSettings.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
+import Link from 'next/link';
 import classNames from 'classnames';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
@@ -16,11 +16,10 @@ import Pen from 'assets/pen.svg';
 import Plus from 'assets/plus.svg';
 import Trash from 'assets/trash.svg';
 import Check from 'assets/check.svg';
-import List from 'assets/list-ul.svg';
+import LinkIcon from 'assets/external-link.svg';
 import styles from './AccountSettings.module.css';
 
 export default function AccountSettings() {
-  const router = useRouter();
   const [addAccount, setAddAccount] = useState();
   const [editAccount, setEditAccount] = useState();
   const [deleteAccount, setDeleteAccount] = useState();
@@ -30,16 +29,18 @@ export default function AccountSettings() {
 
   const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
 
+  const DashboardLink = row =>
+    row.is_admin ? null : (
+      <Link href={`/dashboard/${row.user_id}/${row.username}`}>
+        <a>
+          <Icon icon={<LinkIcon />} />
+        </a>
+      </Link>
+    );
+
   const Buttons = row =>
     row.username !== 'admin' ? (
       <ButtonLayout>
-        <Button
-          icon={<List />}
-          size="small"
-          tooltip={<FormattedMessage id="button.websites" defaultMessage="Websites" />}
-          tooltipId={`button-websites-${row.username}`}
-          onClick={() => router.push(`/dashboard/${row.user_id}/${row.username}`)}
-        />
         <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
           <div>
             <FormattedMessage id="button.edit" defaultMessage="Edit" />
@@ -57,17 +58,23 @@ export default function AccountSettings() {
     {
       key: 'username',
       label: <FormattedMessage id="label.username" defaultMessage="Username" />,
-      className: 'col-6 col-md-4',
+      className: 'col-4 col-md-3',
     },
     {
       key: 'is_admin',
       label: <FormattedMessage id="label.administrator" defaultMessage="Administrator" />,
-      className: 'col-6 col-md-4',
+      className: 'col-4 col-md-3',
       render: Checkmark,
     },
+    {
+      key: 'dashboard',
+      label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
+      className: 'col-4 col-md-3',
+      render: DashboardLink,
+    },
     {
       key: 'actions',
-      className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'),
+      className: classNames(styles.buttons, 'col-12 col-md-3 pt-2 pt-md-0'),
       render: Buttons,
     },
   ];

components/settings/AccountSettings.module.css

@@ -1,4 +1,5 @@
 .buttons {
   display: flex;
   justify-content: flex-end;
+  flex: 1;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",