diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 55b49649..d2d8ed4c 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -33,6 +33,7 @@ import Link from 'next/link'
import LoginModal from '~components/LoginModal'
import SignupModal from '~components/SignupModal'
import AccountModal from '~components/AccountModal'
+import Toast from '~components/Toast'
const Header = () => {
// Localization
@@ -42,7 +43,7 @@ const Header = () => {
const router = useRouter()
// State management
- const [open, setOpen] = useState(false)
+ const [copyToastOpen, setCopyToastOpen] = useState(false)
const [leftMenuOpen, setLeftMenuOpen] = useState(false)
const [rightMenuOpen, setRightMenuOpen] = useState(false)
@@ -50,6 +51,14 @@ const Header = () => {
const { account } = useSnapshot(accountState)
const { party } = useSnapshot(appState)
+ function handleCopyToastOpenChanged(open: boolean) {
+ setCopyToastOpen(open)
+ }
+
+ function handleCopyToastCloseClicked() {
+ setCopyToastOpen(false)
+ }
+
function handleLeftMenuButtonClicked() {
setLeftMenuOpen(!leftMenuOpen)
}
@@ -58,10 +67,6 @@ const Header = () => {
setRightMenuOpen(!rightMenuOpen)
}
- function onClickOutsideMenu() {
- setOpen(false)
- }
-
function handleLeftMenuOpenChange(open: boolean) {
setLeftMenuOpen(open)
}
@@ -86,11 +91,15 @@ const Header = () => {
el.select()
document.execCommand('copy')
el.remove()
+
+ setCopyToastOpen(true)
}
- function newParty() {
+ function handleNewParty(event: React.MouseEvent, path: string) {
+ event.preventDefault()
+
// Push the root URL
- router.push('/')
+ router.push(path)
// Clean state
const resetState = clonedeep(initialAppState)
@@ -100,6 +109,9 @@ const Header = () => {
// Set party to be editable
appState.party.editable = true
+
+ // Close right menu
+ closeRightMenu()
}
function logout() {
@@ -141,7 +153,7 @@ const Header = () => {
else console.error('Failed to unsave team: No party ID')
}
- const title = () => {
+ const pageTitle = () => {
let title = ''
let hasAccessory = false
@@ -178,22 +190,7 @@ const Header = () => {
)
}
- const saveButton = () => {
- return (
- }
- className={classNames({
- Save: true,
- Saved: party.favorited,
- })}
- blended={true}
- text={party.favorited ? 'Saved' : 'Save'}
- onClick={toggleFavorite}
- />
- )
- }
-
- const image = () => {
+ const profileImage = () => {
let image
const user = accountState.account.user
@@ -214,6 +211,34 @@ const Header = () => {
return image
}
+ const urlCopyToast = () => {
+ return (
+
+ )
+ }
+
+ const saveButton = () => {
+ return (
+ }
+ className={classNames({
+ Save: true,
+ Saved: party.favorited,
+ })}
+ blended={true}
+ text={party.favorited ? 'Saved' : 'Save'}
+ onClick={toggleFavorite}
+ />
+ )
+ }
+
const left = () => {
return (
@@ -235,7 +260,7 @@ const Header = () => {
- {title()}
+ {pageTitle()}
)
}
@@ -249,13 +274,6 @@ const Header = () => {
? saveButton()
: ''}
- {/* }
- blended={true}
- text={t('buttons.new')}
- onClick={newParty}
- /> */}
-
{
}
rightAccessoryClassName="Arrow"
onClick={handleRightMenuButtonClicked}
@@ -340,12 +358,15 @@ const Header = () => {
items = (
<>
-
-
+
+ handleNewParty(e, '/new')}
+ href="/new"
+ >
New party
-
+
Your profile
@@ -377,7 +398,10 @@ const Header = () => {
<>
-
+ handleNewParty(e, '/new')}
+ href="/new"
+ >
New party
@@ -398,6 +422,7 @@ const Header = () => {
)
}
diff --git a/components/Toast/index.scss b/components/Toast/index.scss
index b89923ae..17fb14c8 100644
--- a/components/Toast/index.scss
+++ b/components/Toast/index.scss
@@ -1,12 +1,33 @@
.Toast {
background: var(--dialog-bg);
border-radius: $card-corner;
- box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: $unit-2x;
padding: $unit-3x;
+ &[data-state='open'] {
+ animation: slideLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+ }
+
+ &[data-state='closed'] {
+ animation: fadeOut 300ms cubic-bezier(0.16, 1, 0.3, 1);
+ }
+
+ &[data-swipe='move'] {
+ transform: translateX(var(--radix-toast-swipe-move-x));
+ }
+
+ &[data-swipe='cancel'] {
+ transform: translateX(0);
+ transition: transform 200ms ease-out;
+ }
+
+ &[data-swipe='end'] {
+ animation: slideRight 100ms ease-out;
+ }
+
.Header {
align-items: center;
display: flex;
diff --git a/components/Toast/index.tsx b/components/Toast/index.tsx
index 8f85cb50..331d9d70 100644
--- a/components/Toast/index.tsx
+++ b/components/Toast/index.tsx
@@ -17,22 +17,24 @@ const Toast = ({
content,
...props
}: PropsWithChildren) => {
+ const { onCloseClick, ...toastProps } = props
+
const classes = classNames(props.className, {
Toast: true,
})
return (
-
-
- {title && (
+
+ {title && (
+
{title}
- )}
-
- ×
-
-
+
+ ×
+
+
+ )}
{content}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 039c0864..1bf22868 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -44,7 +44,7 @@ function MyApp({ Component, pageProps }: AppProps) {
return (
-
+
diff --git a/styles/globals.scss b/styles/globals.scss
index a0ee06fe..694c6f47 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -368,6 +368,15 @@ i.tag {
}
}
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
@keyframes openModalDesktop {
0% {
opacity: 0;
@@ -392,6 +401,24 @@ i.tag {
}
}
+@keyframes slideLeft {
+ from {
+ transform: translateX(100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideRight {
+ from {
+ transform: translateX(var(--radix-toast-swipe-end-x));
+ }
+ to {
+ transform: translateX(100%);
+ }
+}
+
@keyframes fadeInFilter {
from {
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);