Fixed cancel of dashboard edit.

components/pages/DashboardEdit.js

@@ -6,6 +6,7 @@ import Button from 'components/common/Button';
 import { useMemo } from 'react';
 import { orderByWebsiteMap } from 'lib/format';
 import styles from './DashboardEdit.module.css';
+import classNames from 'classnames';
 
 const messages = defineMessages({
   save: { id: 'label.save', defaultMessage: 'Save' },
@@ -45,18 +46,17 @@ export default function DashboardEdit({ data: websites }) {
   }
 
   function handleCancel() {
-    saveDashboard({ editing: false });
+    saveDashboard({ editing: false, websiteOrder });
   }
 
   function handleReset() {
     setOrder({});
-    saveDashboard({ websiteOrder: {} });
   }
 
   return (
     <>
       <div className={styles.buttons}>
-        <Button onClick={handleSave} size="small">
+        <Button onClick={handleSave} variant="action" size="small">
           {formatMessage(messages.save)}
         </Button>
         <Button onClick={handleCancel} size="small">
@@ -77,16 +77,20 @@ export default function DashboardEdit({ data: websites }) {
               >
                 {ordered.map(({ website_id, name, domain }, index) => (
                   <Draggable key={website_id} draggableId={`${dragId}-${website_id}`} index={index}>
-                    {provided => (
+                    {(provided, snapshot) => (
                       <div
                         ref={provided.innerRef}
+                        className={classNames(styles.item, {
+                          [styles.active]: snapshot.isDragging,
+                        })}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
-                        className={styles.item}
                       >
+                        <div className={styles.text}>
                           <h1>{name}</h1>
                           <h2>{domain}</h2>
                         </div>
+                      </div>
                     )}
                   </Draggable>
                 ))}

components/pages/DashboardEdit.module.css

@@ -6,13 +6,7 @@
 }
 
 .item {
-  padding: 20px;
-  border-radius: 5px;
-  border: 1px solid var(--gray300);
-}
-
-.item + .item {
-  margin-top: 10px;
+  padding: 5px 0;
 }
 
 .item h1 {
@@ -25,6 +19,18 @@
   color: var(--gray700);
 }
 
+.text {
+  padding: 20px;
+  border-radius: 5px;
+  border: 1px solid var(--gray400);
+  background: var(--gray50);
+}
+
+.active .text {
+  border-color: var(--gray600);
+  box-shadow: 4px 4px 4px var(--gray100);
+}
+
 .dragActive {
   cursor: grab;
 }

components/pages/WebsiteList.js

@@ -1,4 +1,4 @@
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import Link from 'components/common/Link';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import Page from 'components/layout/Page';
@@ -9,24 +9,29 @@ import useDashboard from 'store/dashboard';
 import { orderByWebsiteMap } from 'lib/format';
 import { useMemo } from 'react';
 
+const messages = defineMessages({
+  noWebsites: {
+    id: 'message.no-websites-configured',
+    defaultMessage: "You don't have any websites configured.",
+  },
+  goToSettngs: {
+    id: 'message.go-to-settings',
+    defaultMessage: 'Go to settings',
+  },
+});
+
 export default function WebsiteList({ data, showCharts, limit }) {
   const { websiteOrder } = useDashboard();
+  const { formatMessage } = useIntl();
 
   const websites = useMemo(() => orderByWebsiteMap(data, websiteOrder), [data, websiteOrder]);
 
   if (websites.length === 0) {
     return (
       <Page>
-        <EmptyPlaceholder
-          msg={
-            <FormattedMessage
-              id="message.no-websites-configured"
-              defaultMessage="You don't have any websites configured."
-            />
-          }
-        >
+        <EmptyPlaceholder msg={formatMessage(messages.noWebsites)}>
           <Link href="/settings" icon={<Arrow />} iconRight>
-            <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
+            {formatMessage(messages.goToSettngs)}
           </Link>
         </EmptyPlaceholder>
       </Page>