diff --git a/assets/ellipsis-h.svg b/assets/ellipsis-h.svg new file mode 100644 index 00000000..5bb08359 --- /dev/null +++ b/assets/ellipsis-h.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/link.svg b/assets/link.svg new file mode 100644 index 00000000..c53d1ada --- /dev/null +++ b/assets/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/logo.svg b/assets/logo.svg index 302263d9..eca6048b 100644 --- a/assets/logo.svg +++ b/assets/logo.svg @@ -1 +1 @@ -Asset 2 \ No newline at end of file + \ No newline at end of file diff --git a/components/ProfileSettings.js b/components/ProfileSettings.js index a3b8fdf0..44f54686 100644 --- a/components/ProfileSettings.js +++ b/components/ProfileSettings.js @@ -4,6 +4,7 @@ import PageHeader from 'components/layout/PageHeader'; import Button from 'components/common/Button'; import ChangePasswordForm from './forms/ChangePasswordForm'; import Modal from 'components/common/Modal'; +import Dots from 'assets/ellipsis-h.svg'; export default function ProfileSettings() { const user = useSelector(state => state.user); @@ -14,8 +15,8 @@ export default function ProfileSettings() { <>
Profile
-
diff --git a/components/WebsiteSettings.js b/components/WebsiteSettings.js index 83f3ad5e..afdf5aa0 100644 --- a/components/WebsiteSettings.js +++ b/components/WebsiteSettings.js @@ -5,12 +5,14 @@ import PageHeader from 'components/layout/PageHeader'; import Modal from 'components/common/Modal'; import WebsiteEditForm from './forms/WebsiteEditForm'; import DeleteForm from './forms/DeleteForm'; -import WebsiteCodeForm from './forms/WebsiteCodeForm'; +import TrackingCodeForm from './forms/TrackingCodeForm'; +import ShareUrlForm from './forms/ShareUrlForm'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import Pen from 'assets/pen.svg'; import Trash from 'assets/trash.svg'; import Plus from 'assets/plus.svg'; import Code from 'assets/code.svg'; +import Link from 'assets/link.svg'; import { get } from 'lib/web'; import styles from './WebsiteSettings.module.css'; @@ -20,13 +22,27 @@ export default function WebsiteSettings() { const [deleteWebsite, setDeleteWebsite] = useState(); const [addWebsite, setAddWebsite] = useState(); const [showCode, setShowCode] = useState(); + const [showUrl, setShowUrl] = useState(); const [saved, setSaved] = useState(0); const Buttons = row => ( <> - + {row.share_id && ( + @@ -56,6 +72,7 @@ export default function WebsiteSettings() { setEditWebsite(null); setDeleteWebsite(null); setShowCode(null); + setShowUrl(null); } async function loadData() { @@ -108,7 +125,12 @@ export default function WebsiteSettings() { )} {showCode && ( - + + + )} + {showUrl && ( + + )} diff --git a/components/common/Button.js b/components/common/Button.js index 1f3a1ecb..2bdbee5b 100644 --- a/components/common/Button.js +++ b/components/common/Button.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactTooltip from 'react-tooltip'; import classNames from 'classnames'; import Icon from './Icon'; import styles from './Button.module.css'; @@ -10,10 +11,15 @@ export default function Button({ variant, children, className, + tooltip, + tooltipId, ...props }) { return ( ); } diff --git a/components/common/Button.module.css b/components/common/Button.module.css index 7554daff..0ea8ddaa 100644 --- a/components/common/Button.module.css +++ b/components/common/Button.module.css @@ -10,6 +10,7 @@ outline: none; cursor: pointer; white-space: nowrap; + position: relative; } .button:hover { diff --git a/components/common/Checkbox.js b/components/common/Checkbox.js new file mode 100644 index 00000000..1a66a258 --- /dev/null +++ b/components/common/Checkbox.js @@ -0,0 +1,27 @@ +import React, { useRef } from 'react'; +import Icon from 'components/common/Icon'; +import Check from 'assets/check.svg'; +import styles from './Checkbox.module.css'; + +export default function Checkbox({ name, value, label, onChange }) { + const ref = useRef(); + + return ( +
+
ref.current.click()}> + {value && } size="small" />} +
+ + +
+ ); +} diff --git a/components/common/Checkbox.module.css b/components/common/Checkbox.module.css new file mode 100644 index 00000000..c0ddde48 --- /dev/null +++ b/components/common/Checkbox.module.css @@ -0,0 +1,27 @@ +.container { + display: flex; + align-items: center; + overflow: hidden; +} + +.checkbox { + display: flex; + justify-content: center; + align-items: center; + width: 20px; + height: 20px; + border: 1px solid var(--gray500); + border-radius: 4px; +} + +.label { + margin-left: 10px; +} + +.input { + position: absolute; + height: 0; + width: 0; + bottom: -1px; + right: -1px; +} diff --git a/components/forms/DeleteForm.js b/components/forms/DeleteForm.js index 7e87d679..650e802f 100644 --- a/components/forms/DeleteForm.js +++ b/components/forms/DeleteForm.js @@ -49,7 +49,7 @@ export default function DeleteForm({ values, onSave, onClose }) { Type DELETE in the box below to confirm.

- + diff --git a/components/forms/ShareUrlForm.js b/components/forms/ShareUrlForm.js new file mode 100644 index 00000000..8ecaed0e --- /dev/null +++ b/components/forms/ShareUrlForm.js @@ -0,0 +1,30 @@ +import React, { useRef } from 'react'; +import Button from 'components/common/Button'; +import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout'; +import CopyButton from '../common/CopyButton'; + +export default function TrackingCodeForm({ values, onClose }) { + const ref = useRef(); + const { name, share_id } = values; + + return ( + +

+ This is the public URL for {values.name}. +

+ +