More refactoring and clean-up.

components/pages/dashboard/DashboardSettingsButton.js

@@ -1,8 +1,8 @@
 import { defineMessages, useIntl } from 'react-intl';
-import MenuButton from 'components/common/MenuButton';
-import Gear from 'assets/gear.svg';
+import { Menu, Icon, Text, PopupTrigger, Popup, Item, Button } from 'react-basics';
+import Icons from 'components/icons';
+import { labels } from 'components/messages';
 import { saveDashboard } from 'store/dashboard';
-import { Icon } from 'react-basics';
 
 const messages = defineMessages({
   toggleCharts: { id: 'message.toggle-charts', defaultMessage: 'Toggle charts' },
@@ -33,10 +33,18 @@ export default function DashboardSettingsButton() {
   }
 
   return (
-    <MenuButton options={menuOptions} onSelect={handleSelect} hideLabel>
-      <Icon>
-        <Gear />
-      </Icon>
-    </MenuButton>
+    <PopupTrigger>
+      <Button>
+        <Icon>
+          <Icons.Edit />
+        </Icon>
+        <Text>{formatMessage(labels.edit)}</Text>
+      </Button>
+      <Popup alignment="end">
+        <Menu variant="popup" items={menuOptions} onSelect={handleSelect}>
+          {({ label, value }) => <Item key={value}>{label}</Item>}
+        </Menu>
+      </Popup>
+    </PopupTrigger>
   );
 }

components/pages/websites/WebsiteMenuView.js

@@ -1,4 +1,5 @@
 import { Row, Column, Menu, Item, Icon, Button } from 'react-basics';
+import { useIntl } from 'react-intl';
 import Link from 'next/link';
 import BrowsersTable from 'components/metrics/BrowsersTable';
 import CountriesTable from 'components/metrics/CountriesTable';
@@ -13,7 +14,7 @@ import EventsTable from 'components/metrics/EventsTable';
 import usePageQuery from 'hooks/usePageQuery';
 import Icons from 'components/icons';
 import { labels } from 'components/messages';
-import { useIntl } from 'react-intl';
+import styles from './WebsiteMenuView.module.css';
 
 const views = {
   url: PagesTable,
@@ -81,8 +82,8 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
   const DetailsComponent = views[view];
 
   return (
-    <Row>
-      <Column>
+    <Row className={styles.row}>
+      <Column defaultSize={3} className={styles.col}>
         <Button>
           <Icon rotate={180}>
             <Icons.ArrowRight />
@@ -91,15 +92,15 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
         </Button>
         <Menu items={items}>
           {({ value, label }) => (
-            <Link href={resolve()}>
-              <a>
-                <Item key={value}>{label}</Item>
-              </a>
-            </Link>
+            <Item key={value}>
+              <Link href={resolve()}>
+                <a>{label}</a>
+              </Link>
+            </Item>
           )}
         </Menu>
       </Column>
-      <Column>
+      <Column defaultSize={9} className={styles.col}>
         <DetailsComponent
           websiteId={websiteId}
           websiteDomain={websiteDomain}

components/pages/websites/WebsiteMenuView.module.css

@@ -0,0 +1,13 @@
+.row {
+  border-top: 1px solid var(--base300);
+}
+
+.col {
+  border-left: 1px solid var(--base300);
+  padding: 30px;
+}
+
+.col:first-child {
+  padding-left: 0;
+  border-left: 0;
+}