diff --git a/src/components/account-info.css b/src/components/account-info.css index a6def33f..930d1cf2 100644 --- a/src/components/account-info.css +++ b/src/components/account-info.css @@ -9,6 +9,46 @@ color: var(--outline-color); } +.account-container .account-moved { + animation: fade-in 0.3s both ease-in-out 0.3s; + padding: 16px; + background-color: var(--bg-color); + position: absolute; + top: 8px; + inset-inline: 8px; + z-index: 2; + border: 1px solid var(--outline-color); + box-shadow: 0 8px 16px var(--drop-shadow-color); + border-radius: calc(16px - 8px); + overflow: hidden; + + p { + margin: 0 0 8px; + padding: 0; + } + + .account-block { + background-color: var(--bg-faded-color); + padding: 8px; + border-radius: 8px; + border: 1px solid var(--link-faded-color); + + &:hover { + background-color: var(--link-bg-hover-color); + border-color: var(--link-color); + } + + b { + color: var(--link-color); + } + } + + ~ * { + /* pointer-events: none; */ + filter: grayscale(0.75) brightness(0.75); + } +} + .account-container .header-banner { /* pointer-events: none; */ aspect-ratio: 6 / 1; diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx index f004b764..cea5839a 100644 --- a/src/components/account-info.jsx +++ b/src/components/account-info.jsx @@ -115,6 +115,7 @@ function AccountInfo({ url, username, memorial, + moved, } = info || {}; let headerIsAvatar = false; let { header, headerStatic } = info || {}; @@ -235,6 +236,22 @@ function AccountInfo({ ) : ( info && ( <> + {!!moved && ( +
+

+ {displayName} has indicated that their new account is + now: +

+ { + e.stopPropagation(); + states.showAccount = moved; + }} + /> +
+ )} {header && !/missing\.png$/.test(header) && (