diff --git a/src/app.jsx b/src/app.jsx index 5c06eb28..87d6a871 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -23,6 +23,7 @@ import Loader from './components/loader'; import MediaModal from './components/media-modal'; import Modal from './components/modal'; import NotFound from './pages/404'; +import AccountStatuses from './pages/account-statuses'; import Bookmarks from './pages/bookmarks'; import Favourites from './pages/favourites'; import Hashtags from './pages/hashtags'; @@ -208,6 +209,7 @@ function App() { {isLoggedIn && } />} {isLoggedIn && } />} {isLoggedIn && } />} + {isLoggedIn && } />} } /> {/* } /> */} @@ -299,7 +301,12 @@ function App() { } }} > - + { + states.showAccount = false; + }} + /> )} {!!snapStates.showDrafts && ( diff --git a/src/components/account.css b/src/components/account.css index 5764ebbf..2d66c31b 100644 --- a/src/components/account.css +++ b/src/components/account.css @@ -20,10 +20,20 @@ #account-container .stats { display: flex; flex-wrap: wrap; - column-gap: 16px; - row-gap: 4px; + justify-content: space-around; + gap: 16px; opacity: 0.75; font-size: 90%; + background-color: var(--bg-faded-color); + padding: 12px; + border-radius: 8px; + line-height: 1.25; +} +#account-container .stats > * { + text-align: center; +} +#account-container .stats a { + color: inherit; } #account-container .actions { diff --git a/src/components/account.jsx b/src/components/account.jsx index d61c8481..a996ee26 100644 --- a/src/components/account.jsx +++ b/src/components/account.jsx @@ -11,9 +11,10 @@ import store from '../utils/store'; import Avatar from './avatar'; import Icon from './icon'; +import Link from './link'; import NameText from './name-text'; -function Account({ account }) { +function Account({ account, onClose }) { const [uiState, setUIState] = useState('default'); const isString = typeof account === 'string'; const [info, setInfo] = useState(isString ? null : account); @@ -217,21 +218,31 @@ function Account({ account }) { )}

- - {shortenNumber(statusesCount)}{' '} + Posts - +
+ + {shortenNumber(statusesCount)} + {' '} + - {shortenNumber(followingCount)}{' '} Following +
+ + {shortenNumber(followingCount)} + {' '}
- {shortenNumber(followersCount)}{' '} Followers +
+ + {shortenNumber(followersCount)} + {' '}
{!!createdAt && ( - Joined:{' '} + Joined +